2.1 CSS简介

第1章已经介绍过，HTML网页实际包含网页的内容及网页的排版布局两个方面：网页的内容主要由需要显示的文字内容、图片内容、各种表单元素等组成；网页的排版布局则包括显示网页内容时所用的颜色、字体、边框线，以及网页内容的位置和大小尺寸等。CSS就是用于有效地设计和实现网页排版布局的一组描述或定义。

如图2-1所示，3个网页的内容完全一样，但是它们的排版布局不同，区别在于左边的网页是示例1-9没有应用CSS的效果，中间和右边的网页应用了两种不同CSS的效果。

CSS是Cascading Style Sheets的缩写，中文翻译为“层叠样式表”。CSS具有下述特点。（1）CSS 通过“样式”来表示网页的颜色、字体、背景色、边框线以及网页内容的位置和大小尺寸等属性。

（2）一系列样式组成了“样式表”。

（3）定义“样式表”的方式有3种，为外部样式表文件、内部样式表及元素中的样式表。如图2-2所示，外部样式表文件（如 external.css）定义的是所有网页的排版规则，内部样式表（如A、B、C部分）定义的是所在网页的排版规则，而元素中的样式表定义的是所在标签元素的排版规则。其中，外部样式表文件可以有效地将网页内容和网页的排版布局分离，当多个网页使用了同一个外部样式表文件时，只要修改一个外部样式表文件，就可以方便地同时改变这些网页的排版布局。

（4）在网页的标记中应用“样式”时采用的是“层叠式”原则。

CSS是由HTML发展而来的，因此，与HTML文档相类似，CSS在不同浏览器中的表现效果也会稍有不同。虽然最新版本的CSS3仍然在开发中，但是大多数浏览器都已经支持CSS3的大部分定义。本书将主要介绍适用于大多数浏览器的一些常用的CSS3样式内容，对于CSS3的详细规范内容，读者可以通过万维网联盟网站（https://www.w3.org/TR/CSS/）进行查询。