第04章 文本样式
文本样式简介
字体样式与文本样式的区分
字体样式针对的是文字本身的形体效果，而文本样式针对的是整个段落的排版效果。字体样式注重个体，文本样式注重整体。在CSS中，特意使用了font和text两个前缀来区分这两类样式。
字体样式属性：字体类型font-family、字体大小font-size、字体粗细font-weight、字体风格font-style、字体颜色color
文本样式属性：首行缩进text-indent、水平对齐text-align、文本修饰text-decoration、大小写text-transform、行高line-height、字母间距词间距letter-spacingword-spacing
首行缩进
在HTML中，使用4个 来实现首行缩进两个字符的空格；
在CSS中，使用text-indent属性来定义p元素的首先缩进；
text-indent:像素值;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>首行缩进</title>
<style>
p{
font-size: 14px;
text-indent: 28px;
}
</style>
</head>
<body>
<div>
<h3>爱莲说</h3>
<h5>作者：周敦颐</h5>
<p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
<p>予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻。莲之爱，同予者何人？牡丹之爱，宜乎众矣！</p>
</div>
</body>
</html>
水平对齐
text-align:left|center|right;
属性取值表：left、center、right
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>水平对齐</title>
<style>
#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>
文本修饰
在HTML中，我们使用s元素实现中划线，用u元素实现下划线。但是为了CSS之后，我们都是用text-decoration属性来实现。记住一点：在前端开发中，对于外观控制一般用CSS来实现，而不是使用标签来实现，这更加符合结构与样式分离的原则，提高可读性和可维护性。
text-decoration:none|underline|line-through|overline|;
none：去除所有的划线效果(默认值)
underline：下划线
line-through：中划线
overline：顶划线
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>文本修饰</title>
<style>
#p4{text-decoration: none;}
#p1{text-decoration: underline;}
#p2{text-decoration: line-through;}
#p3{text-decoration: overline;}
</style>
</head>
<body>
<p id="p4"><strong>右对齐：</strong>好好学习，天天向上</p>
<p id="p1"><strong>左对齐：</strong>好好学习，天天向上</p>
<p id="p2"><strong>居中对齐：</strong>好好学习，天天向上</p>
<p id="p3"><strong>右对齐：</strong>好好学习，天天向上</p>
</body>
</html>
大小写
在CSS中，使用text-transform属性进行大小写转换。
text-transform:none|uppercase|lowercase|capitalize|;
none无转换
uppercase:转换为大写
lowercase:转换为小写
capitalize:只将每个英文单词首字母转换为大写
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>大小写</title>
<style>
#p1{text-transform: none;}
#p2{text-transform: uppercase;}
#p3{text-transform: lowercase;}
#p4{text-transform: capitalize;}
</style>
</head>
<body>
<p id="p1">rome wasn't built in a day!</p>
<p id="p2">rome wasn't built in a day!</p>
<p id="p3">rome wasn't built in a day!</p>
<p id="p4">rome wasn't built in a day!</p>
</body>
</html>
行高
line-height:像素值;
指的是每行文本的高度而不是行间距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>行高</title>
<style>
#p1{line-height: 20px;font-size:16px;text-indent:32px;}
#p2{line-height: 50px;font-size:16px;text-indent:32px;}
#p3{line-height: lowercase;}
</style>
</head>
<body>
<div>
<h3>爱莲说</h3>
<h5>作者：周敦颐</h5>
<p id="p1">水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
<p id="p2">予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻。莲之爱，同予者何人？牡丹之爱，宜乎众矣！</p>
</div>
</body>
</html>
间距
letter-spacing字间距
word-spacing词间距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>行高</title>
<style>
#p1{letter-spacing: 10px;font-size:16px;text-indent:32px;}
#p2{word-spacing: 10px;font-size:16px;text-indent:32px;}
</style>
</head>
<body>
<div>
<h3>爱莲说</h3>
<h5>作者：周敦颐</h5>
<p id="p1">水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
<p id="p2">予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻。莲之爱，同予者何人？牡丹之爱，宜乎众矣！</p>
</div>
</body>
</html>