谈及网页，必有装扮。想美化网站样式、怎能绕过 CSS 样式？本章节皆为 CSS 基础内容。对于 “打地基” 这种事，千万别含糊！
在第 1 章的示例 1-5 中，我们看到页面的头部区域添加了 <style></style> 标签以及一些 CSS 代码。
如果将该示例中的 <style> 标签对及其中的 CSS 代码删掉，运行结果将如图 2-1 所示。
为方便对比，将示例 1-5 的运行结果在此再次显示，如图 2-2 所示。
图 2-1 的运行结果是 <div> 没有经过任何打扮的土生土长的样子，而图 2-2 的运行结果则是经过了打扮后的样子。
CSS 可以让我们获得满意的页面展示效果
但要达到这个目的，必须先满足两个条件：
一是正确地定义 CSS 样式表；
二是在 HTML 页面中正确地使用 CSS
接下来，将带领大家走进迷人的 CSS 世界。
2.1 CSS 概述
CSS（Cascading Style Sheet）
中文意思是层叠样式表或级联样式表，它是一种格式化网页的标准方式，用于控制网页的样式，并允许样式信息与网页内容相分离的一种技术。CSS 样式定义了如何显示 HTML 元素。
对一个 HTML 元素可以使用多种方式设置样式，一个元素的多重样式将按特定的规则层叠为一个。元素的多重样式中如果存在对同一种表现形式的不同设置，将引起样式冲突，冲突的样式在层叠的过程中将按优先级来确定。CSS 样式的冲突与解决将在本章最后一节中进行详细介绍。
01
CSS 的来源
早期的网页中并没有 CSS，只有一些 HTML 标签。
这些 HTML 标签最初只包含很少的显示属性，主要被设计为用于定义网页内容，对网页的表现形式并没有给予特别的关注。随着 Web 技术的发展，Web 得到越来越广泛的应用，随之而来的就是 Web 用户对网页表现形式的抱怨。
为解决网页表现形式的问题，HTML 标签添加了越来越多的显示属性，同时，W3C 组织也把许多用于表现样式的标签加入到 HTML 规范中，如 font、b、strong、u 等。
在这种情况下，当你打开一个界面美观的网页查看该网页 HTML 源码时，你将会发现整个网页的标签包含着大量用于显示设置的属性，以及到处充斥着 <font>、、<u>、<table> 等仅仅只是为了修饰和布局的标签，这些代码无法复用，因此在整个网页中被迫重复使用，在光鲜亮丽的外表下，隐藏着代码的臃肿不堪！令人无奈的是那个时代几乎所有网站的页面都存在这样糟糕
这些仅仅用于表现的标签被大量使用，不但使网页结构越来越复杂，而且网页的体积也急剧增大，严重影响了网页的维护以及浏览速度。
试想一下，若某一天你要修改网页的文字的颜色，就只能把网站中所有用来修饰文字的 <font> 标签找出来一一修改，一段时间后，可能你又需要将网页的文字修改为其他颜色，这样又得重复前面的工作。可以想象，使用这种方式修改网页元素的格式，不管是对开发人员，还是对维护人员，都将是一个噩梦！由此可见，在一个网页中混杂大量结构标签与表现标签，必将为以后的维护工作埋下隐患！
为解决这些弊端，W3C 组织对 Web 标准引入了 CSS 规范。这套规范明确规定着：HTML 标签用于确定网页的结构内容，而 CSS 则用于决定网页的表现形式。
02
CSS 的发展历程
CSS 的发展经过了以下 6 个历程。
① CSS 最早被提议是在 1994 年，最早被浏览器支持则是在 1995 年。
② 1996 年 12 月， W3C 发布了 CSS1.0 规范。
③ 1998 年 5 月，W3C 发布了 CSS2.0 规范。
④ 2004 年 2 月，W3C 发布了 CSS2.1 规范。
⑤ 2001 年 5 月，W3C 开始进行 CSS3 标准的制定。
⑥ CSS3 的开发朝着模块化发展，以前的规范在 CSS3 中被分解为一些小的模块，同时 CSS3 中加入了许
多新的模块。自 2001 年一直到现在，不断有 CSS3 模块的标准发布，但到目前为止，有关 CSS3 的部分标准
还没有最终定稿。
03
CSS 的优点
使用 CSS 展现网页有许多优点，归纳来说主要具有以下 4 点。
（1）将格式和结构分离
CSS 和 HTML 各司其职，分工合作，分别负责格式和结构。格式和结构的分离，有利于格式的重用及网页的修改维护。
（2）精确控制页面布局
CSS 扩展了 HTML 的功能，能够对网页的布局、字体、颜色、背景等图文效果实现更加精确的控制。
（3）可制作体积更小、下载更快的网页
使用 CSS 后，我们不但可以在同一个网页中重用样式信息，当将 CSS 样式信息制作为一个样式文件后，还可以在不同的网页中重用样式信息。此外，还可以极大地减少表格布局标签、表现标签以及许多用于设置格式的标签属性。这些变化极大地减小了网页的体积，从而使网页的加载速度更快。
（4）可实现许多网页同时更新
利用 CSS 样式表，可以将站点上的多个网页都指向同一个 CSS 文件，从而在更新这个 CSS 文件时，实现对多个网页的同时更新。
2.2 定义 CSS 的基本语法
CSS 对网页的样式设置是通过一条条的 CSS 规则来实现的
每条 CSS 规则包括两个组成部分：一是选择器；二是一条或多条属性声明。一条以上的 CSS 规则就构成了一个样式表。定义 CSS 的基本语法：
选择器 {
属性 1: 属性值 1;
属性 2: 属性值 2;
…
}
语法说明：选择器指定了对哪些网页元素进行样式设置。
所有可以标识一个或一类网页元素的内容都可以作为选择器来使用，比如 HTML 标签名、元素的类名、元素的 ID 名等。
根据选择器的构成形式，可将选择器分为基本选择器和复合选择器，这两类选择器将在接下来的两节内容中详细介绍。
每条属性声明实现对网页元素进行某种特定格式的设置，由一个属性和一个值组成，属性和值之间使用冒号连接，不同声明之间用分号分隔，所有属性声明放到一对大括号中。需要注意的是，CSS 中的属性必须符合 CSS 规范，不能随意创建属性名；属性的取值也必须符合合理的要求，比如 color 属性只能取表示颜色的英文单词、十六进制、RGB 或 RGBA 等来表示的颜色值，而不能自己想当然地给一个属性值。CSS 常用的属性名及其取值请参见第 3 和第 4 等章节。
为了增强 CSS 样式的可读性和维护性，一般每行只写一条属性声明，并且在每条声明后面使用分号结尾
假设我们现在要对HTML页面中某个div元素进行样式设置，例如：文字颜色为蓝色，区块显示红色边框。
根据上述定义 CSS 语法，满足要求的 CSS 代码如下：
div {
color: blue;
border: 1px solid red;
}
上述CSS代码使用了div元素作为选择器，它包含两条属性声明，分别实现了文字颜色和边框样式的设置。上述 CSS 若想实现对页面中 div 元素的样式控制，就必须将该样式表应用到 HTML 页面中。
将 CSS 应用到 HTML 页面主要有三种方式，分别为：
- 内联式（也叫行内样式）
- 内嵌式（内部样式表）
- 链接式（外部样式表）
这些应用方式将在本章 2.7 节中详细介绍。在介绍这些方式之前，我们所有示例将使用内嵌式（内部样式表）。
上述 CSS 代码实现了对 div 元素的样式定义，但到目前为止，它并没有对任何网页中的 div 元素产生影响。若想实现上述 CSS 代码对页面中的 div 元素的样式控制，格式如下：
<style type="text/css">
选择器 {
属性 1: 属性值 1；
属性 2: 属性值 2；
...
}
</style>
在 HTML5 中，也可以省略“type”属性，直接写成 <style>。下面使用内嵌式将前面定义的 div 样式应用到 HTML 页面中，如示例 2-1 所示。
【示例 2-1】使用内嵌式应用样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 使用内嵌式应用样式 </title>
<!-- 内嵌式应用 CSS：在头部区域添加 style 标签对包含 CSS 代码 -->
<style>
div { /* 定义 div 元素的样式 */
color: blue;
border: 1px solid red;
}
</style>
</head>
<body>
<div> 妙味课堂 www.miaov.com</div>
</body>
</html>
上述代码中的 <!-- --> 表示 HTML 注释，/ / 表示 CSS 注释。上述代码在 Chrome 浏览器中的运行结果如图 2-3 所示。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。