4.1 什么是CSS样式表

上一章的课程里，我们学习了表单以及表单中的各种元素，常用的表单元素有：文本框( text)、密码框(password)、单选按钮(radio)、复选框(checkbox)、列表框(<select><option>)、按钮(button、submit和reset)、多行文本框(<textarea>)。另外，还学习了框架，包括框架的基本结构、如何创建多个复杂的窗口、框架窗口之间的链接等。

从本章开始，我们将学习CSS(Cascading Style Sheet，层叠式样式表)，其中重点是样式的基本语法和如何创建常见的样式规则（如创建无下划线的超链接样式，设置细边框文本框样式，创建常见的文字、颜色等样式等）；难点是内嵌样式、行内样式、样式表文件的使用场合。

为什么需要CSS样式表

通过定义CSS样式表，能让网页具有美观一致的界面，可以将网页制作得更加绚丽多彩。一个样式文件可以作用于多个页面，具有更好的易用性和扩展性，通过修改样式文件，能制作出内容相同，而外观不同的多姿多彩的页面。此外，使用样式表能有效地分离网页的内容与外观控制，从而便于美工与程序员之间的分工协作，发挥各自的优势。

为什么需要CSS样式表主要是基于以下几点原因：

(1) HTML标签的外观样式比较单一。

大家在学习前面几章时，不知发现没有？前面几章网页中的文字的字体、颜色、大小、超链接、间距等样式都比较单一，为了弥补这个缺点，就需要使用CSS样式表来对HTML标签进行控制，从而实现更加丰富多彩的效果。

(2) 样式表的作用相当于华丽的衣服。

同样的内容，采用不同的CSS样式文件，可以看到不同的布局和效果。从美工的角度来看，可以更容易地调整页面外观，调整页面里某个部分的文字或者图片等，从而实现复杂多变的页面效果，因此样式表相当于一个页面甚至一个网站的华丽的衣服。如图1所示，就是内容相同，外观不同的两个页面。

图1 内容相同样式不同的页面

(3) 样式表能实现内容与样式的分离，方便团队开发。

由于当今社会竞争日趋激烈，分工越来越细，每个人做的事越来越单一，我们开发一个网站也不例外，往往需要美工和程序设计人员的配合，美工做样式，程序员写内容，为了迎合这种需要，就出现了样式表。样式表能把内容结构和格式控制相分离，使网页可以仅由内容构成，而将所有的网页格式通过CSS样式表文件来控制，从而方便美工和程序员分工协作、各司其职、各尽其能，为开发出优秀的网站提供了有力的保障。

点击下载第四章案例及作业资源 返回《HTML入门经典》教程列表