概述：
- 定义字体类型，大小，颜色等字体样式
- 设计文本样式，如对齐，行高，间距等
- 能够灵活设计美观，实用的网页正文版式
1，字体样式
网页字体样式包括字体类型，大小，颜色等基本效果，另外还包括一些特殊的样式，如字体粗细，下划线，斜体，大小等
1.1 定义字体类型
CSS使用font-family属性来定义字体类型，另外使用font属性也可以定义字体类型。font-family是字体专用类型专用属性，用法如下：
font-family:name font-famile:ncursive|fantasy|monospace|serif|sans-serif
font是一个复合属性，可以设置的字体属性如下：
font:font-style || font-variant||font-weight||font-size||line-height||font=family font:caption|icon|menu|message-box|small-caption|status-bar
CSS提供了5类通用字体。所谓通用字体就是一种备用机制，即指定的所有字体都不可用时，能够在用户系统中找到一个类似字体进行替代显示。这五类通用字体说明如下。
- serif：衬线字体，
- sans-serif：无衬线字体
- cursive：草体
- fantasy：奇异字体
- monospace：等宽字体
1.2 定义字体大小
font-size
<p style="font-size:20px">helloworld</p> <p style="font-size:30px">helloworld</p>
1.3 定义字体颜色
color
<p style="color:red">helloworld</p> <p style="color:blue">helloworld</p>
1.4 定义字体粗细
font-weight
1.5 定义斜体
font-style: normal | italic | oblique
<p style="font-style:normal">helloworld</p> <p style="font-style:italic">helloworld</p> <p style="font-style:oblique">helloworld</p>
1.6 定义下划线
text-decoration
<p style="text-decoration:normal">helloworld</p> <p style="text-decoration:underline">helloworld</p> <p style="text-decoration:blink">helloworld</p> <p style="text-decoration:overline">helloworld</p> <p style="text-decoration:line-through">helloworld</p>
2，文本样式
字体样式只要涉及字符本身的显示效果，而文本样式主要涉及多个字符的排版效果。CSS在命名属性时，使用font前缀和text前缀来区分字体和文本属性。
2.1 定义文本对齐
CSS使用text-align属性来定义文本的对齐方式，该属性的用法如下。
text-align:left:right:center:justify
<div style="width:400px;height:400px;background-color:#999;"> <p style="text-align:left">小白菜向左偏移</p> <p style="text-align:right">小白菜向右偏移</p> <p style="text-align:center">小白菜居中显示</p> <div>
2.2 定义垂直对齐
vertical-align:auto | baseline | sub | super | top | text-top | middle | bottom |text-bottom | length
取值简单说明如下：
- auto：将根据layout-flow属性的值对齐对象内容
- baseline：表示默认值，表示将支持valign特性的对象内容与基线对齐
- sub：表示垂直对齐文本的下标
- super：表示垂直对齐文本的上标
- top：表示将支持valign特性的对象的内容对象顶端对齐
- text-top：表示将支持valign特性的对象的文本与对象顶端对齐
- middle：表示将支持valign特性的对象的内容与对象中部对齐
- bottom：表示将支持valign特性的对象的内容与对象底部对齐
- text-bottom：表示将支持valign特性的对象的文本与对象顶端对齐
- length：表示由浮点数字和的那位标识符组成的长度值或者百分数，可为负数，定义由基线算起的偏移量，基线对于数值来说为0，对于百分比来说为0%；
2.3 定义字距和词距
字距：letter-spacing 词距：word-spacing
2.4 定义行高
line-height : normal | length
2.5 定义缩进
text-indent：length
3，CSS3新增文本样式
3.1 定义文本阴影
text-shadow
<p style="font:bold 60px helvetica,arial,sans-serif;color:#999;text-shadow:5px 5px 5px #333">helloworld</p>
text-shadow中参数的属性：第一个 水平位移，第二个 垂直位移，第三个 模糊半径 第4个 阴影颜色
3.2 设计阴影特效
1，通过阴影增加前景色与背景色的对比度
<style type="text/css">
p{
text-align:center;
font:bold 60px helvetica,arial,sans-serif;
color:#fff;
text-shadow:black 5px 5px 5px;
}
</style>
<p>helloworld</p>
2，定义多色阴影
<style type="text/css">
p{
text-align:center;
font:bold 60px helvetica,arial,sans-serif;
color:#fff;
text-shadow:black 5px 5px 5px,
-5px 5px 4px #060;
}
</style>
<p>helloworld</p>
3，定义火焰文字
<style type="text/css">
body{background:#000;}
p{
text-align:center;
font:bold 60px helvetica,arial,sans-serif;
color:#fff;
text-shadow:0 0 4px white,
0 -5px 4px #ff3,
2px -10px 6px #fd3,
-2px -15px 11px #f80,
2px -25px 18px #f20;
}
</style>
<body>
<p>helloworld</p>
</body>
3.3 定义溢出文字
CSS新增了text-overflow属性，该属性可用设置超长文本省略显示。text-overflow属性的基本语法如下：
text-overflow:clip | ellipsis | ellipsis-word;
- clip：表示不显示省略标记，而只是简单的裁剪
- ellipsis：表示当对象内文本溢出时显示省略标记
- ellipsis-word：表示当对象内文本溢出时显示省略标记
3.4 文本换行
word-break
3.5 添加动态内容
content
3.6 恢复默认样式
initial ，可以取消对某个元素的样式绑定
<style>
p{
color:red;
}
p#hello{
color:initial;
}
</style>
<body>
<p>hahahahaha</p>
<p id="hello">haihdiha</p>
</body>
