CSS定位

假定元素A有绝对定位(position: absolute)，其参照物规则（即它相对于什么元素进行定位）：

• 如果A没有被包含在任何其他 position: absolute || relative || fixed 的标签里，则A是相对于浏览器窗口进行定位的。
• 如果A被包含在了 position: absolute || relative || fixed 的标签（假设标签名为B）里，则A是相对于B的边沿来进行定位的。

常常用relative定位来给嵌套标签建立一个新的定位上下文。即外层标签是relative定位，内层被包含的标签是absolute定位。
relative的意思可以理解为“相对于我”，即“我内部的所有定位元素，都应该以我为参照物来定位”。

使用z-index可以产生元素堆叠的效果，即某些元素覆盖在另一些元素上方。
网页默认的z-index是0，数字越大，就越堆在上方，即z-index:3的元素会盖住z-index:1的元素。

假设元素D包含了两个元素A和B，D的z-index为100，A的z-index为2，B的z-index为3。堆叠的效果是：A和B都堆在D的上方，而B又堆在A的上方。
D元素变成了它内部元素堆叠的起点，A和B的z-index值都是相对于D来说的，而D在其内部的z-index默认值为0，所以A和B都能盖住D。

z-index的值最好有一些间隙。10、20、30与1、2、3的效果一样，但是前者可以在原有堆叠序列的基础上，更方便地插入其他元素。
如果想要永远置顶一个元素（即永远使它显示在最上方，盖住其他所有元素），就给它一个很大的z-index值，如10000。

隐藏元素，display:none是不占据空间的，而visibility:hidden虽然隐藏了，但仍然占据空间。
如果把visibility:hidden应用到一个绝对定位(position:absolute)的元素上，则效果和display:none一样，不占据空间。因为使用了绝对定位的元素，其本身就已经从正常页面流上消失了，本身即使显示出来，也不占据空间，而是堆叠到其他元素上方。

与绝对定位不同，固定定位（position:fixed）始终相对于浏览器窗口而言。

链接伪类的顺序

必须以特定的顺序来定义样式：link、visited、hover、active
可以简记为：LoVe/HAte

其实还是遵照了样式层叠的规律，后定义的样式覆盖前面定义的样式。因此就要把普通的放在前面，特殊的放在后面。
link既可以是未点击的，又可以是已点击的，还可以是鼠标经过时的样式。如果link放在hover后面，就会覆盖hover的定义。
那把hover放在link后面呢？它不是会覆盖link的定义吗？哈哈，对了，我们就希望它覆盖link的定义，在鼠标经过时修改link的样式。

改进你的CSS习惯 - Improving Your CSS Habits

添加注释 - Add Comments
这个不用说了

命名 - Name Styles Clearly

• 根据用途而不是展现效果来命名
不要用.redhighlight这样的命名，万一哪天老板让你改成橙色的呢？如果是用来警告或提示错误，不妨用.alert或.error

• 不要根据位置来命名
不要用.leftsidebar，有一天它完全可能被移到右边去（但是可以用两个类.left单独用来表示布局位置，.sidebar用来表示侧条栏的样式，用的时候就像这样<div class="sidebar left">）

• 避免含义模糊的命名
就是说不要用无意义的命名，如.s、#s2等，而应该改成.news、#mainNav等。就像程序的变量命名一样，要能够见名知意

用多个类来节约时间 - Use Multiple Classes to Save Time
就像上面举到的<div class="sidebar left">的例子一样，把sidebar共性的样式定义到一起，而把跟布局相关的定义为另一个类。这样，当左右各有一个sidebar的时候，就不需要把sidebar的样式定义两遍了。那样做很不DRY，复制粘贴一遍很容易，但一旦要修改，就要同时改两处地方，很麻烦。

消除浏览器样式冲突 - Eliminating Browser Style Interference
就是去除浏览器默认加的一些样式，如讨厌的默认margin和padding。应该先将这些样式归零。

body, h1, h2, h3, h4, h5, h6, p, ol, ul, form, blockquote {
 padding: 0;
 margin: 0;
}
h1, h2, h3, h4, h5, h6, pre, code {
 font-size: 1em;
}
a {
 text－decoration: none;
}
a img {
 border: none;
}

也可以参考这个：http://www.tantek.com/log/2004/undohtml.css
跟上面的大同小异

优先为当代的浏览器设计 - Design for Contemporary Browsers First
在Firefox, Safari下设计好了后，再来hack臭名昭著的IE6

IE可以识别条件注释，如：
<!--[if IE]>
用来hack IE的bug的样式放在这里
<!--[endif]>

还有针对特定版本IE的，lte表示"less than or euqal to"，即IE6或更低版本：
<!--[if lte IE6]
some styles
<!--[endif]>

记住，这些专为IE而使用的hack一定要放到其他样式的后面，从而可以修复（覆盖）之前定义的样式。

颜色关键字

aqua（浅绿色）
black（黑色）
blue（蓝色）
fuchsia（紫红色）
gray（灰色）
green（绿色）
lime（石灰色）
maroon（栗色）
navy（海军蓝）
olive（橄榄色）
orange（橙色）
purple（紫色）
red（红色）
silver（银色）
teal（水鸭色）
white（白色）
yellow（黄色）

CSS的层叠规则

• 一个标签选择器值1分（p {color: red;}）
• 一个类选择器值10分(.cls {color: red;})
• 一个ID选择器值100分(#som {color: red;})
• 一个行内样式值1000分(<span style="color:red;">)

一个派生选择器的值是所有列出的选择器值的总和，如：
＃banker .byline => 100 + 10 = 110

其他规则：后出现的样式胜出，如
p a.email { color: blue; }
p.byline a { color: red; }
则链接的颜色应该为红色。

XHTML规则

1. 网页从一个文档类型声明开始。
2. 标签和标签属性必须用小写字母。
3. 双引号对于标签属性是必需的。
4. 所有标签都必须被关闭。