3.2 CSS
CSS（Cascading Style Sheet，层叠样式表）是一种用来表现HTML等文件的显示样式的语言。通过CSS可以将页面子元素与显示效果分离，提高页面的可复用性和可维护性。样式使用属性键值对的方式工作。CSS预定义了一系列的属性键，开发者可以设置这些属性的值以实现对页面显示的控制。
本书不提供CSS的完整参考，仅带领读者学习CSS的核心语法和作用，使读者能够读懂CSS代码，并具备掌握本书实战部分内容的能力。
3.2.1 样式声明方式
当浏览器解析显示HTML页面时，将使用4种样式渲染页面元素，按照优先级由高到低分别为：元素内联样式、页面<head>中的内联样式、外联样式、浏览器默认样式。每个浏览器的默认样式都不相同，且开发者无须关心，所以下面只讲解前3种样式的设置方法。
1. 元素内联样式
通过向HTML元素提供style属性的值，可以直接设置元素的内联样式，比如：
本例中设置了样式颜色（color）和左边距（margin-left）。在一个style中可以设置多个样式属性，多个样式之间以分号分隔，每个样式通过冒号分隔键和值。
2. 页面<head>中的内联样式
【示例3-6】<head>中的样式通过<style type="text/css">标签实现，其中的样式将在整个页面中有效，比如：
<style>标签中的内容由选择器及其样式组成，选择器p代表其后的样式对所有<p>标签中的内容有效。选择器的概念稍后解释。
3. 外联样式
外联样式是指把CSS数据放入一个单独的文件中，在HTML中通过<link rel="stylesheet" type="text/css" >标签引用该文件，比如：
外部样式文件一般以*.css命名，其内容与<head>中的内联样式一样，由选择器和样式组成。
不同样式的表达方式之间的优先级不同，当不同的样式之间的设置发生冲突时（比如都设置了字体颜色，但是外联样式设置为红色，内联样式设置为绿色），首先以元素内联样式为准，其次为页面<head>中的内联样式，再次为外联样式，最后为浏览器默认样式。
3.2.2 CSS语法
样式文件的语法规则很简单，由选择器和样式属性组成，即：
每个文件可以有若干条这样的配置。选择器用于指定要设置的HTML元素，CSS中基本的选择器有4种，如表3.3所示。
表3.3 CSS中基本的选择器
除了基本的选择器，CSS还允许设置选择器的组合，如表3.4所示。
表3.4 选择器的组合
除了上述两个表中的选择器，CSS 2和CSS 3还规范了更丰富的选择器，如属性选择器、链接已点击选择器等，开发者可以查阅相关资料。
【示例3-7】综合运用两个表中的选择器的CSS示例如下：
将该CSS代码保存为mysheet.css文件，编写如下HTML代码来应用该外联样式：
打开该HTML文件，浏览器的渲染效果如图3.10所示。
图3.10 浏览器的渲染效果
3.2.3 基于CSS+DIV的页面布局
标签<div>是HTML用于页面分组的块元素，是专门用来实现元素布局的标签。通过用CSS设置<div>的一系列显示属性，可以很好地设计网页的整体效果。CSS中与布局有关的常用属性如表3.5所示。
表3.5 CSS中与布局有关的常用属性
【示例3-8】应用表3.5中的属性用CSS+DIV的布局示例如下：
为了能够看清HTML块划分的结构，代码中用background-color设置了3个块的背景颜色，浏览器的显示效果如图3.11所示。对本例代码的解析如下。
• 用标签的class属性连接HTML标签和CSS设置。页面的body部分由3个块组成：container、leftframe、rightframe，其中container是另外两个块的父块。
• 类container的CSS中用百分比的方法设置了块的宽和高，百分比是相对于浏览器的可显示区域而言的。
• 类leftframe用像素值的方法设置了高度，用百分比的方法设置了宽度。注意，这里的百分比是相对于其父块的大小而言的。
• rightframe中除了设置了长和宽，还设置了块的margin和padding。10像素的margin使得rightframe没有紧挨着leftframe，并且在rightframe的上下左右都出现了相应的留白。
• 虽然leftframe和rightframe的高度都是200px，但rightframe中的50像素padding使得块的高度明显高于leftframe。虽然此时块的实际高度是50px（上边padding）+200px（块高度）+50px（下边padding）=300px，但其内容只显示在中间的区域。
图3.11 CSS+DIV布局显示效果