2.6 CSS基础样式
在上一节中已经介绍了如何通过选择器（Selector）来指定需要应用样式的HTML元素，本节将介绍如何为这些选中的HTML元素设置样式规则。
样式规则是由样式属性和值组成的，下面将介绍常用的样式属性及其对应的值。
2.6.1 背景（background）
与背景相关的常用样式属性有以下三个：background-color、background-image、background-repeat。
1.背景色（background-color）
可以使用“background-color”样式属性为元素设置背景色，其样式声明如下。
该规则把h1元素的背景设为红色。
该属性对应的值为CSS颜色值，在CSS中常用的颜色值有如下四种。
● 十六进制颜色。
● RGB颜色。
● RGBA颜色。
● 预定义/跨浏览器颜色名。
（1）十六进制颜色
十六进制颜色以#RRGGBB的方式设定颜色，井号（#）代表采用十六进制颜色，RR（红色）、GG（绿色）、BB（蓝色）代表两位十六进制整数（取值范围：0～FF），规定了对应颜色的成分。比如：#ff0000值显示为红色，这是因为红色（RR）成分被设为最高值（ff），而其他成分被设为0；而#00ff00值显示为绿色，因为绿色（GG）成分被设为最高值（ff），而其他成分被设为0；相应地，蓝色为：#0000ff，黑色为：#000000，白色为：#ffffff。
（2）RGB颜色
RGB颜色以rgb（red、green、blue）的方式设定颜色，rgb{}代表采用RGB颜色，red（红色）、green（绿色）、blue（蓝色）代表定义颜色的强度，其取值可以是0～255的数值也可以是0%～100%的百分比值。比如：
（3）RGBA颜色
相比RGB颜色，RGBA颜色主要多了一个alpha通道值，它规定了对象的不透明度。RGBA颜色值是这样规定的：rgba(red,green,blue,alpha)。alpha值是介于0.0（完全透明）与1.0（完全不透明）的数字。比如：rgba(255,0,0,0.5)表示半透明的红色。
（4）预定义/跨浏览器颜色名
CSS颜色规范中定义了147种颜色名，包括17种标准颜色和130种其他颜色。17种标准颜色为aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow。比如：
就是将段落元素中的字体设为橙色。
2.背景图像（background-image）
可以使用background-image样式属性来设置元素的背景图像，该属性有三个值。
第一个可能的取值是“url('URL')”，其中‘URL’为图像路径，其样式声明如下。
该样式规则将img.jpg图像作为body元素的背景。其中，图像的地址可以是绝对路径也可以是相对路径，当为相对路径时是参考的样式规则所在目录。
第二个可能的取值是“none”，代表不显示背景图像，其样式声明如下。
第三个可能的取值是“inherit”，设定从父元素继承background-image属性的设置，其样式声明如下。
3.背景图像平铺方式（background-repeat）
当设置background-image样式属性时，默认情况下背景图像将进行平铺重复显示以覆盖整个元素实体，也可以通过设置background-repeat样式属性来更改平铺的样式，该属性的值及其含义如表2-2所示。
表2-2 background-repeat属性值说明
2.6.2 文本格式（text）
常用的与文本格式相关的样式属性主要包括：文本颜色（color）、文本排列方式（text-align）、文本修饰（text-decoration）、文本缩进（text-indent）。
1.文本颜色（color）
可以通过color属性设置相关元素内部文本的颜色，其样式声明如下。
该条样式规则设定h3元素内的文字颜色为红色。color属性的取值为CSS颜色值。
2.文本排列方式（text-align）
可以通过text-align属性设置文本的水平对齐方式，其样式声明如下。
该条样式规则设定h1元素内的文字采取右对齐。
3.文本修饰（text-decoration）
可以通过text-decoration属性为文本添加一些修饰效果，比如下划线、删除线等，其样式声明如下。
该条样式规则为h1元素内的文字添加了一条下划线。
4.文本缩进（text-indent）
可以通过text-indent属性设定文本第一行的缩进，其样式声明如下。
该条样式规则设定p元素内的文本第一行缩进20px。
2.6.3 字体属性（fonts）
在CSS中，可以通过字体属性为HTML文档中的文字设置特定的显示效果。常用的包括：字体族（font-family）、字体大小（font-size）、字体粗细（font-weight）。
1.字体族（font-family）
平时所说的字体，其实是由多个字体变形组成的一个集合，比如“黑体”，其实就包含了“黑体细体”“黑体中等”两种字体变形；常用的英文字体“Times New Roman”包含了“Times New Roman-Regular”“Times New Roman-Italic”“Times New Roman-Bold”“Times New Roman-BoldItalic”四种字体变形。因此，在CSS中，把字体称为“字体族”（font-family）。
CSS的字体族分为“特定字体族”“通用字体族”两类，特定字体族指的是某个具体的字体族，比如“宋体”“仿宋”“Times New Roman”；通用字体族是具有某一类特点的字体族集合，CSS定义了5种通用字体族，如表2-3所示。
表2-3 通用字体族
一般而言，“特定字体族”中的字体族都能划分到某一“通用字体族”。设置字体族的方法如下。
font-family 属性的值为需要的字体族名称，一般会设置多个字体族作为一种“后备”机制，如果浏览器不支持第一种字体族，将依次尝试下一种字体族，推荐使用通用字体族作为最后一个字体族。
注意：如果字体族的名称超过一个字，它必须用引号，如Font Family:'Courier New'。多个字体族之间用逗号（，）分隔。
2.字体大小（font-size）
可以通过font-size属性设置相关元素内部字体的尺寸，其样式声明如下。
上述样式规则中，设定段落元素中的字体尺寸为15px。
3.字体粗细（font-weight）
可以通过font-weight属性设置相关元素内部文本的粗细，其样式声明如下。
上述样式规则中，设定段落元素中的字体为粗体。
需要注意的是实际的显示效果还要看字体族内是否有这些粗细级别的变体。有对应级别时这些设置才会生效，下面举例来分析。
【例2-6】 font-weight属性设置。
在上例中为HTML文档中定义了三个段落，内部文字为“font-weight:lighter”“font-weight:normal”“font-weight:bold”，将字体统一设定为“Avenir”，并分别设置其粗细为“lighter”“normal”及“bold”，在浏览器中显示的效果如图2-2所示。
在图中能看出其字体粗细的差别，下面将字体改为“Arial”，其他设置保持不变，在浏览器中显示的效果如图2-3所示。
图2-2 Avenir字体族
图2-3 Arial字体族
由图可见该字体的lighter和normal没有差异，说明该字体没有纤细变体，对应的font-weight属性设置没有生效。
2.6.4 链接（link）
链接的样式属性有很多种，比如前面提到的background、color、font-family等，但链接的特殊性在于可以根据链接所处的状态（未被访问、已访问、鼠标悬浮、单击）来设置对应的样式。设置语法如下。
例如：
应用该样式规则后，鼠标悬浮在链接上时，链接的字体将变为斜体，显示效果如图2-4、图2-5所示。
图2-4 鼠标悬浮前
图2-5 鼠标悬浮后
2.6.5 列表（list）
HTML中的列表分为有序列表（ol）和无序列表（ul），利用list-style-type属性可以设置列表的列表项标志，该属性的取值如表2-4所示。
表2-4 list-style-type属性值说明
（续）
无序及有序列表标记示例如下。
【例2-7】 列表标记示例。
上述HTML文档显示效果如图2-6所示。
图2-6 无序列表标记