CSSTDG读书笔记五

2005.03.0513:12
[ CSSTDG读书笔记 ]

Chapter 4. Values and Units

ex是一个小写x的高度。一般ex用0.5em代替，而IE5/MAC是按照规范实时渲染一个x然后计算它的高度的。
em和px是常用单位，以后使用中应多使用em，因为比较灵活。

相对url是相对样式表所在url的。
Navigator 4错误地理解相对路径，它把所有相对url理解成相对html文档。

Comments (0)

CSSTDG读书笔记四

2005.03.0416:11
[ CSSTDG读书笔记 ]

Chapter 3. Structure and the Cascade

specificity表示了一个样式使用时的优先级
CSS2用3位表示一个样式的specificity
CSS2.1用4位
四条规则：
每个ID选择符，加 0,1,0,0
每个class选择符，每个属性选择符，或者每个伪类，加0,0,1,0
每个元素和伪元素，加0,0,0,1
其他选择符包括全局选择符*都没有加成效果，但它们有specificity，0,0,0,0
一些例子：

h1 {color: red;} /* 0,0,0,1 */
body h1 {color: green;} /* 0,0,0,2 (winner)*/

h2.grape {color: purple;} /* 0,0,1,1 (winner) */
h2 {color: silver;} /* 0,0,0,1 */

html > body table tr[id=”totals”] td ul > li {color: maroon;} /* 0,0,1,7 */
li#answer {color: navy;} /* 0,1,0,1 (winner) */

文内的样式specificity为1,0,0,0 始终高于外部定义
特别的，如果一个样式特别重要，可使用!important，它优先于所有其他specificity。
如果!important也发生了冲突，则参考specificity的比较结果，如果specificity冲突则按先后顺序。

关于继承Inheritance
body的background样式可以向上传递给html元素，这是继承的一个例外。
绝大多数盒模型相关属性都不继承，比如margin,padding,background,border等

继承bug
table不继承某些样式？
关于继承bug具体还不是很清楚。

继承没有specificity，所以继承的优先级低于比如甚至全局选择符的优先级

层叠Cascade
import进来的样式表优先级低，因为import出现在最前面

关于CSS的优先权这里又整理了一篇比较系统的。

Comments (0)

CSSTDG读书笔记三

2005.03.0410:09
[ CSSTDG读书笔记 ]

Chapter 2. Selectors

链接伪类（只应用于超链接）： link, visited
动态伪类（可应用于任何元素）： focus, hover, active
伪类顺序：link-visited-hover-active LVHA - “LoVe-Ha”

注意:first-child伪类的用法：
如，p:first-child 表示所有兄弟元素中，该p元素为第一个的情况，而不是p的所有直接子孙中的第一个元素。

伪类可以混合使用a:link:hover,a:visited:hover等

伪元素
:first-letter 第一个字母
:first-line 显示时的第一航
这两个伪元素只适用于block元素
:before
:after
content: “”;otherstyle

Comments (0)

CSSTDG读书笔记二

2005.03.0215:37
[ CSSTDG读书笔记 ]

Chapter 2. Selectors

css元素的属性声明用空格分割，但有一个特殊情况就是font元素
font: large/150% sans-serif;
其中斜杠/用来分割字体大小和行高。
支持星号选择符
* {font:12px;}

关于混合class选择符，一个元素可以应用多个class，用空格分隔。
效果元素中class属性值的顺序无关，<div class=”classa classb”>和<div class=”classb classa”>
是一样的，它们应用到元素中的顺序和定义时的顺序一致。
同时可以针对使用混合选择符的元素指定特殊定义

.classa{ color:red;}
.classb{ font-weight:bold:}
.classa.classb{background-color:silver;}
// class="classa classb"的元素才会有这个样式

但是IE的解释有问题，它会给所有class含classb的元素应用这条规则。所以

<p class="classb">blah</p>
<p class="classa classb">blah</p>
<p class="someclass classb">blah</p>

类似这种元素都会应用background-weight:silver;这条规则。

ID在同一篇文档中唯一，不可混合。

属性选择符

  • elemname[attr] {…}
  • elemname[attr1][attr2] {…}
  • elemname[attr=”blahblah”] {…}
  • elemname[attr~=”blah”] {…} 包含
  • elemname[attr|=”ba”] {…} 先导

IE6目前不支持属性选择符IE7将会支持

  • > 选择符，表示直接子孙。空格表示子孙。
  • + 选择符，表示相邻的下一个兄弟。如p + li {}表示紧跟p的li的样式。可以连加如p+div+ul

IE目前不支持这两个选择符IE7将会支持

Comments (0)

CSSTDG读书笔记一

2005.03.0215:31
[ CSSTDG读书笔记 ]

本书介绍:
Cascading Style Sheets, 2nd Edition

By Eric Meyer
Publisher : O'Reilly
Pub Date : March 2004
ISBN : 0-596-00525-3
Pages : 528
Slots : 1.0

Chapter 1. CSS and Documents

链接外部样式表用元素。写法举例：<link rel="stylesheet" type="text/css" href="sample.css" media="all"/>
rel为”stylesheet”时为首选样式
若有title，则首选。若有多个rel为”stylesheet”的link且都有title，则只有一个起作用。
若没有title，则首选，且始终使用，不会被可选样式表替换。

rel为”alternate stylesheet”时为可选样式
若有title，则title名标识此样式，可以多个link公用同一个title。
若无title，待试验…

内部样式表用<style>元素。
必须有type属性，css的type属性为”text/css”，可以有media属性，用法同link

在内部或外部样式表中import外部样式表需要在最开始声明，否则会被忽略（IE不会忽略）
@import url(xx1.css) all;
可以inport多个css，并可以指定media，但不能像使用link元素那样存在可选样式。
Navigator 4.x 和 Opera 3.x 不支持import，所以可以用import对这些老式浏览器隐藏部分样式
http://w3development.de/css/hide_css_from_browsers/

Comments (0)