第七章，CSS构造块

CSS里有控制基本格式的属性（font-size，color），有控制布局的属性（position，float），还有决定访问者打印时在哪里换页的打印控制元素。CSS还有很多控制项目显示或消失的动态属性，可以用于创建下来列表和其他交互性组件。

构造样式规则

样式表中的每条规则都有两个部分：选择器和声明块。

选择器决定哪些块受影响，声明块由一个或多个属性-值对组成，指定应该做什么。

为样式规则添加注释

/* 注释 */，可以是多行注释，放在样式表的任何位置都可以，需要成对出现，不能嵌套。

理解继承

继承是CSS里一个很重要的概念。浏览器会将HTML理解为文档树，对某个元素应用CSS属性时，不仅会影响该元素，还会影响其下分支元素。

对大多数属性而言，可以使用inherit值强制进行继承

会被继承的CSS属性

文本：

color：颜色，a元素除外

direction：方向

font：字体

font-family：字体系列

font-size：字体大小

font-style：用于设置斜体

font-variant：用于设置小型大写字母

font-weight：用于设置粗体

letter-spacing：字母间距

line-height：行高

text-align：用于设置对其方式

text-indent：用于设置首行缩进

text-transform：用于修改大小写

visibility：可见性

white-space：用于指定如何处理空格

word-spacing：字间距

列表：

list-style：列表样式

list-style-image：用于为列表指定定制的标记

list-style-position：用于确定列表标记的位置

list-style-type：用于设置列表的标记

表格：

border-collapse：用于控制表格相邻单元格的边框是否合并为单一边框

border-spacing：用于指定表格边框之间的空隙大小

caption-side：用于设置表格标题的位置

empty-cells：用于设置是否显示表格中的空单元格

页面设置：

orphans：用于设置当元素内部发生分页时在页面底部需要保留的最少行数

page-break-inside：用于设置元素内部的分页方式

widows：用于设置当元素内部发生分页时在页面顶部需要保留的最少行数

其他：

cursor：鼠标指针

quotes：用于指定引号样式

层叠：当规则发生冲突时

定义规则不冲突时，则多条规则结合，一起应用到元素上。

1、编写的规则与浏览器默认规则冲突时，以编写的规则为准

2、编写的规则之间发生冲突，CSS用层叠的原则来考虑特殊性、顺序、重要性，从而判断相互冲突的规则中哪个规则应该起作用。

（1）特殊性

特殊性规则指定选择器的具体程度。选择器越特殊，规则就越强。冲突时，优先应用特殊性强的规则。id选择器最特殊。

建议：在样式表中多使用类选择器，避免使用ID选择器。会降低灵活性

（2）顺序

晚出现的优先级高。直接应用在HTML元素上的规则被认为比外部样式表中或插在HTML文档顶部的特殊性相同的规则出现得更晚。

（3）重要性

可以声明一条特殊的规则覆盖整个系统中的规则，这条规则的重要程度要比其他所有规则高。也可以在某条声明末尾加上!important，例：p{color:red !important;} 不建议

属性的值

1、inherit：显示指出该属性值与对应父元素对该属性设定的值相同。p{border:inherit}（IE8之前大部分属性不支持inherit值）

2、预定义值。大多数CSS属性都有一些可供使用的预定义值。例：float可设置为left，right，none。

3、长度和百分数。em，px，pt，百分数。一个em长度大约与对应元素的字号相等。（当em用于设置font-size属性时，它的值继承自对应父元素的字号）

4、纯数字，只有极少数CSS属性接收不带单位的数字，最常见的：line-height，z-index，opacity

5、URL

6、CSS颜色

7、RGB

8、十六进制数

9、更多CSS3提供的指定颜色方式：RGBA、HSLA、HSL

RGBA：在RGB基础上加了一个代表alpha透明度的A。所有现代浏览器都支持，IE9之前的不支持。格式：color:rgb(89,0,127)，color:rgba(89,0,127,0.75)

HSL和HSLA

HSL：色相（hue）、饱和度（saturation）、亮度（lightness）。色相取值：0-360，饱和度和亮度均为百分数：0-100%

格式：property:hsl(hue,saturation,lightness);

HSLA格式：property:hsla(hue,saturation,lightness,alpha transparency)

第八章，操作样式表

一定要将CSS文件保存为以.css为扩展名、用UTF-8编码的文件

外部样式表可以通过链接引用，也可以导入（通过import），不推荐导入，性能不好

链接到外部样式表

语法：

<span style="color: #0000ff;"><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="url.css"</span><span style="color: #0000ff;">></span></span>

Salin selepas log masuk

可以在页面中使用多个link元素加载多个样式表，产生冲突则以后面文件的规则为准。

创建嵌入样式表

，放在head部分

当且仅当style元素出现在link元素后面的时候，嵌入样式表中的样式才会覆盖外部样式表中的样式。

应用内联样式表

在HTML元素中定义style属性。内联样式优先级高于其他所有样式，除非其他地方与之冲突的样式标记了!important

样式的层叠和顺序

嵌入样式表与任何链接的外部样式表之间的关系取决于他们在HTML中的相对位置。发生冲突，以出现顺序较后的为准。

内联样式优先级最高。一旦应用，覆盖所有与之冲突的样式。

相互冲突的样式顺序对优先级影响，有一种例外情况，就是标记!important的样式总是具有最高的优先级。尽量不使用important，除非不得已

使用与媒体相关的样式表

可以指定一个只用于特定输出的样式表。如：可以创建一个具有打印和屏幕版本共有特征的通用样式表，再创建单独的只用于打印的属性和只用于屏幕显示的属性。在link或style元素中使用media属性，例：media="output"，output可以是print，screen，all（这些是最常见的）等

第九章，定义选择器

建议：尽量不要使用id选择器

编写CSS的一个重要目标就是让选择器尽可能简单，仅保持必要的特殊性

按名称选择元素

类型选择器

按类或ID选择元素

1、按类选择要格式化的元素

使用.（点号）开头，不加空格，输入className

2、按ID选择要格式化的元素

使用#（井号）开头，不加空格，输入idName

除非必须特别针对目标元素，最好不要再id或class选择器中添加元素名称，降低灵活性

类选择器与ID选择器的比较

建议尽量使用class选择器。

id选择器会引入如下问题：

1、不可复用

2、特殊性强，要覆盖需要编写特殊性更强的规则，较难管理

按上下文选择元素

1、子选择器：>

<span style="color: #800000;">.architect > p</span>{<span style="color: #ff0000;">
     color</span>:<span style="color: #0000ff;">red</span>;
}

Salin selepas log masuk

这个选择器仅选择architect类元素的子元素（而非子子元素、子子子元素）的p元素。

2、CSS相邻同胞结合符：+

<span style="color: #0000ff;"><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
     <span style="color: #0000ff;"><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>
     <span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
     <span style="color: #0000ff;"><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span></span></span></span></span>

Salin selepas log masuk

h1与p是相邻同胞，h1与h2不是相邻同胞，p与h2是相邻同胞

<span style="color: #800000;">.architect p+p</span>{<span style="color: #ff0000;">
     color</span>:<span style="color: #0000ff;">red</span>;
}

Salin selepas log masuk

3、普通同胞结合符：~

<span style="color: #800000;">h1~h2</span>{<span style="color: #ff0000;">
     color</span>:<span style="color: #0000ff;">red</span>;
}

Salin selepas log masuk

选择第一个或最后一个子元素

:first-child，:last-child。均为伪类。

<span style="color: #0000ff;"><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
     <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>1<span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
     <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>2<span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
     <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>3<span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
     <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>4<span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span></span></span></span></span></span>

Salin selepas log masuk

<span style="color: #800000;">li:first-child</span>{<span style="color: #ff0000;">
     color</span>:<span style="color: #0000ff;">red</span>;
}

Salin selepas log masuk

选中的是

，并不是li的子元素，:last-child类似

选择元素的第一个字母或者第一行

:first-letter，:first-line

伪元素：::first-letter,::first-line,::before,::after

伪类：:first-child,:link,:hover

按状态选择链接元素

a:link：从未被激活或指向，当前也没有被激活或指向的链接的外观

a:visited：访问者已激活过的链接的外观

a:focus：前提是链接是通过键盘选择并已准备好激活的

a:hover：光标指向链接时链接外观

a:active：激活过的链接的外观

按属性选择元素

选择器	属性值
[attribute]	匹配指定属性，不论值是什么
[attribute="value"]	完全匹配指定属性值
[attribute~="value"]	属性值是以空格分隔的多个单词，其中一个完全匹配指定值
[attribute\|="value"]	属性值以 value- 打头
[attribute^="value"]	属性值以value开头，value为完整单词或单词一部分
[attribute$="value"]	属性值以value结尾，value为完整单词或单词一部分
[attribute*="value"]	属性值为指定值的子字符串

指定元素组

<span style="color: #800000;">h1,h2</span>{<span style="color: #ff0000;">
     color</span>:<span style="color: #0000ff;">red</span>;
}

Salin selepas log masuk

组合使用选择器

<span style="color: #800000;">em</span>{<span style="color: #ff0000;">
     color</span>:<span style="color: #0000ff;">red</span>;
}<span style="color: #800000;">
.project em</span>{<span style="color: #ff0000;">
     color</span>:<span style="color: #0000ff;">red</span>;
}<span style="color: #800000;">
.architect .project em</span>{<span style="color: #ff0000;">
     color</span>:<span style="color: #0000ff;">red</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> 以上实现相同效果，特殊性由低到高 </span><span style="color: #008000;">*/</span>

Salin selepas log masuk