web前端学习（十四）——CSS3文本属性（text）的相关设置

★★光亭★★

已于 2024-04-24 11:24:42 修改

阅读量1.1w

点赞数 6

分类专栏： # 【HTML+CSS+JavaScript】文章标签：前端学习 css3

于 2021-01-21 14:27:02 首次发布

本文链接：https://blog.csdn.net/weixin_43823808/article/details/112936275

版权

【HTML+CSS+JavaScript】专栏收录该内容

48 篇文章 56 订阅

订阅专栏

1.text文本相关属性的汇总

属性	描述
color	设置文本颜色
direction	设置文本方向。
letter-spacing	设置字符间距
line-height	设置行高
text-align	对齐元素中的文本
text-decoration	向文本添加修饰
text-indent	缩进元素中文本的首行
text-shadow	设置文本阴影
text-transform	控制元素中的字母
unicode-bidi	设置或返回文本是否被重写
vertical-align	设置元素的垂直对齐
white-space	设置元素中空白的处理方式
word-spacing	设置字间距

1.1 color属性

颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定：

十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red

小实例：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>CSS简单学习</title>
		<style>
			body {color: red;}
			h1 {color: #0000FF;}
			p.szh {color: rgb(255,0,255);}
		</style>
	</head>
	
	<body>
		<p>这是一个普通的段落，其颜色为红色（对应第7行代码）</p>
		<h1>这是一个一级标题，颜色设置为蓝色</h1>
		<p class="szh">这是一个类为&quot;szh&quot;的段落，颜色为紫色</p>
	</body>
</html>

1.2 text-align属性

文本排列属性是用来设置文本的水平对齐方式。

文本可居中或对齐到左或右,两端对齐.

当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。

值	描述
left	把文本排列到左边。默认值：由浏览器决定。
right	把文本排列到右边。
center	把文本排列到中间。
justify	实现两端对齐文本效果。
inherit	规定应该从父元素继承 text-align 属性的值。

小实例：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>CSS简单学习</title>
		<style>
			h1 {text-align: center;}
			p.message {text-align: justify;}
			p.date {text-align: right;}
		</style>
	</head>
	
	<body>
		<h1>CSS text-align 实例</h1>
		<p class="message">
			经过奋斗，终于拨开了云雾，见到了日出，走上了阳光大道。面对取得的成绩，不要骄傲，再接再励，继续向前行。
			原以为“得不到”和“已失去”是最珍贵的，可原来把握眼前才是最重要的。
			我很自信，自已的未来将绚丽多彩。我对未来也充满了希望。
		</p>
		<p class="date">2020 年 1 月 21 日</p>
	</body>
</html>

1.3 text-decoration属性

text-decoration 属性用来设置或删除文本的装饰。

从设计的角度看 text-decoration属性主要是用来删除链接的下划线：

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
blink	定义闪烁的文本。
inherit	规定应该从父元素继承 text-decoration 属性的值。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>CSS简单学习</title>
		<style>
			h1 {text-decoration: overline;}
			h2 {text-decoration: line-through;}
			h3 {text-decoration: underline;}
			h4 {text-decoration: none}
		</style>
	</head>
	
	<body>
		<h1>This is heading 1.</h1>
		<h2>This is heading 2.</h2>
		<h3>This is heading 3.</h3>
		<h4>This is heading 4.</h4>
	</body>
</html>

1.4 text-transform、direction属性

text-transform文本转换属性是用来指定在一个文本中的大写和小写字母。

可用于所有字句变成大写或小写字母，或每个单词的首字母大写。

值	描述
none	默认。定义带有小写字母和大写字母的标准的文本。
capitalize	文本中的每个单词以大写字母开头。
uppercase	定义仅有大写字母。
lowercase	定义无大写字母，仅有小写字母。
inherit	规定应该从父元素继承 text-transform 属性的值。

direction属性是用来设置文本的方向或书写的方向。

值	描述
ltr	默认。文本方向从左到右。
rtl	文本方向从右到左。
inherit	规定应该从父元素继承 direction 属性的值。

小实例：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>CSS简单学习</title>
		<style>
			p.first {text-transform: uppercase;}
			p.second {text-transform: lowercase;}
			p.third {text-transform: capitalize;}
			p.fourth {direction: ltr;}
			p.fifth {direction: rtl}
		</style>
	</head>
	
	<body>
		<p class="first">This is a dog.</p>
		<p class="second">This is a dog.</p>
		<p class="third">This is a dog.</p>
		<p class="fourth">This is a dog.</p>
		<p class="fifth">This is a dog.</p>
	</body>
</html>

1.5 text-indent、text-shadow属性

text-indent文本缩进属性是用来指定文本的第一行的缩进。

值	描述
length	定义固定的缩进。默认值：0。
%	定义基于父元素宽度的百分比的缩进。
inherit	规定应该从父元素继承 text-indent 属性的值。

text-shadow文本阴影属性应用于阴影文本。

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊的距离。
color	可选。阴影的颜色。

小实例：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>CSS简单学习</title>
		<style>
			h1 {text-shadow: 5px 5px #00FFFF}
			p {text-indent: 35px;}
		</style>
	</head>
	
	<body>
		<h1>这是一个设置了文本阴影的标题</h1>
		<p>
			经过奋斗，终于拨开了云雾，见到了日出，走上了阳光大道。面对取得的成绩，不要骄傲，再接再励，继续向前行。
			原以为“得不到”和“已失去”是最珍贵的，可原来把握眼前才是最重要的。
			我很自信，自已的未来将绚丽多彩。我对未来也充满了希望。
		</p>
	</body>
</html>

1.6 letter-spacing、word-spacing属性

letter-spacing 属性增加或减少字符间的空白（字符间距）

对于英语来说，letter-spacing设置的是每个字母之间的间距；而对于汉语来说，letter-spacing设置的是每个汉字之间的间距。

值	描述
normal	默认。规定字符间没有额外的空间。
length	定义字符间的固定空间（允许使用负值）。
inherit	规定应该从父元素继承 letter-spacing 属性的值。

word-spacing 属性增加或减少字与字之间的空白。设置的是每个英语单词之间的间距！！！

值	描述
normal	默认。定义单词间的标准空间。
length	定义单词间的固定空间。
inherit	规定应该从父元素继承 word-spacing 属性的值。

小实例：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>CSS简单学习</title>
		<style type="text/css">
			h1 {letter-spacing: 3px;}
			h2 {letter-spacing: -2px;}
			p.one {letter-spacing: 10px;}
			p.two {word-spacing: 50px;}
		</style>
	</head>
	
	<body>
		<h1>This is heading 1.</h1>
		<h2>This is heading 2.</h2>
		<p class="one">这段文本中设置的字符间距为10px</p>
		<p class="two">This is a cat.</p>
	</body>
</html>

1.7 line-height属性

设置以百分比计的行高。注意： 负值是不允许的

值	描述
normal	默认。设置合理的行间距。
number	设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length	设置固定的行间距。
%	基于当前字体尺寸的百分比行间距。
inherit	规定应该从父元素继承 line-height 属性的值。

小实例：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>CSS简单学习</title>
		<style type="text/css">
			p.small {line-height: 70%;}
			p.big {line-height: 200%;}
		</style>
	</head>
	
	<body>
		<p>
			这是一个标准行高的段落。<br />
			这是一个标准行高的段落。<br />
			大多数浏览器的默认行高约为110%至120%。<br />
		</p>
		
		<p class="small">
			这是一个更小行高的段落。<br />
			这是一个更小行高的段落。<br />
			这是一个更小行高的段落。<br />
			这是一个更小行高的段落。<br />
		</p>
		
		<p class="big">
			这是一个更大行高的段落。<br />
			这是一个更大行高的段落。<br />
			这是一个更大行高的段落。<br />
			这是一个更大行高的段落。<br />
		</p>
	</body>
</html>

1.8 white-space、vertical-align属性（不再举例了。。。）

white-space属性指定元素内的空白怎样处理。

值	描述
normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。

vertical-align属性设置一个元素的垂直对齐方式。

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

值	描述
baseline	默认。元素放置在父元素的基线上。
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	使元素及其后代元素的底部与整行的底部对齐。
text-bottom	把元素的底端与父元素字体的底端对齐。
length	将元素升高或降低指定的高度，可以是负数。
%	使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit	规定应该从父元素继承 vertical-align 属性的值。