【CSS】CSS 私家库
1. body
养成在 body 中设置背景色和颜色的习惯，因为有的用户会自定义浏览器的背景色。
2. 字体的选择
| 通用字体名称 | 字体类型 | 示例 | 应用 |
|---|---|---|---|
| serif | 带有衬线字体 | Times | 印刷 |
| sans-serif | 无衬线字体 | Arial | 网页 |
| monospace | 固定宽度字体 | Courier | |
| cursive | 模拟手写字体 | Comic Sans | |
| fantasy | 用于标题等的装饰字体 | Impact |
3. 通用选择器
通用选择器用一个星号（“*”）表示，作用类似于匹配文档中全部元素类型的通配符，用于设置整个文档的默认值。“*”与“body”元素应用默认样式稍有不同，因为“*”应用于每个元素，不像<body>按规则继承。
4. 使用 子选择器 与 兄弟选择器 减少对于标记中类型的依赖
a. 子选择器：td>b 将会选择作为<td>元素的直接子元素的<b>元素
b. 兄弟选择器：h1+p 将仅仅会选择<h1>元素后出现的<p>元素
注意：CSS选择器在使用 class 和 id 时会比使用子选择器以及兄弟选择器时要快。使用id时尤其要快。
5. 纯 CSS 三角形绘制（转载：http://www.jb51.net/article/55519.htm）
6. :before 与 :after 伪元素
能够在选择器中定义的元素的每个实例之前或之后添加 content。
content 有多种取值，可以向文档中添加不同类型的内容。
6.1 添加计数器
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Counters</title>
<style type="text/css">
/* Style sheet for CSS counters */
body {
counter-reset: chapter;
counter-reset: section; }
h1:before {
content: "Chapter " counter(chapter) ": ";
}
h1 {
counter-increment: chapter;
counter-reset: section;
}
h2:before {
content: counter(chapter) "." counter(section) " ";
}
h2 {
counter-increment: section;
}
</style>
</head>
<body>
<h1> Introducing Web Technologies</h1>
<h2>Introducing HTML</h2>
<h2>Introducing CSS</h2>
<h2>Introducing XHTML</h2>
<h1> Structure of Documents</h1>
<h2>Text</h2>
<h2>Lists</h2>
<h2>Tables</h2>
<h2>Forms</h2>
</body>
</html>
css
body {
counter-reset : chapter;
counter-reset : section;
}
h1:before {
content : "Chapter " counter(chapter) ": ";
}
h2:before {
content : counter(chapter) "." Counter (section) " ";
}
h1 {
counter-increment : chapter;
counter-reset : section;
}
h2 {
counter-increment : section;
}
上例可以在文档中将 h1 h2 标题自动编码。
7. display 与 visibility 辨析
display：强制使一个元素成为块级元素或行内元素，display 的 hide 属性会让盒子在视野中消失，并且不会影响页面布局，就好像这个盒子被删除了；
visibility：从视野中隐藏一个盒子，但是依然影响页面布局，就好像盒子隐身了；
8. 定位问题
相对定位(relative)：仍属于正常流（原来的位置不会被后面的元素所占），定位相对于原来的位置，应用时由于盒子间的遮盖需要注意两个问题：a. 为盒子设置背景 b. 为盒子设置 z-index 属性来让固定的盒子在页面上方。
绝对定位(absolute)：将元素从正常流中抽出（原来的位置会被后面的盒子占领），定位相对于包含它的块级元素，绝对定位的元素总是出现在相对定位元素之上。
固定定位(fixed)：不仅将元素从正常流中抽出，而且会让盒子在用户上下滚动页面的时候也布移动。
流动(float)：float 属性可以让元素从正常流中抽离出来，其他元素围绕该元素流动。注意：任何时候使用 float 属性，必须设置 width 属性以指定盒子应该占据的宽度。
9. CSS3 新特性
稳定特性：圆角，投影，多列文本显示（可在 CSS3，PLEASE 网站上实时显示效果，并兼顾各浏览器不同语法，链接 http://css3please.com/）
支持尚未完全特性：动画，过渡，2D/3D变形
10.清除浮动的小代码块
/* Start of "Micro clearfix" */
.cf { zoom: 1; }
.cf:before,
.cf:after { content: ""; display: table; }
.cf:after { clear: both; }
/* End of "Micro clearfix" */在css文件中加入这段代码块，body的前后分别加上 :before， :after 即可。