1. 美化页面原因
- 有效的传递页面信息
- 美化网页，页面漂亮，才能吸引用户
- 凸显页面的主题
- 提高用户的体验
2. span标签
- 作用：对于重点要突出的字，使用 span 套起来
- font—size的取值
xx-small:最小
x-small:较小
small:小
medium:正常(默认值)，根据字体进行调整
large:大
x-large:较大
xx-large:最大
也可取具体长度单位值 - 实例：
3. 字体样式
- 字体属性
（1）font-family：设置字体类型
（2）font-size：设置字体大小
- font-size 的值可以是绝对值或相对值；
- font-size:12px; 设置对象具体字体大小为12px
- font-size:xx-small; 设置文字大小为最小
- font-size:small; 设置文字字体大小为小
- font-size:x-large;设置对象字体大小为较大
- font-size:larger;设置对象字体大小为大
- font-size:smaller;相对于父容器中字体尺寸进行相对减小
- font-size:50%;相对于父容器中字体尺寸进行相应调整为50%大小
- font-size:150%;相对于父容器中字体尺寸进行相应调整为150%大小
（3）font-style：设置字体风格
- normal ： 文本正常显示
- italic： 文本斜体显示
- oblique ： 文本倾斜显示
（4）font-weight：设置字体的粗细
- 关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100 对应最细的字体变形(lighter)，900 对应最粗的字体变形（bolder)。 400 等价于 normal，而 700 等价于 bold。
（5）color：设置字体颜色
（6）font ：在一个声明中设置字体的所有属性
- 实例代码
- 运行结果
4. 文本样式
-
color：单词RGB：0~F
RGBA 其中A：0~1 -
text-align : 水平对齐方式，居中/最左边/最右边
-
text-indent: 2em 段落首行缩进（2个字符）
-
height: 300px 块的高度
-
line-height: 300px 文本行高
行高和块的高度一致，就可以上下居中 -
text-decoration: underline 下划线
-
text-decoration: line-through 中划线
-
text-decoration: overline 上划线
-
text-decoration: none 去掉下(上/中)划线
-
vertical-align: middle 水平对齐（两个元素a,b）
-
text-shadow: 阴影颜色，水平偏移，垂直偏移，阴影半径
-
实例代码
-
运行结果
5. 超链接伪类
- CSS 伪类用于向某些选择器添加特殊的效果，简单点说，就是你没定义这个类，但它确实作为一个类来使用，利用伪类为我们的元素添加各种不同的效果
- 正常情况下，a{ }，a:hover{ } 这段代码就是给 a 这个标签选择器添加了一个效果，这个效果在鼠标悬停于 a 标签上方时被触发
- 实例代码
- 运行结果
6. 列表
- list-style:
none 去掉原点
circle 空心圆
decimal 数字
square 正方形 - background-image: url("…/images/r.gif") 设置背景图片
- background-repeat: no-repeat 设置如何重复背景图像，no-repeat表示背景图片仅显示一次
- background-position: 236px 2px 设置图片位置
- 实例代码
- 运行结果
7. 背景
- Div是Html标签之一，div具有分割内容作用，div与CSS样式可让网页实现各种样式效果
div标签替代了以前table标签布局
通常一对未设置任何样式的div，独占一行 - background-image 属性为元素设置背景图像
格式：background-image: url(“图像路径”)
元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距
默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复 - background-repeat 属性定义了图像的平铺模式
repeat :默认,背景图像将在水平方向和垂直方向重复
repeat-x :背景图像将在水平方向重复
repeat-y :背景图像将在垂直方向重复
no-repeat :背景图像将仅显示一次 - 实例代码
- 运行结果
8. 渐变
-
可以让你在两个或多个指定的颜色之间显示平稳的过渡
CSS3 定义了两种类型的渐变（gradients）：
（1） 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向-
格式一： background-image: linear-gradient(direction, color-stop1, color-stop2, …)
-
direction：默认从上到下的线性渐变；to right 表示从左到右的线性渐变；to bottom right表示从左上角开始到右下角的线性渐变
-
格式二：background-image: linear-gradient(angle, color-stop1, color-stop2)
-
angle: 指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变
(2) 径向渐变（Radial Gradients）- 由它们的中心定义
-
-
实例代码（线性渐变）
-
运行结果
9. 盒子模型
（1） 简介
margin：外边距 ，用于设置vv页面中元素与元素之间的距离
padding： 内边距，内边距和外边距的分界线，用于分离元素
border：边框，用于控制内容和border之间的距离
- 盒子的计算方式：这个元素到底多大？
margin+border+padding+内容宽度
（2）边框
- 属性：边框的粗细(width)、边框的样式(style)、边框的颜色(color)
- 实例代码
- 运行结果
（3）内外边距 - 外边距（margin）的妙用：居中元素
margin：0 auto; 上下为0，左右自动，使之居中
margin：0 1px 2px 3px ；顺时针方向(上右下左) - 内边距(padding) 同理
- 案例代码
- 运行结果
（4）圆角边框 - border-radius 为元素添加圆角边框，可以对元素的四个角进行圆角设置（属性不具有继承性）
- 参数按照：左上 右上 右下 左下，顺时针方向
- 圆圈： 圆角 = 半径
- 演示
（5）阴影 - box-shadow 属性向框内添加一个或多个阴影
- 格式：box-shadow: h-shadow v-shadow blur spread color inset
h-shadow：必需。水平阴影的位置。允许负值
v-shadow：必需。垂直阴影的位置。允许负值
blur：可选。模糊距离
spread：可选。阴影的尺寸
color：可选。阴影的颜色。请参阅 CSS 颜色值
inset：可选。将外部阴影 (outset) 改为内部阴影 - display: block 将此元素显示为块级元素，此元素前后会带有换行符
- 演示
