文本样式属性
字体样式属性
1.font-size：字号大小
font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位，具体如下表所示：
| 相对长度单位 | 说明 |
| em | 倍率，相对于当前对象内文本的字体尺寸 |
| px | 像素，最常用 |
| 绝对长度单位 | 说明 |
| in | 英寸 |
| cm | 厘米 |
| mm | 毫米 |
| pt | 点 |
其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。
2.font-family：字体
font-family属性用于设置字体，格式如下面代码所示：
p{font-family：“微软雅黑”；}
可以同时指定多个字体，中间以英文逗号隔开如果浏览器不支持第一个字体，则会尝试后面的字体，如以下代码所示：
body{font-family：“华文彩云”，“宋体”，“黑体”；}
当指定的字体都没有安装时，就会使用浏览器默认字体。
使用font-family需要注意以下几点：
- 各种字体之间必须使用英文逗号隔开。
- 中文字体需要加英文引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体必须位于中文字体名之前。
- 如果字体名中包含空格、#、￥等符号，则该字体必须加英文单引号或双引号。
- 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。
3.font-weight：字体粗细
font-weight用于定义字体的粗细，具体如下所示：
- normal：默认值。定义标准的字符
- bold：定义粗体字符
- bolder：定义更粗的字符
- lighter：定义更细的字符
- 100~900（100的整数倍）：定义由细到粗的字符。其中400等同于normal，700等同于bold，值越大字体越粗
4.font-style：字体风格
常用的font-weight的属性值为normal和bold，用于定义正常或加粗显示的字体。
font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：
- normal：默认值，浏览器会显示标准的字体样式。
- italic:浏览器会显示斜体的字体样式。
- oblique：浏览器会显示倾斜的字体样式。
其中italic和oblique都用于定义斜体，两者在显示效果上并没有本质区别，但实际工作中常使用italic。
5.font：综合设置字体样式
font属性用于对字体样式进行综合设置，其基本语法格式为：
选择器{font：font-style font-variant font-weight font-size/line-height font-family；}
使用font属性时，必须按上面语法格式中的顺序书写，各个属性以空格隔开。其中line-height指的是行高，例如：
p{
font-family：“宋体”；
font-size：30px；
font-style：italic；
font-weight：bold；
font-variant：small-caps；
line-height：40px；
}
等价于：
p{font：italic small-caps bold 30px/40px “宋体”；}
其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。
下面通过font属性对字体样式进行综合设置：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>font属性title>
<style type="text/css">
.one{ font: italic 18px/30px "隶书";}
.two{ font: italic 18px/30px;}
style>
head>
<body>
<p class="one">段落1：使用font属性综合设置段落文本的字体风格、字号、行高和字体。p>
<p class="two">段落2：使用font属性综合设置段落文本的字体风格、字号、行高和字体。由于省略了字体属性font-family，
这时font属性不起作用。p>
body>
html>
运行效果如图所示：
6.@font-face属性
@font-face属性是CSS3新增的属性，用于定义服务器字体。通过@font-face属性，开发者可以在计算机未安装字体时，仍然能使用任何喜欢的字体。使用@font-face属性定义服务器字体的基本语法格式如下：
@font-face{
font-family：字体名称； /*用于指定该服务器字体名称，可随意定义*/
src:字体路径；/*用于指定该字体文件路径*/
}
可以得出使用服务器字体的步骤如下：
- 下载字体并存储到相应的文件夹中。
- 使用@font-face属性定义服务器字体。
- 对元素应用“font-family”字体样式。
7.word-wrap属性
word-wrap属性用于实现长单词和URL地址的自动换行，其基本语法格式如下：
选择器{word-warp：属性值；}
在上面的语法格式中，word-warp属性的取值有2种：
- normal：只在允许断字点换行（浏览器默认处理）
- break-word：在长单词或URL地址内部进行换行
下面通过一个URL地址换行的案例演示word-warp属性的用法：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>word-warp属性title>
<style type="text/css">
p{
width: 100px;
height: 100px;
border: 1px solid #000;
}
.break_word{word-wrap: break-word;} /*网址在段落内部换行*/
style>
head>
<body>
<span>word-warp:normal;span>
<p>网页平面UI设计学院http：//icd.itcast.cn/p>
<span>word-warp:break-word;span>
<p class="break_word">网页平面UI设计学院http：//icd.itcast.cn/p>
body>
html>
运行效果如图所示：
当浏览器处理时段落文本中的URL地址会溢出边框；当设置word-wrap属性值为break-word时，URL地址会沿边框自动换行。
文本外观属性
1.color：文本颜色
color属性用于定义文本颜色，其取值方式有如下3种：
- 预定义的颜色值，如red、green、blue等
- 十六进制，实际工作中，十六进制是最常用的
- RGB代码，如红色可以表示rgb（255,0,0）或rgb（100%，0%，0%）
注意：如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。
十六进制颜色值中，当3个分量的2位十六进制都各自相同时，可使用CSS缩写，如#FF6600可缩写为#F60。
2.letter-spacing：字间距
letter属性用于定义字间距，所谓字间距就是字符与字符之间的空白。其属性值可为不同单位的数值，允许使用负值，默认为normal。
3.word-spacing：单词间距
word-spacing属性用于定义英文单词之间的间距，对中文字符无效。和letter-spacing一样，其属性值可为不同单位的数值，允许使用负值，默认为normal。
word-spacing和letter-spacing均可对英文进行设置。不同的是letter-spacing定义的为字母之间的间距，而word-spacing定义的为英文单词之间的间距。
下面通过一个案例来演示word-spacing和letter-spacing的不同：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>word-spacing和letter-spacingtitle>
<style type="text/css">
.letter{letter-spacing: 20px;}
.word{word-spacing: 20px;}
style>
head>
<body>
<p class="letter">letter spacing（字母间距）p>
<p class="word">word spacing word spacing(单词间距)p>
body>
html>
运行效果如图所示：
4.line-height：行间距
line-height属性用于设置行间距。所谓行间距就是行与行之间的距离，即字符垂直间距，一般称为行高。该属性常用的属性值单位有3种，分别为像素（最常用）、相对值和百分比。
下面通过一个案例来学习line-height属性的使用：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>行高line-height的使用title>
<style type="text/css">
.one{
font-size: 16px;
line-height: 18px;
}
.two{
font-size: 12px;
line-height: 2em;
}
.three{
font-size: 14px;
line-height: 150%;
}
style>
head>
<body>
<p class="one">段落1：使用像素px设置line-height。该段落字体大小为16px，line-height属性值为18px。p>
<p class="two">段落2：使用像素em设置line-height。该段落字体大小为12px，line-height属性值为2em。p>
<p class="three">段落3：使用像素%设置line-height。该段落字体大小为14px，line-height属性值为150%。p>
body>
html>
运行效果如图所示：
5.text-transform：文本转换
text-transform属性用于转换英文字符的大小写，其可用属性值如下：
- none：不转换（默认值）
- capitalize：首字母大写
- uppercase：全部字符转换为大写
- lowercase：全部字符转换为小写
6.text-decoration：文本装饰
text-decoration属性用于设置文本的下划线、上划线、删除线等装饰效果，其可用属性值如下：
- none：没有装饰（默认）
- underline：下划线
- overline：上划线
- line-through：删除线
text-decoration后可以赋多个值，用于给文本添加多种显示效果。例如希望文字同时有下划线和删除线效果，就可以将underline和line-through同时赋给text-decoration。
下面通过一个案例来演示text-decoration各个属性值的显示效果：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本装饰text-decorationtitle>
<style type="text/css">
.one{text-decoration: underline;}
.two{text-decoration: overline;}
.three{text-decoration: line-through;}
.four{text-decoration: underline line-through;}
style>
head>
<body>
<p class="one">设置下划线(underline)p>
<p class="two">设置上划线(overline)p>
<p class="three">设置删除线(line-through)p>
<p class="four">同时设置下划线和删除线(underline line-through)p>
body>
html>
运行效果如图所示：
7.text-align：水平对齐方式
- left：左对齐（默认）
- tight：右对齐
- center：居中对齐
注意：text-align属性仅适用于块级元素。对行内元素无效
8.text-indent：首行缩进
text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数，或相对于浏览器窗口宽度的百分比%，允许使用负值。建议使用em作为设置单位。
下面通过一个案例来学习text-indent的使用：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>首行缩进text-indenttitle>
<style type="text/css">
p{font-size: 14px;}
.one{text-indent: 2em;}
.two{text-indent: 50px;}
style>
head>
<body>
<p class="one">这是段落1中的文本，text-indent属性可以对段落文本设置首行缩进效果，段落1使用text-indent：2emp>
<p class="two">这是段落2中的文本，text-indent属性可以对段落文本设置首行缩进效果，段落2使用text-indent：50pxp>
body>
html>
运行效果如图所示：
9.white-space：空白符处理
使用HTML5制作网页时，不论源代码中有多少空格，在浏览器中会显示一个字符的空白。在CSS3中，使用white-space属性可设置空白符的处理方式，其属性值如下：
- normal：常规（默认值），文本中的空格、空行无效，满行后自动换行。
- pre：预格式化，按文档的书写格式保留空格、空行原样显示。
- nowrap：空格、空行无效，强制文本不能换行，除非遇到换行标记
。内容超出元素的边界也不换行，若超出浏览器页面则会增加滚动条。
下面通过一个案例来演示white-space各个属性值的效果：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>空白符处理white-spacetitle>
<style type="text/css">
.one{white-space: normal;}
.two{white-space: pre;}
.three{white-space: nowrap;}
style>
head>
<body>
<p class="one">这个 段落 有很多
空格。此段落应用white-space：normal；。p>
<p class="two">这个 段落 有很多
空格。此段落应用white-space：pre；。p>
<p class="three">此段落应用white-space：nowrap;。这是一个较长的段落。这是一个较长的段落。这是一个较长的段落。
这是一个较长的段落。这是一个较长的段落。这是一个较长的段落。这是一个较长的段落。这是一个较长的段落。这是一个较长
的段落。这是一个较长的段落。这是一个较长的段落。这是一个较长的段落。p>
body>
html>
运行效果如图所示：
10.text-shadow：阴影效果
在CSS中，使用text-shadow属性可以为页面中的文本添加阴影效果。其基本语法为：
选择器{text-shadow：h-shadow v-shadow blur color；}
在上面的语法格式中，h-shadow用于设置水平阴影的距离，v-shadow用于设置垂直阴影的距离，blur用于设置模糊半径，color用于设置阴影颜色。
下面通过一个案例来演示text-shadow属性的用法：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>text-shadow属性title>
<style type="text/css">
p{
font-size: 50px;
text-shadow: 10px 10px 10px red; /*设置文字阴影的距离、模糊半径和颜色*/
}
style>
head>
<body>
<p>Hello CSS3p>
body>
html>
运行效果如图所示：
注意：当设置水平距离参数或垂直距离参数为负值时，可以改变阴影的投射方向。阴影模糊的半径参数只能设置为正值，并且数值越大阴影向外模糊的范围也就越大。
设置阴影叠加效果
可以使用text-shadow属性给文字添加多个阴影，从而产生阴影叠加的效果，方法为设置多组阴影参数，中间用英文逗号隔开。
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>text-shadow属性title>
<style type="text/css">
p{
font-size: 50px;
text-shadow: 10px 10px 10px red, 20px 20px 20px blue;
}
style>
head>
<body>
<p>Hello CSS3p>
body>
html>
运行效果如图所示：
11.text-overflow：标示对象内溢出文本
在CSS3中，text-overflow属性用于标示对象内溢出的文本，其基本语法格式为：
选择器{text-overflow：属性值；}
在上面的语法格式中，text-overflow属性的常用取值有2个，具体解释如下：
- clip：修剪溢出文本，不显示省略标记“...”
- ellipsis：用省略标记“...”标示被修剪文本，省略标记插入的位置是最后一个字符
下面通过一个案例来演示text-overflow属性的用法：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>text-overflow属性title>
<style type="text/css">
p{
width: 200px;
height: 100px;
border: 1px solid #000;
white-space: nowrap; /*强制文本不能换行*/
overflow: hidden; /*修剪溢出文本*/
text-overflow: ellipsis; /*用省略标记标示被修剪的文本*/
}
style>
head>
<body>
<p>把很长的一段文本中溢出的内容隐藏，出现省略号p>
body>
html>
运行效果如图所示：
