CSS 概览
CSS 简介
层叠样式表（Cascading Style Sheet，CSS）是一种定义指定 HTML 文档视觉表现的标准。
HTML 文档的视觉显示包含了很多变量：字体、颜色、间距等，CSS 标准列举了这些变量，我们称之为样式属性。CSS 定义了这些属性以指定字体、颜色、外边距、边距、背景图片、文本对齐方式、元素尺寸和元素位置：
font-weight: bold
为了全面地描述一个元素的视觉表现，通常需要指定不止一个属性：
margin-left: 10%;
text-indent: .5in;
font-size: 12pt;
有两种方式将一组定义视觉表现的 CSS 属性和对应的 HTML 元素关联在一起，第一种是给每个单独的 HTML 元素设置 style 属性值，称为内联样式：
<p style="margin: 20px; border: solid red 2px;">
这是一个测试段落
</p>
但是和客户端 JavaScript 一样，我们更推荐将 HTML 元素和 CSS 样式分开，将 CSS 样式定义在一个样式表中，样式表通过选择器将样式属性和使用选择器描述的一组 HTML 元素关联起来。CSS 样式表的基本元素是样式规则，它们由选择器和包裹在一对「{}」中的CSS属性和值所组成：
p {
text-indent: .5in;
}
.warning {
background-color: yellow;
border: solid black 5px;
}
用 <style> 和 </style> 标签把 CSS 样式表包起来放在 <head> 标签里，它就和 HTML 元素关联起来了：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin-left: 30px;
margin-right: 15px;
background-color: #ffffff;
}
p {
font-size: 24px;
}
</style>
</head>
<body>
<p>测试段落</p>
</body>
</html>
当一个样式表需要在多个页面中使用时，通常将其保存到单独文件中，比如 mystyle.css，该文件中不包含任何 HTML 标签，要引入这个样式表文件，需要通过 <link> 标签：
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="mystyle.css" type="text/css">
</head>
以上就是 CSS 定义和引入的方式。
层叠的含义
层叠样式表中「层叠」的含义：
- Web 浏览器的默认样式表
- 文档的样式表
- 每个独立HTML元素的内联样式
以上样式层叠优先级由低到高，HTML 元素的最终样式是通过这种层层叠加而来。
为了显示文档元素，Web浏览器必须组合元素的 style 属性，包括来自文档样式表中所有匹配的选择器的样式值。计算的结果是一组实际用于显示元素的样式属性和值，这组值就是元素的「计算属性」。
CSS 历史
CSS 是一个相对较老的标准了，CSS 1 在 1996 年 12 月被采纳，定义了具体的颜色、字体、外边距、边框和其他基本样式，CSS 2 在 1998 年 5 月被采纳，它定义了很多高级特性，最著名的就是支持元素的绝对定位。后面还有一个修正版 CSS 2.1，目前最新的标准是 CSS 3，在该版本中，CSS 规范被拆成各种各样的专门化模块分别通过标准化进程。
复合属性
某几个属性可以组合成一个复合属性，比如 font-family、font-size 和 font-weight 可以组合成 font 属性：
font: bold italic 24pt helvetica;
类似的复合属性还有 border、margin、padding。
非标准属性
当浏览器厂商实现非标准 CSS 属性时，会在属性名前加一个厂商前缀，Firefox 使用 -moz-，Chrome 使用 -webkit-，而 IE 使用 -ms-，它们甚至使用这种方式实现将来会标准化的属性，一旦标准化后再将前缀移除：
.radius10 {
border-radius: 10px; /* 针对现代浏览器 */
-moz-border-radius: 10px; /* 针对 Firefox 3.x */
-webkit-border-radius: 10px; /* 针对 Safari 3.2 和 4 */
}
No Comments