学习笔记第五章使用CSS美化网页文本

第五章使用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来定义字体大小，用法如下：

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或者<b>标签定义的字体效果。

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属性来定义文本垂直对齐问题，用法如下：

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 | <shadow> [ , <shadow> ]*

<shadow>=<length>{2,3}&&<color>?

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-shadow</p>

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属性初始值为normal，适用于所有可用元素，其它取值说明如下：

string：插入文本内容。
attr（）：插入元素的属性值。
uri（）：插入一个外部资源。
counter（）：计数器，用于插入排序标识。
none：无任何内容。

5.3.6 恢复默认样式

CSS3中新增了一个initial属性值，可以直接取消对某个元素的样式指定。

如：p{color:initial;}

5.3.7 自定义字体类型

通过@font-face能够加载服务器端的字体文件，让客户端浏览器显示客户端所没有安装的字体。

@font-face的语法格式为：@font-face{ <font-description>}

<font-description>是一个属性名值对，格式如下：

descriptor:value;

descriptor:value;

[...]