第五课:文本

作者: 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知识还有很多。下一课我们将学习链接。

前一篇: