为元素命名：
在分配ID和类名的时候，一定要尽可能的保持名称与表现方式无关！
因此，应该根据“他们是什么”来为元素命名，而不应该根据“他们的外观如何”来命名。在书写类名和ID的时候要注意大小写。我们建议采用完全小写的类名和ID，多个旦夕之间用连字符分隔，例如，andy-budd比andyBudd清楚得多。
选择ID还是类：
一般原则是，类应该应用于该面上相似的元素，这些元素可以出现在同一个页面上多个位置，而ID应该应用于不同的唯一的元素。其实一般来说，应用类的机会大很多，只有在目标元素非常独特，绝对不会对网站上的其他地方的别的东西使用这个名称是才会使用ID。换句话说，就是在绝对确定这个元素只会出现一次的情况下才会使用ID。如果你认为以后会使用相似的元素那么你就使用类。但是也不可陷入“多类症”，应该类名和层叠结合使用来达到目的。
DIV和span：
许多人误认为DIV没有语义，但是，DIV实际上代表部分（division），他可以将文档分为几个有意义的区域。
DIV可以对会计元素进行分组，而span可以用来对行内元素进行分组或标识。
HTML的不同版本：
HTML4.01在1999年成为推荐标准，这是大多数人现在使用的HTML版本。2000年1月，W3C发布了HTML4.01的XML版本，并命名为XHTML1.0。它HTML4.01的主要差异是它遵循XML编码约定，这意味着与常规的HTML不同，所有的XHTML属性必须包含引号，所有的元素必须封闭。
文档类型（DTD），DOCTYPE切换和浏览器模式：
DTD：
DTD是一组机器可读的规则，他们定义了XML或HTML的特定版本中允许有什么不允许有什么。在解析网页的时候，浏览器将使用这些规则检查网页的有效性并且采取相应的措施。浏览器通过分析页面的DOCTYPE声明来了解要使用哪个DTD，由此知道要使用HTML的哪个版本。
DOCTYPE：
DOCTYPE是指在HTML文档开头处的一行或两行代码，他描述使用哪个DTD，如下面的示例描述的是使用XHTML 1.0 Strict的DTD：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
DOCTYPE通常--但不总是--包含指定DTD文件的DTD。例如HTML5就不需要URL，浏览器一般不读取这些文件（.dtd文件），而是只识别常见的DOCTYPE声明。
DOCTYPE当前有两种风格：严格（strict）和过渡（transitional）。顾名思义，过渡DOCTYPE的目的是帮助开发人员从老版本迁移到新版本。因此，HTML4.01和XHTML1.0的过渡版本仍然允许使用废弃的元素，比如font元素。但这些语言的严格版本禁止使用废弃的元素。
浏览器模式：
当年浏览器厂商创建与标准兼容的浏览器时，他们希望确保向后兼容性。为了实现这一点他们创建了两种呈现模式：标准模式和混杂模式。在标准模式下，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老师浏览器的行为以防止老式站点无法工作。
一个比较典型的例子就是盒模型。
具体内容参见我的博客：http://www.cnblogs.com/ttcc/p/3849515.html
DOCTYPE切换：
浏览器根据DOCTYPE的存在与否以及使用的哪种DTD来选择要使用什么呈现方式。
如果XHTML文档包含形式完整的DOCTYPE，那么它一般使用标准模式呈现。
对于HTML4.01文档，包含严格（strict）DTD的DOCTYPE常常导致页面以标准模式呈现。
包含过渡（transitional）DTD和URL的DOCTYPE也导致页面以标准模式呈现，但是有过渡DTD但是没有URL的会导致页面以混在模式呈现。
DOCTYPE不存在或者形式不正确的会导致HTML和XHTML以混杂模式呈现。
根据DOCTYPE是否存在选择呈现模式，被称为DOCTYPE切换或DOCTYPE侦测。并非所有的浏览器都采取这些规则，但是这些规则很好地说明了DOCTYPE切换的工作方式。更具体的内容参见：http://hsivonen.iki.fi/doctype。
而且要注意，在IE6中如果DOCTYPE不是页面中的第一个元素，那么会自动切换为混杂模式，IE7已经做了纠正，但是除非将页面作为XML文档，否则最好避免使用XML声明：<?xml version=”1.0” encoding = “utf-8”?>
为样式找到应用目标
伪类：
表单元素或链接元素
:link和:visited称为链接伪类，只能应用于锚元素。:hover, :active和:focus称为动态伪类，理论上可以应用于任何元素。但是IE6只注意应用于锚链接的:hover, :active选择器，完全忽略:focus。IE7在任何元素上都支持:hover，但是忽略:active和:focus。
高级选择器：
IE6和更低版本不支持
如果浏览器不理解某个选择器，那么他会忽略整个规则。但是要注意，对于站点布局很重要的任何元素上，要避免使用这些高级选择器。
子选择器和相邻同胞选择器：
子选择器（“>”）只选择元素的直接后代，即子元素。IE7和更高版本的浏览器支持子选择器。相邻同胞选择器（“+”）用于定位同一个父元素下某个元素之后的元素。
但是，IE7中这两类选择器有一个小BUG，如果父元素和子元素之间有HTML注释，就会出问题。
属性选择器：
“[attr]” or ”[attr=val]”，IE6不支持。
层叠和特殊性：
层叠：
即使不太复杂的样式表中，寻找同一个元素可能有两个或更多的规则。CSS通过一个成为层叠（cascade）的过程处理这种冲突。层叠为每个规则分配一个重要度。如下：
优先级由上至下依次增高
user agent stylesheet
user declarations （normal）
author declarations （normal）
author declarations （!important）（例如：h1{color: blue !important;}）
user declarations （!important）
（关于用户样式的解释见我的博客）。
然后根据选择器的特殊性决定规则的顺序，特殊性介绍如下。
特殊性：
选择器的特殊性分为4个成分等级：a,b,c和d。
如果样式是行内样式，a=1;
b等于ID选择器的总数;
c等于类，伪类和属性选择器的数量;
d等于伪元素选择器和元素选择器的数量。
PS：CSS2伪元素选择器如下：
|
在元素之前添加内容。 |
2 |
|
|
在元素之后添加内容。 |
2 |
有点晕，但是一般来说，用style属性（行内样式）编写的规则总是比任何其他规则特殊，具有ID选择器的规则比没有ID选择器的规则特殊，具有类选择器的规则比只有类型选择器的规则特殊。最后如果两个规则的特殊性相同，那么后定义的规则优先。
如果你遇到了似乎没有起作用的CSS规则，很可能是出现了特殊性冲突。请在你的选择其中添加他的一个父元素ID，从而提高它的特殊性。
(还可以参考链接：http://www.iinterest.net/2010/05/08/css-specificity/)
为了尽量避免过分混乱，我们尽量保持一般性样式非常一般，特殊性样式尽可能特殊，这样就不需要覆盖特殊样式了。如果发现不得不多次覆盖一般样式，那么从更一般的规则中删除需要覆盖的样式，并且将他显示的应用于需要它的每个元素，这样可能比较简单。
继承：
不要跟层叠混淆。
应用样式的元素的后代会继承样式的某些属性，比如颜色和字号。
注意继承而来的样式特殊性为空。所以直接应用于元素的任何样式总会覆盖继承而来的样式。
对文档应用样式：
导入样式表比链接样式表慢。
再使用多个css文件时，还有两个与速度相关的问题，多个文件会导致从服务器发送更多的数据包，这些数据包的数量会影响下载时间。另外，浏览器只能从同一个域同时下载数量有限的文件（一般来说，老式浏览器为2个，现代浏览器为8个）。由于这些原因，结构良好的单一的CSS文件可以显著提高下载速度。
建议使用单一的CSS文件而不是多个小文件，当然应该根据实际站点情况作出决定，没有硬性要求。
<CSS Mastery>读书笔记。
For my Lover, CC !
原文：http://www.cnblogs.com/ttcc/p/3853718.html