第2章 为样式找到应用目标

一 选择器

常用选择器：类型选择器（P，h），后代选择器（空格连接），Id选择器（#），类选择器（.）和

伪类：根据文档之外的其他条件为文档应用样式，如表单元素或链接的状态。

　　　：link和：visited称为链接伪类，只能用于锚元素；：hover,:active,:foucs称为动态伪类，理论上适用于任何元素。ie6忽略：foucs,Ie7在任何元素上都支持：hover,忽　　　　　　略:active,:foucs。

通用选择器：*

高级选择器：ie6及更低版本不支持，但可以向后兼容

　　　　　　包括子选择器（>）和相邻同胞选择器（+），bug:在ie7中，如果父元素和子元素之间有注释会有问题

　　　　　　属性选择器（[]）

二 层叠和特殊性

　　　　1 层叠给每个属性分配一个重要度。用STYLE属性编写的规则高于其他规则，具有Id选择器的规则高于没有id选择器的规则，具有类选择器的规则高于没有类选择器的规则。如果两个选择器的规则相同，则后定义的规则优先。

　　　　如果遇到了似乎没有起作用的规则，则很可能出现了特殊性冲突。可以在选择器中添加它的父元素的id来提高特殊性。

　　　　2 继承：元素后代继承父元素的某些属性。

　　　　如果在主体设置字号，页面上的任何标题都没有采用此样式。不是因为标题没有继承文本字号，而是浏览器的默认样式表设置了标题字号。继承而来的样式特殊性为空，所以直接应用于元素的任何样式总会覆盖继承而来的样式。

　　　　在firefox中用Firebug可以查明样式的来源。

三 规划，组织和维护样式表

　　1   a.<style>标签放入文档头部

　　　  b.外部样式表

　　　  c.从另一个样式表导入样式表，例 @import url(/css/layout.css),但是导入样式表比链接样式慢且浏览器会限制文件数量。

　　2 设计代码结构

　　　　示例

/* Remove padding and margin */
* {
  margin: 0;
    padding: 0;
}

/* Put it back on certain elements */
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, fieldset, table, ul {
  margin: 1em 0;
}

/* Class for clearing floats */
.clear {
    clear:both;
}

/* Remove border around linked images */
img {
    border: 0;
}

/* =Typography
-----------------------------------------------------------------------------*/
body {
  font: 62.5%/1.6 "Lucida Grande", "Lucida Sans", "Trebuchet MS", Tahoma, Verdana, sans-serif;
}

/* =Headings
-----------------------------------------------------------------------------*/
/* =Links
-----------------------------------------------------------------------------*/
/* =Branding
-----------------------------------------------------------------------------*/
/* =Main Nav
-----------------------------------------------------------------------------*/
/* =Sub Nav
-----------------------------------------------------------------------------*/
/* =Main Content
-----------------------------------------------------------------------------*/
/* =Secondary Content
-----------------------------------------------------------------------------*/
/* =Footer
-----------------------------------------------------------------------------*/
/* =Forms
-----------------------------------------------------------------------------*/
/* Removes fieldset borders. even on Opea 7 */
fieldset {
  border: 1px solid transparent;
}

/* =Tables
-----------------------------------------------------------------------------*/

table { 
  border-spacing: 0;
    border-collapse: collapse;
}

td {
  text-align: left;
    font-weight: normal;
}

/* =Misc 1
-----------------------------------------------------------------------------*/

/* =Misc 2
-----------------------------------------------------------------------------*/

 

　　3 删除注释和优化样式表

　　　　a 在线css优化器

　　　　b 服务器端压缩（最佳）