2.1 CSS的基本概念
CSS是Cascading Style Sheets的简称。对于设计者来说，它是一个非常灵活的工具，不必再把繁杂的样式定义编写在文档结构中，可以将所有有关文档的样式指定内容全部脱离出来，在行内定义、在标题中定义，甚至作为外部样式表文件供HTML页面调用。
2.1.1 CSS的特点
使用CSS定义样式的好处是：不仅可以控制传统的格式属性，如字体、尺寸、对齐方式，还可以设置诸如位置、特殊效果、鼠标滑过之类的HTML属性。图2-1所示为没有使用CSS美化的页面，图2-2所示为使用CSS美化后的页面。
图2-1 没有使用CSS美化的页面
图2-2 使用CSS美化后的页面
当然，通过修改样式，可以自动、快速更新所有采用该样式的文字格式。HTML样式可以看作一组用于控制单个文档中某个范围内文本外观的格式化属性，而CSS不仅可以控制单个文档中的文本格式，还可以控制多个文档的格式。与使用HTML样式相比，使用CSS可以更好地链接外部多个文档，当CSS被更新时，所有使用CSS的文档也会随之自动更新。
当用户需要管理一个非常大的网站时，使用CSS定义站点，便可以体现出非常明显的优越性。使用CSS可以快速格式化整个站点，并且使用CSS可以控制多种使用HTML不能控制的属性。
CSS的特点一般可以归纳为以下几点。
（1）可以更加灵活地控制网页中文字的字体、颜色、大小、间距、风格及位置。
（2）可以灵活地设置一段文本的行高、缩进，并可以为其加入三维效果的边框。
（3）可以方便地为网页中的任何元素设置不同的背景颜色和背景图像。
（4）可以精确地控制网页中各元素的位置。
（5）可以为网页中的元素设置各种过滤器，从而产生各种效果，如阴影、模糊、透明等。
（6）可以与脚本语言相结合，从而产生各种动态效果。
（7）由于是HTML代码，所以可以提高页面打开的速度。
2.1.2 CSS的基本语法
CSS语言由选择符和属性构成，其基本语法如下：
首先讨论在HTML页面内直接引用样式表的方法。这个方法必须把样式表信息包括在<style>和</style>标签中，为了使样式表在整个页面中产生作用，应把该组标签及内容放到<head>和</head>标签中。CSS语法示意图如图2-3所示。
图2-3 CSS语法示意图
例如，需要设置HTML页面中所有H1标题字显示为红色，其代码如下：
提示
<style>标签中包括了type="text/css"，目的是让浏览器知道是使用CSS规则。加入<!--…-->注释标记是防止有些老式浏览器不认识CSS规则，可以把该段代码忽略不计。
在使用CSS的过程中，经常会有几个选择符用到同一个属性的情况，如规定页面中粗体字、斜体字和H1标题字都显示为绿色，按照上文介绍的语法CSS的代码如下：
这样书写是十分麻烦的，于是在CSS中引进了分组的概念，可以将相同属性的样式定义写在一起，这样CSS的代码就会简洁很多，代码如下：
用逗号分隔各个CSS选择符，将3行代码合并写在一起即可。
2.1.3 CSS的冲突
如果将两个或多个CSS规则应用于同一个文本时，这些规则可能会发生冲突并产生意外的结果，浏览器会使用就近原则处理CSS规则。
技能案例：使用就近原则
源文件：源文件\第2章\2-1.html
（1）执行“文件”→“打开”命令，打开文件“源文件\第2章\2-1.html”，页面效果如图2-4所示。然后定义两个字体的CSS规则，分别为font01和font02，如图2-5所示。
图2-4 页面效果
图2-5 CSS规则代码
（2）如果应用于同一文本的两种CSS规则的属性发生冲突，则浏览器显示最里面的CSS规则（离文本最近的规则）的属性，如图2-6所示。
图2-6 应用两种CSS规则
（3）“两个标题”会应用font02的样式规则，而不会应用font01的样式规则。在Dreamweaver的实时视图中，可以看到页面中字体的效果，如图2-7所示。
图2-7 显示最里面的CSS规则的字体效果
提示
在该案例中，font02中的font-weight属性与font01发生冲突，在font02中定义字体为粗体，而在font01中并没有字义字体的加粗属性，当它们同时应用于同一文本时，将显示这两种CSS规则所有的属性。但是font02中的color属性与font01中的color属性重复，font02中定义字体颜色为深灰色，而font01中定义字体颜色为浅灰色，这两种CSS规则定义的color属性发生了冲突，当它们同时应用于同一文本时，将显示最里面的CSS规则定义的color属性。
（4）如果有直接冲突，则自定义的CSS规则（使用class属性应用的规则）中的属性将覆盖HTML标签样式中的属性，如图2-8所示。在Dreamweaver的实时视图中，可以看到页面中字体的效果，如图2-9所示。
图2-8 应用两种CSS规则
图2-9 覆盖HTML标签中的样式属性
由此可见，当CSS规则定义的属性和HTML标签中的属性发生冲突时，将显示CSS规则所定义的属性。