文本样式
文本样式
文本样式有：首行缩进、水平对齐、文本修饰、大小写、行高、间距。
text-indent(首行缩进)
首行缩进
<!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>
text-align(水平对齐)
水平对齐
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<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>
text-decoration(文本修饰)
文本修饰
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#p1{text-decoration:underline;}
#p2{text-decoration:line-through;}
#p3{text-decoration:overline;}
</style>
</head>
<body>
<p id="p1">这是“下划线”效果</p>
<p id="p2">这是“删除线”效果</p>
<p id="p3">这是“顶划线”效果</p>
</body>
</html>
text-transform(大小写)
大小写
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#p1{text-transform:uppercase;}
#p2{text-transform:lowercase;}
#p3{text-transform:capitalize;}
</style>
</head>
<body>
<p id="p1">rome was't built in a day.</p>
<p id="p2">rome was't built in a day.</p>
<p id="p3">rome was't built in a day.</p>
</body>
</html>
line-height(行高)
行高
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#p1{line-height:15px;}
#p2{line-height:20px;}
#p3{line-height:25px;}
</style>
</head>
<body>
<p id="p1">水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p><hr/>
<p id="p2">水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p><hr/>
<p id="p3">水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
</body>
</html>
letter-spacing(字间距)
字间距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#p1{letter-spacing:0px;}
#p2{letter-spacing:3px;}
#p3{letter-spacing:5px;}
</style>
</head>
<body>
<p id="p1">Rome was't built in a day.罗马不是一天建成的。</p><hr/>
<p id="p2">Rome was't built in a day.罗马不是一天建成的。</p><hr/>
<p id="p3">Rome was't built in a day.罗马不是一天建成的。</p>
</body>
</html>
work-spacing(词间距)
词间距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#p1{word-spacing:0px;}
#p2{word-spacing:3px;}
#p3{word-spacing:5px;}
</style>
</head>
<body>
<p id="p1">Rome was't built in a day.罗马不是一天建成的。</p><hr/>
<p id="p2">Rome was't built in a day.罗马不是一天建成的。</p><hr/>
<p id="p3">Rome was't built in a day.罗马不是一天建成的。</p>
</body>
</html>