一. 概述
CSS指层叠样式表，定义了如何显示HTML元素。样式通常存储在样式表中，可以解决内容和表现分离的问题，极大提高工作效率。外部样式表通常存储在CSS文件中，多个样式定义可层叠为一。
样式解决了一个普遍的问题
HTML标签原本被设计为用于定义文档内容，同时文档布局由浏览器来完成，而不使用任何的格式化标签。但由于两个主要的浏览器不断地将新的HTML标签和属性添加到HTML规范中，导致创建文档内容清晰地独立于文档表现层的站点变得越来越难，样式拯救了一切。样式表极大地提高了工作效率
通过仅仅编辑一个简单的CSS文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。多重样式将层叠为一个
所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，4的优先权最高。
- 浏览器缺省设置
- 外部样式表
- 内部样式表（位于<head>标签内部）
- 内联样式（在HTML元素内部）
二. 基础语法
CSS规则由两个主要的部分构成：选择器，以及一条或多条声明：
selector {declaration1; declaration2...}
如以下代码的作用是将h1元素内的文字定义为红色，且字体大小为14像素。
h1 {
color:red;
font-size:14px;
}
1. 继承
根据CSS，子元素从父元素继承属性：
body {
font-family:Verdana, sans-serif;
}
根据继承，子元素将继承最高级元素所拥有的属性（如p, td, ul, ol, li, dl, dt, dd），不需要另外的规则。但是对于一些不支持继承的老浏览器，则需要这样写：
body {
font-family:Verdana, sans-serif;
}
p, td, ul, ol, li, dl, dt, dd {
font-family:Verdana, sans-serif;
}
如果你希望段落的字体并不跟随父元素，则可以这样写：
body {
font-family:Verdana, sans-serif;
}
td, ul, ol, li, dl, dt, dd {
font-family:Verdana, sans-serif;
}
p {
font-family:Times, "Times New Roman", serif;
}
2. 派生选择器
派生选择器允许你根据文档的上下文关系来确定某个标签的样式，通过合理地使用派生选择器，我们可以使HTML代码更加简洁：
li strong {
font-style:italic;
font-weight:normal;
}
<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>
<ol>
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>我是正常的字体。</li>
</ol>
在上面的例子中，只有li元素中的strong元素的样式为斜体字，无需为strong元素定义特别的class或者id，代码更加简洁。
3. id选择器
id选择器可以为标有特定id的HTML元素指定特定的样式。
#red {color:red;}
#green {color:green;}
<p id = "red">这个段落是红色。</p>
<p id = "green">这个段落是绿色。</p>
也可以用id作为派生选择器：
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
#sidebar h2 {
font-size: 1em;
font-weight: normal;
font-style: italic;
margin: 0;
line-height: 1.5;
text-align: right;
}
id选择器也可以不被用来创建派生选择器，从而独立发挥作用：
#sidebar {
border:1px dotted #000;
padding:10px;
}
这样定义的div只会拥有一个像素宽的黑色点状边框，同时其周围有10个像素宽的内边距。
4. 类选择器
CSS中，类选择器以一个点号显示：
.center {text-align:center}
<h1 class = "center">
This heading will be center-aligned
</h1>
<p class = "center">
This heading will be center-aligned
</p>
和id一样，class也可以被用作派生选择器：
.fancy td {
color:#f60;
background:#666;
}
上面的例子中，类名为fancy的更大的元素内部的表格单元都会以灰色背景显示橙色文字（适用于比td更大的元素）。
td.fancy {
color:#f60;
background:#666;
}
上面的例子中，类名为fancy的表格单元将是带有灰色背景的橙色（仅适用于td）。
5. 属性选择器
为拥有指定属性的HTML元素设置样式，而不仅限于class和id属性。为不带有class或id的表单设置样式的时候特别有用。
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
font-family: Verdana, Arial;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
font-family: Verdana, Arial;
}
<form name="input" action="" method="get">
<input type="text" name="Name" value="Bill" size="20">
<input type="text" name="Name" value="Gates" size="20">
<input type="button" value="Example Button">
三. 创建一个CSS
插入样式表的方法有三种：
1. 外部样式表
当样式需要应用于很多页面时，外部样式表是理想的选择。在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观。每个页面使用<link>标签链接到样式表，<link>标签在文档的头部：
<head>
<link rel = "stylesheet" type = "text/css" href = "mystyle.css" />
</head>
浏览器会从文件mystyle.css中读到样式声明，并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑，文件中不能包含任何的HTML标签，样式表应该以.css扩展名进行保存：
hr {color: red;}
p {margin-left:20px;}
body {background-image:url("images/back.gif");}
2. 内部样式表
当单个文档需要特殊的样式时，应使用内部样式表。可以使用<style>标签在文档头部定义内部样式表：
<head>
<style type = "text/css">
hr {color: red;}
p {margin-left: 20px;}
body {background-image: url("images/back.gif");}
</style>
</head>
3.内联样式
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势，当样式仅需要在一个元素上应用一次的时候才用这种方法：
<p style = "color: red; margin-left: 20px">
a paragraph
</p>
四. CSS背景
Background-color不能继承，其默认值是transparent，即透明，如果一个元素没有指定背景色，则背景为透明的。
如果需要在页面上对背景图像平铺，可以使用background-repeat属性，导致图像在x、y或者都平铺。
如果需要背景定位，则使用background-position属性，将背景图像放在相应位置，当然，也可以设定百分数值，如：
body {
background-image: url('/I/aa.gif');
background-repeat: no-repeat;
background-position: 66% 33%;
}
上面的代码会放在水平2/3、竖直1/3处。
如果文档比较长，那么文档向下滚动时，背景图像也会随之滚动，当文档滚动到超过图像的位置时，图像会消失，这时候，就可以通过background-attachment属性防止滚动，以确保图像对于可视区是固定（fixed）的。
body {
background-image: url('/I/aa.gif');
background-repeat: no-repeat;
background-attachment:fixed;
}
五. CSS框模型
在CSS中，width和height指的是内容区域的宽度和高度，增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
如果希望一个元素框达到100个像素，则需要将内容的宽度、内边距和外边距设置好对应数值。
#box {
width: 70px;
margin: 10px;
padding: 5px;
}
- 外边距合并：当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于max(两个合并的外边距)。
六. CSS定位机制
div、h1或p元素常常被称为块级元素，意味着这些元素显示为一块内容，即“块框”，而span、strong等元素称为“行内元素”，即行内框。
CSS有三种基本的定位机制：普通流（默认）、浮动和绝对定位。
块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来的。
行内框在一行中水平布置，可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框，它的高度总是足以容纳它所包含的所有行内框。不过，设置行高可以增加这个框的高度。
position属性有以下四种类型：
static
元素框正常生成，块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。relative（相对于一个元素的正常位置来定位）
元素框偏移某个距离，元素仍保持未定位前的状态，它原本所占的空间仍保留。absolute（利用绝对值对元素定位）
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中另一个元素或者初始包含块。元素原先在正常文档流所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。fixed（相对于浏览器窗口对元素进行定位）
类似于absolute，不过其包含块是视窗本身。
1. 相对定位
如果对一个元素进行相对定位，则该元素将会相对于自己的起点进行移动。
在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间，因此，移动元素会导致它覆盖其他框。
2. 绝对定位
设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位。绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么他的位置相对于最初的包含块（画布或者HTML元素）。
绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素。可以通过设置z-index属性来控制这些框的堆放次序。（z越大，优先级越高）
3. 浮动
浮动的框可以向左或者向右移动，知道它的外边缘碰到包含框或者另一个浮动框的边框为止。
浮动框不在文档的普通流中，因此文档的普通流中的块框表现得就像浮动框不存在一样。
但是，float的元素是不会遮挡住content的，框内的content会自动避开float的元素，使得content始终可见。（当然，框还是那么大，只不过content会避开float而已）
Clear会使图像的旁边不允许出现浮动元素。
