第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>