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. 效果图