层叠样式表/字体和文本

字体属性

• font-family — 设置字体。
• font-style — 设置文本的样式，常见的值是 normal 和 italic。
• font-variant — 修改文本，例如小写字母。
• font-weight — 设置文本的粗细，值如 bold 和 normal。
• font-size — 设置字体大小。
• line-height — 设置相邻文本行基线之间的间距。

以下将详细介绍每个属性。

font-family

W3C 规范 CSS1 CSS2.1

以下是 CSS 字体匹配的简化描述。有关确切的描述，请参阅 CSS1 字体匹配 或 CSS2.1 字体匹配 规范。

font-family 属性的值是一个逗号分隔的字体列表，按优先级排序。网页浏览器将尝试使用列表中的第一个字体。如果第一个字体不可用，它将尝试使用第二个字体，以此类推。如果所有字体均不匹配，网页浏览器将使用默认字体。这可能是用户选择的字体。

在下面的示例中，网页浏览器将尝试使用 Verdana。如果 Verdana 未安装（或不可用，如果还指定了 font-variant），网页浏览器将尝试使用 Helvetica。如果 Helvetica 不可用，它将尝试使用 Arial。

p { font-family: Verdana, Helvetica, Arial, sans-serif }

由于没有一组标准字体在所有网页浏览器和操作系统中可用，因此可能所有命名的字体都不会匹配。定义了五个通用字体系列，以允许这种情况。网页浏览器将用最接近的可用字体替换通用字体。五个通用系列是：serif、sans-serif、monospace、cursive 和 fantasy。

应始终以通用字体系列结束字体系列列表。否则，您可能会以用户默认的衬线字体结束，而您想要的是无衬线字体。通用字体始终保证匹配，因此在通用字体之后指定备用字体毫无意义。在字体范围有限的系统中，可能有两个或多个通用字体映射到同一个字体。您可以通过查看下面的示例，查看您的网页浏览器对通用字体使用的字体。有五个不同的字体吗？

serif sans-serif monospace cursive fantasy

网页设计师面临的一个持续问题是，他们无法准确地指定所需的字体，因为他们不知道用户安装了哪些字体。解决方法是在字体系列列表中指定每个可能的客户端系统的或多或少等效的字体。有许多有用的参考可以帮助确定这种等效性（例如，这里）。

例如，要使用在 Windows 中称为 Impact 的字体，使用以下声明。

font-family: Impact, Charcoal, sans-serif

其中“Impact”是 Windows 名称，“Charcoal”是 MacOS 名称，“sans-serif”是针对没有这两种字体的系统的通用回退。

font-style

W3C 规范 CSS1 CSS2.1

CSS1 和 CSS2.1 为此属性定义了三个值：normal、italic 和 oblique。此属性的初始值为 normal。许多字体系列没有定义单独的斜体字体版本，在这种情况下，当 font-style 设置为 italic 时，将使用斜体版本。

CSS 规则

#para1 {
  font-style:normal
}

#para2 {
  font-style:oblique
}

#para3 {
  font-style:italic
}

示例 HTML

    <p id="para1">This sentence should be in an upright version of the font.</p>
    <p id="para2">This sentence should be in an oblique version of the font.</p>
    <p id="para3">This sentence should be in an italic version of the font.
      Is it different to the oblique version?
    </p>

示例呈现

此句子应使用字体的直立版本。

此句子应使用字体的倾斜版本。

此句子应使用字体的斜体版本。它与倾斜版本不同吗？

font-variant

W3C 规范 CSS1 CSS2.1

CSS1 和 CSS2.1 为此属性定义了两个值：normal 和 small-caps。此属性的初始值为 normal。当应用 small-caps 时，小写字母将显示为缩小的大写字母。大写字母和其他字符保持不变。以下显示了这些值的实际效果。

CSS 规则

#para1 {
  font-variant:normal
}

#para2 {
  font-variant:small-caps
}

示例 HTML

    <p id="para1">This sentence shows the effect of setting the
      Cascading Style Sheets property <code>font-variant</code>.
      Other characters: 1 2 3 % !
    </p>
    <p id="para2">This sentence shows the effect of setting the
      Cascading Style Sheets property <code>font-variant</code>.
      Other characters: 1 2 3 % !
    </p>

示例呈现

此句子显示了设置层叠样式表属性 font-variant 的效果。其他字符：1 2 3 % !

此句子显示了设置层叠样式表属性 font-variant 的效果。其他字符：1 2 3 % !

font-weight

W3C 规范 CSS1 CSS2.1

font-weight 属性设置字体的深浅。CSS 目前定义了从最浅的 100 到最深的 900 的九个深浅级别。不同级别的数量取决于 font-family。一些系列可能定义了所有九个级别，而大多数系列只定义一个或两个级别。值 normal 等同于 400，bold 等同于 700。

下面的列表显示了当前系列的不同权重

• 100
• 200
• 300
• 400 或 normal
• 500
• 600
• 700 或 bold
• 800
• 900

font-weight 的最后两个可能值是 lighter 和 bolder。当使用这些值时，网页浏览器将尝试从当前系列中选择比父元素字体更浅或更深的字体。

由于大多数字体系列只有一个或两个权重，因此通常只使用 normal 和 bold 值。

例如，要使 strong 元素为红色而不是大多数网页浏览器使用的粗体，请应用以下规则。

strong {
  font-weight:normal; /* remove the bold defined by the web browser */
  color:red
}

作为另一个示例，您可以将所有超链接设置为粗体。

a {
  font-weight:bold
}

示例 HTML

    <p><strong>Note:</strong> in this text
       <a href="glossary#hyperlink">hyperlinks</a> are in boldface.
    </p>

示例呈现

注意： 在此文本中，超链接 为粗体。

font-size

W3C 规范 CSS1 CSS2.1

在阅读本节之前，请确保您知道如何在用于测试网页的所有浏览器中更改默认字体大小。

请确保您了解屏幕像素和 CSS 像素之间的区别。请参阅 CSS 长度和单位。

字体大小是网页设计中比较棘手的一个领域。网页浏览者最常抱怨的是很多网页的字体大小太小。（参见 Jakob Nielsen 的 2005 年网页设计十大错误。）客户购买网站时经常会要求将字体缩小，以便在页面上塞入更多信息。更糟糕的是，大多数用户没有学习如何更改网页浏览器使用的默认字体大小。（如果您曾经教授过关于如何使用网页浏览器的课程，更改字体大小和颜色是您能教的最重要的事情之一。）另一个问题是，网页设计师往往比较年轻，视力也比较好。只是因为您喜欢阅读占默认字体大小 60% 的文本，并不意味着您的目标受众也能阅读这种大小的文本。

有些用户会更改默认字体大小，网页应该尊重他们的选择。理想情况下，页面上所有重要的信息都应该至少与用户的默认字体大小一样大。重要信息包括出版日期、网站隐私政策链接等。小字号应该保留给不重要的文本，例如页面是有效 HTML、符合 WCAG Double-AA 等的声明，以及通常以较小尺寸呈现的效果，例如上标。

以 CSS 像素 (px) 或绝对单位 (pt、pc、mm、cm 和 in) 为单位的长度不尊重用户的偏好。事实上，使用这些单位会阻止用户轻松更改字体大小，如果他们发现字体太小或太大。例如，在 Windows 版 Internet Explorer 中，如果用户想要更改以这些单位表示的字体的尺寸，他们必须从“工具”菜单中选择“Internet 选项...”，然后单击“常规”选项卡上的“辅助功能...”按钮，并选中“忽略网页上指定的字体大小”复选框。这并不方便用户。

尊重用户偏好的值是 em 或 ex 中的长度、百分比和关键字值。有七个“绝对”关键字值根据用户的默认字体大小缩放字体，以及两个“相对”关键字值根据父元素缩放字体。“绝对”关键字是

• xx-small
• x-small
• small - IE/win v6 怪癖模式 和 IE/win v5 中用户的默认字体大小，无论渲染模式如何。
• medium - 标准模式 中用户的默认字体大小。
• large
• x-large
• xx-large

这两个相对关键字是 smaller 和 larger。

大多数网页设计师更喜欢使用 em。以 em、ex 和百分比为单位的字体大小相对于父元素的字体大小进行计算。1em 等于 100%。以下示例对此进行了演示。

#span1 {
  font-size:0.5em;
  color:red
}

#span2 {
  font-size:5em;
  color:green
}

#span3 {
  font-size:0.4em;
  color:magenta
}

示例 HTML

    <p>The <span id="span1">text <span id="span2">size 
      <span id="span3">changes </span></span></span>a lot.</p>

示例呈现

The text size changes a lot.

由于 0.5 乘以 5 乘以 0.4 等于 1，因此最后一个 span 中的文本应该与父段落中的文本大小相同。

在 Internet Explorer 中使用 ems

如果您在使用 Internet Explorer 查看的页面中使用 em 作为 font-size，则需要注意 Internet Explorer 的一个怪癖。在 Windows PC 上，将下面给出的两个文件保存在同一个目录中，然后使用 Internet Explorer 查看 IE_font_size_bug.htm。（此示例已在 IE/win v5.0、v5.5 和 v6.0 中测试。）

IE_font_size_bug.css

p {
  font-size:1em
}

IE_font_size_bug.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <title>IE font size bug</title>
    <link rel="stylesheet" type="text/css" href="IE_font_size_bug.css">
  </head>
  <body>
    <p>Internet Explorer has a little problem with ems.</p>
  </body>
</html>

将默认字体大小设置为中号、小号和最小号。（如果您在工具栏上没有“大小”按钮，请使用“视图”菜单的“文本大小”子菜单。）文本的高度显示在下表中。

默认字体大小	大写字母的高度	em 的高度
中号	11 个屏幕像素	16 个屏幕像素
小号	9 个屏幕像素	13 个屏幕像素
最小号	6 个屏幕像素	12 个屏幕像素

在六个像素高的情况下，字母会变成页面上模糊的斑点，实际上无法阅读。

有一个简单的解决方法。像这样在 IE_font_size_bug.css 中添加一个额外的规则

body {
  font-size:100% /* Keeps IE happy when the user sets the default size to 'smallest'. */
}

p {
  font-size:1em
}

理论上，将 font-size 设置为 100% 不应该改变任何东西。但是，如果您使用新的样式表查看页面，您会发现“最小号”文本的大小发生了变化。

默认字体大小	大写字母的高度	em 的高度
中号	11 个屏幕像素	16 个屏幕像素
小号	9 个屏幕像素	13 个屏幕像素
最小号	9 个屏幕像素	12 个屏幕像素

如果您视力良好和/或拥有大型显示器，九个像素高的字母是相当可读的。

始终将 body 的 font-size 设置为百分比以处理此怪癖是一个好主意。最好还留下一条注释来解释为什么存在字体大小声明，这样当其他人接管您的样式表时就不会删除明显多余的规则。

嵌套问题

当您使用类型选择器设置 font-size 属性时，您可能会遇到使用 em 或百分比的问题。在下面的示例中，每个嵌套的 div 元素都匹配选择器，因此文本的大小每次都减半。最里面的 division 中的文本是用户默认字体大小的 ¹/₁₆。您可能很难阅读示例渲染，除非您显着增大默认字体大小。

CSS 规则

body {
  font-size:100% /* Keeps IE happy when the user sets the default size to 'smallest'. */
}

div {
  font-size:0.5em;
  border:1px dotted green;
  padding:1em
}

示例 HTML

    <div>
      This division contains
      <div>
        another division that contains
        <div>
          another division and so on
          <div>
            until the text is tiny.
          </div>
        </div>
      </div>
    </div>

示例呈现

This division contains

another division that contains

another division and so on

until the text is tiny.

此问题经常出现在列表中，在列表中，设置 li 元素的 font-size 很诱人。当将来有人添加子列表时，子列表的文本将过小或过大，具体取决于缩放因子。解决方案是使用 ID 选择器来定位嵌套组的最外层元素，例如嵌套列表的最外层 ul 元素。

表格和表单问题

如果您使用表格或表单，您可能会发现需要使用以下规则才能使这些元素中的文本根据用户的偏好正确缩放

table, input, select {
  font-size:100%
}

line-height

W3C 规范 CSS1 CSS2.1

line-height 属性定义相邻行文本的基线之间的最小距离。如果需要，该距离可能会增加以适应图像等。在线上。它表示为字体高度和行间距之间的比率。字体的高度定义为基线和大写字母顶部的距离。有些字母可能具有向下延伸到基线以下的降部。在某些字体中，也可能存在升部，高于大写字母的顶部。

在下面的示例中，每行后面的绿色条带从基线向上延伸到字体高度。第一行显示大写字母。第二行显示带有降部的 lowercase 字母。第三行显示带有重音符号的大写字母。

A B C

p q y

É Ñ Ô

line-height 可以简单地用一个数字、一个长度或一个百分比来表示。如果它用一个简单数字或一个百分比表示，则用它乘以字体高度来确定行之间的空间。以下示例演示了该段落使用 line-height 的四个不同值时的外观。示例中的字体被放大，以便更轻松地查看行间距。

#para1 {
  line-height: 1
}

#para2 {
  line-height: 1.2em
}

#para3 {
  line-height: 160%
}

#para4 {
  line-height: 2
}

line-height = 1 或 100% 或 1em

line-height 可以简单地用一个数字、一个长度或一个百分比来表示。如果它用一个简单数字或一个百分比表示，则用它乘以字体高度来确定行之间的空间。以下示例演示了 line-height 的四个不同值。示例中的字体被放大，以便更轻松地查看行间距。

line-height = 1.2 或 120% 或 1.2em

line-height 可以简单地用一个数字、一个长度或一个百分比来表示。如果它用一个简单数字或一个百分比表示，则用它乘以字体高度来确定行之间的空间。以下示例演示了 line-height 的四个不同值。示例中的字体被放大，以便更轻松地查看行间距。

line-height = 1.6 或 160% 或 1.6em

line-height 可以简单地用一个数字、一个长度或一个百分比来表示。如果它用一个简单数字或一个百分比表示，则用它乘以字体高度来确定行之间的空间。以下示例演示了 line-height 的四个不同值。示例中的字体被放大，以便更轻松地查看行间距。

line-height = 2 或 200% 或 2em

line-height 可以简单地用一个数字、一个长度或一个百分比来表示。如果它用一个简单数字或一个百分比表示，则用它乘以字体高度来确定行之间的空间。以下示例演示了 line-height 的四个不同值。示例中的字体被放大，以便更轻松地查看行间距。

仔细观察 line-height 为 1 的示例中的降部。您可能会注意到至少有一个点，降部触及了下一行的字母。大多数网页浏览器默认的 line-height 为 1.2。许多网页设计师认为 line-height 为 1.6 更易读，尤其是当字体大小比较小时。

速记属性

W3C 规范 CSS1 CSS2.1

font 速记属性可用于在一个声明中设置五个单独的字体属性和 line-height 属性。font 有两种方法可以设置单独的属性，通过指定单独属性的组合或通过给出选择预定义的单个值集的单个关键字。第二个选项仅在 CSS2.1 中可用。

单独属性的组合

组合单个属性的语法有点复杂。属性按以下顺序给出

• none、一个或多个 font-style、font-variant 和 font-weight，以任何顺序排列；
• 可选地后跟 font-size；
• 如果 font-size 存在，它可以后跟斜杠，/，后跟 line-height；
• 接着是font-family，这是必须存在的。

包含所有组件的示例是

p {
  font: bold italic small-caps 150%/1.4 Arial, Helvetica, sans-serif
}

注意，150%表示字体大小是父元素字体大小的1.5倍。然后，/1.4将行高设置为当前元素字体大小的1.4倍。还要注意，字体系列是用逗号分隔的字体系列列表，按优先级排序。

如果省略了某些属性，则它们将设置为其初始值。例如，

p {
  font: monospace
}

等同于

p {
  font-family: monospace;
  font-style:normal;
  font-variant:normal;
  font-weight:normal;
  font-size:medium;
  line-height:normal
}

关键字

关键字值是指网页浏览器为菜单等项目使用的系统字体。关键字值是

caption ; 用于按钮、下拉列表等的字体。

icon ; 用于标记图标的字体。

menu ; 下拉菜单使用的字体。

message-box ; 对话框使用的字体。

small-caption ; 用于标记小型控件的字体。

status-bar ; 状态栏中使用的字体。

关键字值将所有单个属性设置为与相应的系统字体匹配。然后可以通过其他声明来覆盖单个属性。

示例

ul {
  font:menu; /* Set lists to use a system font. */
  font-style:italic /* Override an individual property. */
}

文本间距

text-align

W3C 规范 CSS1 CSS2.1

此属性用于对齐文本块。四个可能的值是left、right、center 和justify。这些值在下面演示。

CSS 规则

div {
  width:50% /* Make the column narrower so the alignment is more noticeable. */
}

p {
  border: 1px solid red;
  padding: 1em;
}

#para1 {
  text-align: left;
}

#para2 {
  text-align: right;
}

#para3 {
  text-align: center;
}

#para4 {
  text-align: justify;
}

示例 HTML

    <div>
      <p id="para1">Web designers and web surfers are divided over the relative merits of left versus
        full justification of text. Many state a preference for left justified text despite the
        fact that most print media is fully justified.
      </p>
      <p id="para2">Web designers and web surfers are divided over the relative merits of left versus
        full justification of text. Many state a preference for left justified text despite the
        fact that most print media is fully justified.
      </p>
      <p id="para3">Web designers and web surfers are divided over the relative merits of left versus
        full justification of text. Many state a preference for left justified text despite the
        fact that most print media is fully justified.
      </p>
      <p id="para4">Web designers and web surfers are divided over the relative merits of left versus
        full justification of text. Many state a preference for left justified text despite the
        fact that most print media is fully justified.
      </p>
    </div>

示例呈现

网页设计师和网页浏览者对左对齐和完全对齐文本的相对优点存在分歧。许多人表示他们更喜欢左对齐文本，尽管大多数印刷媒体是完全对齐的。

网页设计师和网页浏览者对左对齐和完全对齐文本的相对优点存在分歧。许多人表示他们更喜欢左对齐文本，尽管大多数印刷媒体是完全对齐的。

网页设计师和网页浏览者对左对齐和完全对齐文本的相对优点存在分歧。许多人表示他们更喜欢左对齐文本，尽管大多数印刷媒体是完全对齐的。

网页设计师和网页浏览者对左对齐和完全对齐文本的相对优点存在分歧。许多人表示他们更喜欢左对齐文本，尽管大多数印刷媒体是完全对齐的。

此属性与以下其他属性交互

white-space

如果当white-space 为pre 或pre-line时，text-align 的值为justify，则网页浏览器必须将text-align 视为left（这是英语的正常情况）或right（如果当前文本方向是从右到左）。

letter-spacing

如果将其设置为除normal 之外的任何值，则网页浏览器可能仅在对齐文本时调整字间距。

word-spacing

如果将其设置为除normal 之外的任何值，则网页浏览器必须尝试在对齐文本时尊重指定的值。

letter-spacing

W3C 规范 CSS1 CSS2.1

letter-spacing 属性用于增加或减少字母之间的间距。网页浏览器不需要支持减少字母间距，或者可能只允许有限的减少。

normal 值可用于从元素中删除继承的值。如果该值设置为除normal 之外的任何值，则使用text-align 对齐文本时，字母之间的间距不能更改。如果您不希望字母间距因对齐而改变，但也不希望添加任何额外的空间，可以将letter-spacing 设置为零。

CSS 规则

.increase {
  letter-spacing:0.5em
}

.decrease {
  letter-spacing:-0.05em
}

示例 HTML

    <p class="increase">Letter spacing.</p>
    <p>Letter spacing.</p>
    <p class="decrease">Letter spacing.</p>

示例呈现

字母间距。

字母间距。

字母间距。

word-spacing

W3C 规范 CSS1 CSS2.1

word-spacing 属性用于增加或减少单词之间的间距。网页浏览器不需要支持减少单词间距，或者可能只允许有限的减少。

normal 值可用于从元素中删除继承的值。

CSS 规则

.increase {
  word-spacing:1em
}

.decrease {
  word-spacing:-0.2em
}

示例 HTML

    <p class="increase">The word spacing can be altered.</p>
    <p>The word spacing can be altered.</p>
    <p class="decrease">The word spacing can be altered.</p>

示例呈现

单词间距可以更改。

单词间距可以更改。

单词间距可以更改。

其他文本属性

text-decoration

W3C 规范 CSS1 CSS2.1

text-decoration 可以设置为none 或underline、overline、line-through 和blink 的任意组合。许多网页设计师认为使用blink 是不好的做法。对超链接以外的任何内容使用下划线也被认为是不好的做法。请将下面第二个和第三个示例作为不应执行的操作的示例。

如果您使用line-through 来表示删除的文本，请考虑使用语义元素，如 (X)HTML 的del 元素，而不是或与该属性一起使用。

text-decoration 最常见的用法是更改超链接的外观，以便从主内容中的链接中删除下划线，同时保留导航菜单中的下划线，反之亦然。

CSS 规则

a {
  text-decoration:none
}

li a {
  text-decoration:underline
}

示例 HTML

    <p>The next chapter is rather boring so all but the most enthusiastic readers
       should skip to <a href="Chapter7.htm">the interesting bit</a>.
    </p>
    <ul>
      <li><a href="Chapter4.htm">Previous</a></li>
      <li><a href="Contents.htm">Contents</a></li>
      <li><a href="Chapter6.htm">Next</a></li>
    </ul>

示例呈现

下一章相当无聊，所以除了最热心的读者以外，其他人应该跳到有趣的部分。

• 上一步
• 目录
• 下一步

使用所有四个值的示例。blink 不被某些浏览器支持，因此您可能会免受这种效果的影响。

CSS 规则

#overDone {
  text-decoration:underline overline line-through blink
}

示例 HTML

    <p id="overDone">Can you actually read this?</p>

示例呈现

你真的能读懂这个吗？

应用于元素的任何text-decoration 都将绘制在其所有内容之上，包括任何子元素，而不管在这些元素上设置的text-decoration 值如何。对子元素指定的任何其他装饰也将与父元素的装饰一起应用。

CSS 规则

.notImportant {
  text-decoration:line-through;
  color:black
}

em {
  text-decoration:none
}

strong {
  text-decoration:underline;
  color:red
}

示例 HTML

    <p class="notImportant">Most of the text in this sentence is not <em>important</em>.</p>
    <p class="notImportant">The last bit of text in this sentence is
      <strong>very important</strong>.
    </p>

示例呈现

本句中的大部分文本并不重要。

本句中的最后一段文本非常重要。

请注意，第二段中的下划线是红色的，这是分配给下划线的strong 元素的颜色。但是，strong 元素上的删除线是黑色的，因为它属于父p 元素，父元素的颜色设置为黑色。

text-indent

W3C 规范 CSS1 CSS2.1

text-indent 属性指定块级元素第一行的缩进。使用margin-left、margin-right、padding-left 或padding-right 来缩进整个块。缩进可以为负数，但网页浏览器不需要支持负缩进，或者可能限制负缩进的大小。text-indent 属性是继承的。在下面的示例中，text-indent 应用于包含段落的div 元素，而不是直接应用于段落本身。

请注意，缩进仅在块级元素的开头应用。由内联元素引起的换行符不会在块中导致任何额外的缩进出现。

CSS 规则

p {
  width:50%;       /* Narrow the column so that there are more
                    * lines of text in the example. */
  margin-left:4em /* Apply a margin to the left of all paragraphs
                    * so there is room for the undent example. */
  margin-top:0.5em /* Separate the two halves of the example slightly. */
}

.indented {
  text-indent:2em;
  border:1px solid red /* Put a border around the first half of the example. */
}

.undented {
  text-indent:-2em;
  border:1px solid blue /* Put a border around the second half of the example. */
}

示例 HTML

    <div class="indented">
      <p>This paragraph should have an indent similar to that found in novels.
        However there will still be a vertical gap between the paragraphs because that
        is controlled by the <code>margin</code> property. If you want to recreate a novel-like
        appearance you will need to set both properties.
      </p>
      <p>This paragraph has a line break in it, created with the <code>br</code> element.
        Since this doesn't start a new block level element there is no indent or undent after
        the line break.<br> The line break was immediately before this sentence. You may need
        to adjust the width of your browser window to make the line break obvious.
      </p>
    </div>
    <div class="undented">
      <p>This paragraph should have an undent. This is a more unusual style but it can be useful.
        It is most often used with lists to emphasis the start of a list item either instead of 
        or in conjunction with a bullet.
      </p>
      <p>This paragraph has a line break in it, created with the <code>br</code> element.
        Since this doesn't start a new block level element there is no indent or undent after
        the line break.<br> The line break was immediately before this sentence. You may need
        to adjust the width of your browser window to make the line break obvious.
      </p>
    </div>

示例呈现

本段应该有类似于小说中的缩进。但是，段落之间仍然会有垂直间隙，因为这是由margin 属性控制的。如果您想重新创建类似小说的外观，则需要设置这两个属性。

本段中有一个换行符，由br 元素创建。由于这不会开始新的块级元素，因此换行符后没有缩进或缩进。
换行符在该句之前。您可能需要调整浏览器的窗口宽度才能使换行符明显。

本段应该有缩进。这是一种更不寻常的样式，但它可能很有用。它最常与列表一起使用，以强调列表项的开头，而不是或与项目符号一起使用。

本段中有一个换行符，由br 元素创建。由于这不会开始新的块级元素，因此换行符后没有缩进或缩进。
换行符在该句之前。您可能需要调整浏览器的窗口宽度才能使换行符明显。

text-transform

W3C 规范 CSS1 CSS2.1

text-transform 属性有四个值

none

不做任何改变。

uppercase

将所有小写字母转换为大写字母。其他字符保持不变。

lowercase

将所有大写字母转换为小写字母。其他字符保持不变。

capitalize

将每个单词的第一个字母转换为大写字母。其他字符保持不变。特别是单词中其他地方的大写字母将保持大写。

text-transform 的确切效果取决于元素的语言。语言的确定方式取决于要设置样式的文档。HTML 文档使用 lang 属性来指定元素的语言。除非使用 lang 属性来更改语言，否则子元素将继承语言。

请注意，将转换后的文本复制到剪贴板可能会因浏览器而异。Firefox 将文本复制到剪贴板，就像它没有转换一样，而 Chrome 将其复制到剪贴板，就像它显示的那样。

CSS 规则

#para1 {
  text-transform:uppercase
}

#para2 {
  text-transform:lowercase
}

#para3 {
  text-transform:capitalize
}

#para4 {
  text-transform:none
}

示例 HTML

    <p id="para1">this TEXT is NOT iN aNy PaRtIcULaR CaSe.</p>
    <p id="para2">this TEXT is NOT iN aNy PaRtIcULaR CaSe.</p>
    <p id="para3">this TEXT is NOT iN aNy PaRtIcULaR CaSe.</p>
    <p id="para4">this TEXT is NOT iN aNy PaRtIcULaR CaSe.</p>

示例呈现

this TEXT is NOT iN aNy PaRtIcULaR CaSe.

this TEXT is NOT iN aNy PaRtIcULaR CaSe.

this TEXT is NOT iN aNy PaRtIcULaR CaSe.

this TEXT is NOT iN aNy PaRtIcULaR CaSe.

将 text-transform 设置为 uppercase 与将 font-variant 设置为 small-caps 的效果进行比较。

CSS 规则

.uppercase {
  text-transform:uppercase
}

.small-caps {
  font-variant:small-caps
}

示例 HTML

    <p>Compare <span class="uppercase">uppercase</span>
      to <span class="small-caps">small-caps</span>.
    </p>

示例呈现

比较 uppercase 与 small-caps.

vertical-align

W3C 规范 CSS1 CSS2.1

vertical-align 属性仅适用于其 display 值为 inline 或 table-cell 的元素。vertical-align 的行为对于 table-cell 来说有很大不同，在 层叠样式表/表格 部分进行了描述。

不要做什么

使用 vertical-align 时最常见的错误是将其应用于块级元素，然后想知道为什么它不起作用。以下示例显示了问题所在。CSS 规则

div#outer {
  width:100px;
  height:100px;
  background-color:#00f;
  text-align:center
}

div#inner {
  width:50px;
  height:50px;
  background-color:#f00;
  margin:auto;
  vertical-align:middle /* This is ignored because this is a block level element. */
}

示例 HTML

    <div id="outer">
      <div id="inner">?</div>
    </div>

示例呈现

?

如您所见，红色的内部划分与蓝色划分的顶部牢固地对齐。

正确用法

vertical-align 的正确用法是调整文本行中文本部分和嵌入内容的相对位置。要了解 vertical-align，您需要了解CSS 行框。以下示例显示了两个块级元素，段落。每个块级段落包含一个内联元素，span。对内联元素应用边框和背景，以便行框可见。

CSS 规则

p {
  width:20em; /* Narrow the paragraphs to ensure that the second paragraph wraps. */
  font-size:120%;
  line-height:2; /* Increase the line height to make the gaps between lines clearer. */
  border:3px solid red;
  padding:2px;
  background-color:#fcc
}

span {
  background-color:#ddd
  border:3px dashed #060
}

示例 HTML

    <p><span>This is a short paragraph.</span></p>
    <p><span>This is a much longer paragraph. The text in the paragraph wraps on to
      more than one line. The CSS rendering engine has to split the text into a number
      of line boxes, one for each line of text.</span>
    </p>

这是一个简短的段落。

这是一个更长的段落。段落中的文本换行到多行。CSS 渲染引擎必须将文本拆分为多个行框，每个文本行一个。

vertical-align 属性调整内联元素相对于同一行框中其他项目的对齐方式。下一个示例说明了如何使用它来创建上标和下标。

CSS 规则

p {
  font-size:150% /* Enlarge the example so it is easier to see. */
}

span {
  font-size:60% /* Superscripts and subscripts are usualy shrunk by about 60%. */
}

.super {
  vertical-align:super
}

.sub {
  vertical-align:sub
}

示例 HTML

    <p>Text <span>shrunk</span>.</p>
    <p>Text <span class="super">superscript</span>.</p>
    <p>Text <span class="sub">subscript</span>.</p>

示例呈现

Text shrunk.

Text superscript.

Text subscript.

vertical-align 的完整值集为

• baseline
• superscript
• subscript
• middle
• text-top
• text-bottom
• top
• bottom

CSS2.1

CSS2.1 还允许 vertical-align 的值为长度或百分比。

white-space

W3C 规范 CSS1 CSS2.1

white-space 属性控制空白字符（普通空格、制表符、换页符和换行符，但不包括不间断空格或其他特殊空格）的处理方式。在没有 CSS 的情况下，HTML 和 XML 文档的渲染方式是将空白字符序列替换为单个空白字符。文本块进行断字，以使文本适合于包含块的宽度。例如，以下示例 HTML 中的两个段落将以相同的方式渲染。

    <p>A run of whitespace is normally replaced by a single whitespace character,
       e.g. a run of tabs might be replaced by a one normal space.
    </p>
    <p>A   run   
of whitespace is normally replaced by a single whitespace character,
       e.g. a run of tabs might 
be 
replaced 
by a one normal space.
    </p>

示例呈现

空白字符序列通常被替换为单个空白字符，例如，制表符序列可能会被替换为一个普通空格。

white-space 属性有五个值。normal 值指定文本应按 HTML 或 XML 文档的通常方式处理。下表显示了其他值与正常渲染的比较方式。

值	替换空白字符序列	换行以适应容器	在源代码中的换行符处开始新行
normal	替换	换行	否
pre	保留	溢出	是
nowrap	替换	溢出	否
pre-wrap CSS2.1	保留	换行	是
pre-line CSS2.1	替换	换行	是

CSS2.1 中添加的两个值，pre-wrap 和 pre-line，目前还没有得到广泛的支持。

适用于 Windows 的 Internet Explorer 5.0 和 5.5 版本不支持 pre。IE/win v6.0 仅在 标准模式 下支持 pre。

HTML pre 元素的行为就像应用了以下 CSS 规则一样。

pre {
  white-space:pre;
  font-family:monospace
}

以下示例比较了 normal 和 nowrap。

CSS 规则

p {
  width:15em; /* Make the paragraph narrower so wrapping is more obvious. */
  border:1px solid black; /* Highlight the boundary of the paragraph so overflow is more obvious. */
  background:#cfc
}

#para1 {
  white-space:normal
}

#para2 {
  white-space:nowrap
}

示例 HTML

    <p id="para1">This first sentence.
      The second sentence.
      The third sentence.
    </p>
    <p id="para2">This first sentence.
      The second sentence.
      The third sentence.
    </p>

This first sentence. The second sentence. The third sentence.

This first sentence. The second sentence. The third sentence.

text-shadow

文本阴影是 CSS3 中的新效果。它的参数与 box-shadow 相同，并支持多个阴影。

• text-shadow: x-offset y-offset blur/diffusion color [, repeat for multiple];

p {
   text-shadow: 4px 4px 4px black;
   font-size: x-large;
}

Text with Shadow! Bold! Italic! Underline! Strike!

p {
   text-shadow: 2px 2px 1px black;
   font-size: x-large;
}

Text with Sharp Shadow! Bold! Italic! Underline! Strike!

现在让我们尝试多个阴影，请注意，您必须继续移动阴影以防止它们全部绘制在同一位置（除非这就是您想要的 ;) )

p {
   text-shadow: 2px 2px 2px red, 4px 4px 2px blue, 6px 6px 2px green;
   font-size: x-large;
}

Text with Many Shadows! Bold! Italic! Underline! Strike!

anaglyphs

您可以使用 text-shadow 生成三维（立体）红-青色 立体图像文本。

.anaglyph1 { color: rgba(0,0,0,0); text-shadow: -1px 0px 0px red, 1px 0px 0px aqua; }
.anaglyph2 { color: rgba(0,0,0,0); text-shadow: -2px 0px 0px red, 2px 0px 0px aqua; }
.anaglyph3 { color: rgba(0,0,0,0); text-shadow: -3px 0px 0px red, 3px 0px 0px aqua; }

"color: rgba(0,0,0,0)" 使未阴影的文本透明，以便只有红色 (red) 和青色 (aqua) 阴影可见。请注意，青色阴影在 CSS 中被称为“aqua”。左右偏移的像素数是三维深度的量，或者文本看起来浮动在屏幕上多远。您只需要少量的像素。还要知道，使用红-青色立体图像文本，您将无法为超链接或背景色使用 red 或 aqua。

This text has two pixels of red-cyan separation.

This text has four pixels of red-cyan separation.

This text has six pixels of red-cyan separation.

您需要戴上红-青色 3D 眼镜才能看到 3D 文本。由于大多数网站访问者不会戴着 3D 眼镜，请确保非立体图像版本的文本可访问。

网络字体

网页字体是 CSS2 的一项功能，允许设置规则以在网页中嵌入字体，使设计人员不再需要依赖大多数操作系统自带的字体子集。此功能支持的字体格式包括 TrueType (.ttf) 和 OpenType (.otf)。目前，只有 WebKit 浏览器 (Safari、Shiira、Chrome 等) 支持网页字体。Internet Explorer 只支持 嵌入式 OpenType (.eot) 格式的网页字体，其他浏览器都没有使用这种格式。

CSS 示例

@font-face {
   font-family: WikiFont;
   src: url('wikifont.otf');
}

@font-face {
   font-family: WikiFont;
   font-weight: bold;
   src: url('wikifont-bold.otf');
}

@font-face {
   font-family: WikiFont;
   font-style: italic;
   src: url('wikifont-italic.otf');
}

现在，要使用该字体，我们只需照常操作即可

h1, h2, h3, h4, h5, h6 {
   font-family: WikiFont;
}

然后，支持该功能的浏览器中，该文档中的所有标题将显示为我们的示例“WikiFont”。