第五章 使用CSS美化网页文本
学习重点
- 定义字体类型、大小、颜色等字体样式；
- 设计文本样式，如对齐、行高、间距等；
- 能够灵活设计美观、实用的网页正文版式。
5.1 字体样式
5.1.1 定义字体类型
CSS使用font-family来定义字体类型，用法如下：
font-family:name /*name表示字体名称，可以指定多种字体*/ /*不懂，多种字体怎么应用？*/
font-family:ncursive | fantasy | monospace | serif | sans-serif /*ncursive是什么？书上是这么写的。*/
如果字体名称包含空格，则使用引号括起。
font是一种复合属性，能够设置多种字体属性，属性值之间以空格分隔。
font属性至少要设置字体大小和字体类型，且必须放在后面，否则无效。前面可以自定义字体样式、字体粗细、大小写和行高。
CSS提供了5种通用字体，如果指定的所有字体都不可用时，能够在用户系统中找到一个类似字体进行替代显示。
- serif：衬线字体；
- sans-serif：无衬线字体；
- cursive：草体；
- fantasy：奇异字体（艺术字）；
- monospace：等宽字体，唯一标准就是所有的字型宽度一样。
通用字体对中文无效。
5.1.2 定义字体大小
CSS用font-size来定义字体大小，用法如下：
font-size:xx-small | x-small | small | medium | large | x-large| xx-large | larger | smaller | length
larger和smaller根据父对象中字体尺寸进行相对增大或缩小处理，使用成比例的em单位进行计算。
length可以是百分数，或者浮点数字和单位标识符组成的长度值，但不可以是负数。百分比取值基于父对象中字体尺寸。
字体大小绝对单位：in（英寸）、cm、mm、pt、pc。
字体大小相对单位：px（pixel，像素）、em、ex、%。
对于网页宽度固定或者栏目宽度固定的布局，使用像素。
对于页面宽度或者栏目宽度不固定的布局，使用百分比或者em。
从用户易用性角度考虑，定义字体大小应该以em或%进行设置。
- 有利于客户端浏览器调整字体大小；
- 字体能够适应版面宽度的变化。
5.1.3 定义字体颜色
CSS使用color属性来定义字体颜色。
例：p{ color:red}
CSS3支持另外3种颜色表示法：
- RGBA颜色表示法，就是在RGB颜色的基础上加了Alpha通道，可以定义半透明的颜色。
- HSL颜色表示法，就是使用色相（H）、饱和度（S）和亮度（L）表示颜色的一种方法。
- HSLA颜色表示法，在HSL的基础上增加了Alpha通道。
5.1.4 定义字体粗细
CSS使用font-weight属性来定义字体粗细。
示例：font-weight:normal | bold | bolder | lighter |100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
normal相当于400，bold相当于700或者标签定义的字体效果。
bolder和lighter相对于normal字体粗细而言。 /*不知道可不可以重复让字体再细*/
5.1.5 定义斜体字体
CSS使用font-style属性来定义字体倾斜效果，用法如下：
font-style:normal | italic | oblique
normal表示默认值，即正常的字体；italic表示斜体；oblique表示倾斜的字体。 /*斜体和倾斜的文字，看下有什么不同*/
italic和oblique两个取值只能在西方文字中有效。 /*给的例子把中文改成了italic，不懂*/
5.1.6 定义下划线
CSS使用text-decoration属性来定义字体下划线效果
text-decoration:none | underline | blink | overline | line-through /*可以声明多个效果*/
blink表示闪烁效果，underline表示下划线效果，line-through表示贯穿效果，overline表示上划线效果。
5.1.7 定义字体大小写
CSS使用font-variant属性来定义字体大小写效果
font-variant:normal | small-caps
small-caps：小型的大写字母字体
仅支持西方字体。如果设置了小型的大写字体，但是该字体没有找到原始小型大写字体，则浏览器会模拟一个。
CSS还定义了一个text-transform属性，该属性主要定义单词大小写样式。
text-transform:none | capitalize | uppercase | lowercase
capitalize：将每个单词的第一个字母转换为大写
uppercase：将所有字母转换为大写
lowercase：将所有字母转换为小写
5.2 文本样式
5.2.1 定义文本对齐
CSS使用text-align属性来定义文本的水平对齐方式，该属性的用法如下：
text-align:left | right | center | justify
justify：两端对齐
5.2.2 定义垂直对称
CSS使用vertical-align属性来定义文本垂直对齐问题，用法如下：
vertical-align:auto | baseline | sub | top | text-top | middle | bottom | text-bottom | length
- auto：根据layout-flow属性的值对齐对象文本；
- baseline：默认值，与基线对齐；
- sub：垂直对齐文本的下标；
- super：垂直对齐文本的上标；
- top：将支持valign特性的对象的内容与对象顶端对齐；
- text-top：将支持valign特性的对象的文本与对象顶端对齐； /*对象的对象是什么意思？*/
- middle：将支持valign特性的对象的内容与对象中部对齐；
- bottom：将支持valign特性的对象的内容与对象底端对齐；
- text-bottom：将支持valign特性的对象的文本与对象底端对齐；
- length：表示由浮点数字和单位标识符组成的长度值或者百分数，可以是负数，定义由基线算起的偏移量。
5.2.3 定义字距和词距
CSS使用letter-spacing属性定义字距，word-spacing属性定义词距。取值都是长度值，由浮点数字和单位标识符组成。
定义词距时，以空格为基准进行调节。多个单词被连在一起，视为一个单词；汉字被空格分隔，分隔的多个汉字视为不同的单词。
5.2.4 定义行高
行高也称行距，是段落文本行和文本行之间的距离。CSS使用line-height属性定义行高利用。用法如下：
line-height:normal | length
normal表示默认值，一般为1.2em。
一般行高的最佳设置范围为1.2em~1.8em。原则：字体越大，行高越小。
设置更灵活的行高样式：给line-height属性设置一个数值，但是不设置单位。
如：
body{ line-height:1.6;}
利用这种设置方法，可以解决多层嵌套结构中行高继承出现的问题。
5.2.5 定义缩进
CSS用text-indent属性定义首行缩进，用法如下：
text-indent:length
使用text-indent属性可以设计悬垂缩进效果。示例：
p{ /*悬垂缩进2个字距*/ text-indent:-2em; padding-left:2em; }
定义左侧补白（padding-left），防止文本落到段落边界外边。
5.3 CSS3新增文本样式
5.3.1 定义文本阴影
CSS3使用text-shadow属性给文字添加阴影效果。（Safari、Firefox、Chrome和Opera等主流浏览器都支持该功能。）
语法：text-shadow:none |
none：无阴影。
length：第一个长度值用来设置阴影水平偏移值，第二个长度值用来设置阴影垂直偏移值，第三个长度值用来设置对象的阴影模糊值——模糊半径（不允许负值）。
color：设置对象的阴影的颜色。
示例：text-shadow:0.1em 0.1em #333; /*向右下偏移的#333色阴影*/
5.3.2 设计阴影特效
1、通过阴影增加前景色与背景色的对比度
2、定义多色阴影
text-shadow可以接受一个以逗号分割的阴影效果列表，阴影按照给定的顺序应用。当使用text-shadow定义多色阴影时，每个阴影效果必须指定阴影偏移。
3、定义火焰文字
借助阴影列表机制，可以使用阴影叠加出燃烧的文字特效。
<style type="text/css"> body{ background:blue;} p{ text-align:center; font: 60px helvetica, arial, sans-serif; color:red; text-shadow:0 0 4px white, 0 -5px 4px white, 2px -5px 4px #fd3, -2px -15px 11px #f80, 2px, -25px 18px #f20; } style> (p)
4、定义立体文字
text-shadow属性可以使用在：first-letter和：first-line伪元素上。同时还可以设计出立体文本。
5、定义描边文字
text-shadow属性可以为文本描边，方法是分别为文本4个边添加1像素的实体阴影，代码如下：
1 <style type="text/css"> 2 body{ background: #000;} 3 p{ 4 text-align:center; 5 padding: 24px; 6 margin:0; 7 font-family: helvetica, arial, sans-serif; 8 font-size: 80px; 9 font-weight: bold; 10 color: red; 11 background: #CCC; 12 text-shadow: -1px 0 black, 13 0 1px black, 14 1px 0 black, 15 0 -1px black; 16 } 17 style> 18 <p>文本阴影p>
6、定义外发光文字
设计阴影不发生位移，同时定义阴影模糊显示，可以模拟出文字发外光效果，代码如下：
1 <style type="text/css"> 2 body{ background:#000;} 3 p{ 4 text-align:center; 5 padding:24px; 6 margin:0; 7 font-family:helvetica, arial, sans-serif; 8 font-size:80px; 9 color:red; 10 background:#CCC; 11 text-shadow:0 0 0.2em #F87, 12 0 0 0.2em #F87; 13 } 14 style> 15 <p>文本阴影：text-shadowp>
5.3.3 定义溢出文本
CSS3新增了text-overflow属性，该属性可以设置超长文本省略显示。基本语法如下：
Text-overflow：clip | ellipsis | ellipsis-word
clip：不显示省略号标记（…），而是简单的裁切；
ellipsis：表示当对象文本溢出时显示省略标记（…），省略标记插入的位置是最后一个字符；
ellipsis-word：表示当对象文本溢出时显示省略标记（…），省略标记插入的位置是最后一个字母。
要实现溢出时产生省略号的效果，必须在定义两个样式：强制文本在一行内显示（white-space:nowrap）和溢出内容为隐藏（overflow:hidden）。
5.3.4 文本换行
CSS3使用word-break属性定义文本自动换行。
- line-break专门负责日文换行。
- word-wrap控制换行。属性取值break-word时，强制换行，控制是否断词，而不是断字符。
- word-break主要针对亚洲语言和非亚洲语言进行控制换行。
- 属性取值break-all时，可以允许非亚洲语言文本行的任意字内断开；
- 属性取值keep-all时，表示对于中文、韩文、日文不允许字断开。
- white-space具有格式化文本的作用。
- 属性取值为nowrap时，表示强制在同一行内显示；
- 属性取值为pre时，表示显示预定义文本格式。
5.3.5 添加动态内容
content属性属于内容生成和替换模块，能够为指定元素添加内容。能够满足样式设计中临时添加非结构性的样式服务标签，或者添加补充说明性内容等。
content属性的基本语法：content：normal | string | attr（） | uri（） | counter （） | none；
content属性初始值为normal，适用于所有可用元素，其它取值说明如下：
- string：插入文本内容。
- attr（）：插入元素的属性值。
- uri（）：插入一个外部资源。
- counter（）：计数器，用于插入排序标识。
- none：无任何内容。
5.3.6 恢复默认样式
CSS3中新增了一个initial属性值，可以直接取消对某个元素的样式指定。
如：p{color:initial;}
5.3.7 自定义字体类型
通过@font-face能够加载服务器端的字体文件，让客户端浏览器显示客户端所没有安装的字体。
@font-face的语法格式为：@font-face{
descriptor:value;
descriptor:value;
descriptor:value;
descriptor:value;
descriptor:value;
[...]
descriptor:value;
属性及其取值说明如下：
- font-family：设置文本字体；
- font-style：设置文本样式；
- font-variant:设置文本是否大小写；
- font-weight：设置文本粗细；
- font-stretch：设置文本是否横向的拉伸变形；
- font-size：设置文本字体大小。