CSS介绍

CSS 是“Cascading Style Sheet”的缩写，中文意思为“层叠样式表”（层层叠加的样式），它是一种标准的样式表语言，用于描述网页的表现形式（例如网页元素的位置、大小、颜色等）。 CSS 的主要作用是定义网页的样式（美化网页），对网页中元素的位置、字体、颜色、背景等属性进行精确控制。CSS 不仅可以静态地修饰网页，还可以配合 JavaScript 动态地修改网页中元素的样式，而且市面上几乎所有的浏览器都支持 CSS。

20 世纪 90 年代初 HTML 语言诞生，这时的 HTML 只包含很少的属性来控制网页的显示效果。伴随着 HTML 的成长，各式各样的样式语言也随之出现，不同的浏览器结合它们各自的样式语言来控制页面的显示效果。 经过不断的发展，HTML 中添加了越来越多的属性来满足页面设计者的需求，随着这些属性的增加，HTML 变的越来越杂乱，而且 HTML 页面也越来越臃肿，于是 CSS 便诞生了。 1994 年，哈坤·利提出了 CSS 的最初建议，并决定与正在设计 Argo 浏览器的伯特·波斯（Bert Bos）合作，共同开发 CSS。 1994 年底，哈坤·利在芝加哥的一次会议上第一次正式提出了 CSS 的建议，之后又在 1995 年的 WWW 网络会议上再次提出了 CSS，在会议上伯特·波斯展示了支持 CSS 的 Argo 浏览器，哈坤·利也展示了支持 CSS 的 Arena 浏览器。 同年，W3C 组织（World WideWeb Consortium）成立，该组织对 CSS 的发展很感兴趣，为此还专门组织了一次讨论会。最终 CSS 的全部开发成员都加入了 W3C 组织，并负责 CSS 标准的制定，至此 CSS 的发展走上正轨。

W3C，中文名为“万维网联盟”，也称为“W3C理事会”，由万维网的发明者 蒂姆·伯纳斯·李 于 1994 年 10 月在麻省理工学院计算机科学实验室成立，是 Web 技术领域最具权威和影响力的国际中立性技术标准机构。

发展至今，CSS 总共经历了 4 个版本的迭代：

1) CSS1.0

1996 年 12 月 W3C 发布了 CSS 的第一个版本——CSS1.0（Cascading Style Sheets, level 1）。

2) CSS2.0

1998 年 5 月，CSS2.0 版本正式发布（Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification）。

3) CSS2.1

2004 年 2 月，CSS2.1 正式发布。该版本在 CSS2.0 的基础上略微做了改动，删除了许多不被浏览器支持的属性。

4) CSS3

早在 2001 年，W3C 就着手开始准备开发 CSS 的第三个版本，到目前为止该版本还没有最终定稿。虽然完整的 CSS3 标准还没有最终发布，但各主流浏览器已经开始支持其中的绝大部分特性。

CSS 是 Web 领域的一个突破，它为 HTML 提供了一种描述元素样式的方式，使用 CSS 和 HTML 可以制作出外形优美的网页。总体来说 CSS 具有以下特点：

1) 丰富的样式定义

CSS 提供了丰富的外观属性，可以在网页中实现各式各样的效果，例如：

• 为任何元素设置不同的边框，以及边框与元素之间的内外间距；
• 改变文字的大小、颜色、字体，为文字添加修饰（例如下划线、删除线）；
• 为网页设置背景颜色或者背景图片等等。

2) 易于使用和修改

CSS 的样式信息不仅可以定义在 HTML 元素的 style 属性中，也可以定义在 HTML 文档 标签内的 标签中，还可以定义在专门的 .css 格式的文件中，之后再将其引用到 HTML 文档。 推荐使用最后一种定义方式（定义单独的 .css 格式文件），这样可以将 CSS 样式统一存放，方便后期维护。

3) 多页面应用

前面说了可以将 CSS 样式单独存放在一个 .css 格式的文件中，这个文件不属于任何页面，我们可以在不同的页面引用这个 .css 格式的文件，这样就可以统一不同页面的风格。

4) 层叠

层叠就是指可以对同一个 HTML 元素多次定义 CSS 样式，后面定义的样式会覆盖前面定义的样式。 例如整个站点引用了同样的 CSS 样式文件，但想要调整其中某个页面的某些元素，这时就可以针对想要调整的元素单独定义一份样式文件并引用到页面中。这样后来单独定义的样式就会覆盖前面的样式，在浏览器同样只会看到最后设置的效果。

5) 页面压缩

一个网页其中通常包含大量的 HTML 元素，为了实现某些效果我们往往还需要为这些元素定义样式文件，如果将它们放到一起就会使得我们的 HTML 文档过于臃肿。而将 CSS 样式定义在单独的样式文件中，把 CSS 样式与 HTML 文档分开的话就可以大大减小 HTML 文档的体积，这样浏览器加载 HTML 文档所用的时间也会减少。 另外，CSS 样式可以重复使用，不同的元素可以使用相同的 CSS 样式，这样可以避免定义重复的样式，CSS 样式文件的体积也会相应的减小，从而进一步缩短页面加载的时间。

CSS 样式由一系列规则组成，这些规则由 Web 浏览器解析，然后应用于 HTML 文档相应的元素上。CSS 样式规则由三个部分组成，分别是选择器、属性和值：

• 选择器：由 HTML 元素的 id、class 属性或元素名本身以及一些特殊符号构成，用来指定要为哪个 HTML 元素定义样式，例如选择器p就表示为页面中的所有

  标签定义样式；

• 属性：您希望给 HTML 元素设置的样式名称，由一系列关键词组成，例如 color（颜色）、border（边框）、font（字体）等，CSS 中提供了众多属性，您可以通过 W3C 官网查看；
• 值：由数值和单位或者关键字组成，用来控制某个属性的显示效果，例如 color 属性的值可以是 red 或 #F1F1F1 等。

您可以按照如下图所示的语法规则来定义 CSS 样式：  

图：CSS语法

通过上图可以看出，在 CSS 的语法规则中，属性和值之间需要使用冒号:进行分隔，每个属性和值的组合可以看作一个声明，每个声明的末尾都需要使用分号;作为结尾，属于同一选择器的声明需要使用花括号{ }包裹起来。 上图的语法示例中：

• 选择器 h1 表示要为网页中所有的标签定义样式；
• 属性 color 表示字体颜色，值 blue 则表示将字体设置为蓝色；
• 属性 text-align 表示文本的对齐方式，值 center 则表示将文本的对齐方式设置为居中对齐。

为了使 CSS 更具可读性，您可以在定义 CSS 时每一行代码上只放置一个声明，如下所示：

h1 {
    color: blue;
    text-align: center;
}

提示：CSS 中的属性和大部分值都是不区分大小写的，但 CSS 中的选择器通常区分大小写，例如类选择器 .bianchengbang 和 .BianChengBang 就表示两个不同的选择器。CSS 中的《选择器》有多种不同的类型，后面我们会详细介绍。

选择器由 HTML 元素的 id、class 属性或元素名本身以及一些特殊符号构成，用来指定要为哪个 HTML 元素定义样式。选择器是 CSS 样式规则中重要的组成部分，我们可以将选择器看作是 CSS 样式与 HTML 元素之间的匹配模式，与选择器关联的样式规则会应用于选择器所指定的 HTML 元素上。CSS 中提供了多种不同类型的选择器，您可以根据自己的喜好来选择使用。 本节我们来介绍一下 CSS 中几种常用选择器的定义方式：

通用选择器用星号*表示，它不匹配某个特定的 HTML 元素，而是匹配 HTML 文档中的每个元素。在开发中，我们通常使用通用选择器来清除 HTML 元素中默认的内外边距，如下所示：

* {
    margin: 0 auto;
    padding: 0;
}

注意：虽然通用选择器内的样式规则能够应用于 HTML 文档中的每个元素，但并不建议在生产环境中过于频繁地使用通用选择器。正是因为通用选择器会匹配网页上每个元素的特点，频繁的使用会给浏览器带来太多不必要的压力。

一个完整的 HTML 文档由各式各样的标签组成，而标签选择器可以通过具体的标签名称来匹配文档内所有同名的标签，如下所示：

p {
    color: blue;
}

p选择器能够匹配文档中所有的

标签。

ID 选择器用来匹配 HTML 文档中具有指定 ID 属性的标签，ID 选择器的定义需要用到井号#，后面紧跟 ID 属性的值，如下所示：

#nav {
    color: red;
}

#nav选择器能够匹配文档中具有id="nav"属性的标签。

类选择器可以根据标签的 class 属性匹配具体的 HTML 标签，所有符合条件的标签都会根据选择器内的样式进行格式化。类选择器的定义需要用到一个英文的句号.，后面紧跟 class 属性的值，如下所示：

.black {
    color: black;
}

.black选择器能够匹配文档中所有具有class="black"属性的标签。 由于 class 属性不是唯一的，可以应用于不同的标签，因此您还可以在定义类选择器时指定具体的标签，如下所示：

p.black {
    color: black;
}

p.black选择器仅会将其中的样式应用到所有具有class="black"属性的

标签中，对于其它的具有class="black"属性的标签则没有影响。 另外，一个 HTML 标签中 class 属性可能不止一个，例如：

假如我们要为所有 class 属性包含 info 的元素设置粗体，为所有 class 属性包含 selected 的元素设置红色字体，为 class 属性中既包含 info 又包含 selected 的元素设置蓝色背景，则可以写成下面这样：

.info {
    font-weight:bold;
}
.selected {
    color: red;
}
.info.selected {
    background: blue;
}

这种由多个 class 属性值所组成的类选择器我们可以称之为“多类选择器”，而前面介绍的由单个 class 属性值定义的类选择器可以称为“单类选择器”。

注意：多类选择器中，多个 class 属性之间是紧挨着的（例如 .info.selected），不需要使用空格分开。

当一个

标签嵌套在一个

ul li a {
    text-decoration: none;
}