你的分享就是我们的动力 ---﹥

《CSS权威指南》读书笔记

时间:2011-10-20 09:46来源:www.chengxuyuans.com 点击:

Author:Chemandy


第一章 CSS和文档



第二章 选择器

1. 选择器分类:

1) 文档结构选择器

①元素选择器:如p{} span{}

②集团选择器:p, body, img, div{}

③类选择器:.class1{}

④多类选择器:.class1.class2{}

⑤ID选择器:#di1{}

⑥后代选择器:body ul li{}

⑦直接后代选择器:div > p{}

⑧相邻兄弟选择器: div + p{} 说明:选择div元素后面的p元素兄弟节点。

2) 属性选择器

①简单属性选择:h1[class]{} 说明:含class属性的h1

②具体属性选择:h1[class="head"]{} 说明:含class属性值为head的h1

③空格分离属性选择:h1[class~="head"]{} 说明:class属性值含有head或空格+head的h1

④开头属性选择:h1[foo^="bar"]{} 说明:选择foo属性以bar开头的h1

⑤结尾属性选择:h1[foo$="bar"]{} 说明:选择foo属性以bar结尾的h1

⑥包含属性选择:h1[foo*="bar"]{} 说明:选择foo属性含有bar字符片段的h1

⑦杠开头属性选择:h1[foo|="bar"]{} 说明:选择foo属性以bar开头或bar-开头的h1

3) 伪类选择器

①:link

②:visited

③:hover

④:active

⑤:focus

⑥:first-child,例p:first-child{}选择作为第一个子节点的p元素

⑦:last-child

4) 伪元素选择器(选择的是文本)

①:first-letter

②:first-line



第三章 结构和层叠

1. 选择器特殊性:

①对于选择器中给定的各个ID属性值,加0,1,0,0

②对于选择器中给定的各个类属性值、属性选择或伪类,加0,0,1,0

③对于选择器中给定的各个元素和伪元素,加0,0,0,1

④结合符合(>和+)和通配选择器(*)对特殊性没有任何贡献,0,0,0,0。

⑤内联样式,特殊性为1,0,0,0

⑥继承样式没有没有特殊性,连0特殊性都没有,可以被通配选择符的0特殊性覆盖。

⑦!important,独立,特殊性最强,强于上面所有。

2. 层叠

①按特殊性比较。

②相同特殊性,后面出现的权重高。



第四章 值和单位



第五章 字体

1. font-family:

2. font-weight:

3. font-size:使用百分比长度时,根据父元素的字体大小计算。font-size确定em框大小。

4. font-style:有两个非默认值:italic(斜体字体)、oblique(倾斜文本)

5. font-variant:字体变形,一个非默认值small-caps要求使用小型大写字母文本。

6. font:属性值有顺序规定:[[<font-style>||<font-variant>||<font-weight>]?<font-size>[/<line-height>]?<font-family>]|系统字体

7. font-face规则,可用于匹配更多字体。

8. 上述各属性都有继承性。



第六章 文本属性

1. text-indent:只用于块级元素,有继承性,百分数根据当前font-size指定。

2. text-align:只用于块级元素,有继承性。

3. line-height:可用于所有元素,有继承性。百分数根据当前字体大小指定。

4. vertical-align:只应用于行内元素和表个单元。无继承性。百分数按当前line-height计算。

5. word-spacing:有继承性。

6. letter-spacing:有继承性。

7. text-transform:处理文本大小写,有继承性。uppercase | lowercase | capitalize|

8. text-decoration:无继承性。

9. text-shadow:三个长度,两个相对于左上角的偏移量和一个模糊半径。

10. white-space:各个值:nowrap | pre | pre-wrap | pre-line |

11. direction:有继承性,可用于所有元素。值:ltr | rtl

12. unicode-bidi:值:embed | bidi-override



第七章 基本视觉格式化

1. 块级元素

1) 块级元素的总宽度:外边距+边框+内边距+内容宽度。

2) 负外边距的应用,会影响块级元素总宽度的计算。

3) 水平外边距auto则自动占据父元素宽度。

4) 边距百分数值是相对于父元素计算的。

5) 块级元素,垂直内容高度若无定义,一般为包含内容高度。若定义外垂直边距为auto,则自动设为0。

6) 块级元素垂直外边距会合并。

2. 行内元素

1) 匿名文本:没有包含在内行元素内的字符串。

2) em框:font-size定义的单个字的文本内容框。

3) 内容区:由em框组成的文本内容片区域。

4) 行间距:line-height与font-size值之差

5) 行内框:内容区+行间距区

6) 行框:行内框的最高点和最低点组成。

7) 垂直内、外边距对行框没有影响。但确实存在。

3. display部分值

1) inline-block:行内快元素,类似与<img>的替换元素。

2) run-in:如果一个元素生成run-in框,而且该框后面是一个块级框,那么该run-in元素将成为块级框开始出的一个行内框。



第八章 内边距、边距和外边距

1. width宽度和height高度不能应用到行内元素。margin和padding可以应用到任何元素。

2. height、width、margin、padding的百分数都是相对父元素的height和width来设定的。

3. 边框border默认样式为none,若果不设置border样式,则无论border-width设多少都不会显示边框。

4. 不论行内元素的边框定义怎样的宽度和高度,元素行高不变。但内、外边距会影响显示宽度。



第九章 颜色和背景

1. color前景色:影响字体颜色,边框颜色,表单框的颜色。

2. 图像的偏移,background-position:属性若果用百分数表示,则是图像与元素框的相应百分比的点对齐,先是x轴,再是y轴。

3. backgournd-attachment:属性,默认为scroll,通过声明fixed可以使图像相对于可视区固定,图像从视窗左上角开始平铺。



第十章 浮动和定位

1. 所有元素都可以浮动,浮动后元素从正常文档流删除,但还是会影响布局。所有浮动元素会生成一个块级框,包含块是最近的祖先块级元素。

2. clip

3. 浮动元素的布局规则:

①浮动元素的左(或右)外边界不能超出其包含块的左(或右)内边界。

②浮动元素的左(或右)外边界必须是源文档中之前出现的左浮动(或右浮动)元素的右(左)外边界,除非后出现浮动元素的顶端在先出现浮动元素顶端的下面。

③左浮动元素的右外边界不会在其右边右浮动元素的左外边界的右边。

④一个浮动元素的顶端不能比起父元素的内顶端更高。

--------------------下面几点比较关键---------------

⑤浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高。

⑥如果源文档中一个浮动元素之前出现另一个元素,浮动元素的顶端不能包含比该元素所生成框的任何行框的顶端更高。

⑦左(或右)浮动元素的左边(右边)有另一个浮动元素,前者的右外边距不能在其包含块的右(左)边界的右(左边)。

⑧浮动元素必须尽可能高地放置。

⑨左浮动元素必须向左尽可能远,右浮动元素则必须向右尽可能远。

4. 如果一个浮动元素在内容流过的边上有负外边距(例如,右浮动元素上的左外边距为负):

①行内框与一个浮动元素重叠时,其边框、背景和内容都在该浮动元素“之上”显示。

②块框与一个浮动元素重叠时,其边框和背景在该浮动元素“之下”显示,而内容在浮动元素“之上”显示。

5. 清除claear的本质:

①在css2.1中,引入一个清除区域(clearance),清除区域是在元素上外边距之上增加额外间隔,不允许任何浮动元素进入这个范围内。

②要确保一个清除元素(设置clear属性的元素)的顶端与一个浮动元素的低端之间有一定空间,可以为浮动元素本身设置一个下外边距。

6. 偏移属性值是百分数的话基数是父元素的宽高。

7. 宽度自动延伸为父元素宽度,高度根据内容变化。

8. IE6不支持min-height、min-width、max-width、max-height。

9. 绝对定位元素可以通过clip属性进行内容裁剪,配合overflow可以实现内容裁剪的显示。

10. z-index只用在绝对定位上。

11. 固定定位在ie6下会出错。



第十一章 表布局

1. display指定类型为表格中的某一种类型时,会触发表格化的匿名对象生成。

2. 表单元格边框类型有两种:分隔边框模型和合并边框模型。

3. Empty-cell属性可以使表格单元发生visibility为hidden的情况。

4. IE6不支持css属性cell-spacing调整单元格间距,需要使用table的cellspacing属性。

5. table-layout可以触发两种布局模型:固定布局和自动布局。

□固定布局速度快:主要取决于首行单元格宽度来设定列宽,若为auto,则自动设置,不管其他行的宽度。

□自动布局速度慢:根据各个单元格的宽度进行设定。

6. table设置height会被看做最小高度。

7. 表单元格的内容垂直对齐可以使用vertical-align,对表单元格可设属性有4个(其他会忽略):top、bottom、middle、baseline。



第十二章 列表与生成内容

1. list-style-type是有继承性的。

2. 生成内容:

①IE6、IE7都不支持。

②生成内容必须应用于:before和:after元素。

③可以使用quotes属性生成引号,再在生成内容属性值中插入。

④配合计数器可以生成计数目录。counter-reset、counter-increment。



第十三章 用户界面样式

1. 可以在font中使用系统字体,可以在color和background-color中设置系统颜色。

2. cursor可以设置鼠标形状。

3. 轮廓:不参与文档流,设置轮廓不会影响文档宽度。



第十四章 非屏幕媒体

1. 暂无

转载注明地址:http://www.chengxuyuans.com/css/27146.html