CSS3笔记004 - 第04章 文本样式

第04章 文本样式

文本样式简介

字体样式与文本样式的区分
字体样式针对的是文字本身的形体效果，而文本样式针对的是整个段落的排版效果。字体样式注重个体，文本样式注重整体。在CSS中，特意使用了font和text两个前缀来区分这两类样式。

字体样式属性：字体类型font-family、字体大小font-size、字体粗细font-weight、字体风格font-style、字体颜色color
文本样式属性：首行缩进text-indent、水平对齐text-align、文本修饰text-decoration、大小写text-transform、行高line-height、字母间距\词间距letter-spacing\word-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>
posted @ 2020-08-27 07:50  测试工匠麻辣烫  阅读(141)  评论(0)  编辑  收藏  举报