1.span标签的作用
能让某个文字或词语凸显出来
2.字体样式
|-----------------|--------------------------------------------|-----------------------------|
| 属性 | 含义 | 示例 |
| font-family | 设置字体类型 | font-family:"隶书"; |
| font-size | 设置字体大小 | font-size:12px; |
| font-style | 设置字体风格 | font-style:italic; |
| font-weight | 设置字体的粗细 | font-weight:bold; |
| font | 在一个声明中设置所有字体属性 字体属性的顺序：字体风格→字体粗细→字体大小→字体类型 | font:italic bold 36px "宋体"; |
3.font-size单位
px（像素）、em、cm、mm、pt、pc
4.font-style属性
normal、italic、oblique
5.font-weight
|---------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------|
| 值 | 说明 |
| normal | 默认值，定义标准的字体 |
| bold | 粗体字体 |
| bolder | 更粗的字体 |
| lighter | 更细的字体 |
| 100**、200、300、400、500、600、700、800、900 | 定义由细到粗的字体 **400等同于normal**，700等同于****bold** |
6.font属性
字体属性的顺序：字体风格→字体粗细→字体大小→字体类型
p span{font:oblique bold 12px "楷体";}
7.文本属性
|-----------------|------------|----------------------------|
| 属性 | 含义 | 示例 |
| color | 设置文本颜色 | color:#00C; |
| text-align | 设置元素水平对齐方式 | text-align:right; |
| text-indent | 设置首行文本的缩进 | text-indent:20px; |
| line-height | 设置文本的行高 | line-height:25px; |
| text-decoration | 设置文本的装饰 | text-decoration:underline; |
8.color属性
RGB
十六进制方法表示颜色：前两位是红色分量，中间两位是绿色分量，最后两位是蓝色分量
rgb(r,g,b) : 正整数的取值为0～255
RGBA
在RGB基础上增加了控制alpha透明度的参数，其中这个透明通道值为0～1
9.text-align属性
|-------------|-------------------------|
| 值 | 说明 |
| left | 把文本排列到左边。默认值：由浏览器决定 |
| right | 把文本排列到右边 |
| center | 把文本排列到中间 |
| justify | 实现两端对齐文本效果 |
10.text-decoration
|------------------|-----------------|
| 值 | 说明 |
| none | 默认值，定义的标准文本 |
| underline | 设置文本的下划线 |
| overline | 设置文本的上划线 |
| line-through | 设置文本的删除线 |
11.文本阴影
text-shadow : color x-offset y-offset blur-radius;
12.超链接伪类
标签名：伪类名{声明；}
a:hover {
color:#B46210;
text-decoration:underline;
}
|---------------|-------------------|-----------------------------|
| 伪类名称 | 含义 | 示例 |
| a:link | 未单击访问时超链接样式 | a:link{color:#9ef5f9;} |
| a:visited | 单击访问后超链接样式 | a:visited {color:#333;} |
| a:hover | 鼠标悬浮其上的超链接样式 | a:hover{color:#ff7300;} |
| a:active | 鼠标单击未释放的超链接样式 | a:active {color:#999;} |
设置伪类的顺序：a:link->a:visited->a:hover->a:active
13.列表样式
list-style-type
------------image
------------position
list-style
14.背景样式
背景颜色：background-color属性
背景图像：background-image属性
背景重复方式：background-repeat属性
背景定位：background-position属性
背景样式简写：background属性
15.设置背景图像
背景重复方式：background-repeat属性
repeat：沿水平和垂直两个方向平铺
no-repeat：不平铺，即只显示一次
repeat-x：只沿水平方向平铺
repeat-y：只沿垂直方向平铺
16.背景定位
|--------------------------|---------------------------------------------------------------------------------------------------------|
| 值 | 含义 |
| Xpos Ypos | 单位：px， Xpos****表示水平位置，Ypos表示垂直位置 |
| X% Y% | 使用百分比表示背景的位置 |
| X**、Y方向关键词** | 水平方向的关键词： left**、center、right 垂直方向的关键词： top、center、**bottom |
17.线性渐变
linear-gradient ( position, color1, color2,...)