作者：gnuhpc
出处：http://www.cnblogs.com/gnuhpc/
注：本学习笔记只是自己的一些备忘，初学者的东西不具有参考性，请到W3School（http://www.w3school.com.cn/css/index.asp ）进行系统学习。
学习CSS我使用的工具是Visual CSS，可以实现同步预览，快速学习编辑CSS。
1.CSS的作用 ：用来规定网页中的内容的显示方式，避免给HTML增加很多的属性而将代码变得臃肿。
2.CSS的应用方式
（1）内联样式：在标签中包括一个style属性，并在其后定义CSS属性及值，例如：
Hello world!
（2）文档级样式表：将一系列样式规则罗列在HTML文档开头，处于内的之间，它可以改变外部样式表中定义的一个或多个规则，创建一个个性化的文档，适用于单个HTML文件。
（3）外部样式表：将样式定义放置于分离的文档中，在各个需要应用该样式表的HTML通过在内的标签引入这个分离文档，例如。每次打开页面都需要下载这个表格，所以要尽量减小样式表的容量。
注意：三种样式表作用域不同，同时存在时的页面处理原则为：
- “近优先于远”——内联样式>文档级样式。
- “局部优先于整体”——定义为标签的类的属性>为标签总体进行定义的属性
- “特殊优先于一般”——上下文样式>为标签总体进行定义的属性
- “后优先于前”——后边指定的属性>前面指定的属性
3.CSS语法 ：
选择符+属性（属性名+属性值）。
- selector：表示受样式规则影响的HTML标记元素的名称，由于XHTML中规定标签都为小写，CSS2则也建议为selector为小写。
- property+value：具体定义各种样式属性。
例如：
h1{
color:red;
font-size:14px;
}
4.selector详解
（1）标签选择器：最简单的直接对HTML标签进行操作的选择器，其中有三种特殊的选择器：
1）通配符选择器：将样式应用到文档中的所有元素中：
* {
color:red;
font-style:italic
}
2）属性选择器：将样式应用到具有某一个特殊属性的标签中：作用于align属性为right的
元素
Div[alige=right]{
color:black;
font-style:italic;
}
3）群组选择器：将几个便签相同的选择器写在一起：
p,u1,u2,u3 {
color:red;
font-style:italic
}
4）
（2）类选择器：处理具有统一名称但是有不同格式的标签时使用。在标签中使用 class=类名 就可以指明使用该选择器规定的样式了。
1）常规类：标签名.类名{}，例如：
font.big{
font.size:18pt;
}
font.small{
font.size:10pt;
}
使用时：
Hello, A
Hello, B
2）一般类：不与特定标签相连，以.为前缀定义。
3）伪类：用于特殊用途，最常用的是超链接的3种状态（在此只讨论这三种状态）：未访问、正被访问、已访问。定义方式为：a:类名{}。其中类名为link/active/visited。在HTML中使用a标签进行使用。
（3）ID选择器：ID是唯一的选择符，#id 名称 {}，使用时 id=”类别名”方法调用，用于定义大结构，如logo、nav、content、copyright。也就是说id需要具有唯一性的元素使用，尽量在外围使用，而class具有可重复性，尽量在结构内部使用。id是唯一的，并且是父级的，而class是可重复的，并且是子集的。 一般用#father .child{}来将所有class变成id的子孙级，便于后期维护和修改。也可以使用群组方式连接。
例如：
#main p
{
color:#000;
font-size:18pt;
}
（4）派生选择器：或叫做上下文选择器 (contextual selectors)，派生选择器允许你根据文档的上下文关系来确定某个标签的样式，无需指定class或者id。通过合理地使用派生选择器，我们可以使 HTML 代码变得更加整洁。你希望列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：
li strong{
font-style: italic;
font-weight: normal;
}
使用：
- 我是斜体字。这是因为 strong 元素位于 li 元素内。
- 我是正常的字体。
5.CSS属性：大多使用派生选择器形式来定义。
6.CSS设计方法
（1）继承：允许样式不仅可以应用于某个特定的元素还可以应用到它的后代中。可以自己使用important!定义优先级，注意其总是放在规则声明的最后，分号之前。
（2）盒模型：假设HTML元素都可以装在一个矩形框内，由内到外依次是内容、间距、边框、边距。IE和Firefox对盒模型的解释不一致。这是一个充满相对性的概念，比较重要。
background-color将填满border内部的全部范围；background-image默认以图片左上角对齐border内部左上角点，然后完整显示整个图片（超出部分不予显示），如果图片尺寸不足铺满整个范围，图片默认重复自己直至铺满或超出范围； background-image将叠加到background-color之上；通过指定图片的对齐方式，可以改变background-image的位置；
通过以上这些规则的组合，就能在有限的元素组合下，实现各种修饰性效果。
举例：背景色与背景图的合成、图片和文字的分离后合成。