6.1 CSS常用文本属性

首先介绍CSS的文本属性，使用CSS属性不仅可以控制文字的大小、颜色和字体等，还可以设置整个段落的行高、对齐方式等属性，大大提高网页的可读性。

6.1.1 字体、字号与颜色属性

1．字体

（1）font-family：字体族，设置字体

可以同时设置多个字体，多个字体样式间用逗号分隔，浏览器解析时，会从左往右依次查找。选择可用字体，当浏览器找不到可用字体时，将使用系统默认字体。

一般情况下，前面使用具体字体名称，最后一个使用字体族类名称。表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所示。

3．letter-spacing

设置字符间距，即字与字之间的间距，属性值通常为**px。

4．text-decoration

文本修饰属性，常用属性值有四个，分别为下画线underline、删除线line-through、上画线overline、不做修饰none。

代码示例如下：

代码运行效果如图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-5所示。

9．text-indent

首行缩进，可以使用像素值调整段落文字的首行缩进大小。

代码示例如下：

text-indent：32px；//首行缩进32px，默认字体大小16px的情况下，将首行缩进两个字

10.text-stroke

设置文字描边，需要注意的是text-stroke只能在webkit内核浏览器中使用，所以必须使用“-webkit-”前缀，共接收两个属性值分别为描边的粗细，描边的颜色。

代码示例如下：

代码运行效果如图6-6所示。