精通CSS高级WEB标准解决方案（第三版）笔记

---

1 CSS选择符

选择符之间可以相互搭配使用

1.1 类型选择符

<style type="text/css">
	p {
		color: red;
	}
</style>
<div>此段落不受样式的影响。</div>
<p>此段落通过类型选择器修改为红色。</p>

1.2 ID选择符

<style type="text/css">
	#demo{
		color: red;
	}
</style>
<p>此段落不受样式的影响。</p>
<p id="demo">此段落通过ID选择器修改为红色。</p>

1.3 类选择符

<style type="text/css">
	.demo{
		color: red;
	}
</style>
<p>此段落不受样式的影响。</p>
<p class="demo">此段落通过类选择器修改为红色。</p>

1.4 后代选择符

<style type="text/css">
	#demo p {
		color: red;
	}
</style>
<p>此段落不受样式的影响。</p>
<div id="demo">
	<p>此段落通过类选择器修改为红色。</p>
	<div>
		<p>此段落通过类选择器修改为红色。</p>
	</div>
</div>

注意此处demo下的所有< p >标签变成红色

1.5 子选择符

<style type="text/css">
	#demo > p {
		color: red;
	}
</style>
<p>此段落不受样式的影响。</p>
<div id="demo">
	<p>此段落通过类选择器修改为红色。</p>
	<div>
		<p>此段落不受样式的影响。</p>
	</div>
</div>

注意此处只有demo下的子标签< p >变成了红色

1.6 相邻同辈选择符

<style type="text/css">
	#demo + p {
		color: red;
	}
</style>
<p>此段落不受样式的影响。</p>
<div id="demo"></div>
<p>此段落通过类选择器修改为红色。</p>
<p>此段落不受样式的影响。</p>

1.6 一般同辈选择符

<style type="text/css">
	#demo ~ p {
		color: red;
	}
</style>
<p>此段落不受样式的影响。</p>
<div id="demo"></div>
<p>此段落通过类选择器修改为红色。</p>
<p>此段落通过类选择器修改为红色。</p>

1.7 通用选择符

<style type="text/css">
	* {
		color: red;
	}
</style>
<div>此段落通过类选择器修改为红色。</div>
<p>此段落通过类选择器修改为红色。</p>
<span>此段落通过类选择器修改为红色。</span>

1.7 属性选择符

<style type="text/css">
	input[type="button"] {
		color: red;
	}
</style>
<input type="button" value="此按钮为红色"/>
<input type="submit" value="此按钮为黑色"/>

拓展：

匹配模式	匹配符号	案例
以某些字符开头的属性值	^=	a[href^=“http://”]
以某些字符结尾的属性值	$=	img[src$=“.jpg”]
包含某些字符结尾的属性值	*=	input[name*=“button”]
以空格分隔字符串中的属性值	~=	p[name~=“demo”]
开头是指定值或指定值后连接短横线（-）的属性值	|=	a[lang|=“en”]

以下是实例：

<style type="text/css">
	a[href^="http://"] {
		color: red;
	}
	img {
		width: 20px; height: 20px; background-color: red;
	}
	img[src$=".jpg"] {
		background-color: blue;
	}
	input[name*="button"]  {
		color: red;
	}
	p[name~="demo"]  {
		color: red;
	}
	a[lang|="en"]  {
		color: red;
	}
</style>
<a href="http://www.baidu.com">此超链接为红色</a>
<a href="www.baidu.com">此超链接为默认颜色</a>
<br>
<div><img src="demo.jpg"/>此图片为蓝色</div>
<div><img src="demo.png"/>此图片为红色</div>
<br>
<input type="button" name= "demo-button-name" value="此按钮为红色"/>
<input type="button" name="demo" value="此按钮为黑色"/>
<br>
<p name="p demo name">此段落通过类选择器修改为红色。</p>
<p name="p demoname">此段落通过类选择器修改为黑色。</p>
<br>
<a lang="en">此超链接为红色</a>
<a lang="en-us">此超链接为红色</a>
<a lang="us">此超链接为默认颜色</a>

2 伪元素和伪类

2.1 伪元素

伪元素	用处
::first-letter	第一个字符
::first-line	第一行
::before	开头
::after	结尾
::selection	用户选择的元素部分

实例内容请参照w3school

2.2 伪类

伪类的语法是以冒号开头，用于选择元素的特定状态或关系

伪类	例子	用处
:active	a:active	选择活动的链接。
:checked	input:checked	选择每个被选中的 <input> 元素。
:disabled	input:disabled	选择每个被禁用的 <input> 元素。
:empty	p:empty	选择没有子元素的每个 <p> 元素。
:enabled	input:enabled	选择每个已启用的 <input> 元素。
:first-child	p:first-child	选择作为其父的首个子元素的每个 <p> 元素。
:first-of-type	p:first-of-type	选择作为其父的首个 <p> 元素的每个 <p> 元素。
:focus	input:focus	选择获得焦点的 <input> 元素。
:hover	a:hover	选择鼠标悬停其上的链接。
:in-range	input:in-range	选择具有指定范围内的值的 <input> 元素。
:invalid	input:invalid	选择所有具有无效值的 <input> 元素。
:lang(language)	p:lang(it)	选择每个 lang 属性值以 “it” 开头的 <p> 元素。
:last-child	p:last-child	选择作为其父的最后一个子元素的每个 <p> 元素。
:last-of-type	p:last-of-type	选择作为其父的最后一个 <p> 元素的每个 <p> 元素。
:link	a:link	选择所有未被访问的链接。
:not(selector)	:not§	选择每个非 <p> 元素的元素。
:nth-child(n)	p:nth-child(2)	选择作为其父的第二个子元素的每个 <p> 元素。
:nth-last-child(n)	p:nth-last-child(2)	选择作为父的第二个子元素的每个<p>元素，从最后一个子元素计数。
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择作为父的第二个<p>元素的每个<p>元素，从最后一个子元素计数
:nth-of-type(n)	p:nth-of-type(2)	选择作为其父的第二个 <p> 元素的每个 <p> 元素。
:only-of-type	p:only-of-type	选择作为其父的唯一 <p> 元素的每个 <p> 元素。
:only-child	p:only-child	选择作为其父的唯一子元素的 <p> 元素。
:optional	input:optional	选择不带 “required” 属性的 <input> 元素。
:out-of-range	input:out-of-range	选择值在指定范围之外的 <input> 元素。
:read-only	input:read-only	选择指定了 “readonly” 属性的 <input> 元素。
:read-write	input:read-write	选择不带 “readonly” 属性的 <input> 元素。
:required	input:required	选择指定了 “required” 属性的 <input> 元素。
:root	root	选择元素的根元素。
:target	#news:target	选择当前活动的 #news 元素（单击包含该锚名称的 URL）。
:valid	input:valid	选择所有具有有效值的 <input> 元素。
:visited	a:visited	选择所有已访问的链接。

以上出现的以n作为参数的，可以使用数值表达式作为参数。
例如:nth-child(3n+1)，其中n前面的数字和n都可以修改，比如改为nth-child(-n+3)为只选择前三个。
以下是例子：

<style type="text/css">
	tr:nth-child(3n+1){
		background:red;
	}
</style>
<table>
	<tr><td>这是第1行(红)</td></tr>
	<tr><td>这是第2行</td></tr>
	<tr><td>这是第3行</td></tr>
	<tr><td>这是第4行(红)</td></tr>
	<tr><td>这是第5行</td></tr>
	<tr><td>这是第6行</td></tr>
	<tr><td>这是第7行(红)</td></tr>
</table>

3 层叠

层叠机制的重要性级别从高到低如下：

1. 标注为!important的用户样式
2. 标注为!important的作者样式
3. 作者样式
4. 用户样式
5. 浏览器的默认样式

4 特殊性（CSS生效的优先级）

优先级从高到低如下：
6. style=“”
7. ID选择器（#id）
8. class选择器（.class）
9. 类型选择器（div p）
注意：两条规则的特殊性相等时则优先运用后定义的规则
例如链接伪类的正确定义次序为——:link、:visited、:hover、:focus、:active

5 应用CSS样式

应用CSS样式主要有以下方式
10. 将样式放入<style></style>中
11. 使用link元素：<link href=“demo.css” rel=“stylesheet”>
12. 使用@import指令：@import url(“demo.css”);
注意：一般推荐第二种方式来引入css

5.1 性能

1. 不要把CSS放到<body></body>标签中或者放到页面底部
2. 为了减少HTTP请求，尽量不要使用@import，且尽量减少引入的CSS文件的数量
3. 压缩和缓存内容
4. 不让浏览器渲染阻塞javaScript，给<script>标签添加async和defer属性或者将<script>放到HTML页面底部</body>标签前加载javaScript

6 格式化模型

6.1 盒模型

一个元素盒子由内容区、内边距（padding），边框（border），外边距（margin）四部分组成，可以使用轮廓线(outline)清洗的看出盒子的布局。

注意：将box-sizing的值修改为border-box，此时盒模型的width和height属性的值将会包含内边距和边框。

6.2 最大值和最小值

给一个元素应用min-width和max-width值可以默认自动填充父元素的宽度，但是不会收缩到比min-width更小或者扩展到比max-width更大的值。

6.3 匿名盒子

在section块级元素的开头加入“some text”。此时，“some text”就算没有定义为块级元素，也会被当成块级元素。

<section>
	some text
	<p>Some more text</p>
</section>

这种情况下，这个盒子被称为匿名块盒子。因为这个盒子并不与任何特定的元素相关。

6.4 外边距折叠

常规块盒子有一种机制叫作外边距折叠。垂直方向上的两个外边距相遇时，会折叠成一个外边距。折叠后外边距的高度等于两者中较大的那一个高度。
注意：行内盒子、浮动盒子、绝对定位盒子的外边距不会折叠

6.5 相对定位

元素的position属性设置为relative。
可以通过设置top、right、bottom和left属性，使该元素相对于初始位置平移一定距离。
注意：无论是否位移，相对定位的元素仍然会在文档流中占用初始的空间。因此，这样平移元素会导致它遮挡其他元素。

6.6 绝对定位

元素的position属性设置为absolute。
可以通过设置top、right、bottom和left属性，使该元素相对于祖先元素位置平移一定距离。
绝对定位元素的包含块是距离它最近的定位祖先，也就是position属性设置为static之外任意值的祖先元素。如果没有这么一个定位祖先，那么它就相对于文档的根元素即html元素定位。
注意：绝对定位则会把元素拿出文档流，因此也就不会再占用原来的空间。可能遮挡其他的元素，可以通过设置z-index的属性来控制盒子层叠的次序。z-index属性值越大，盒子在层叠中就靠近上层

6.7 固定定位

将position属性设置为fixed就可以将元素设置为固定定位，固定定位是由绝对定位衍生出来的。固定定位可用来创建始终停留在窗口相同位置的浮动元素。可以用来做固定侧栏或者固定顶栏

6.8 浮动

另一种可见格式化模型是浮动模型。给元素添加float属性，可以使盒子向左或向右移动，直到其外边沿接触包含块的外边沿，或接触另一个浮动盒子的外边沿。
浮动盒子也会脱离常规文档流，如果包含元素太窄，无法容纳所有浮动元素水平排列，则后面的浮动元素会向下移动。如果浮动元素高度不同，则后面的浮动元素在向下移动时可能会“卡”在前面的浮动元素右侧。
要阻止行盒子环绕在浮动盒子外面，需要给包含行盒子的元素应用clear属性。clear属性的值有left、right、both和none，用于规定元素的哪一侧不允许其他浮动元素

7 网页排版

7.1 文本颜色

color属性设置颜色

<style type="text/css">
	#demo{
		color: red;
	}
</style>

7.2 字体族

字体族( font-family )属性的值是一个备选字体的列表，按优先级从左到右排列：

<style type="text/css">
	body {
	font-family: 'Georgia Pro', Georgia, Times, 'Times New Roman', serif;
	}
</style>

字体列表最后的serif叫做通用字体族，在这里充当没有选择的选择。

7.3 字体大小

使用font-size属性设置，几乎所有浏览器的默认大小都是16px。

<style type="text/css">
	p {
		font-size: 21px;
	}
</style>

7.4 行高

使用line-height属性设置，如果该属性的设置了没有单位的值，则是当前font-size的倍数。
例如：

<style type="text/css">
	p {
		font-size: 20px;
		line-height: 2;
	}
</style>

表示的意思是line-height的值是font-size的2倍，也就是40px。

7.5 垂直对齐

使用vertical-align属性设置，默认值是baseline，表示子元素的基线与父元素的基线对齐。

值	描述
baseline	默认。元素放置在父元素的基线上。
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	把元素的顶端与行中最低的元素的顶端对齐。
text-bottom	把元素的底端与父元素字体的底端对齐。
length	使用长度值来排列此元素。允许使用负值。
%	使用 “line-height” 属性的百分比值来排列此元素。允许使用负值。
inherit	规定应该从父元素继承 vertical-align 属性的值。

7.6 文本粗细

使用font-weight属性设置，默认值是normal，对应400。

值	描述
normal	默认值。定义标准的字符。
bold	定义粗体字符。
bolder	定义更粗的字符。
lighter	定义更细的字符。
100 200 300 400 500 600 700 800 900	定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
inherit	规定应该从父元素继承字体的粗细。

7.7 字体样式

使用font-style属性设置，默认是normal。

值	描述
normal	默认值。浏览器显示一个标准的字体样式。
italic	浏览器会显示一个斜体的字体样式。
oblique	浏览器会显示一个倾斜的字体样式。
inherit	规定应该从父元素继承字体样式。

7.8 大小写变化和小型大写变体

使用text-transform属性设置，默认值是none。

值	描述
none	默认。定义带有小写字母和大写字母的标准的文本。
capitalize	文本中的每个单词以大写字母开头。
uppercase	定义仅有大写字母。
lowercase	定义无大写字母，仅有小写字母。
inherit	规定应该从父元素继承 text-transform 属性的值。

7.9 字与字的间距

使用word-spacing属性增加或减少字与字之间的空白，默认值是normal 。

值	描述
normal	默认。定义单词间的标准空间。
length	定义单词间的固定空间。 注意： 负值是允许的。
inherit	规定应该从父元素继承 word-spacing 属性的值。

7.10 段落首行缩进

使用text-indent属性设置。

值	描述
length	定义固定的缩进。默认值：0。 注意： 负值是允许的。如果值是负数，将第一行左缩进。
%	定义基于父元素宽度的百分比的缩进。
inherit	规定应该从父元素继承 text-indent 属性的值。

7.11 对齐

使用text-align属性设置，默认是左对齐。

值	描述
left	把文本排列到左边。默认值：由浏览器决定。
right	把文本排列到右边。
center	把文本排列到中间。
justify	实现两端对齐文本效果。注意： 可以与text-justify属性搭配使用
inherit	规定应该从父元素继承 text-align 属性的值。

如果给父元素设置dir="rtl"属性，即从右向左显示。

text-justify属性指定文本对齐设置为"justify"的理据。
此属性指定应怎样对齐文本以及对齐间距。

值	描述
auto	浏览器决定齐行算法。
none	禁用齐行。
inter-word	增加/减少单词间的间隔。
inter-ideograph	用表意文本来排齐内容。
inter-cluster	只对不包含内部单词间隔的内容（比如亚洲语系）进行排齐。
distribute	类似报纸版面，除了在东亚语系中最后一行是不齐行的。
kashida	通过拉伸字符来排齐内容。

7.12 连字符

使用hyphens属性来链接。hyphens属性的默认值为manual。

值	描述
none	单词不用连字符（不换行）。
manual	默认。单词只在 ‐ 或 ­ 处有连字符（如果需要）。
auto	在算法确定的位置插入单词连字符（如果需要）。
initial	将此属性设置为其默认值。
inherit	从其父元素继承此属性。
想要使用auto属性值需要在网页html元素中设置语言代码

<html lang="en">

7.13 多栏文本

属性	描述
columns 属性	column-width和column-count的简写属性，用于设置列宽和列数。
column-width属性	规定列的宽度。
column-count属性	规定元素应该被划分的列数。 注意：如果只设置column-count属性，会严格生成指定数量的列，不管宽度如何。 如果同时设置了column-width和column-count属性，则column-width属性会作为列的最小宽度，而column-count属性会作为最大列数
column-span 属性	规定元素应横跨多少列。
column-fill属性	规定如何填充列（是否进行协调）。 属性值balance：对列进行协调。浏览器应对列长度的差异进行最小化处理。 属性值auto：按顺序对列进行填充，列长度会各有不同。
column-gap属性	规定列之间的间隔。 注意：如果列之间设置了 column-rule，它会在间隔中间显示。
column-rule 属性	是一个简写属性，用于设置列之间的宽度、样式和颜色。
column-rule-color 属性	规定列之间的颜色规则。
column-rule-style 属性	规定列之间的样式规则。
column-rule-width 属性	规定列之间的宽度规则。

为了在不支持多栏属性的浏览器中确保行长不会超过限度，可以在段落元素上应用max-width属性。

7.14 @font-face规则

@font-face 规则中，您必须首先定义字体名称，然后通过 font-family 属性引用字体的名称指向字体文件。

@font-face {
   font-family: DamoFontFamily;
   src: url(damo1.woff);
   src: url(damo2.woff);
}
p {
   font-family: DamoFontFamily;
}

注意：字体的 URL 使用小写字母。大写字母可能会在 IE 中产生意外结果！

字体描述符	值	描述
font-family	name	必需。定义字体名称。
src	URL	必需。定义下载字体的 URL。可以定义多个
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	可选。定义应如何拉伸字体。默认值是 “normal”。 “ultra-condensed” 是最宽的值，而 “ultra-expanded” 是最窄的值。
font-style	normal italic oblique italic	可选。定义字体样式。默认值是 “normal”。
font-weight	normal bold 100 200 300 400 500 600 700 800 900	可选。定义字体的粗细。默认值是 “normal”。
unicode-range	unicode-range	可选。定义字体支持的 Unicode 字符范围。默认值是 “U+0-10FFFF”。

7.15 字距选项

font-kerning属性控制字体中存储的字距信息的使用。

值	描述
auto	默认。浏览器确定是否应应用字体字距调整。
normal	规定应用字体字距调整。
none	规定不应用字体字距调整。

7.16 文本阴影

text-shadow属性用于给文本设置阴影。
text-shadow: h-shadow v-shadow blur color;

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊的距离。
color	可选。阴影的颜色。

可以通过逗号分隔来给文本添加多组阴影，会按先定义的在上，后定义的在下的先后次序堆叠。