2.2 CSS的作用

HTML标签最初是被设计用来定义HTML文档内容的，比如可以使用<img>、<p>、<a>这样的标签表达“这是一副图像”“这是一个段落”“这是一个链接”之类的信息。而HTML文档的具体显示样式则交给浏览器来完成，无需使用任何的格式化标签。

但由于两种主要的浏览器（Netscape和Internet Explorer）不断地将新的HTML标签和属性（比如字体标签和颜色属性）添加到HTML规范中，使得创建结构清晰且独立于展示的HTML文档变得越来越困难。

为了解决这个问题，W3C肩负起了HTML标准化的使命，并提出利用样式（Style）来定义如何显示HTML文档。

由此可见，CSS最重要的目标是将HTML文档内容与其显示样式分隔开来。在CSS出现前，HTML样式通过标签的属性来指定，不便于修改和共享，例如<h1><h2><h3>标签是用来表示文档中不同层级的标题，浏览器会分别用从大到小的字体来显示对应的标题。有时候希望能将标题设定为红色加以强调，这时就需要借助标签的属性来进行设置了，方法如下例所示。

【例2-1】 通过html标签属性设置颜色。

在上述代码中，在各级标题元素内添加了<font>标签，并通过指定其color属性把标题的颜色设为了红色，这里的<h1>、<h2>、<h3>元素及各自包含的<font>元素属于文档内容，color="red"是显示样式，两者写在一起显得十分复杂，而且当需要把标题颜色改换为蓝色时，需要分别修改三处。

而利用CSS来进行设置显示样式则十分简便，HTML标签只需要指定HTML文档内容即可，显示样式统一在CSS中指定。下面是利用CSS设定元素样式的示例。

【例2-2】 通过CSS设置标题颜色。

在使用CSS时，<h1><h2><h3>标签只需指定文档的内容，显示属性通过包含在<style>标签中的h1,h2,h3{color:red}这一行代码来实现，文档显得非常整洁，并且当需要修改标题颜色时，也只需将color:red修改为color:blue即可，非常方便，这一特点在复杂的HTML文档中体现得更加明显。同时，因为HTML文档的显示与内容分开了，就可以让多个HTML文档共同使用一个CSS，使得这些页面有统一的显示风格。