以前只关心语言代码，对CSS没有深入了解。今天对一个论坛进行改头换面，发现CSS功能的强大，决意学习下，特把精髓总结了一下, 并用CSS把偶的博客改了下。
一、CSS语法
1、CSS定义：层叠样式表单，可以通过简单的更改CSS文件,改变网页的整体表现形式, 在多个页面，可以减少我们的工作量。
2、CSS结构：
一个基本CSS节点示例：
Table { color : red ; background-color：#ff0000; }
名称 元素 冒号 属性 分号 元素 大括号
3、CSS组成：
类：前面以点号.开始，名称自定义。例：.CustomClass{}
ID: 在网页代码中控件的ID。 例：#ButtonID{}
HTML标签。 例：body, a , table, ul, td, input, div{}
4、CSS组合方法：
u 选择符（HTML标签）：
一般是你要定义样式的HTML标签，
例：selector {property: value} (选择符 {属性:值})
u 选择符组（逗号分割）：
你可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式重复定义:
例：h1, h2, h3, h4, h5, h6 { color: green }
u 类选择符（句点）：
在自定类的名称前面加一个点号。
例：p.right {text-align: right} p.center {text-align: center}
.p_right{text-align: right}
u ID选择符（#）：
在自定名称（Html控件ID）前面加一个#号。
例：#ButtonID{ color: green } #TextID{ color: green }
u 包含选择符（空格分隔）（作用域）
对嵌套在其他控件里的控件进行样式定义。
例：div table a{ color: green } 即对“层”里的“表格”里的“超链接”进行样式定义。
u 注释:/* ... */
例：/* 这个是谁定制的*/ /* 文字为黑色 */
u 各种符号嵌套使用：
例：#mainMenu ul li a{ color:#000000; } 运用了包含选择符。
5、样式表的层叠性（继承性）：
不同的选择符定义相同的元素时，要考虑到不同的选择符之间的优先级。
优先级规则：最后加上的优先级最高，重复的会覆盖，不同的会继承前面定义的（优先级低的）。
一般：ID选择符>类选择符>HTML标记选择符
因为ID选择符是最后加上元素上的，所以优先级最高，其次是类选择符。如果想超越这三者之间的关系，可以用!important提升样式表的优先权，例如: p { color: #FF0000!important }
二、CSS在网页中的应用：
1、链入外部样式表文件:
你可以先建立外部样式表文件（.css），然后使用HTML的link对象。示例如下：
<head>
<link rel=stylesheet href=" CSS.css" type="text/css">
</head>
而在XML中，你应该如下例所示在声明区中加入：
<? xml-stylesheet type="text/css" href="CSS.css" ?>
2、定义内部样式块对象:
你可以在你的HTML文档的<HTML>和<BODY>标记之间插入一个<STYLE>...</STYLE>块对象。示例如下：
<head>
<style type="text/css">
<!--
body {font: 10pt "Arial"}
-->
</style>
</head>
3、内联定义:
内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。示例如下：
<p style="background-color:red; color:white">
三、CSS设计网页的经验
1、命名规范：
提倡采用匈牙利命名法。匈牙利命名法关键是：标识符的名字以一个或者多个小写字母开头作为前缀；前缀之后的是首字母大写的一个单词或多个单词组合，该单词要指明变量的用途。
2、用class_name方式写类名。
以前喜欢用class-name写，不过好像两样也没什么差别。但我比较反对用className写类名，因为始终对浏览器大小写敏感的问题抱有怀疑态度。但是id我会写成驼峰式，理由见下一条。
3、样式都用class而不用id。
有三个理由，一，id不可以重复，所以用class的话，可以肆无忌惮的用无数次。二，id的优先级太高，若是写了一个#page_content a {color:#f60} ，那你完蛋了，里面要改链接颜色，都必须加上#page_content才能越过这个优先级。三，id专门留给JS用，这样才符合表现与行为分离的原则。所以id我用驼峰式，也是为了体现这一点。
4、margin和padding，尽量省略最后一个值。
比如margin: 20px 10px 5px 10px; ，左右值是一样的，就应该省略掉最后一个值，写成margin: 20px 10px 5px; 这样到时候要改左右间距，改一个就好，免得改漏了。其实这个问题虽然很细小，但是可以看得出对margin四个值省略规则的熟练程度。
5、按标准写CSS，再针对特定浏览器作hack。
.BorderCol {
float: left;
margin-left: 20px;
}
* . BorderCol {
_display:inline; /*hacked for IE 6*/
}
6、记得加空格。
.class_name { property: value; } 。我个人觉得合理的空格是优秀代码的一个指标。按英文的习惯，标点后面都应该带空格（如果你写This is a pen.That’s a pencil.句点后面不加空格， word里面会有错误提示）。所以既然CSS是外国人发明的，应该按他们的格式来写。类似的，在JS里var a = b + c;里面的空格也应该都要加。
7、适当的层叠（Cascading)或缩进以定义CSS的“作用域”。
啥叫“CSS的作用域”？其实并不是所有的样式都在所有的地方使用。有的样式只用在某一块里面，比如“导航栏”里的“搜索框”，可能应该写成：
.nav .search {}
可以用以下三种方式将样式表加入您的网页。而最接近目标的样式定义优先权越高。高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义