强调:字体样式针对的是“文字本身”的型体效果,而文本样式针对的是“整个段落”的排版效果。字体样式注重个体,文本样式注重整体。因此在CSS中,特意使用了“font”和“text”两个前缀来区分这两类样式。
1 首行缩进
中文段落首行一般需要缩进两个字的空间。如果想要实现这个效果,text-indent值应该是font-size值的2倍。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
p
{
font-size:14px;
text-indent:28px;
}
</style>
</head>
<body>
<h3>爱莲说</h3>
<p>水陆草木之花,可爱者甚蕃。晋陶渊明独爱菊。自李唐来,世人甚爱牡丹。予独爱莲之出淤泥而不染,濯清涟而不妖,中通外直,不蔓不枝,香远益清,亭亭净植,可远观而不可亵玩焉。</p>
<p>予谓菊,花之隐逸者也;牡丹,花之富贵者也;莲,花之君子者也。噫!菊之爱,陶后鲜有闻;莲之爱,同予者何人? 牡丹之爱,宜乎众矣。</p>
</body>
</html>
2 水平对齐:text-align
<style type="text/css">
#p1{text-align:left;}
#p2{text-align:center;}
#p3{text-align:right;}
</style>
</head>
<body>
<p id="p1"><strong>左对齐</strong>:好好学习,天天向上。</p>
<p id="p2"><strong>居中对齐</strong>:好好学习,天天向上。</p>
<p id="p3"><strong>右对齐</strong>:好好学习,天天向上。</p>
</body>
</html>
3 定义文本的修饰效果:text-decoration
4 大小写:text-transform
5 间距:letter-spacing、word-spacing
letter-spacing属性来定义两个字之间的距离
word-spacing属性来定义两个单词之间的距离