2.1 CSS简介

2.1.1 CSS的发展

CSS（Cascading Style Sheet）称为层叠样式表，也可以称为CSS样式表或样式表，其文件扩展名为.CSS。CSS是用于增强或控制网页样式，并允许将样式信息与网页内容分隔开的一种标记性语言。

在以前没有网页设计师存在，当HTML刚刚出现的时候，没有人在意页面是否好看。而随着时间的推移以及大众审美需求的提升，网页也需要有更多的变化而不仅仅是文字的展示，于是开始出现了网页设计师这样的职业，而与之相对的就是CSS的诞生。

在最早的网页中，内容与样式是混合在一起的，这样混乱的结构给工程师和网页设计师都造成了很大的困扰。于是有人提出建议，把样式从内容中踢出去，被踢出来的部分变成了CSS，留下的便是HTML。HTML是面对程序员的，而CSS是程序员为设计者准备的一个“工具”，是帮助HTML面对人的工具，也是让一堆文字变成设计稿的唯一工具。

2.1.2 CSS实例

在学习CSS之前来看两段简单的代码，分别是一个纯HTML的代码和一个有CSS样式表的代码，功能都是显示“你好，欢迎来到CSS的世界”，但下例两段代码在显示后有所不同，它们的区别就是CSS对网页的影响。

【例2-1】制作网页中没用CSS样式表的效果，在浏览器中显示如图2-1所示。

图2-1 无CSS效果图

代码如下：

＜html＞

＜body＞

＜h1＞你好，欢迎来到CSS的世界＜/h1＞

＜/body＞

＜/html＞

【例2-2】制作增加样式表之后的网页效果，在浏览器中显示如图2-2所示。

图2-2 有CSS效果图

代码如下：

＜html＞

＜head＞

＜style＞

h1{color：blue；}

/*h1这里定义颜色为蓝色，文字大小为36像素，文本居中对齐*/

＜/style＞

＜/head＞

＜body＞

＜h1＞你好，欢迎来到CSS的世界＜/h1＞

＜/body＞

＜/html＞

通过这两个例子可以看出，在网页中增加了样式表之后，字体的颜色、字体和对齐方式发生了变化，网页的表现效果更加丰富了。

2.1.3 CSS样式表概述

1.CSS的起源

HTML标记原本设计为用于定义文档内容。通过使用＜h1＞、＜p＞、＜table＞这样的标记，HTML的初衷是表达“这是标题”“这是段落”“这是表格”之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标记。但是由于两种主要的浏览器（Netscape和Internet Explorer）不断地将新的HTML标记和属性（比如字体标签和颜色属性）添加到HTML规范中，这样创建一个独立于文档表现层的站点越来越困难。

为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了HTML标准化的使命，并在HTML4.0之外创造出CSS，并且所有的主流浏览器均支持层叠样式表。

2.CSS的特点

样式表定义如何显示HTML元素，就像HTML3.2的字体标签和颜色属性所起的作用那样。样式通常保存在外部的.css文件中。通过仅仅编辑一个简单的CSS文档，外部样式表使用户有能力同时改变站点中所有页面的布局和外观。

由于允许同时控制多重页面的样式和布局，CSS可以称得上Web设计领域的一个突破。作为网站开发者，能够为每个HTML元素定义样式，并将之应用于任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。

样式表允许以多种方式规定样式信息。样式可以规定在单个的HTML元素中，在HTML页头元素中，或在一个外部的CSS文件中，甚至可以在同一个HTML文档内部引用多个外部样式表。