6.1 CSS常用文本属性
首先介绍CSS的文本属性，使用CSS属性不仅可以控制文字的大小、颜色和字体等，还可以设置整个段落的行高、对齐方式等属性，大大提高网页的可读性。
6.1.1 字体、字号与颜色属性
1．字体
（1）font-family：字体族，设置字体
可以同时设置多个字体，多个字体样式间用逗号分隔，浏览器解析时，会从左往右依次查找。选择可用字体，当浏览器找不到可用字体时，将使用系统默认字体。
一般情况下，前面使用具体字体名称，最后一个使用字体族类名称。表6-1是常用字体族名称及说明。图6-1所示为衬线体与非衬线体。
表6-1 常用字体族名称及说明
图6-1 衬线体与非衬线体
基本语法如下：
（2）font-style：设置字体样式
通常使用其中的两个属性值：正常（normal）和斜体（italic）。
基本语法如下：
font-style：italic；
（3）font：缩写形式
font的缩写形式依次为font-style、font-weight、font-size/line-height、font-family，分别是字体样式、字体粗细、字号/行高、字体族。
在使用font属性时须注意以下问题：
1）使用时必须严格按照上述顺序。
2）多个样式之间用空格分隔，且font-size/line-height必须作为一对用/分隔。
3）font-size和font-family必须指定，其他样式不指定将采用默认样式显示。
基本语法如下：
2．字号
（1）font-weight：设置字体粗细
可选属性值：bold加粗、lighter细体或者填写100～900的数字（其中400为正常，700为加粗）。
（2）font-size：设置字体大小
属性值通常为**px或**%（其中百分比代表浏览器默认字体大小的百分比，绝大部分浏览器默认为16px）。
3．字体颜色
（1）color：设置字体颜色
属性值有3种表达方式。
1）直接写颜色的英文名字：red、green、blue等。
2）十六进制写法：#FFFFFF，#后每位可选值为数字0～9以及英文的a～f，每两位表示一种颜色，分别对应红绿蓝的比例（最常用，推荐）。
3）rgb写法：
rgb（0～255，0～255，0～255）
rgba（0～255，0～255，0～255，0～1）第4位数表示透明度，0表示全透明，1表示不透明。
（2）opacity：设置透明度
属性值为0～1的数字。
注意：使用opacity时当前元素以及子元素均会透明；而使用rgba调整时，只会使当前元素透明，不会改变子元素透明度。
代码示例如下：
6.1.2 文本属性
1．line-height
设置行高，属性值表达方式有以下3种。
1）像素单位，如48px。
2）纯数值，表示正常行高的倍数。
3）百分数，表示正常行高的百分数。
line-height有一个典型应用，就是可以调整元素中文本垂直居中，设置方式为让控件的height等于控件的line-height。
代码示例如下：
height：100px；
line-height：100px； /*设置行高等于高度，则当前元素中文字垂直居中*/
2．text-align
设置块级元素中文字的水平对齐方式，属性值有left、center、right。
代码示例如下：
代码运行效果如图6-2所示。
图6-2 文字对齐方式效果
3．letter-spacing
设置字符间距，即字与字之间的间距，属性值通常为**px。
4．text-decoration
文本修饰属性，常用属性值有四个，分别为下画线underline、删除线line-through、上画线overline、不做修饰none。
代码示例如下：
代码运行效果如图6-3所示。
图6-3 文本修饰效果
5．overflow（overflow-x和overflow-y）
控制超出范围文本的显示方式，常用属性值有以下三个。
1）auto：根据文字多少自动显示滚动条。
2）scroll：始终显示滚动条。
3）hidden：超出范围文本隐藏，可以通过overflow-x和overflow-y分别设置水平垂直方向的隐藏。
注意：这个属性已经在第4章中进行详细讲解，此处不再赘述。
6．text-overflow
设置多余文字的显示方式，常用属性值有两个。
1）clip：裁剪文本；
2）ellipsis：使用省略号代替多余文字。
7．white-space
设置元素内的空白符怎样处理。常见属性值如下：
1）normal：默认，空白会被浏览器忽略。
2）nowrap：设置中文行末不断行显示。
3）pre：空白会被浏览器保留。作用类似HTML中的＜pre＞标签。
【重点】如何让每行多余文字显示省略号？
1）white-space：nowrap；如果是中文，需设置行末不断行。
2）overflow：hidden；设置控件超出范围隐藏。
3）text-overflow：ellipsis；设置多余文本省略号显示。
8．text-shadow
文本阴影，有4个属性值。
1）水平阴影距离：必写，数值越大，阴影右移。
2）垂直阴影距离：必写，数值越大，阴影下移。
3）阴影模糊距离：可写，数值越大，阴影越模糊。默认为0，不模糊。
4）阴影颜色：可写，默认为黑色。
代码示例如下：
代码运行效果如图6-4所示。
图6-4 文字阴影效果
这里还需要补充，文本阴影可以同时设置多个阴影，每个阴影效果之间以逗号分隔即可。例如，将上述阴影代码改为下述语句：
代码运行效果如图6-5所示。
图6-5 多个文字阴影效果
9．text-indent
首行缩进，可以使用像素值调整段落文字的首行缩进大小。
代码示例如下：
text-indent：32px；//首行缩进32px，默认字体大小16px的情况下，将首行缩进两个字
10.text-stroke
设置文字描边，需要注意的是text-stroke只能在webkit内核浏览器中使用，所以必须使用“-webkit-”前缀，共接收两个属性值分别为描边的粗细，描边的颜色。
代码示例如下：
代码运行效果如图6-6所示。
图6-6 文字描边效果