4、CSS 文本

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

CSS 文本属性

  • color——————设置文本颜色
  • direction ————设置文本方向。
  • line-height ——— 设置行高（行间距）。
  • letter-spacing ——设置字符间距。
  • text-align ————规定文本的水平对齐方式。
  • text-decoration — 规定添加到文本的装饰效果。
  • text-indent ——— 规定文本块首行的缩进。
  • text-shadow —— 设置文本阴影。
  • text-transform — 控制元素中的字母。
  • white-space ——设置元素中空白的处理方式。
  • word-spacing — 设置字间距。

1) text-indent 属性，缩进文本
通过使用 text-indent 属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。
这个属性最常见的用途是将段落的首行缩进
如：text-indent: 2em;

2) text-align 属性，水平对齐
值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中。justify是两端对齐。
如：text-align: center;

3) word-spacing 属性，字间隔
word-spacing 属性可以改变字（单词）之间的标准间隔。
word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值，那么字之间的间隔就会增加。为 word-spacing 设置一个负值，会把它拉近：

4) letter-spacing 属性，字母间隔
letter-spacing 属性与 word-spacing 的区别在于，字母间隔修改的是字符或字母之间的间隔。

5) text-decoration 属性，文本装饰
text-decoration 有 5 个值：

  1. none 无
  2. underline 下划线
  3. overline 上划线
  4. line-through 删除线
  5. blink 文本闪烁

6) white-space 属性，处理空白符
white-space 属性会影响到用户代理对源文档中的空格、换行和 tab 字符的处理。
white-space 属性有如下几个值：

  1. normal 默认。空白会被浏览器忽略。
  2. pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
  3. nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
  4. pre-wrap 保留空白符序列，但是正常地进行换行。
  5. pre-line 合并空白符序列，但是保留换行符。

例：

<html>
<head>
<meta charset = "utf-8">
<title>CSS</title>
<style>
h1 {
  text-align: center;
}
p {
  color: red;
  font-size: 24pt;
  letter-spacing: 2px;
  line-height: 40pt;
  text-indent: 2em;
}
</style>
</head>
<body>
<h1>宜春学院简介</h1>
<p>宜春学院已成为集经济学、法学、教育学、文学、历史学、理学、工学、农学、医学、管理学等十大学科门类为一体的多学科性高等学府，成为江西省学科门类齐全的综合性本科大学。</p>
</body>
</html>

图片说明