《CSS Mastery》读书笔记(二):GETTING YOUR STYLE TO HIT THE TARGET

这章讲的是CSS筛选器,很多人这样描述JQuery的筛选器:就和CSS筛选器一般的强大。

  • Common selectors

最简单的(地球人都知道) p { color: black; } #intro { color: black; } .posted { color: black; }
子筛选器 blockquote p { color: black; }
(如id为intro的 #intro p { color: black; }
所有p标签) .posted p { color: black; }
不仅基于文档结构的筛选器 a:hover { color: black; } / 类似还有focus、link、visited /
(也可以重叠使用) a:visited:hover { color: red; } /
所有访问过的链接鼠标放上去的颜色 _/
全局筛选器
{ margin: 0; } /_ 匹配所有满足条件的元素 */

  • Advanced selectors

CSS2.1和CSS3支持的高级筛选器,IE6等老浏览器不支持。
孩子筛选器 #nav > li { background:url(folder.png); } /* 匹配包含在 #nav 内的最外层 li /
-IE6 等老浏览器解决方案 #nav li { background:url(folder.png); } /
先匹配所有孩子 _/

#nav li * { background-image: none; } /_ 匹配所有孩子的孩子,去掉属性 _/  

紧接某元素的第一个元素 h2 + p { font-size: 36 px; } /_ 所有跟在h2后面的第一段话 /
属性选择器 acronym[title] { color: red; } /
包含title属性的acronym /
(由于IE6不支持本属性, acronym[title]:hover { color: red; }
可以利用来在不同浏览器 a[rel =”nofollow”] { color: red; } /
rel = “nofollow”的 a /
展示不同的内容,例如 a[rel~= ”coworker”] { color: red; } /
只要rel中有coworker的都匹配 */

#id 和 [ id = “id”])

  • Specificity and cascade

这部分讨论当一个元素被多个CSS样式匹配时,最终起作用的是哪个,及其应对方法。本内容在书第35页开始。
值得一提的是 CSS 的 Inheritant(继承),即:
body { font-size: 12 px; } 可以替代 p,td,tr,table,div { font- size: 12px; }

  • Planning and maintaining your style sheets

这部分是关于维护和使用CSS样式表的。
首先,书中不推荐将样式表直接粘贴在文件中,会造成维护和修改的繁琐(要同时改动太多地方)。
然后,结构化最好的方法如下:

.csharpcode, .csharpcode pre{ font-size: small; color: black; font-family: consolas, “Courier New”, courier, monospace; background-color: #ffffff; /white-space: pre;/}.csharpcode pre { margin: 0em; }.csharpcode .rem { color: #008000; }.csharpcode .kwrd { color: #0000ff; }.csharpcode .str { color: #006080; }.csharpcode .op { color: #0000c0; }.csharpcode .preproc { color: #cc6633; }.csharpcode .asp { background-color: #ffff00; }.csharpcode .html { color: #800000; }.csharpcode .attr { color: #ff0000; }.csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em;}.csharpcode .lnum { color: #606060; }然而,由于浏览器有同时读取文件个数的限制(一般为个位数),import的css文件越多,越有明显减慢加载速度的趋势。
所以,兼顾速度和文件结构的最好方法为:

.csharpcode, .csharpcode pre{ font-size: small; color: black; font-family: consolas, “Courier New”, courier, monospace; background-color: #ffffff; /white-space: pre;/}.csharpcode pre { margin: 0em; }.csharpcode .rem { color: #008000; }.csharpcode .kwrd { color: #0000ff; }.csharpcode .str { color: #006080; }.csharpcode .op { color: #0000c0; }.csharpcode .preproc { color: #cc6633; }.csharpcode .asp { background-color: #ffff00; }.csharpcode .html { color: #800000; }.csharpcode .attr { color: #ff0000; }.csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em;}.csharpcode .lnum { color: #606060; }然后在CSS文档中使用这样的注释进行分组:

/* @group color _/_

.csharpcode, .csharpcode pre{ font-size: small; color: black; font-family: consolas, “Courier New”, courier, monospace; background-color: #ffffff; /white-space: pre;/}.csharpcode pre { margin: 0em; }.csharpcode .rem { color: #008000; }.csharpcode .kwrd { color: #0000ff; }.csharpcode .str { color: #006080; }.csharpcode .op { color: #0000c0; }.csharpcode .preproc { color: #cc6633; }.csharpcode .asp { background-color: #ffff00; }.csharpcode .html { color: #800000; }.csharpcode .attr { color: #ff0000; }.csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em;}.csharpcode .lnum { color: #606060; }本书第42页还提供了关于怎么划分CSS文档结构比较好的示例。例如(这究竟是注释还是会生效的CSS?):

/ Color Variables

@colordef #434343; darkgrey

@colordef #369; darkblue

_/_

以下是比较好的注释方法:

/ @todo 要做的事情 _/_

/ @workaround 代码用来做什么 _/_

/ @bugfix 此段