022_CSS文本

最新推荐文章于 2025-03-24 00:47:58 发布

原创最新推荐文章于 2025-03-24 00:47:58 发布 · 204 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #web前端

css学习专栏收录该内容

52 篇文章

订阅专栏

本文详细介绍了CSS中用于控制文本样式的属性，如text-indent用于首行缩进，direction设定文本方向，text-align设置文本对齐，word-spacing和letter-spacing调整字符间距，text-transform处理文本大小写，text-decoration添加文本装饰，white-space处理空白符，以及color和line-height分别设置文本颜色和行高。这些属性帮助开发者精确地控制文本在网页中的呈现效果。

1. CSS文本属性可定义文本的外观。通过文本属性, 您可以改变文本的颜色、字符间距, 对齐文本, 装饰文本, 对文本进行缩进, 等等。

2. CSS文本属性

3. 缩进文本

3.1. text-indent属性规定文本块中首行文本的缩进。

3.2. 允许使用负值。如果使用负值, 那么首行会被缩进到左边。

3.3. 这个属性最常见的用途是将段落的首行缩进, 下面的规则会使所有段落的首行缩进2em:

p {
	text-indent: 2em;
}

3.4. 一般来说, 可以为所有块级元素应用text-indent, 但无法将该属性应用于行内元素, 图像之类的行内块元素上也无法应用text-indent属性。不过, 如果一个块级元素(比如段落)的首行中有一个图像, 它会随该行的其余文本移动。

3.5. 默认值

3.6. 可能的值

3.7. 百分数, 如果元素本身设置宽度相对缩进元素本身的宽度, 如果元素本身没有设置宽度相对缩进父元素的宽度。

3.8. text-indent属性可以继承。

3.9. 实例

3.9.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>缩进文本</title>
		<meta charset="utf-8" />
	</head>
	<body>
		<p style="text-indent: 2em;"><b>缩进文本</b>3.1. text-indent属性规定文本块中首行文本的缩进。3.2. 允许使用负值。如果使用负值, 那么首行会被缩进到左边。3.3. 这个属性最常见的用途是将段落的首行缩进, 下面的规则会使所有段落的首行缩进2em。</p>
		<p style="text-indent: -2rem; margin-left: 2rem;"><b>缩进文本</b>3.4. 一般来说, 可以为所有块级元素应用text-indent, 但无法将该属性应用于行内元素, 图像之类的行内块元素上也无法应用text-indent属性。不过, 如果一个块级元素(比如段落)的首行中有一个图像, 它会随该行的其余文本移动。</p>
		<p style="width: 320px; background-color: red; text-indent: 10%;"><b>缩进文本</b>3.7. 百分数, 如果元素本身设置宽度相对缩进元素本身的宽度, 如果元素本身没有设置宽度相对缩进父元素的宽度。</p>
		<div style="text-indent: 2em;"><img src="eg_bg_03.gif" alt="eg_bg_03.gif" /><b>缩进文本</b>3.8. text-indent属性可以继承。3.8. text-indent属性可以继承。3.8. text-indent属性可以继承。</div>
	</body>
</html>

3.9.2. 效果图

4. 文本的方向/书写方向

4.1. direction属性规定文本的方向/书写方向。

4.2. 该属性指定了块的基本书写方向。

4.3. 默认值

4.4. 可能值

4.5. 例子

4.5.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>文本的方向/书写方向</title>
		<meta charset="utf-8" />

		<style type="text/css">
			.direction-ltr {
				direction: ltr;
			}
			.direction-rtl {
				direction: rtl;
			}
		</style>
	</head>
	<body>
		<p class="direction-ltr">direction属性规定文本的方向/书写方向。ltr默认。文本方向从左到右。</p>
		<p class="direction-rtl">direction属性规定文本的方向/书写方向。rtl文本方向从右到左。</p>
		<span class="direction-ltr">direction属性规定文本的方向/书写方向。ltr默认。文本方向从左到右。</span><br />
		<span class="direction-rtl">direction属性规定文本的方向/书写方向。rtl文本方向从右到左。</span><br /><br />
	</body>
</html>

4.5.2. 效果图

5. 水平对齐

5.1. text-align属性规定元素中的文本的水平对齐方式。

5.2. text-align设置块级元素内文本的水平对齐方式。

5.3. 默认值

5.4. 可能的值

5.5. 实例

5.5.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>水平对齐</title>
		<meta charset="utf-8" />

		<style type="text/css">
			h1 {
				text-align: center;
			}
			h2 {
				text-align: left;
			}
			h3 {
				text-align: right;
			}
			span {
				text-align: right;
			}
		</style>
	</head>
	<body>
		<h1>text-align center 文本水平居中对齐。</h1>
		<h2>text-align left 文本水平居左对齐。</h2>
		<h3>text-align right 文本水平居右对齐。</h3>
		<span>text-align设置块级元素内文本的水平对齐方式。</span>
	</body>
</html>

5.5.2. 效果图

6. 单词间距

6.1. word-spacing属性增加或减少单词间的空白(即字间隔)。

6.2. 该属性定义元素中字之间插入多少空白符。针对这个属性, "字"定义为由空白符包围的一个字符串。如果指定为长度值, 会调整字之间的通常间隔; normal就等同于设置为0。允许指定负长度值, 这会让字之间挤得更紧。

6.3. 汉字之间该属性无效(因为汉字并不会用空格间隔字的格式书写)。

6.4. 默认值

6.5. 可能的值

7. 字符间距

7.1. letter-spacing属性增加或减少字符间的空白(字符间距)。

7.2. 与word-spacing属性一样, letter-spacing属性的可取值包括所有长度。默认关键字是normal(这与letter-spacing:0 相同)。输入的长度值会使字母之间的间隔增加或减少指定的量。

7.4. 默认值

7.5. 可能的值

7.6. 实例

7.6.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>字及字母间隔</title>
		<meta charset="utf-8" />

		<style type="text/css">
			p {
				word-spacing: 16px;
			}
			.span1 {
				word-spacing: -0.5em;
			}
			h1 {
				letter-spacing: -0.5rem;
			}
			#span2 {
				letter-spacing: 16px;
			}
		</style>
	</head>
	<body>
		<p class="spread">word-spacing default is normal.</p>
		<span class="span1">word-spacing can use length value.</span>
		<h1>letter-spacing属性增加或减少字符间的空白(字符间距)。</h1>
		<span id="span2">与word-spacing属性一样, letter-spacing属性的可取值包括所有长度。默认关键字是normal(这与letter-spacing:0 相同)。输入的长度值会使字母之间的间隔增加或减少指定的量。</span>
	</body>
</html>

7.6.2. 效果图

8. 字符转换

8.1. text-transform属性处理文本的大小写。

8.2. 默认值

8.3. 可能的值

8.4. 实例

8.4.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>字符转换</title>
		<meta charset="utf-8" />

		<style type="text/css">
			h1 {
				text-transform: uppercase;
			}
		  	.uppercase {
		  		text-transform: none;
		  	}
		  	.lowercase {
		  		text-transform: lowercase;
		  	}
		  	.capitalize {
		  		text-transform: capitalize;
		  	}
		</style>
	</head>
	<body>
		<h1>This is an h1 element.</h1>
		<p class="uppercase">This is some text in a paragraph.</p>
		<p class="lowercase">This is some text in a paragraph.</p>
		<span class="capitalize">This is some text in a paragraph.</span>
	</body>
</html>

8.4.2. 效果图

9. 文本装饰

9.1. text-decoration属性规定添加到文本的修饰。

9.2. 默认值

9.3. 可能的值

9.4. 实例

9.4.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>文本装饰</title>
		<meta charset="utf-8" />

		<style type="text/css">
			h1 {
				text-decoration: overline;
			}
			h2 {
				text-decoration: line-through;
			}
			h3 {
				text-decoration: underline;
			}
			h4 {
				text-decoration: blink;
			}
			a {
                text-decoration: none;
			}
			h5.stricken {
				text-decoration: underline overline line-through;
			}
		</style>
	</head>
	<body>
		<h1>这是标题 1</h1>
		<h2>这是标题 2</h2>
		<h3>这是标题 3</h3>
		<h4>这是标题 4</h4>
		<p><a href="https://www.baidu.com">百度</a></p>
		<h5 class="stricken">这是标题 5</h5>
	</body>
</html>

9.4.2. 效果图

10. 处理空白符

10.1. white-space属性设置如何处理元素内的空白。就是对文档中的空格、换行和tab字符的处理。

10.2. 默认值

10.3. 可能的值

10.4. 实例

10.4.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>处理空白符</title>
		<meta charset="utf-8" />

		<style type="text/css">
			div {
				width: 500px; 
				background-color: pink;
			}
			#p1 {
				white-space: normal;
			}
			#p2 {
				white-space: pre;
			}
			#p3 {
				white-space: nowrap;
			}
			#p4 {
				white-space: pre-wrap;
			}
			#p5 {
				white-space: pre-line;
			}
		</style>
	</head>
	<body>
		<div>
			<p id="p1">
				注释:
	    			当white-space属性设置为normal时,				浏览器会合并所有的空白符,          忽略换行符, 	        并且允许自动换行。
	    	</p>
			
			<hr />
			
			<p id="p2">
				注释: 
					当white-space属性设置为pre时,				浏览器会保留所有的空白符,            保留换行符,           并且不允许自动换行。
			</p>

			<hr />

			<p id="p3">
				注释: 
					当white-space属性设置为nowrap时, 				浏览器会合并所有的空白符,            忽略换行符,             并且不允许自动换行。
			</p>
			<hr />

			<p id="p4">
				注释: 
					当white-space属性设置为pre-wrap时,				 浏览器会保留所有的空白符,           保留换行符,                  并且允许自动换行。
			</p>

			<hr />

			<p id="p5">
				注释: 
					当white-space属性设置为pre-line时, 				浏览器会合并所有的空白符,                             保留换行符,                并且允许自动换行。
			</p>
		</div>
	</body>
</html>

10.4.2. 效果图

11. 文本颜色

11.1. color属性规定文本的颜色。

11.2. 这个属性设置了一个元素的前景色(在html表现中, 就是元素文本的颜色)。这个颜色还会应用到元素的所有边框, 除非被border-color或另外某个边框颜色属性覆盖。

11.3. 默认值

11.4. 可能的值

12. 行高

12.1. line-height属性设置行间的距离(行高)。

12.2. 不允许使用负值。

12.3. 该属性会影响行框的布局, 应用到块级元素。

12.4. line-height与font-size的计算值之差(在CSS中成为"行间距")分为两半, 分别加到一个文本行内容的顶部和底部。

12.5. 默认值

12.6. 可能的值

12.7. 实例

12.7.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>行高</title>
		<meta charset="utf-8" />

		<style type="text/css">
			p {
				width: 300px;
				height: 200px;
				border: solid 10px;
				color: blue; 
				background-color: red;
				line-height: 100px; 	
			}
		</style>
	</head>
	<body>
		<p>line-height属性设置行间的距离(行高)。line-height属性设置行间的距离(行高)。</p>
	</body>
</html>

12.7.2. 效果图