2.3　CSS层叠样式表

2.3.1　CSS概述

CSS是Cascading Style Sheets（层叠样式表）的缩写。CSS是一种标记语言，用于为HTML文档定义布局。例如，CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。运用CSS样式可以让页面变得美观，就像化妆前和化妆后的效果一样，如图2.6所示。

图2.6　使用CSS前后效果对比

CSS可以改变HTML中标签的样式，那么CSS是如何改变它的样式的呢？简单地说，就是告诉CSS 3个问题，改变谁？改什么？怎么改？告诉CSS改变谁时需要用到选择器。选择器是用来选择标签的，比如ID选择器就是通过ID来选择标签，类选择器就是通过类名选择标签。然后告诉CSS改变这个标签的什么属性，最后指定这个属性的属性值。

2.3.2　属性选择器

属性选择器就是通过属性来选择标签，这些属性既可以是标准属性（HTML中默认该有的属性，例如input标签中的type属性），也可以是自定义属性。

在HTML中，通过各种各样的属性，可以给元素增加很多附加信息。例如，在一个HTML页面中，插入多个p标签，并且为每个p标签设定不同的属性。示例代码如下：

在HTML中为标签添加属性之后，就可以在CSS中使用属性选择器选择对应的标签，来改变样式。在使用属性选择器时，需要声明属性与属性值，声明方法如下：

     [att=val]{}

其中att代表属性，val代表属性值。例如，如下代码就可以实现为相应的p标签设置样式。

2.3.3　类和ID选择器

在CSS中，除了属性选择器，类和ID选择器也是受到广泛支持的选择器。在某些方面，这两种选择器比较类似，不过也有一些重要差别。

第一个区别是ID选择器前面有一个“#”号，也称为棋盘号或井号。语法如下：

     #intro{color:red;}

而类选择器前面有一个“.”号，即英文格式下的半角句号。语法如下：

     .intro{color:red;}

第二个区别是ID选择器引用id属性的值，而类选择器引用的是class属性的值。