注意要点：
1、ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
2、class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
3、不要在属性值与单位之间留有空格。假如你使用 "margin-left: 20px" 而不是 "margin-left: 20 px"。
4、如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。
5、当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
- 浏览器缺省设置
- 外部样式表
- 内部样式表（位于 <head> 标签内部）
- 内联样式（在 HTML 元素内部）
一、CSS Text(文本)
1、文本的对齐方式：text-align
h1 {text-align:center;} p.date {text-align:right;} p.main {text-align:justify;}
2、文本修饰，text-decoration 属性用来设置或删除文本的装饰。
h1 {text-decoration:overline;} h2 {text-decoration:line-through;} h3 {text-decoration:underline;}
3、文本转换，文本转换属性是用来指定在一个文本中的大写和小写字母。
p.uppercase {text-transform:uppercase;} p.lowercase {text-transform:lowercase;} p.capitalize {text-transform:capitalize;}
4、文本缩进属性，是用来指定文本的第一行的缩进
p {text-indent:50px;}
5、指定字符之间的空间，演示了如何增加或减少字符之间的空间
h1 {letter-spacing:2px;} h2 {letter-spacing:-3px;}
6、指定行与行之间的空间，如何指定在一个段落中行之间的空间
p.small {line-height:70%;} p.big {line-height:200%;}
7、增加单词之间的空白空间，如何增加一个段落中的单词之间的空白空间
p{ word-spacing:30px;}
8、在元素内禁用文字环绕
p{white-space:nowrap;}
9、垂直对齐图像
img.top {vertical-align:text-top;} img.bottom {vertical-align:text-bottom;}
10、添加文本阴影
h1 {text-shadow:2px 2px #FF0000;}
二、CSS Fonts(字体)
CSS字体属性定义字体，加粗，大小，文字样式。
1、字体系列，font-family 属性设置文本的字体系列。如果字体系列的名称超过一个字，它必须用引号，如Font Family："宋体"。多个字体系列是用一个逗号分隔指明：
p{font-family:"Times New Roman", Times, serif;}
2、字体样式，主要是用于指定斜体文字的字体样式属性
- 正常 - 正常显示文本
- 斜体 - 以斜体字显示的文字
- 倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）
p.normal {font-style:normal;} p.italic {font-style:italic;} p.oblique {font-style:oblique;}
3、设置字体大小像素，设置文字的大小与像素，让您完全控制文字大小
h1 {font-size:40px;} h2 {font-size:30px;} p {font-size:14px;}
4、用em来设置字体大小。为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素。
注意：em的尺寸单位由W3C建议。em和当前字体大小相等。在浏览器中默认的文字大小是16px。因此，1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em
h1 {font-size:2.5em;} /* 40px/16=2.5em */ h2 {font-size:1.875em;} /* 30px/16=1.875em */ p {font-size:0.875em;} /* 14px/16=0.875em */
5、使用百分比和EM组合，在所有浏览器的解决方案中，设置 <body>元素的默认字体大小的是百分比：
body {font-size:100%;} h1 {font-size:2.5em;} h2 {font-size:1.875em;} p {font-size:0.875em;}
三、CSS 链接(link)
四个链接状态是：
- a:link - 正常，未访问过的链接
- a:visited - 用户已访问过的链接
- a:hover - 当用户鼠标放在链接上时
- a:active - 链接被点击的那一刻
a:link {color:#FF0000;} /* unvisited link */ a:visited {color:#00FF00;} /* visited link */ a:hover {color:#FF00FF;} /* mouse over link */ a:active {color:#0000FF;} /* selected link */
1、文本修饰，text-decoration 属性主要用于删除链接中的下划线
a:link {text-decoration:none;} a:visited {text-decoration:none;} a:hover {text-decoration:underline;} a:active {text-decoration:underline;}
2、背景颜色属性指定链接背景色
a:link {background-color:#B2FF99;} a:visited {background-color:#FFFF85;} a:hover {background-color:#FF704D;} a:active {background-color:#FF704D;}
四、CSS 列表样式(ul)
CSS列表属性作用如下：
- 设置不同的列表项标记为有序列表
- 设置不同的列表项标记为无序列表
- 设置列表项标记为图像
<html> <head> <style> ul.a {list-style-type:circle;} ul.b {list-style-type:square;} ol.c {list-style-type:upper-roman;} ol.d {list-style-type:lower-alpha;} </style> </head> <body> <p>Example of unordered lists:</p> <ul class="a"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> <ul class="b"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> <p>Example of ordered lists:</p> <ol class="c"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="d"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol> </body> </html>
1、要指定列表项标记的图像，使用列表样式图像属性
ul {list-style-image:url('sqpurple.gif');}