HTML 标签原本被设计为用于定义文档内容。通过使用这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是链接”之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签。由于两种主要的浏览器(Netscape 和 Internet Explorer)不断地将新的 HTML 标签和属性(比如字体标签和颜色属性)添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。所以利用CSS相关的属性，我们能完成很多对文字、段落以及背景的设置，来美化我们的页面，使其完成更多的效果，而之前的HTML基础标签作用是有限的，而且会产生很多冗余的代码，这就用到了CSS属性。

步骤一：了解CSS概念

CSS 指层叠样式表 (Cascading Style Sheets)。

样式定义如何显示 HTML 元素。

外部样式表可以极大提高工作效率。

外部样式表通常存储在 CSS 文件中。

多个样式定义可层叠为一。

步骤二：CSS基础语法

在对CSS有了大致的了解之后，就可以使用CSS对页面进行全方位的控制。如何在HTML中使用CSS呢？包括：内联样式表、内部样式表、外部样式表等。

内联样式表例如图一：

内部样式就是将CSS写在与之间，并且用标记进行声明。例如下图

外部CSS样式表是使用频率最高，也是最为实用的方法。它将HTML页面本身与CSS样式风格分离为两个或多个文件，在html文件中引入外部样式表，实现了页面框架HTML代码与美工CSS代码的完全分离。名为first.html的网页文件代码如下：其中为html文件中引入外部样式表语法。例如：下图

同目录下，名为style.CSS外部样式表文件，代码如下：

01： p {

02： color:#0000ff;

03： }

CSS的思想就是首先指定对什么“对象”进行设置，最后给出该设置的“值”。因此，概括来说，CSS就是由三个基本部分组成的——“对象”、“属性”和“值”。在这里“对象”有着专有的名字，称之为“选择器”。

选择器通常是指需要改变样式的 HTML 元素。下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。

在下面这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。

01： h1 {color:red; font-size:14px;}

如下图所示展示了上面这段代码的结构：

步骤三：标记选择器

标记选择器通常是指需要改变样式的 HTML 标记。步骤二中提到的h1选择器即为标记选择器。

步骤四：类选择器

在上一步骤中提到的标记选择器一旦声明，那么页面中所有的相应标记都会相应地产生变化。例如当声明了

标记是红色时，网页中所有的

标记都将显示为红色。如果希望其中的某一个

标记不是红色，而是蓝色，这时仅依靠标记选择器是不够的，还需要引入类别选择器。

在CSS中，类选择器以一个点号“.”显示。类选择器可以为标有特定 class属性的 HTML 元素指定特定的样式。下面这段代码定类选择器。注意：类名的第一个字符不能使用数字，不可以是已有标签名称。

在上面的例子中，所有拥有red类的 HTML 元素均为红色，字体大小为18px。

在上面的 HTML 代码中， p 元素有red类。这意味着将遵守“red“选择器中的规则。

为了方便效果演示，此实例采用内部样式表演示，完整代码如下：

步骤五：id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以 "#" 来定义。

下面的两个 id 选择器，第一个可以定义元素的字体颜色为红色，第二个定义元素的字体颜色为绿色。

下面的 HTML 代码中，id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。

为了方便效果演示，此实例采用内部样式表演示，完整代码如下：