第五课：文本

作者: meilin
位于: 职业教育

安排和添加文本样式是网页设计很重要的一个部分。这一课将学习如何利用CSS添加文本布局。下面是几个将要描述的特性：

  • text-indent
  • text-align
  • text-decoration
  • letter-spacing
  • text-transform

文本缩进[text-indent]

特性text-indent能让段落的第一行缩进，给文本段落增加一个漂亮的开始。下面这个30px的实例适用于所有标记为<p>的文本段落：

p {
text-indent: 30px;
}

文本对齐[text-align]

CSS的特性text-align相当于HTML旧版本的对齐排列。文本可以对齐左侧，右侧或中央。除此之外，调整值会拉伸每条线，让左右两侧边缘都是直的。这种布局可以在报纸和杂志上看到。

下面这个文本实例中，标题<th>被安排在右侧，而表单数据<td>被放在中间。此外，正常的文本段落是可调节的。

th {
text-align: right;
}

td {
text-align: center;
}

p {
text-align: justify;
}

字母间隙[letter-spacing]

文本字符之间的空间可以用letter-spacing定义。这一特性的值能用想要的宽度描述。例如，如果想让文本段落中的字符空间保持3px，标题字符间隔6px，可以用下面的代码：

h1 {
text-decoration: underline;
}

h2 {
text-decoration: overline;
}

h3 {
text-decoration: line-through;
}

文本转换[text-transform]

特性text-transform控制文本的大小写显示。无论HTML代码让原来的文字看起来怎样，都可以选择大写或小写字母。以文字“headline”为例，显示给用户的结果可以是“HEADLINE”或“Headline”。下面是text-transform的四个值：

  • capitalize：大写每个单词的第一个字母。例如，”john doe” 的”John Doe”。
  • uppercase：将所有字母转换为大写。例如，”john doe” 的”JOHN DOE”。
  • lowercase：将所有字母转换为小写。例如。 “JOHN DOE” 的”john doe”。
  • none：No transformations – 文字依照HTML代码显示。

作为一个实例，我们将使用名称列表。所有名称都用<li>标记。假设我们想让名称大写字母，并且标题显示为大写字母。注意观察这个实例的HTML代码，你会看到文本实际上是小写。

h1 {
text-transform: uppercase;
}
li {
text-transform: capitalize;
}

概述

在前三课，你已经学习了许多CSS特性，但CSS知识还有很多。下一课我们将学习链接。

下一篇:
前一篇: