读书笔记《CSS权威指南》

阅读本书主要目的：

自从学会CSS以来，虽然熟练掌握了其使用方法和技巧，但对其底层的原理和实现并不清晰，阅读本书想进一步系统化的学习和深入研究其本质，对这门前端基础语言从熟练使用到真正理解。 

 

第1章 CSS和文档

1.1 WEB的衰落（为了表现增加很多标记元素如font等，这些阻碍了页面的结构化）

1.2 CSS作救星（95年W3C发布正在进行的CSS计划）

　　CSS特点：丰富的样式；易于使用和维护；可以在多个页面重复使用；方便层叠；缩减文件大小；为将来做准备（为解决HTML结构化而生，实现结构和表现分离）

1.3 元素（文档结构的基础，至少在CSS2.1中，每个元素生成一个框，也成为盒）

　　替换元素：用来替换元素内容的部分并未由文档内容直接表示，如img、input等

　　非替换元素：大多数都属于非替换元素，内容由用户在元素本身生成的框中显示，如段落、标题、单元格等

　　元素显示角色（块级元素：生成一个元素框，它会填充其父元素的内容区；行内元素：在一个文本行内生成元素框，而不会打断这行文本）

　　在HTML和XHTML中块级元素不能嵌套在行内元素中，但在CSS中对嵌套没有任何限制

1.4 结合CSS和XHTML（外部、内联、导入、行内）

<link rel="stylesheet" type="text/css" href="sheet.css" media="all" />
<!--link标记（外部样式表），link必须放在head内，rel“关系”（relation），media样式应用的媒体类型（大部分类型不被支持）-->

<style type="text/css">
...
</style><!--style元素（内联样式表）-->

@import url(sheet2.css);
/*@import指令（导入样式表），此指令写在样式文件中或style元素内*/

<p style="...">test</p><!--行内样式表，不推荐，因为不利于内容和表现的分离-->

 

第2章 选择器

2.1 基本规则

　　CSS的核心特性是向文档中的一组元素类型应用某些规则；每个规则由选择器和声明块组成

　　

2.2 分组

h2,p{ color:green}/*选择器分组:为多个元素应用同一样式*/
/*声明分组：为一个元素应用多个声明*/
h3{color:orange;}
h3{ font-size:18px;}

2.3 类选择器和ID选择器

　　多类选择器：通过将多个类选择器连接在一起，仅可选择同时包含这些类的元素（类名顺序不限）

.warning.urgent{background:red;}/*注意中间不含空格：同时包含不限顺序，可以是class="urgent warning"*/

　　ID选择器与类选择器类似，但它仅适用一次

2.4 属性选择器

img[alt]{border:solid 1px red;}  /*简单属性选择，选择有此属性的元素，不论属性是何值*/
a[title="w3c"]{color:red;} /*根据具体属性值选择，选择属性值为指定值的元素*/
p[class~="warning"]{color:red;} /*根据部分属性值选择，选择属性值含有指定值的元素*/
*[foo^="bar"]{color:red;}/*选择foo属性以“bar”开头的所有元素*/
*[foo$="bar"]{color:red;}/*选择foo属性以“bar”结尾的所有元素*/
*[foo*="bar"]{color:red;}/*选择foo属性包含“bar”的所有元素*/
*[lang|="en"]{color:red;}/*选择lang属性等于“en”或以“en-”开头的所有元素*/

2.5 使用文档结构

h1 em{color:red;} /*后代选择器*/
h2>strong{color:red;} /*选择子元素，即只选择h2的子元素（而不是后代元素）strong元素*/
h3+p{color:red;} /*选择相邻元素，即选择h3紧接的p元素，且两者有相同父元素*/

2.6 伪类和伪元素

a:link{color:blue;}   /*选择超链接（含有href属性）*/
a:visited{color:purple;} /*已访问状态的超链接*/
a:hover{color:red;}    /*鼠标悬停状态的超链接*/
a:active{color:orange;}    /*鼠标激活（按下）状态的超链接*/
input:focus{color:green;} /*获取焦点状态的输入框*/
p:first-child{color:red;} /*选择第一个元素，即第一个p元素*/
*:lang( ) /*等价于|=属性选择器*/
a:link:hover{color:red;}/*结合伪类，即合并书写，注意不要把互斥的伪类结合使用*/

p:first-letter{color:red;} /*首字母，只用于标记或段落*/
p:first-line{color:red;} /*首行，只用于标记或段落*/
h2:before{content:" ";}/*之前元素，伪元素特有属性content*/
h2:after{content:" ";} /*之后元素，设置content才能使其置于文档结构中*/

 

第3章 结构和层叠

3.1 特殊性

/*特殊性值表示为：0,0,0,0(即：行内，ID，类或属性或伪类，元素或伪元素)*/
p+em{color:red;} /*0,0,0,2*/
.warning em{color:red;} /*0,0,1,1*/
ul#menu li.active{color:red;}  /*0,1,1,2*/
*{color:black;}/*0,0,0,0，通配符特殊行为0*/
div[id="nav"]{} /*0,0,1,1，ID属性选择区别于ID选择器*/
p.drak{color:#333 !important;} /*重要声明，此规则总会优先*/

3.2 继承（继承没有特殊性，连0都没有，所以通配符的0特殊性>继承的无特殊性）

3.3 层叠（按权重和来源排序，按特殊性排序，按顺序排序（链接伪类顺序LVHA））

 

第4章 值和单位

4.1 数字

4.2 百分数

4.3 颜色（命名，RGB，十六进制）

/*CSS中定义的17个颜色名*/
aqua(浅绿)  fuchsia(紫红)  lime(绿黄)   olive(橄榄)   red  　　 white
black  　　 gray  　　　　　maroon(褐红) orange  　　  silver   yellow
blue  　　　green  　　　　 navy(深蓝)   purple(紫色)  teal(青色)

4.4 长度单位

　　绝对长度（web几乎不用）：英寸（in）、厘米（cm）、毫米（mm）、点（pt）、派卡（pc）

　　相对长度：em和ex，像素长度（px），相对根元素rem

4.5 URL

4.6 CSS2单位

　　角度值：度（deg）、梯度（grad）和弧度（rad），直角可以声明为90deg=100grad=1.57rad

　　时间值：毫秒（ms、秒（s），时间不能为负值

　　频率值：赫兹（Hz）、兆赫（MHz）

4.7 其他值

　　关键字：none（空值）、inherit（继承）

 

第5章 字体

5.1 字体系列（font-family）

5.2 字体加粗（font-weight）

5.3 字体大小（font-size）

5.4 风格和变形（font-style和font-variant）

5.5 拉伸和调整字体（font-stretch和font-size-adjust）

5.6 font属性

5.7 字体匹配 

　　CSS2可以通过@font-face对字体匹配更多控制，可以在文档中下载一个远程字体来使用

@font-face {font-family: DeliciousRoman;src: url('Delicious-Roman.otf');}
/*先引入，再使用*/
p {font-family: DeliciousRoman, Helvetica, Arial, sans-serif;}

 

第6章 文本属性

6.1 缩进和水平对齐（text-indent和text-align）

6.2 垂直对齐（line-height）

　　垂直对齐文本（vertical-align）只应用于行内元素和替换元素，如图像和表单；上标和下标super和sub；

6.3 字间隔和字母间隔（word-spacing和letter-spacing）

6.4 文本转换（text-transform：大小写转换）

6.5 文本装饰（text-decoration）

6.6 文本阴影（text-shadow） 

 

第7章 基本视觉格式化

7.1 基本框

7.2 块级元素（block）

7.3 行内元素（inline）

7.4 改变元素显示（display设置）

　　行内块元素（inline-block）

 

第8章 内边距、边框和外边距

8.1 基本元素框

8.2 外边距（margin）

8.3 边框（border）

8.4 内边距（padding）

 

 

第9章 颜色和背景

9.1 颜色

9.2 前景色（color）

9.3 背景（background或background-color、background-images）

 

第10章 浮动和定位

10.1 浮动（float：left|right|none|inherit）

　　清除浮动（clear：left|right|both|none|inherit）

10.2 定位（position：static|relative|absolute|fixed|inherit）

　　偏移属性（top|right|bottom|left）

　　内容溢出（overflow：visible|hidden|scroll|auto|inherit）

　　内容剪裁（clip：ract(top,right,bottom,left)|auto|inherit）

　　元素可见性（visibility：visible|hidden|collapse|inherit）

　　Z轴上的放置（z-index）

 

第11章 表布局

11.1 表格式化

　　表显示值display：inline-table、table-row（tr）、table-row-group（tbody）、table-header-group（thead）、table-footer-group（tfoot）、table-column（col）、table-column-group（colgroup）、table-cell（th或td）、table-caption

11.2 表单元格边框

　　表格边框模型（border-collapse:collapse（合并）|separate（分隔）|inherit）

　　边框间隔（border-spacing:<length><length>?|inherit）

11.3 表大小

　　宽度：固定布局和自动布局

　　高度和对齐

 

第12章 列表与生成内容

12.1 列表

　　列表类型（list-style-type）、列表项图像（list-style-image）、列表项位置（list-style-position）

12.2 生成内容

　　 使用before和after伪类生成，设置content值；计数器的应用

 

第13章 用户和界面样式

13.1 系统字体和颜色

13.2 光标（cursor）

13.3 轮廓（outline）

  

第14章 非屏幕媒体

14.1 设计特定于媒体的样式表

14.2 分页媒体

14.3 声音样式