《CSS权威指南》读书笔记

sorryericsson

2013-08-15

元素通常有两种形式：替换和非替换，最常见的替换元素为img和input
【外链的样式表分为永久样式表、首选样式表（定义不同的title）、候选样式表（alternate stylesheet）】link标记用于文档与其它文档相关联，链接CSS时必须定义rel(relation)【stylesheet|alternate stylesheet(候选样式表，通常配合title属性分组使用)】和type属性已告知浏览器如何处理导入的数据，可选属性media:all|aural(语音合成器、屏幕阅读器等声音表现)|braille(Braille设备)|embossed(Braille打印设备打印时使用)|handheld|print(正常打印)|projection(投影媒体)|screen(屏幕媒体，如PC)|tty(固定间距环境，如电传打字机)|tv【可列举多个值media="screen, projection"，只是大部分Web浏览器不支持大部分属性】
@import url()加载样式表：该语法应出现在CSS规则中并且必须出现在其它规则之前，即style标签内或者外链css文件内，不同的是此种方法引进的CSS样式表都会加载并使用类似于link的永久样式表，但是可以后跟媒体名（@import url() all[,screen]）
向后可访问性的实现：
```
<style></style>
```
CSS注释为(不允许嵌套注释)
```
/*...*/
```
CSS选择器：（IE7开始全面支持所有CSS2.1）
- 元素选择器(html,p,div,h...)；
- 通配选择器(*)；
- 类选择器(.class)；
- ID选择器(#id)；
- 属性选择器(h1[class(="class1 class2")][title]IE6不支持)【属性值得判断=(完全匹配)、~=(部分匹配，但必须以词的形式存在)、^=(以值开头的部分匹配)、$=(以值结尾的部分匹配)、*=(包含值子串的部分匹配)、|=(属性值全等或者等于"值-"开头)】；
- 组合选择器(div.class, div#id, .class1.class2)；
- 后代选择器（空格分隔）
- 子元素选择(>)[IE6不支持]
- 相邻兄弟元素选择(+)[IE6不支持]纯文本算父元素内容
- 伪类选择器：a:link【CSS2.1,静态伪类—仅显示一次】(指示作为超链接（即有href属性）并指向一个未访问地址，可用于区分超链接和页面内锚链接)，a:visited【CSS2.1,静态伪类】，CSS2.1还定义了3个动态伪类(动态伪类可以应用到任何元素)[:focus, :hover, :active](对于a而言，伪类的书写要按lvha(LoVe-HA)的顺序)，【注意：IE8才开始支持三种动态伪类,IE6只允许动态伪类选择超链接，而不支持其它元素；IE7支持对所有元素的:hover,但不支持对表单元素的:focus】;:first-child伪类只有在声明 <!DOCTYPE>后才有效(IE6不支持);:lang()伪类；伪类组合(IE6不支持)；
- 伪元素选择器:first-letter；:first-line；:before；:after(在声明 <!DOCTYPE>后,IE8开始支持before和after)
选择器特殊性值表述为4个部分(不进位)，如：0,0,0,0。一个选择器的具体特殊性如下确定：
- 内联样式的特殊性值为1,0,0,0
- 对于选择器中给定的各个ID属性值，加0,1,0,0；
- 对于选择器中给定的各个类属性值、属性选择或伪类，加0,0,1,0；
- 对于选择器中给定的各个元素和伪元素，加0,0,0,1;
- 结合符和通配选择器对特殊性没有任何贡献；（通配符特殊性为0）
- !important可添加在一个属性值后面提升该属性的优先级到最高
CSS属性的继承：不继承的属性：如border,padding,margin等大多数框模型属性（继承属性的特殊性小于0，可以被0通配符覆盖）
CSS2.1中定义了17个颜色名：aqua(浅绿色), fuchsia(紫红色), lime(绿黄色), olive(橄榄色), red(红色), white(白色), black(黑色), gray(灰色), maroon(栗色), orange(橙色), silver(银色), yellow(黄色), blue(蓝色), green(绿色), navy(海军蓝), purple(紫色), teal(蓝绿色)
web安全颜色指在256色计算机系统上总能避免抖动的颜色，web安全颜色可以表示为RGB值20%和51（相应的十六进制值为33）的倍数；
长度单位：绝对长度单位：in, cm, mm, pt, pc(1in=72pt, 1pc=12pt, ppi—每英寸的像素点数)；相对长度单位：em(em的值会相对于父元素的字体大小—font-size改变), ex(ex是指所用字体中小写x的高度，因此跟font-size和font-family都有关), px（CSS2.1建议将96ppi作为参考像素）
在url()中URL(CSS2.1中称URI)地址和开始括号之间不能有空格
CSS2.1中的共有属性值inherit，提升继承优先级
字体系列font-family（CSS定义了5类通用字体系列，建议在定义字体时通过结合特定字体名和通用字体系列定义：font-family:Georgia, serif;）：
- Serif字体：这些字体成比例，而且有上下短线。(如果字体中的所有字符根据其不同大小有不同的宽度，则称该字体是成比例的)——Times, Georgia, New Century Schoolbook
- Sans-serif字体：这些字体是成比例的，而且没有上下短线——Helvetica, Geneva, Verdana, Arial, Univers
- Monospace字体：这些字体不是成比例的（等宽字体，不论是否有上下短线）——Courier, Courier New, Andale Mono
- Cursive字体：这些字体试图模仿人的手写体——Zapf Chancery, Author, Comic Sans
- Fantasy字体：这些字体无法用任何特征来定义——Western, Woodblock, Klingon
字体加粗font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400(normal) | 500 | 600 | 700(bold) | 800 | 900 | inherit
字体风格font-style: italic | oblique | normal | inherit
字体变形font-variant: small-caps(小型大写字母文本) | normal | inherit
font属性：[[<font-style> || <font-variant> || <font-weight>]?<font-size>[/<line-height>]?<font-family>] | caption | icon | menu | message-box | small-caption | status-bar | inherit (对于<font-size>的百分数要相对于父元素来计算，<line-height>则相对于元素的<font-size>来计算;后面的用于使用用户操作系统的设置)
块级元素首行缩进text-indent: <length> | <percentage> | inherit (默认为0，百分数相对于父元素的宽度，长度值可为负数)
块级元素中的文本行水平对齐text-align: left | center | right | justify | inherit
行高line-height: <length> | <percentage> | <number> | normal | inherit (指文本行基线之间的距离，line-height值和字体大小之差就是行间距，此处百分数相对于字体大小，行高继承时的值若为em则从父元素计算，若为数——缩放因子，则从子元素计算)
垂直对齐文本vertical-align(仅用于行内元素和替换元素，且不能继承): baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit (不影响块级元素中内容的对齐，但可以用来影响表单元格中元素的垂直对齐——此时只有baseline,top,middle和bottom有效；百分数相对于line-height)
- baseline:要求一个元素的基线与其父元素的基线对齐，如果对于没有基线的图像或表单输入元素，或者其他替换元素则是该元素的底端与其父元素的基线对齐
- sub和super不会改变元素字体的大小，只会改变基线的对齐方式
- bottom:将元素行内框的底端与行框的底端对齐
- text-bottom是指行内文本的底端。替换元素或任何其他类型的非文本元素会忽略这个值，对于这些元素，将考虑一个“默认”的文本框。这个默认框由父元素的font-size得到。要对齐的元素的行内框底端再与这个默认文本框的底端对齐
- middle:会吧行内元素框的中点与父元素基线上方0.5ex处的一个点对齐，这里的1ex相对于父元素的font-size定义
- 百分数会把元素基线（或替换元素的底边）相对于父元素的基线升高或降低指定的量（计算时相对于该元素的line-height计算），正百分数值会使元素升高，负的则降低
字(任何非空白字符组成的串)间隔word-spacing: <length> | normal(0) | inherit
字母间隔letter-spacing: <length> | normal | inherit (word-spacing的值可能受text-align属性值的影响，若为letter-spacing指定了一个长度值，则不会受text-align影响。此两个属性的继承的是计算值，无法继承缩放因子)
文本转换text-transform: uppercase | lowercase | capitalize(单词首字母大写) | none | inherit
文本装饰text-decoration: none | [underline || overline || line-through || blink] | inherit (该属性不能被继承)

值	空白符	换行符	自动换行
pre-line	合并	保留	允许
normal	合并	忽略	允许
nowrap	合并	忽略	不允许
pre	保留	保留	不允许
pre-wrap	保留	保留	允许

文本方向direction: ltr | rtl | inherit (影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向，以及两端对齐元素中最后一行的位置。对于行内元素，只有unicode-bidi属性设置为embed或bidi-override时才会应用direction属性，IE6,7,8不支持inherit属性，但该属性是继承的)
unicode-bidi: normal | embed | bidi-override | inherit
normal
元素不会对双向算法打开附加的一层嵌套。对于行内元素，顺序的隐式重排会跨元素边界进行。
embed
如果是一个行内元素，这个值对于双向算法会打开附件的一层嵌套。这个嵌套层的方向由 direction 属性指定。会在元素内部隐式地完成顺序重排。这对应于在元素开始处增加一个 LRE（对于 direction:ltr ：U+202A）或 RLE（对于 direction:rtl ：U+202B），并在元素的最后增加一个 PDF（U+202C）。
bidi-override
这会为行内元素创建一个覆盖。对于块级元素，将为不在另一块中的行内后代创建一个覆盖。这说明，顺序重排在元素内部严格按照 direction 属性进行；忽略了双向算法的隐式部分。这对应于在元素开始处增加一个 LRO（对于 direction:ltr ：U+202D）或 RLO（对于 direction:rtl ：U+202E），并在元素最后增加一个 PDF（U+202C）。
垂直方向的外边距会合并，取较大值