从零开始学CSS3
字体与文本相关属性
字体与文本相关属性是HTML网页中使用最多的属性，网页上字体颜色、字体大小、字体粗细等这些字体外观都是通过字体相关属性控制的。文本的对齐方式、文本的换行风格都是通过文本相关属性控制的。CSS3的一个重要功能就是增加了服务器字体功能。这样避免了浏览者浏览网页时因为字体缺失导致网页效果变差的问题。
字体相关属性
CSS为控制文本的字体提供了大量属性。字体相关属性如下：
- font:-style font-variant font-weight font-size line-height font-family的复合属性值。使用font属性可同时控制文字的样式、字体粗体、字体大小、字体等属性，为了更具体的进行控制。通常不建议使用该属性。
- color:该属性用于控制文本颜色，该属性的值可以是任何有效的颜色值，包括字符串类型的颜色名、十六进制的颜色值，或者使用rgb()函数设置的RGB值等，甚至包括CSS3提供的HSL颜色值等
- font-family:设置文字的字体，因为字体需要浏览器内置字体的支持，该属性可以设置多个显示字体，浏览器按该属性指定的多个字体依次搜索，以优先找到的字体来显示文字。多个属性值之间以英文逗号(,)隔开
font-size:设置文字字体大小，此处的字体大小既可以是相对字体大小也可以是绝对字体大小。该属性支持如下属性值。
1.xx-samll:绝对字体尺寸，最小字体
2.x-small:绝对字体尺寸。较小字体
3.small:绝对字体尺寸。小字体
4.medium:绝对字体尺寸。正常大小字体。这是默认值
5.large:绝对字体尺寸。大字体。
6.x-large:绝对字体尺寸。较大字体
7.xx-large:绝对字体尺寸。最大字体。
8.larger:相对字体尺寸。相对于父组件的字体进行相对增大
9.smaller:相对字体尺寸。相对于父组件的字体相对减少
10.length:直接设置字体大小。该值即可设置为一个百分比值，意味着该字体大小是父组件中字体大小的百分比；也可设置为一个数值加长度单位，例如11pt、14px等
font-size-adjust:该属性用于控制不同字体的字体尺寸进行微调。该属性可设置为none或用一个数值代表调整比例
- font-stretch:该属性用于改变文字横向的拉伸，该属性默认值为normal，即不拉伸。还有两个属性值，即narrower和wider,前者是横向压缩，后者是横向拉伸
- font-style:该属性用于设置文字风格，是否采用斜体等。该属性的常用属性值有：normal、italic、oblique,这些属性值依次表示设置文字正常、斜体、倾斜字体
- font-weight:该属性用于设置字体是否加粗。该属性值表示加粗的程度，加粗程度用lighter、normal、bold、bolder等常用属性表示。也可以用数值来控制
- text-decoration:该属性用于控制文字是否有修饰线。属性值有:none,blink,underline、line-through、overline,分别对应的修饰效果为无修饰、闪烁、下划线、中画线和上画线
- font-variant:该属性用于设置文字的大写字母的格式。该属性支持normal、small-caps两个属性值，分别对应于正常的字体、小型的大写字母字体。
- text-shadow:该属性用于设置文字是否有阴影效果。
- text-transform:该属性用于设置文字的大小写。该属性值可以是none、capitalize、uppercase和lowercase，分别代表不转化、首字母大写、全部大写和全部小写。
- line-height:该属性用于设置字体的行高,即字体最底端与字体内部顶端的距离。为负值的行高可用来实现阴影效果
- letter-spacing:该属性用于设置字符之间的间隔。该属性将指定的间隔添加到每个字符之后，但最后一个文字不会受该属性的影响。该属性支持normal和数值+长度单位（如11pt、14px等）两种属性值
- word-spacing:该属性用于设置单词之间的间隔。该属性支持normal和数值+长度单位(如11pt、14px等)两种属性值
代码示例：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<html>
<head>
<meta charset="utf-8">
<title>字体相关属性设置</title>
</head>
<body>
color:#888888;
<span style="color: #888888">测试文字</span><br/>
color:red;
<span style="color: red">测试文字</span><br/>
font-family: '楷体_GB2312';
<span style="font-family: '楷体_GB2312'">测试文字</span><br/>
font-size: 20pt;
<span style="font-size: 20pt">测试文字</span><br/>
font-size: xx-large;
<span style="font-size: xx-large">测试文字</span><br/>
font-stretch: narrower;
<span style="font-stretch: narrower">测试文字</span><br/>
font-stretch: wider;
<span style="font-stretch: wider">测试文字</span><br/>
font-style: italic;
<span style="font-style: italic">测试文字</span><br/>
font-weight: bold;
<span style="font-weight: bold">测试文字</span><br/>
font-weight: 900;
<span style="font-weight: 900">测试文字</span><br/>
text-decoration: blink;
<span style="text-decoration: blink">测试文字</span><br/>
text-decoration: underline;
<span style="text-decoration: underline">测试文字</span><br/>
text-decoration: line-through;
<span style="text-decoration: line-through">测试文字</span><br/>
font-variant: small-caps;
<span style="font-variant: small-caps">hello</span><br/>
text-transform: uppercase;
<span style="text-transform: uppercase">hello</span><br/>
text-transform: capitalize;
<span style="text-transform: capitalize">hello</span><br/>
line-height: 30pt;
<span style="line-height: 30pt">测试文字</span><br/>
letter-spacing: 5pt;
<span style="letter-spacing: 5pt">hello world</span><br/>
letter-spacing: 5pt;
<span style="letter-spacing:15pt">hello world</span><br/>
word-spacing: 20pt
<span style="word-spacing: 20pt">hello world</span><br/>
word-spacing: 60pt
<span style="word-spacing: 60pt">hello world</span><br/>
</body>
</html>
添加阴影
字体的相关属性提供了一个text-shadow属性，该属性在CSS2.0中被引入，CSS2.1中删除，CSS3.0再次引入了该属性。该属性值形如 color xoffset yoffset length或xoffset yoffset radius color
- color:指定该阴影的颜色，如果省略指定阴影颜色，在firefox、opera中将直接使用字体颜色作为引用颜色，在IE和chrome上不会显示阴影
- xoffset:指定阴影在横向上偏移
- yoffset:指定阴影在纵向上偏移
- radius:指定阴影的模糊半径。模糊半径越大，阴影看上去越模糊
示例代码：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<html>
<head>
<meta charset="utf-8">
<title>shadow</title>
<style type="text/css">
span{
display: block;
padding: 8px;
font-size: xx-large;
}
</style>
</head>
<body>
text-shadow: red 5px 5px 2px;
<span style="text-shadow: red 5px 5px 2px">测试文字</span>
text-shadow: red 5px 5px;（省略阴影颜色）
<span style="text-shadow: red 5px 5px">测试文字</span>
text-shadow: -5px -5px 2px gray;(向左上角投影)
<span style="text-shadow: -5px -5px 2px gray">测试文字</span>
text-shadow: -5px 5px 2px gray;(向左下角投影)
<span style="text-shadow: -5px 5px 2px gray">测试文字</span>
text-shadow: 5px -5px 2px gray;(向右上角投影)
<span style="text-shadow: 5px -5px 2px gray">测试文字</span>
text-shadow: 5px 5px 2px gray;(向右下角投影)
<span style="text-shadow: 5px 5px 2px gray">测试文字</span>
text-shadow: 5px 5px 2px gray;(向右下角投影，更大偏移距)
<span style="text-shadow: 15px 15px 2px gray">测试文字</span>
text-shadow: 5px 5px 10px gray （模糊半径增加，模糊程度加深）
<span style="text-shadow: 5px 5px 10px gray">测试文字</span>
</body>
</html>
添加多个阴影
如果希望为文字添加多个阴影，则可以为tet-shadow属性多设置几组阴影，多组阴影之家用逗号隔开。
示例：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
<head>
<meta charset="utf-8">
<title>manyshadows</title>
<style type="text/css">
span{
display: block;
padding: 8px;
font-size: xx-large;
}
</style>
</head>
<body>
多投影
text-shadow: 5px 5px 2px #222,30px 30px 2px #555
,50px 50px 2px #888
<span style="text-shadow: 5px 5px 2px #222,30px 30px 2px #555
,50px 50px 2px #888">测试文字</span>
</body>
</html>
使用font-size-adjust属性微调字体大小
示例：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<html>
<head>
<meta charset="utf-8">
<title>adjust</title>
<style type="text/css">
#div1{
font-size: 16pt;
font-family: "Arial Black";
font-size-adjust: 0.52;
}
#div2{
font-size: 16pt;
font-family: "Bodoni MT";
font-size-adjust: 0.48;
}
#div3{
font-size: 16pt;
font-family: "Niagara Solid";
font-size-adjust: 1.22;
}
</style>
</head>
<body>
<div id="div1">Our domain is www.baidu.com</div>
<div id="div2">Our domain is www.baidu.com</div>
<div id="div3">Our domain is www.baidu.com</div>
</body>
</html>
CSS3支持的颜色表示方法
CSS2已经提供了多种颜色表示方法，如字符串形式的颜色名、十六进制的颜色值等。但CSS2不允许为颜色设置透明度，因此显得有些不够完善。CSS3则提供了更多的颜色表示方法，从而提供了更完善的颜色表示方法。
总结起来，CSS2、CSS3一共支持如下几种颜色表示方法。
- 用颜色名表示，例如white(白色)、red（红色）、greenyellow(绿黄色)、gold(金色)等。这种方式简单易用，但它能表示的颜色数量有限，不可能为所有的颜色都指定一个名称。
- 用十六进制的颜色值表示，这就是典型的三原色混合原理，例如#FF0000，其中前两位FF表示红光的值–也就是把红光分成0~255个色阶，其中00表示没有红光，FF就是255，表示红光最大值；中间两位表示绿光的值，为0；后面两位表示蓝光的值，为0；三种光混合成红色。实际上也可以把红、绿、蓝只分为0~15个色阶，这样使用3位十六进制数即可表示。例如#0F0,其中第一位表示红光的值，第二位表示绿光的值，最后一位表示绿光的值。
- 用rgb(r,g,b)函数表示，这也是三原色混合原理。例如rgb(255,255,0),红光的值为255（最大值）、绿光的值也是255（最大值）、蓝光的值为0，混合出来的颜色就是黄色。
- 用hsl(Hue,Saturation,Lightness)函数表示，这是用色调、饱和度、亮度控制的颜色。例如hsl(120,100%,100%),其中色调为120,也就是绿色（色调0代表红色、120代表绿色、240代表蓝色），饱和度、亮度都是100%,因此这就是绿色。
- 用rgba(r,g,b,a)函数表示，这还是三原色混合原理。与rgb(r,g,b)函数类似，只是多了一个a参数，用于指定改颜色的透明度，a参数可以是0~1之间的任意数，其中0代表完全透明。
- 用hsla(Hue,Saturation,Lightness,alpha)函数表示，这也是用色调、饱和度、亮度控制的颜色。与hsl(Hue,Saturation、Lightness)相比就是多了一个alpha参数，用于指定该颜色的透明度，alpha参数可以是0~1之间的任意数，其中0代表完全透明。
示例代码：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<head>
<meta charset="utf-8">
<title>color</title>
</head>
<body>
<div style="position: absolute;top: 0px">
<div style="background-color: gray">background-color:gray</div>
<div style="background-color: #aaa">background-color:#aaa</div>
<div style="background-color: #ffff00">background-color:#ffff00</div>
<div style="background-color: rgb(255,0,255);">background-color:gb(255,0,255)</div>
<div style="background-color: hsl(120,80%,50%);">background-color:hsl(120,80%,50%)</div>
<div style="background-color: rgba(255,0,255,0.5);">background-color:rgba(255,0,255,0.5)</div>
<div style="background-color: hsla(120,80%,50%,0.5);">background-color:hsla(120,80%,50%,0.5)</div>
</div>
</body>
</html>
文本相关属性
文本相关属性用于控制整个段或者整个<div .../>元素的显示效果，包括文字的缩进、段落内文字的对齐等显示方式。
- text-indent:用于设置段落的文本缩进。默认值为0.被另一个元素（如``
）断开的元素不能应用本属性。 text-overflow:用于控制溢出文本的处理方法。该属性支持如下两个属性值。
1.clip:如果该元素指定了overflow:hidden属性值，当该元素中文本溢出时，clip指定只是简单的裁切溢出的文本。
2.ellipsis:如果该元素指定了overflow:hidden属性值，当该元素中文本溢出时，ellipsis指定裁切溢出的文本，并显示溢出标记（…）
*vertical-align：用于设置目标元素里内容的垂直对齐方式，通常有顶端对齐，底对齐等方式。
1.auto:对元素的文本内容执行自动对齐
2.baseline:默认值。将支持valign属性的元素的文本内容与基线对齐。
3.sub:将元素的内容与文本下标对齐
4.super:将元素的内容与文本上标对齐
5.top:默认值。将支持valign属性的元素的文本内容与元素的顶端对齐
6.middle:默认值。将支持valign属性的元素的文本内容对齐到元素的中间
7.bottom:默认值。将支持valign属性的元素的文本内容与元素的底端对齐
8.length:指定文本内容相对于基线的偏移距离。既可使用百分比形式，也可使用绝对距离形式
- text-align:用于设置目标组件中文本的水平对齐方式。该属性支持left（左对齐）、right(右对齐)、center(居中对齐)和justify(两端对齐)4个属性值
- direction:用于设置文本流入的方向，该属性的合法值有ltr(从左到右)和rtl(从右向左)。此属性不会影响拉丁文字母、数字字符，它们总是以ltr值呈现。但是此属性会作用于拉丁文的标点符号。
- word-break:用于设置目标组件中文本内容的换行方式。该属性支持如下3个值。
1.normal:靠浏览器的默认规则进行换行。通常，浏览器的处理规则是，对于西方文字来说，浏览器只会在半角空格、连字符的地方进行换行，不会在单词中间换行；对于中文来说，浏览器可以在任意一个中文字符后换行。
2.keep-all:只能在半角空格或者连字符处换行
3.break-all:设置允许在单词中间换行
- white-space:用于设置目标组件中文本内容对空格的处理方式，该属性支持如下连个属性。
1.normal:这是默认的处理方式。文本自动处理换行。假如抵达容器边界会转到下一行。
2.nowrap:强制在同一行内显示所有的文本，直到文本结束或者遇到<br/>元素
- word-wrap:用于设置目标组件中文本内容的换行方式。该属性支持如下两个值。
1.normal:靠浏览器的默认规则进行换行
2.break-word:设置允许在单词中间换行
示例：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<html>
<head>
<meta charset="utf-8">
<title>text</title>
<style type="text/css">
div{
border:1px solid #000000;
height: 30px;
width: 200px;
}
</style>
</head>
<body>
<!-- 缩进20pt -->
text-indent:20pt;<div style="text-indent: 20pt">测试文字</div>
<!-- 缩进40pt -->
text-indent:40pt;<div style="text-indent: 40pt">测试文字</div>
<!-- 居中对齐 -->
text-align: center;<div style="text-align: center;">测试文字</div>
<!-- 居右对齐 -->
text-align: right;<div style="text-align: right;">测试文字</div>
<!-- 文本从右边流入 -->
direction: rtl;<div style="direction: rtl;">测试文字</div>
<!-- 文本从左边流入 -->
direction: ltr;<div style="direction: ltr;">测试文字</div>
<!-- 强制不换行，直到遇到br标签 -->
white-space: nowrap;<div style="white-space: nowrap;">测试文字，疯狂java讲义，疯狂xml讲义</div>
<!-- 当文字溢出时简单的裁切 -->
text-overflow: clip;<div style="overflow: hidden;white-space: nowrap; text-overflow: clip;">测试文字,测试文字,测试文字,测试文字,测试文字,测试文字,测试文字,测试文字</div>
<!-- 当文字溢出之后，裁切之后显示裁切标记 -->
text-overflow: ellipsis;<div style="overflow: hidden;white-space: nowrap; text-overflow: ellipsis;">测试文字,测试文字,测试文字,测试文字,测试文字,测试文字,测试文字,测试文字,测试文字</div>
</body>
</html>
```
#### 文本自动换行：word-break
当HTML元素不足以显示它里面的所有文本时，浏览器会自动换行显示它里面所有的文本。通常，浏览器的处理规则是，对于西方文字来说，浏览器只会在半角空格、连字符的地方进行换行，不会在单词中间换行；对于中文来说，浏览器可以在任意一个中文字符后换行。
有时候我们希望让浏览器可以在西方文字的单词中间换行，此时可借助word-break属性。如果把wordbreak属性设置为break-all，即可让浏览器在单词中间换行。
示例：
```html
<html>
<head>
<meta charset="utf-8">
<title>break-all</title>
<style type="text/css">
div{
border:1px solid #000000;
height: 50px;
width: 240px;
}
</style>
</head>
<body>
<!-- 不允许在单词中间换行 -->
word-break: keep-all;<div style="word-break: keep-all;">The root interface in the collection hierarchy</div>
<!-- 允许在单词中间换行 -->
word-break: break-all;<div style="word-break: break-all;">The root interface in the collection hierarchy</div>
</body>
</html>
长单词和URL地址换行
Firefox和Opera并不支持使用word-break属性强制在单词中间换行，当包含特别长的URL地址时，浏览器会出现滚动条
为了让浏览器控制文本内容在长单词、URL地址中间换行，可以通过word-wrap属性来实现。如果把word-wrap属性设为break-word即可让浏览器在长单词和url地址中间换行。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
<head>
<meta charset="utf-8">
<title>word-wrap</title>
<style type="text/css">
div{
border:1px solid #000000;
width: 140px;
height: 50px;
}
</style>
</head>
<body>
<!-- 允许在长单词和url中间换行 -->
word-wrap: normal;<div style="word-wrap: normal;">Our domain is http://www.baidu.cn</div>
<!-- 允许在长单词和url中间换行 -->
word-wrap: break-word;<div style="word-wrap: break-word;">Our domain is http://www.baidu.cn</div>
</body>
</html>
需要指出的是，word-break与word-wrap属性的作用并不相同，他们的区别如下：
- word-break:将该属性设为break-all，可以让组件内每一行文本的最后一个单词自动换行。
- word-wrap:该属性会尽量让长单词、URL不要换行，即使该属性设为break-word,浏览器也会尽量让长单词、URL地址单独占用一行，只有当一行文本都不足以显示这个长单词、url地址时，浏览器才会在长单词、URL地址中间换行
CSS3新增的服务器字体
CSS3允许使用服务器字体，如果客户端没有安装这种字体，客户端将会自动下载这种字体。
使用服务器字体
语法格式：1
2
3
4
5@font-face{
font-family:name;
src:url(url) format(fontformat);
sRules
}
到目前为止，服务器还只支持TrueType格式(对应于*.ttf)和OpenType格式(对应于*.otf)
示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
<head>
<meta charset="utf-8">
<title>fontface</title>
<style type="text/css">
@font-face{
font-family: CrazyIt;
src:url("Blazed.ttf") format("TrueType");
}
</style>
</head>
<body>
<div style="font-family: CrazyIt;font-size: 36pt">Our domain is http:www.baidu.cn</div>
</body>
</html>
定义粗体、斜体字
语法：1
2
3
4
5@font-face{
font-family:CrazyIt;
src:url("Delicious-Bold.otf") format("OpenType");
font-weight:bold;
}
(….)
优先使用客户端字体
语法：1
2
3
4@font-face{
font-family:CrazyIt;
src:local("Goudy Stout"),url("Blazed.ttf") format("TrueType");
}