小白的《CSS权威指南》笔记（上部分）

前言

书中言道，本书只涉及CSS2.0和CSS2.1的知识（PS：我是想學CSS3才买的书，看来买错了，没事，当作复习）

CSS的优点

1.丰富的样式
2.易于使用
3.在多个页面上使用样式
4.层叠（也就是选择器有权重的作用）
5.缩减文件大小
6.为将来做准备

元素

文档中的每个元素都对文档的表现起一定作用。
替换和非替换元素
替换元素：指用来替换元素内容的部分并非文档内容直接表示。
例：img

非替换元素：大多数HTML和XHTML。

块级元素和行内元素
块级元素：在元素框之前和之后生成了“分隔符”。
例：p、div
特例：列表项（生成一个标识符）

行内元素：在一个文本行内生成元素框，而不会打断这行文本。
例：a、strong、em

关键属性：display

导入css样式表

link标记：

<link rel="stylesheet" type="text/css" href="sheet1.css" media="all" />

为了成功地加载一个外部样式表，link必须放在head元素中。

media属性：
all：用于所有表现媒体。
aural：用于语音合成器、屏幕阅读器和文档的其他声音表现。
braille：用Braille设备表现文档时使用。
embossed：用Braille打印设备时使用。
handheld：用于手持设备，如个人数字助理或支持Web的蜂窝电话。
print：为视力正常的用户打印文档时使用，另外还会在显示文档的”打印预览“时使用。
projection：用于投影媒体，如发表演讲时显示幻灯片的数字投影仪。
screen：在屏幕媒体（如桌面计算机监视器）中表现文档时使用。在这种系统上运行的所有Web浏览器都是屏幕媒体用户代理。
tty：在固定间距环境（如电传打字机）中显示文档时使用。
tv：在电视上显示文档时使用。

候选样式表

<link rel="stylesheet" type="text/css" href="sheet1.css" title="Default" />
<link rel="stylesheet" type="text/css" href="sheet1.css" title="Big Text" />
<link rel="stylesheet" type="text/css" href="sheet1.css" title="Crazy colors!" />

如果没有为样式表指定title，那么它将作为一个永久样式表（persistent style sheet）。

style元素

<style type="text/css">

style一定要使用type属性。

@import指令

@import url(sheet2.css);

@import出现在style容器中。它必须放在这里。

<style type="text/css">
		@import url(styles.css);/*必须放前面*/
		h1 {
				color:gray;
			}

可以限制所导入的样式表应用于一种或多种媒体

@import url(styles.css) all;
@import url(styles.css) screen print;

作用：一个外部样式表要使用到其他外部样式表中的样式。
原因：外部样式表不能包含任何文档标记，所以不能使用link元素。

@import url(http://example.org/library/layout.css);
@import url(basic-text.css);
@import url(print.css) print;
body {
		color: red;
	 }
h1 {
	color: blue;
	}

向后可访问性

在style内容区添加<!--和-->

<style type="text/css"><!--
@import url(print.css) print;
body {
		color: red;
	 }
h1 {
	color: blue;
	}
--></style>

CSS注释

/*和*/

CSS注释不能嵌套

内联样式（inline style）

直接写在HTML的标签上：

<p style="color: gray;">你好漂亮</p>

注意：不能写在body以外的标签上，如head、title。
一个内联style属性（记住，书上是说属性，不是标签）中只能放一个声明块，而不能放整个样式表。

选择器

规则结构：

h1 { color：red; background: yellow;}

选择器：h1
声明块：{color: red; background: yellow;}
声明：color: red;
属性：color
值：red

元素选择器

p {color: red;}

如果值是无效的，声明自动被忽略。
多个值用空格分开。

选择器分组

有相同样式：，

h2，
p {
 	color: gray;
 }

通配选择器

*：选中所有元素

* {
	margin：0；
	padding：0；
}

类选择器和ID选择器

<p class="warning">你好漂亮</p>
<p><span class="warning">beautiful</span></p>

*.warning {
 		font-weight: bold;
 		  }

一个元素可以添加多个类

<p class="warning urgent">你好漂亮</p>
<p><span class="warning">beautiful</span></p>

*.warning {
 		font-weight: bold;
 		  }
.urgent {
 		color: red;
 		}

选择有多个class属性值的元素（亲测可用）

<p class="warning urgent">你好漂亮</p>
<p><span class="warning">beautiful</span></p>

p.warning.urgent {
		color: red;
	}
	/*只会影响到同时有两个class属性的那个元素。*/

但是，感觉这个功能好像有点鸡肋，也说不出为什么，一种感觉。

ID选择器

<p id="urgent">你好漂亮</p>
<p><span id="warning">beautiful</span></p>

#warning {
 		font-weight: bold;
 		  }
#urgent {
 		color: red;
 		}

id的值只能唯一，一个元素只能有一个id。
（听说实际开发中id属性不能随便使用，由于要和后端数据传输的缘故，可能后端会篡改你设置的id。）

属性选择器

对于类选择器和ID选择器，所做的实际上只是选择属性值。
简单属性选择

h1[class] {
	color: silver;
	}

选择所有使用了class属性的h1元素。

实例：选择使用了alt属性的img元素：
用来诊断不是设计，即用来确定图像是否确实有效。

还可以根据多个属性进行选择，只需将属性选择器链接在一起即可

a[href][title] {
	font-weight: bold;
	}

根据具体属性值选择

a[href="http://www.css-discuss.org/about.html"] {
	font-weight: bold;
	}

根据部分属性值选择

如果属性能接受词列表（词之间用空格分隔），可以根据其中的任意一个词进行选择。

<p class="urgent warning">你好，世界</p>

p[class~="warning"] {
	fony-weight: bold;
	}

如果忽略~，需要完成完全值匹配。

根据部分属性值选择元素

img[title="Figure"] {
	border: 1px solid gray;
	}

可以匹配：
title=“Figure4. A bald-headed elder statesman”
title=“How To Figure Out Who’s In Charge”

子串匹配属性选择器

类型						描述
[foo^="bar"]			选择foo属性值以”bar“开头的所有元素
[foo$="bar"]			选择foo属性值以"bar"结尾的所有元素
[foo*="bar"]			选择foo属性值中包含子串”bar“的所有元素

特定属性选择类型

*[lang |="en"] {
	color: white;
}

这个规则会选择lang属性等于en或者以en-开头的所有元素。

<h1 lang="en">Hello!</h1>
<p lang="en-us">Greatings!</p>
<div lang="en-au">G'day!</div>
<p lang="fr">Bonjour!</p>
<h4 lang="cy-en">Jrooana!</h4>

选中前三个，后两个不选中。

使用文档结构

DOM树结构
父子关系：如果一个元素出现在文档层次结构中另一个元素的上一层，则称前者是后者的父元素。反之，如果一个元素在另一个元素的下一层，则称前者是后者的子元素。
父子关系是祖先-后代关系的特例

后代选择器

descendant selector，也称为包含选择器或上下文选择器（contextual selector）。

h1 em {
	color: gray;
	}

从右向左读选择器！

特定的后代选择器
就是使用上class

td.siderbar {
	background: blue;
	}
td.main {
	background: white;
	}

选择子元素

在某些情况下，可能并不想选择一个任意的后代元素，而是希望缩小范围。
使用子结合符，即大于号（>）：

h1 > strong {
	color: red;
	}

选中h1的子元素是strong的strong元素。

/*只会选择第一个h1的strong*/
<h1>你好漂亮<strong>真的</strong>没骗你</h1>
<h1>你好<em>吗<strong>?</strong></em>好</h1>

书中：选择作为h1元素子元素的所有strong元素。

选择相邻兄弟元素

对二者具有相同父元素的兄弟元素进行选择。
使用相邻兄弟结合符（adjacentsibling combinator），就是一个记号（+）。

h1 + p {
	margin-top: 0;
	}

选择紧接在一个h1元素后出现的所有段落，h1要与p元素有共同的父元素。

用一个结合符只能选择两个相邻兄弟元素中的第二个元素。
即：h1 + p 只会选择p，并不会把h1选择上。

那么，如果有下面这个结构，要选中ol和ul，怎么办？
注意“+”后面的元素必须是跟在前面那个元素之后的。

<div>
	<ol>
		<li>1</li>
		<li>5</li>
		<li>2</li>
	</ol>
	一些文字（属于div）
	<ul>
		<li>4</li>
		<li>6</li>
		<li>0</li>
	</ul>
</div>

两个元素之间的文本内容不会影响相邻兄弟结合符起作用。

html > body ol + ul,
html > body > ol {
	margin: 0 auto;
	}

伪类和伪元素

利用这些选择器，可以为文档中不一定具体存在的结构指定样式，或者为某些元素（甚至是文档本身）的状态所指示的幻像类指定样式。

伪类选择器

伪类（pseudo-class）
伪类选择器（pseudo-class selector）
a元素为例：

a.visited {
	color: red;
	}
<a href="http://www.w3.org/" class="visited">W3C Web site</a>

这种方法要求每次访问一个新页面时都要修改锚的类。

a:visited {
	color: red;
	}

CSS定义了伪类，使已访问页面的锚就好像已经有一个“visited”类一样。

链接伪类

伪类名			描述
:link			指示作为链接（即有一个href属性）并指向一个未访问地址的所有锚。
				注意，有些浏览器可能会不正确地将:link解释为指向任何超链接，包括
				已访问和未访问的超链接
:visited		指示作为已访问地址超链接的所有锚

<body link="purple" vlink="silver">

等同于

a:link {
	color: purple;
	}
a:visited {
	color: silver;
	}

动态伪类

根据用户行为改变文档的外观。

伪类名		描述
:focus		指示当前拥有输入焦点的元素，也就是说，可以接受键盘输入
			或者能以某种方式激活的元素
:hover		指示鼠标指针停留在哪个元素上，例如，鼠标指针可能停留在一个超链接上
			:hover就会指示这个超链接
:active		指示被用户输入激活的元素，例如，鼠标指针停留在一个超链接上时，如果
			用户点击鼠标，就会激活这个超链接，:active将指示这个超链接

伪类的顺序很重要，建议是：link-visited-focus-hover-active
动态伪类可以应用到任何元素。

动态样式的实际问题

CSS规范指出，文档第一次显示之后，用户代理不必重绘文档。
（可能造成设计的实际效果与预期不一致）

选择第一个子元素

静态伪类：first-child
选择元素的第一个子元素

<div>
	<p>你好漂亮</p>
	<ul>
		<li>Insert key</li>
		<li>是<strong>沙漠</strong></li>
		<li>Yes</li>
	</ul>
	<p>睡觉《恶魔》<em>不</em>好</p>
</div>

/*将作为某元素第一个子元素的所有p元素设置为粗体*/
p:first-child {
	font-weight: bold;
	}
/*将作为某个元素（在HTML中，这肯定是一个ol或ul元素）
	第一个子元素的所有li元素变成大写*/
li:first-child {
	text-transform: uppercase;
	}

作为第一个子元素的元素包括第一个p、第一个li和strong及em元素。

我觉得可以理解为第一次出现这个元素，至于从哪里开始找，可以在前面添加内容，如：

html > body div.main p:first-child {
	color: green;
	}

根据语言选择

lang()伪类
从对应的模式来讲，:lang() 伪类就像是 |= 属性选择器。

/*把所有法语元素变成斜体*/
*:lang(fr) {
	font-style: italic;
	}

在需要语言特定的样式时，伪类选择器比属性选择器好。
原因：设置语言不止有lang属性，还可以是HTTP首部（xml:lang）、META元素等。

结合伪类

用哪种顺序并不重要。

a:link:hover:lang(de) {
	color: gray:
	}

注意：互斥的伪类不要结合在一起使用。用户代理器会自动忽略。

a:link:visited

伪类选择器

伪元素能够在文档中插入假想的元素，从而得到某种效果。
CSS2.1中定义的4个伪元素：
1.设置首字母样式（:first-letter）
2.设置第一行样式（:first-line）
3.设置之前元素的样式（:before）
4.设置之后元素的样式（:after）

设置首字母样式
设置一个块级元素首字母的样式，而且仅对该首字母设置样式：

p:first-letter {
	color: red;
	}

每一段的第一个字母变成红色

<p>abcs</p>
<p>fggdgs</p>

设置第一行的样式

<div style="width: 100px;">
	<p>为了放不下我顺便写几行字</p>
</div>

p:first-line {
	color: purple;
	}

:first-letter和:first-line的限制

在CSS2中，:first-letter和:first-line伪元素只能应用于标记或段落之类的块级元素，而不能应用于超链接等的行内元素。
在CSS2.1中，:first-letter能应用到所有元素。
能应用的CSS属性限制表：

:first-letter						:first-line
所有font属性							所有font属性
color								color
所有background属性					所有background属性
所有margin属性						word-spacing
所有padding属性						letter-spacing
所有border属性						text-decoration
text-decoration 					vertical-align
vertical-align(如果float设置为none)	text-transform
text-transform						line-height
line-height							clear（仅适用于CSS2；CSS2.1已去除）
float								text-shadow（仅适用于CSS2）
letter-spacing（CSS2.1中新增）
word-spacing（CSS2.1中新增）
clear（仅适用于CSS2；CSS2.1已去除）
text-shadow（仅适用于CSS2）

设置之前和之后元素的样式

h2:before {
	content: "}}";
	color: silver;
	}

h2:after {
	content: " the end.";
	color: silver;
	}

结构和层叠

每个文档都会生成一个结构树，有了结构树，选择器才能起作用，这也是CSS另一个重要方面（即继承）的核心。

特殊性

同一个元素可以使用两个或多个规则来选择，每个规则都有其自己的选择器。
特殊性用来决定元素应用多个样式规则中的哪一些规则。
选择器的特殊性由浏览器本身的组件确定。
特殊值表述为4个部分，如：0，0，0，0。

• 对于选择器中给定的各个ID属性值，加0，1，0，0。
• 对于选择器中给定的各个类属性值、属性选择或伪类，加0，0，1，0。
• 对于选择器中给定的各个元素和伪元素，加0，0，0，1。（伪元素是否有特殊性？在这方面CSS2有些自相矛盾，不过CSS2.1很清楚地指出，伪元素有特殊性，而且特殊性为0，0，0，1。）
• 结合符和通配选择器对特殊性没有任何贡献。

声明和特殊性

一旦确定一个选择器的特殊性，这个值将授予其所有相关声明。
即，用户代理器会把规则“解组”为单独的规则，再把特殊值赋给它们。

h1, 
h2.section {
	color: silver;
	background: black;
	}

解组：

h1 { color: silver;}
h1 {background: black;}
h2.section { color: silver;}
h2.section {background: black;}

通频选择器特殊性

根本就没有特殊性，甚至连0特殊性都没有。因此对选择器的总特殊性没有任何影响。

内联样式特殊性

特殊性比所有其他声明的特殊性都高，特殊性的第一个0是为内联样式保留的。1，0，0，0。

重要性

!important

p.dark {
	color: #333 !important;
	background: white;
	}

继承

样式不仅应用到指定的元素，还会应用到它的后代元素。

ul { color: gray;}

边框不能继承
margin、border、padding之类的。
0特殊性比无特殊性要强。

继承bug

以下规则会导致文档中除表之外的所有文本都有更小的字体：

body {font-size: 0.8em;}

改进：

body，
table,
th,
td {
	font-size: 0.8em;
}

通配选择器（特殊性0）的规则会覆盖继承（无特殊性）的规则。

用户代理的超链接样式可能包含以下规则：

a:link {color:blue;}

所以，以下样式不会改变a链接文本的样式：

#toolbar {
	color: white;
	background:black;
	}

改进：

#toolbar {
	color: white;
	background:black;
	}
#toolbar a:link {
	color: white;
	}

层叠

特殊性相同的两个规则（就近原则）。
1.有!important的获胜
2.声明的顺序越后，优胜。

按权重和来源排序

声明权重方面要考虑5级。权重由大到小的顺序依次为：
1.读者的重要声明
2.创作人员的重要声明
3.创作人员的正常声明
4.读者的正常声明
5.用户代理声明

按特殊性排序

较高特殊性强于较低特殊性

按顺序排序

文档中包含的规则比导入的规则权重高
可以以此解释链接样式顺序：link-visited-focus-hover-active、link-visited-hover-active（LVHA）

其实:link和:visited的顺序并不重要，可以是LVHA和VLHA，但是建议LVHA。

值和单位

1.数字
2.百分数
3.颜色（命名颜色、#十六进制代码、rgb()、rgba()）
rgb(a,b,c)：
里面a、b、c参数可以是百分数和数字(0-255)。
留意：Web安全色。

长度单位

1.绝对长度单位：

1. 英寸（in）
2. 厘米（cm）
3. 毫米（mm）
4. 点（pt）：打印机和打字机使用，一英寸=72点。
5. 派卡（pc）：印刷术语。1派卡=12点。

2.相对长度单位

1. em（em-height）：默认等于给定字体font-size的值。在设置字体大小时，em的值 会相对于父元素的字体大小改变。
2. ex（x-height）：字体中小写x的高度。
3. px

em和ex的实际问题

一般取em值的一半作为ex的值。（因为ex的计算相对困难）

像素长度

参考像素：90ppi
打印机：96ppi

URL

1.相对URL（relative URL）
2.绝对URL（absolute URL）
一个位于http://www.waffles.org/toppings/tips.html的HTML文档，它包含一个指向样式表http://www.waffles.org/styles/basic.css的链接：

<link rel="stylesheet" type="text/css" 
href="http://www.waffles.org/styles/basic.css">

在文件basic.css中有一个@import语句指向另一个样式表：

@import url(special/toppings.css);

则实际要导入的样式表位于：
http://www.waffles.org/styles/special/toppings.css
而不是：
http://www.waffles.org/toppings/special/toppings.css

关键字

一个值需要用某个词来描述，这种词就称为关键字。
none、normal之类，一个属性的关键字于另一个属性的关键字如果相同，可能代表不同行为。

inherit

CSS2.1中所有属性共有的关键字。
inherit使一个属性的值于其父元素的值相同。
（我怎么觉得很鸡肋啊）
正常情况下，直接指定的样式总会优先于继承的样式，但是通过使用inherit可以把情况反过来。

CSS2单位

1.角度值

• 度（deg）
• 梯度（grad）
• 弧度（rad）

2.时间值

• 毫秒（ms）
• 秒（s）

3.频率值

• 赫兹（Hz）
• 兆赫（MHz）

URI（Uniform Resource Identifier，统一资源标识符）
URL（Uniform Resource Locator，统一资源定位符）

字体

有很多字体，它们的分辨度也不是很高，字体的属性分辨度也不是很高。所以CSS为字体问题提供一些解决机制。

字体系列

除了各种特定字体系列外（如Times、Verdana、Helvetica或Arial），CSS还定义了5种通用字体系列。

1. Serif字体：字体成比例，而且有上下短线。
2. Sans-serif字体：字体成比例，而且没有上下短线。
3. Monospace字体：字体不成比例。
4. Cursive字体：模仿人的手写体。
5. Fantasy字体：无法用任何特征来定义。
   成比例：字体中的所有字符根据其不同大小有不同的宽度。

使用通用字体系列

使用属性font-family在文档中采用上述任何字体系列。

指定字体系列

通过结合特定字体名和通用字体系列，可以创建与你们预想的完全相同（或者至少很接近）的文档。

h1 {font-family: Georgia,serif;}

当没有Georgia字体时，则系统会选另一种serif字体。

使用引号
当一个字体名中有一个或多个空格（如New York），或者如果字体名包括#或$之类的符号，才需要在font-family声明中加引号。
至于使用单引号还是双引号，这两种都是可以接受的。
在style中使用的时候不能和style使用相同的引号。

字体加粗

font-weight：

• normal
• bold
• bolder
• lighter
• 100
• 200
• 300
• 400
• 500
• 600
• 700
• 800
• 900
• inherit

Zurich字体可以直接使用变形字体来加粗：

• Zurich Bold
• Zurich Black
• Zurich UltraBlack
• Zurich Light
• Zurich Regular

加粗如何起作用

400定义等价于normal
700定义等价于bold
会寻找不同粗细程度的字体，使用可能设置多个值看起来字体粗细差不多。
变形词有：Normal、Regular、Roman或Book：400、Medium：500等
font-weight是可以继承的。

让字体更粗

bolder属性值。用户代理首先必须确定从父元素继承的font-weight值。
上移规则：有更粗字体则移到更粗字体对应的字号，没有就加100，直到900不可上升。

让字体更细

lighter属性值。粗度下移。

字体大小

font-size属性：

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large
• smaller
• larger
• <length>
• <percentage>

字体大小由一个em框来确定。

绝对大小

如果medium=10px；
则large=15px；
CSS2中缩放因子可能介于1.0~1.2之间。

相对大小

larger和smaller

百分数和大小

百分数值总是根据从父元素继承的大小进行计算。
百分数一般是取最接近的整数。
em是和百分数一样的规则。
1em=100%

字体大小和继承

font-size可以继承。不过继承的是计算值而不是百分数。
如果有多级继承，取整错误将逐渐积累。

使用长度单位

以下所有font-size声明都是等价的：

p.one {font-size: 36pt;}
p.two {font-size: 3pc;}
p.three {font-size: 0.5in;}
p.four {font-size: 1.27cm;}
p.five {font-size: 12.7mm;}

由于不同操作系统的点不一样大和显示器分辨率不同的原因，一般使用像素值来指定字体大小。
使用像素大小保持文本和图形等高

风格和变形

font-style和font-variant

有风格的字体

font-style：

• italic（斜体）
• oblique（倾斜）
• normal（竖直，最好描述为“非斜体或倾斜的文本”）
• inherit（继承）
  斜体和倾斜不一样，倾斜只是将竖直的字体进行简单的计算得到而已。

字体变形

font-variant：

• small-caps（要求使用小型大写字母文本）
• normal（正常文本）
• inherit

h1 {font-variant: small-caps;}
h1 code,
p {font-variant: normal;}

<h1>The Uses of <code>font-variant</code> On the Web</h1>
<p>
The property <code>font-variant</code> is very interesting... 
</p>

大写字母：更大的字母；
小写字母：转为小型大写字母。
（与text-transform: uppercase;很类似，但是不一样）

拉伸和调整字体

CSS2的属性，CSS2.1已移除。
拉伸：font-stretch：

• normal
• wider
• narrower
• ultra-condensed
• extra-condensed
• condensed
• semi-condensed
• expanded
• extra-expanded
• ultra-expanded
• inherit

让字体变得更胖或更瘦

拉伸字体字符：font-size-adjust：

• <number>
• none
• inherit
  当所用字体并非创作人员首选时，仍然保证可以辨识。（x-height）
  公式：
  声明的font-size × （font-size-adjust值 ÷ 可用字体的方面值）= 调整后的font-size
  方面值 = x-height ÷ font-size

font属性

简写属性。

[[<font-style> || <font-variant> || <font-weight>]?<font-size>
[/<line-height>]?<font-family>] | caption | icon | menu |
message-box | small-caption | status-bar | inherit

三个值：font-style、font-variant、font-weight可以任意顺序。
font-size、font-family必须这个顺序。

增加行高

line-height属性（文本属性，不是字体属性）
可以作为font-size的一个补充值，并用一个斜线（/）与之分隔。

font-size必须在line-height之前。

适当地使用简写

在使用简写属性font时，所有被忽略的值都会重置为其默认值。

使用系统字体

Web页面结合用户操作系统的配置。这些值用于取得 操作系统的字体大小、字体系列、字体加粗、字体风格和字体变形，并将其应用到一个元素。

• caption：用于有标题的控件，如按钮。
• icon：用于对图标加标签
• menu：用于菜单，即下拉菜单和菜单列表。
• message-box：用于对话框。
• small-caption：用于对小控件加标签。
• status-bar：用于窗口状态条。

例：把一个按钮的字体设置为与操作系统中的按钮字体完全相同：

button {font: caption;}

可修改其中的单个值。

字体匹配

工作流程:

1. 用户代理创建（或访问）一个字体属性数据库。

2. 用户代理取得应用了字体属性的元素，并构建一个字体属性列表，其中列出显示该元素的必要字体属性。
   a.font-style
   b.font-variant
   c.font-weight
   d.font-size

3. 若在第2步中未匹配任何字体，用户代理就会在这个字体系列中查找下一个候选字体。如果找到，则重复第2步。

4. 找到一个通用匹配，未包含元素所需的一切，回到步骤3，再回到步骤2。

5. 没有匹配，使用默认字体。

font-face规则

@font-face已经从CSS2.1中去除。太复杂。

4种确定文档使用字体的方法

1. 字体名匹配
2. 智能字体匹配
3. 字体合成
4. 字体下载

@font-face (font-family: "Scarborough Fair";
src: url(http://www.example.com/fonts/ps/scarborough.ps);}

文本属性

文本是内容，而字体用于显示这个内容。

缩进和水平对齐

缩进文本：text-indent属性
值：

1. <length>
2. <percentage>
3. inherit

所有元素的第一行都可以缩进一个给定长度，可以是负值。
一般地，可以为所有块级元素应用text-indent，但无法将这个属性应用到行内元素，图像之类的替换元素也无法应用text-indent属性。
负值可以实现“悬挂缩进”：

p {
	text-indent: -4em;
	padding-left: 4em;
	}

百分数要相对于缩进元素父元素的宽度。
这个属性可以继承

水平对齐

text-align：
CSS2.1：

1. left（默认值。边界呈锯齿状）
2. center
3. right
4. justify（两端文本对齐）
5. inherit

CSS2：

1. left
2. center
3. right
4. justify（两端文本对齐）
5. <string>
6. inherit

text-align不会控制元素对齐，而只影响其内部内容。
是用户代理（而不是CSS）来确定两端对齐文本如何拉伸。

垂直对齐

line-height和vertical-align

行高

line-height属性是指文本行基线之间的距离，而不是字体的大小，它确定了将各个元素框的高度增加或减少多少。

1. <length>
2. <percentage>
3. <number>
4. normal（默认值）
5. inherit

文本基线拉开的距离可能比line-height值更大。
line-height并不影响替换元素的布局，不过确实可以应用到替换元素。

构造文本行

行间距 = line-height的计算值 - font-size的计算值。

指定line-height值

p {line-height: 1.5em;}

行高和继承

line-height值从父元素继承时，要从父元素计算，而不是在子元素上计算。

body {font-size: 10px;}
div {line-height: 1em; width:200px;}
/*计算结果是10px*/
p {font-size: 18px;}

<div>
	<p>这是一段为了测试打的文字，没有什么特别的，还有点啰嗦，当作练习打字</p>
</div>

解决方法：指定一个数作为缩放因子。缩放因子将是继承值而不是计算值。

body {font-size: 10px;}
div {line-height: 1.5; width:200px;}
/*计算结果是10px*/
p {font-size: 18px;}

<div>
	<p>这是一段为了测试打的文字，没有什么特别的，还有点啰嗦，当作练习打字</p>
</div>

垂直对齐文本

vertical-align属性：只应用于行内元素和替换元素。
vertical-align属性不能继承。
值：

• baseline（要求一个元素的基线与其父元素的基线对齐）
• sub（下标）
• super（上标）
• top（将元素行内框的顶端与行框的顶端对齐）
• text-top（要对齐的元素的行内框顶端与默认文本框的顶端对齐）
• middle（居中对齐）
• bottom（将元素行内框的底端与行框的底端对齐）
• text-bottom（要对齐的元素的行内框底端与默认文本框的底端对齐）
• <percentage>（会把元素的基线（或者替换元素的底边）相对于父元素的基线升高或降低指定的量（为该元素line-height的百分数））
• <length>（把元素与对齐前相比上升或下降指定数值高度）
• inherit

字母隔和字母间隔

word-spacing和letter-spacing

字母隔

word-spacing：每个单词的间隔（中文没有用，应该）

• <length>
• normal
• 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

怪异的装饰

text-decoration不能够继承。
text-decoration和vertical-align搭配会更加奇怪，比如上划线不会跟着文字一起移动。
使用none消除文本装饰的行为是不符合规范的。

文本阴影

CSS2中的属性，CSS2.1不保留。
text-shadow：可以接受一个颜色值和三个数值。

• none
• [<color> || <length><length><length>?,]*[<color> || <length><length><length>?]
• inherit

text-shadow: green 5px 0.5em;

相对于文本向右偏移5像素向下偏移0.5em的绿色阴影。

处理空白符

white-space：

• normal（默认值，丢弃多余的空白符）
• nowrap（防止元素中的文本换行）
• pre（保留多余的空白符，包括回车）
• pre-wrap（该元素的文本会保留空白符序列，文本行会正常地换行）
• pre-line（像正常文本一样合并空白符，但是保留换行符）
• inherit

white-space属性：

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

文本方向

direction：影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向，以及两端对齐元素中最后一行的位置。
只有unicode-bidi属性设置为embed或bidi-override时才会应用direction属性。

• ltr（left to right）
• rtl（right to left）
• inherit

unicode-bidi

• normal（默认值，元素不会对双向算法打开附加的一层嵌套。对于行内元素，顺序的隐式重排会跨元素边界进行。）
• embed（如果是一个行内元素，这个值会对于双向算法打开附加的一层嵌套。这个嵌套层的方向由direction属性指定。）
• bidi-override（这会为行内元素创建一个覆盖。对于块级元素，将为不在另一块中的行内后代创建一个覆盖。）
• inherit

基本视觉格式化

基本框

CSS假定每个元素都会生成一个或多个矩形框，这称为元素框。
各元素框中心有一个内容区（content area）
这个内容区周围有内边距，边框，外边距。
边框的宽度绝对不能负值。

包含块

每个元素都相对于其包含快摆放。
包含块就是一个元素的“布局上下文”

<body>
	<div>
		<p>This is a paragraph.</p>
	</div>
</body>

p元素的包含块是div元素，div的包含块是body元素。

块级元素

外边界、外边距、边框、内边距、内边界、宽高。

水平格式化

width影响的是内容区的宽度，而不是整个可见的元素框。

水平属性

• margin-left
• margin-right
• border-left
• border-right
• padding-left
• padding-right
• width

只有3个属性可以设置为auto：width、margin-left、margin-right。
width必须设置为auto或某种类型的非负值。

使用auto

可以用auto弥补实际值与所需总和的差距。

不只一个auto

比如将margin-left和margin-right设置为auto，width设置为值，则可以实现内容区水平居中。
一个外边距和width设置为auto，则设置为auto的外边距会减为0，width会设置为所需的值 ，使得元素完全填充其包含块。
三个都是auto，则两个外边距都减为0，width尽可能宽。

负外边距

子元素比父元素更宽。
设置为auto的右外边距计算为负值的情况：如果其他属性的值要求右外边距为负，以便满足元素不能比其包含块更宽的需求。

div {
	width: 400px;
	border: 3px solid black;
	}
p.wide {
	margin-left: 10px;
	width: 500px;
	margin-right: auto;
	border: 3px solid gray;
	}

<div>
	<p class="wide">这是一段文字，不会很长，也不会很短，就是有点无聊。</p>
</div>

此时margin-right为-116px。

如果左外边距为负，不仅段落会超出div的边框，还会超出浏览器窗口本身的边界！

百分数

如果width、内边距、外边距设置为百分数值，会应用同样的基本规则。
边框的宽度不能是百分数，而只能是长度。

替换元素

非替换元素的所有规则同样适用于替换块元素，只有一个例外：如果width为auto，元素的宽高则是内容的固有宽高。
当width和height只设置一个时，另一个为auto。

垂直格式化

一个元素的默认高度由其内容决定。
在CSS中，可以对任何块级元素设置显式高度：
1.如果指定高度 > 内容所需高度：
多余的高度产生一个视觉效果。
2.如果指定高度 < 内容所需高度：
默认：增加滚动条。
具体行为：取决于overflow属性的值。

垂直属性

• margin-top
• border-top
• padding-top
• height
• padding-bottom
• border-bottom
• margin-bottom

只有3个属性可以设置为auto：height、margin-top、margin-bottom。
有无设置border-style属性的边框宽度：
有：medium
无：0

如果在一个正常流中一个块元素的margin-top或margin-bottom设置为auto，它会自动计算为0。

百分数高度

将元素垂直居中的唯一方法就是把上、下外边距都设置为一个百分数（比如内容区50%，上下外边距25%）。

auto高度

在最简单的情况下，如果块级正常流设置为height：auto，显示时其高度将恰好足以包含其内容（包括文本）的行盒。
如果块级正常流元素的高度设置为auto，而且只有块级子元素，其默认高度将是从最高块级子元素的外边框边界到最低块级子元素外边框边界之间的距离。
（因此，子元素的外边距会“超出”包含这些子元素的元素。）

合并垂直外边距

这种合并行为只应用于外边距。
相邻外边距会沿着竖轴合并。
也可以用“重叠”代替“合并”的说法。

负外边距

负外边距确实对垂直格式化有影响，而且它们会影响外边距如何合并。
都负：取绝对值大的负值。一正一负：正减去负的绝对值。

文档中后出现的正常流元素可能会覆盖较早出现的元素（如果这两个元素重叠）。

列表项

CSS2引入了专门为解决列表项样式问题而设计的一些属性，如marker-offset（CSS2.1中已去除）。

在列表项内容之外，处理为内容开始处的一个内联标志的属性：list-style-position。

行内元素

非替换元素和替换元素在内联内容方面的处理稍有不同。

行布局

一个挨着一个放。上下边框可能重叠。

基本术语和概念

• 匿名文本（anonymous text）：指所有未包含在行内元素中的字符串。
• em框：em框在字体中定义，也称字符框（character box）。
• 内容区：元素中各字符的em框串在一起构成的框。
• 行间距（leading）：font-size值 - line-height值。
• 行内框：这个框通过向内容区增加行间距来描述。
• 行框：这是包含该行中出现的行内框的最高点和最低点的最小框。

行内框在行中根据其vertical-align属性值垂直对齐。

1. 确定元素行内框高度：行间距处以2，分别应用到em框的顶部和底边，加上替换元素的height、margin-top、margin-bottom、padding-top、padding-bottom、border-top-width和border-bottom-width值。
2. 找到基线位置
3. 确定偏移量
4. 计算行框高度

行内格式化

可以为一个块级元素设置line-height值，并将这个值应用到块中的所有内容，而不论内容是否包含在行内元素中。

行内非替换元素

1. 建立框
   font-size值确定内容区的高度。
   line-height值行内框高度。
   行框：两者最大值。
2. 垂直对齐
   如果改变行内框的垂直对齐，会应用同样的高度确定原则。

vertical-align各个关键字值的效果描述如下：

• top：将元素行内框的顶端与包含该元素的行框的顶端对齐。
• bottom：将元素行内框的底端与包含该元素的行框的底端对齐。
• text-top：将元素行内框的顶端与父元素内容区的顶端对齐。
• text-bottom：将元素行内框的底端与父元素内容区的底端对齐。
• middle：将元素行内框的垂直中点与父元素基线上0.5ex处的一点对齐。
• super：将元素的内容区和行内框上移。上移的距离未指定，可能因用户代理的不同而不同。
• sub：与super相同，只不过元素会下移而不是上移。
• <percentage>：将元素上移或下移一定距离，这个距离由相对于元素line-height值指定的一个百分数确定。

<div>
	<p>这是一段文字，将用来演示前面提到的那些值的实际效果：
	<span class="s1">第一个值，top</span>
	<span class="s2">第二个值，bottom</span>
	<span class="s3">第三个值，text-top</span>
	<span class="s4">第四个值，text-bottom</span>
	<span class="s5">第五个值，middle</span>
	<span class="s6">第六个值，super</span>
	<span class="s7">第七个值，sub</span>
	<span class="s8">第八个值，percentage</span>
</div>

.s1{vertical-align: top;}
.s2{vertical-align: bottom;}
.s3{vertical-align: text-top;}
.s4{vertical-align: text-bottom;}
.s5{vertical-align: middle;}
.s6{vertical-align: super;}
.s7{vertical-align: sub;}
.s8{vertical-align: 50%;}

管理line-height

改变一个行内元素的line-height可能导致文本行相互重叠。
解决方法：
1.对font-size有改变的元素结合使用em单位。
2.增加段落的line-height。

缩放行高

将line-height设置为一个原始数字值。这个数字值就是缩放因子。

增加框属性

行内元素的边框边界由font-size而不是line-height控制。
外边距不会应用到行内非替换元素的顶端和底端，它们不影响行框的高度。
如果边距有背景，由于上下边距不计入高度的原因，可能会对文字造成遮盖。

行内替换元素

一般行内替换元素有固定的高度和宽度。
替换元素可以增加行框高度，但不影响line-height的值。然而，行内替换元素还是有一个line-height值。因为行内元素需要这个值，从而在垂直对齐时能正确地定位元素。

增加框属性

为行内替换元素增加内边距、边框和外边距会增大其行内框。
负外边距会使替换元素的行内框小于正常大小。

替换元素和基线

默认地，行内替换元素位于基线上。

改变元素显示

display：

1. none（无，不显示）
2. inline（初始值，行内元素）
3. block（块级元素）
4. inline-block（行内块元素，块级元素和行内元素的混合。作为一个行内框与其他元素和内容相关。效果类似img）
5. list-item（列表项元素）
6. run-in（块/行内元素混合，可以使某些块级元素成为下一个元素的行内部分。）
7. table
8. inline-table
9. table-row-group
10. table-header-group
11. table-footer-group
12. table-row
13. table-column-group
14. table-column
15. table-cell
16. table-caption
17. inherit

改变的只是显示角色，而不是其本质。
下面是无效标记：

<a href="www.baidu.com" style="diaplay: block;">
<p style="display: inline;">this is wrog!</p>
</a>

run-in实例：

<h1 style="display: run-in;">这是一个标题</h1>
<p>这是正文部分，很多文字那种ABC地方打扫房间萨芬
立刻解放司法解释法律手段回复发罗拉费
</p>

没有达到预计效果：预计效果是标题和正文同行。
注意：只有当run-in框后面是一个块级框时run-in才起作用。

计算值

如果元素是浮动元素或定位元素，display的计算值可以改变。

内边距、边框和外边距

克服表格布局的不足，使用边框布局。

基本元素框

所有文档元素都生成一个矩形框，称为元素框（element box），它描述了一个元素在文档布局中所占的空间大小。

宽度和高度

盒子模型，width和height（应用于块级元素和替换元素）
值：<length>、<percentage>（height没有）、auto、inherit

外边距与内边距

元素框在元素之间只提供了很少的空间，通过增加内、外边距来增大元素之间的距离。

外边距

margin：

• <length>
• <percentage>
• auto
• inherit

margin可以接受任何长度度量，可以是像素、英寸、毫米或em。

长度值和外边距

四个值的顺序（逆时针）：

margin：top right bottom left

百分数和外边距

百分数是相对于父元素的width计算的。

值复制

• 如果缺少左外边距的值，则使用右外边距的值。
• 如果缺少下外边距的值，则使用上外边距的值。
• 如果缺少右外边距的值，则使用上外边距的值。

单边外边距属性

• margin-left
• margin-right
• margin-top
• margin-bottom

负外边距和合并外边距

负外边距会导致元素框超出父元素，或者与其他元素重叠。

外边距和行内元素

外边距可以应用到行内元素，不过效果稍有不同。
对非替换元素应用外边距，对行高没有任何影响，在外边距透明时，上下外边距没有视觉效果、左右外边距会与前后内容有间距或重叠。
为替换元素应用外边距会影响行高。

边框

元素的边框就是围绕元素内容和内边距的一条或多条线。
每个边框有3个方面：宽度或粗细、其样式或外观、颜色。
默认：medium（2px）、none、元素本身的前景色。

边框和背景

CSS规范清楚地指出元素的背景会延伸到边框边界之外。

有样式的边框

border-style：

• none
• hidden
• dotted
• dashed
• solid
• double
• groove
• ridge
• inset
• outset
• inherit

边框的颜色要基于元素的color值。

多种样式

按照top-right-bottom-left的顺序。

border-style： solid dashed dotted double；

单边样式

• border-top-style
• border-right-style
• border-bottom-style
• border-left-style

边框宽度

border-width：

• thin
• medium
• thick
• <length>
• inherit

单边属性：

• border-top-width
• border-right-width
• border-bottom-width
• border-left-width

根本没有边框

当border-style设置为none时，border-width会变为0。

边框颜色

border-color：

• <color>
• transparent（透明边框，有宽度但是不可见。）
• inherit

简写边框属性

• border-top
• border-right
• border-bottom
• border-left

全局边框

border：

[<border-width> || <border-style> || <border-color>] | inherit

边框和行内元素

规则很大程度上与外边距和行内元素的相应规则相同。

内边距

padding：

• <length>
• <percentage>
• inherit

元素背景会延伸到边框的外边界，到达边框之前必须先经过内边距。
内边距不合并。

百分数值和内边距

百分数值要相对于其父元素的width计算。

单边内边距

• padding-top
• padding-right
• padding-bottom
• padding-left

内边距和行内元素

对于有背景色和内边距的行内非替换元素，背景可以向元素上面和下面延伸。

内边距和替换元素

可以对替换元素应用内边距，内边距会围绕其内容。