1、样式剖析
一个样式由两部分组成，网页元素（Selector 选择器）和格式化指令（Declaration Block 声明块）。选择器可能是大标题、一段文本、一张照片等。声明块可以使文本变蓝、给段落加边框等。如：
|
1
2
3
4
|
p { color: red; font-size: 12px;} |
- Selector（选择器）：要进行样式设置的一个或多个元素
- Declaration Block（声明块）：包含选择器要应用的格式化选项。以左括弧（{）开始，右括弧（}）结束，中间包含声明
- Declaration（声明）：声明块中包含的格式化指令，由一个属性和一个值组成，并以分号结束
- Property（属性）：即格式化选项，一种属性由一个单词或用连字符连接的多个单词，表示一种特定的样式，如font-size、color
- Value（值）：属性的具体值，有颜色、长度、URL、关键字几类值类型。值中间有空格的话需要用引号引起来
- CSS书写格式：建议按照上面的例子进行书写，这样便于阅读和修改。声明块中的声明建议按照Mozilla推荐的顺序书写
2、理解样式表
可以把样式放到网页文件的内部或外部，或者混合使用。
外部样式表的好处：独立文件可被浏览器缓存，使网页打开更快；样式集中更便于修改；更改一处，其他使用此样式的网页也同步修改了。
3、内部样式表
放在HTML的<style>标签中，<style>标签一般放在<head>标签中。
也可以使用HTML的style属性在标签内直接定义样式，这种样式称为行内样式。
4、外部样式表
文件一般使用.css作为扩展名。一个网页的样式表可以根据用途分为多个文件，如公共样式表global.css，表单样式表form.css等。
外部样式表只包含CSS声明（属性、值），不包含<style>，因为<style>是HTML标签。
在HTML中引入外部样式表可以使用<link>标签或<style>标签。<link>标签的格式如下：
|
1
|
<link rel="stylesheet" type="text/css" href="css/global.css" /> |
其中：rel为链接类型，type为数据类型（文本文件，包含CSS），href为CSS文件的位置，即URL。
使用<style>标签，在内部使用CSS的import指令，格式如下：
|
1
2
3
|
<style type="text/css">@import url(css/global.css);</style> |
在外部样式表中也可以使用import指令引入其他外部样式表文件。
内部样式表的样式一般放到引用外部样式表的后面。
5、检验CSS
W3C推出了在线检测检验的工具:http://jigsaw.w3.org/cssvalidaor/，Firefox的JavaScript控制台也有相应的提示，Html Validator插件也可用于检测。
6、清除高速缓存
浏览器会缓存网页图片、外部样式表文件等，如果编写外部样式表时样式不起作用，可能是浏览器缓存了相应的文件，清除方法如下：
在浏览器的设置中去掉缓存，或者在刷新时按Ctrl+鼠标点击刷新（Reload)按钮或使用快捷键（IE下为Ctrl+F5，Firefox为Ctrl+Shift+R）。