CSS包含一组CSS属性，这些属性专门针对HTML的文本元素。在本文中，我将解释这些CSS属性是如何工作的。

字体系列

" font-family" CSS属性用于指定包含文本的HTML元素使用的字体系列。这是一个例子：

p {
    font-family: Arial;
}

这个CSS规则将所有p元素的font-family属性设置为Arial。这意味着，显示在p元素内的文本是使用Arial字体呈现的。

font-familyCSS属性可以采用多个值：

p {
    font-family: Arial, Helvetica;
}

如果浏览器不知道第一个字体系列" Arial"，则浏览器将查看列表中的下一个字体系列，即" Helvetica"，以查看浏览器是否支持该字体系列。我们可以根据需要在列表中使用尽可能多的字体系列，并用逗号分隔。

衬线，无衬线字体和等宽字体

字体可以分为三大类：

• 衬线字体
• Sans-Serif字体
• 等宽字体

衬线字体是字形(字符)带有"脚"的所有字体。例如，Times New Roman是一种衬线字体。在书中打印时，衬线字体通常用于普通文本。以下部分以Serif字体呈现：

这段文字是衬线

Sans-Serif字体是字形没有脚的所有字体。例如，Arial是Sans-Serif字体。 Sans-serif字体通常用于标题，而在屏幕上呈现时则用作普通文本。以下部分以Sans-Serif字体呈现：

这段文字是Sans-Serif

如果我们在这两本书的开头都看过" T"，我们会清楚地看到"脚"和没有脚。

等宽字体是每个字形(字符/字母)都相等的字体。因此，i或者l在水平方向上占据与m相同的空间。等宽字体通常用于代码。以下部分以等宽字体显示：

这是等宽的文字

我们可以将值" Serif"，" Sans-Serif"和" Monospace"用作" font-family" CSS属性的值。然后，浏览器将选择匹配的字体，例如" Times"(Serif)，" Arial"，" Helvetica"(Sans-Serif)或者" Courier"(Monospace)作为字体系列。这里有些例子：

p {
    font-family: Arial, Sans-Serif;
}

div {
    font-family: Times, Serif;
}

code {
    font-family: Courier, Monospace;
}

这些CSS规则中的每一个都为font-family CSS属性指定了两个值。第一个值是字体名称，第二个值是字体类别。如果第一个字体是，浏览器将选择与字体类别匹配的字体，即Serif，Sans-Serif或者Monospace字体。

字体系列值

这是font-familyCSS属性的常用值列表。这些不是唯一可能的字体，但是如上所述，它们是非常常用的字体。

字体大小

font-sizeCSS属性设置渲染文本的大小。这是一个例子：

p {
    font-size: 20px;
}

这个示例CSS规则将font-size设置为20像素。我们可以以任何标准CSS单位指定字体大小。撰写本文时，浏览器中的标准字体大小为16像素，这意味着如果未指定字体大小，则浏览器将使用16像素的字体大小。

字体大小的另一个有用单位是em。 " em"单位是相对单位。 1个" em"等于标准字体大小，在编写时为16像素。然后，我们可以将字体大小指定为" 0.8em"，" 1.2em"，" 2em"或者其他分数。如果要在各种不同屏幕尺寸上合理地显示网站，使用em单元可能是一个好主意。在这种情况下，浏览器可以选择标准字体大小，而我们只需指定网站的字体大小(相对于给定设备的标准字体大小)即可。这是一个例子：

h2 {
    font-size : 1.4em;
}
p {
    font-size : 1em;
}

本示例将h2 HTML元素字体大小设置为1.4em，这是标准字体大小的1.4倍。该示例还将" p"元素的字体大小设置为" 1em"，这是给定设备上给定浏览器的标准字体大小。

颜色

color CSS属性设置HTML元素内呈现的文本的颜色。这是一个"颜色"示例：

p {
    color : #333333;
}

CSS规则示例将所有p元素内部呈现的文本的颜色设置为深灰色。以下是一些实时示例：

灰色，红色，绿色，蓝色。

在我有关CSS颜色的文字中，更详细地介绍了CSS中的颜色。

字体样式

字体样式CSS属性可以将字体样式设置为以下四个值之一：

• normal
• italic
• oblique
• inherit

这是三个示例：

p {
    font-style: normal;
}
p#emphasized {
    font-style: italic;
}
p#ob {
    font-style: oblique;
}

这三个CSS规则中的第一个将所有p元素的font-style设置为normal。第二条CSS规则将id为"强调"的p元素的font-style设置为italic。第三个CSS规则将id为ob的p元素的font-style设置为oblique。

这是三个实时示例，显示了三种不同的字体样式：

这是具有正常字体样式的文本，但带有斜体部分和斜体部分。

仅当字体包含斜体和斜体时，" italic"和" oblique"样式才不同。如果不是这样，浏览器会根据常规字体制作一个版本，在这种情况下，这两种样式可能看起来非常相似。

最后一个" font-style"值" inherit"仅表示HTML元素从其父HTML元素继承其" font-style"属性。

字体粗细

" font-weight" CSS属性设置HTML元素内呈现的文本的粗细。 font-weightCSS属性可以采用以下值：

大多数情况下，仅使用" bold"值。正常值是默认值，因此如果未为font-weight指定值，则使用该值。

这是一个" font-weight：bold"示例：

span#fat {
    font-weight: bold;
}

此CSS规则将id为" fat"的" span"元素的" font-weight" CSS属性设置为" bold"。这是浏览器中粗体字的外观：

这段文字有一个粗体部分。

文字转换

" text-transform" CSS属性可用于将HTML元素内呈现的所有文本转换为小写，大写，或者仅将每个单词的首字母转换为大写。 " text-transform" CSS属性的三个有效值是：

• lowercase
• uppercase
• capitalize

以下是三个示例，它们显示了所使用的每个值：

span#lc {
    text-transform: lowercase;
}
span#uc {
    text-transform: uppercase;
}
span#cap {
    text-transform: capitalize;
}

这三个CSS规则可转换三个span元素的文本。第一个CSS规则在呈现时将所有字符转换为小写。第二条CSS规则将所有字符转换为大写的wen渲染。第三个CSS规则将所有单词转换为以大写字母开头。这是在浏览器中呈现时这些span元素的外观：

混合大小写句子，混合大小写句子，混合大小写句子，

所有span元素都包含相同的文本，但是请注意它们的呈现方式不同(每行包含一个span元素)。

字体变体

font-variantCSS属性采用以下两个值之一：

• normal
• small-caps

small-caps值使所有小写字符呈现为较小的大写字母。这是一个CSSfont-variant的例子：

p#special {
    font-variant: small-caps;
}

这个CSS规则将id为special的p元素的font-variant CSS属性设置为small-caps。这是在small-caps中呈现的文本的外观：

此文本以小写字母呈现。请注意，即使大小写不同，字母也看起来相似(大小除外)。

文字装饰

text-decorationCSS属性可用于下划线，上划线或者删除线文本。 text-decorationCSS属性可以采用以下值之一：

• none
• underline
• overline
• line-through
• blink

这是五个示例，显示了如何使用这些值：

span#none {
    text-decoration: none;
}
span#under {
    text-decoration: underline;
}
span#over {
    text-decoration: overline;
}
span#through {
    text-decoration: overline;
}
span#blnk {
    text-decoration: blink;
}

这是文本的五个部分，显示了上述text-decoration设置的效果：

没有装饰。在此文本下划线。将此文本加上划线。在此文本中一行。闪烁此文本。

注意：并非所有浏览器都支持blink。即使他们这样做了，我们也应该小心，不要让太多的东西闪烁并在网站上移动。它很容易使人分心和烦恼。

字母间距

letter-spacingCSS属性用于在呈现文本时增加或者减少字母之间的间距。与正常字母间距相比，正值将使字母间距增加一定数量。负值将使字母间距与正常字母间距相比减少一定量。这是两个示例：

span#more {
    letter-spacing : 2px;
}
span#less {
    letter-spacing : -2px;
}

这是三个句子，向我们显示正常文本，正值和负值之间的区别：

普通空间更多空间更少空间

行高

" line-height" CSS属性可设置文本线的渲染高度。这是一个例子：

p {
    line-height: 2.0em;
}

本示例将行高设置为2.0em，这是标准字体大小(1.0em)的2倍。

这是一段以2.0em作为行高的文本段落的外观：

本段具有较大的行高。本段具有较大的行高。本段具有较大的行高。本段具有较大的行高。本段具有较大的行高。本段具有较大的行高。本段具有较大的行高。

请记住，" line-height"是继承的，因此，如果在已经继承了" line-height"的HTML元素中指定" line-height"，则在" line-height"中使用百分比可能会乘以继承百分比。

文字对齐

" text-align" CSS属性可以将HTML元素内的文本向左，向右或者居中对齐。 text-alignCSS属性可以采用以下值：

• left
• right
• center
• justify

值" left"将使文本左对齐。值right将使文本右对齐。值center将使文本在HTML元素内居中。值'justify'会尝试使文本的左右两侧均匀，因此文本显示为文本的直角矩形。

这是一个" text-align"示例：

p#alignleft {
    text-align: left;
}
p#alignright {
    text-align: right;
}
p#aligncenter {
    text-align: center;
}

以下是一些示例段落，显示了使用三种" text-align"设置的文本外观：

此文本保持左对齐。此文本保持左对齐。此文本保持左对齐。该文本保持左对齐。该文本保持左对齐。此文本保持左对齐。此文本保持左对齐。该文本保持左对齐。

此文本右对齐。此文本右对齐。此文本右对齐。此文本右对齐。此文本右对齐。此文本右对齐。此文本右对齐。此文本右对齐。

此文本居中对齐。此文本居中对齐。此文本居中对齐。此文本居中对齐。此文本居中对齐。此文本居中对齐。此文本居中对齐。此文本居中对齐。

该文本是对齐的。该文本是对齐的。此文本是对齐的。此文本是对齐的。此文本是对齐的。此文本是对齐的。此文本是对齐的。此文本是对齐的。该文本是对齐的。此文本是对齐的。该文本是对齐的。此文本是对齐的。

文字缩进

CSS text属性可以用于缩进段落的第一行，就像许多印刷书籍中的段落一样。 text-indentCSS属性可以使用数字作为值。例如32px或者2em。我们也可以使用％值，在这种情况下，％被解释为段落宽度的百分比。

这是一个text-indent的例子：

p#indent {
    text-indent: 2em;
}

此CSS规则将" text-indent" CSS属性设置为" 2em"，这意味着所选段落的第一行文本将缩进与2em相同的空格，是标准字体大小的2倍。这是一个实时示例，该示例显示了第一行缩进的段落：

此paraparaph的第一行缩进了。此paraparaph的第一行缩进了。此paraparaph的第一行缩进了。此paraparaph的第一行缩进了。

我们也可以为text-indent属性使用负值。如果这样做，第一行将移至该段落的左侧("拉出")。这是一个例子：

该副词的第一行带有-2em缩进。该副词的第一行带有-2em缩进。该副词的第一行带有-2em缩进。该副词的第一行带有-2em缩进。

文字阴影

text-shadowCSS属性使我们可以向文本添加阴影。 " text-shadow"属性具有四个参数：阴影相对于文本的x和y位移，模糊半径(指示阴影要清晰或者柔和)以及文本阴影颜色。这是一个例子：

p.withShadow {
    text-shadow : 5px 10px 0px #999999;
}

这个例子在所有CSS类withShadow的p元素上设置了一个文本阴影。阴影位于文本右边5个像素，下面10个像素。模糊半径为0像素，这意味着阴影尽可能清晰。阴影颜色是## 999999，它是灰色。这是应用于文本时该文本阴影的外观：

此文本具有文本阴影。

这是带有5个模糊半径的阴影的相同文本的外观：

此文本具有文本阴影。

多个文字阴影

我们可以有多个文本阴影。只需用逗号分隔参数集。这是一个例子：

p.withShadows {
    text-shadow : 5px 10px 2px #ff0000, -3px 6px 5px #0000ff;
}

本示例在不同位置定义了两个文本阴影，即模糊半径和颜色。这使得文本上看起来好像有两个不同的光源。这是应用了这些文本阴影的文本的外观：

这段文字有两个阴影。

逼真的阴影

为了使文本阴影看起来逼真，请记住以下几个阴影特征：

• 靠近文本的阴影通常不像远离文本的阴影那样模糊。远离文本的阴影通常表示也远离文本的光源。
• 靠近文本的阴影通常表示下面的表面很近(或者光线很近，或者两者都很近)。封闭的阴影通常比远处的阴影更暗，因为在形状和下面的表面之间可以入射的光更少。

因此，使较近的阴影较不模糊且较暗，而使较远的阴影较不模糊且较亮。