CSS - 文本样式

CSS 文本样式涉及通过设置合适的颜色、对齐方式、字母间距和缩进等来修改文本内容的外观，使其更具视觉吸引力。本章演示如何使用 CSS 属性来设置网页中的文本样式。

如何在 CSS 中设置文本样式？

以下是 CSS 中设置文本样式的常用方法。

更改颜色：网页中文本的默认颜色为黑色。您可以根据网页主题使用 CSS 中的 color 属性更改此颜色。
设置对齐方式：您可以使用 css 中的 text-align 属性指定容器内文本的对齐方式（居中、左对齐、右对齐）。
文本修饰：CSS 中的 text-decoration 属性可用于向文本添加下划线、上划线或删除线等效果。
阴影效果：如果您想在网页文本周围创建阴影，可以使用 CSS 中的 text-shadow 属性。这可以为文本创建 3D 效果或细微的光晕。
更改字体样式：font-style 属性允许您将文本样式设置为普通、斜体或倾斜。

CSS 文本颜色属性

如上所述，color 属性用于设置文本的颜色。颜色可以使用颜色名称、十六进制值、rgb 值或 hsl 值指定。

示例

<!DOCTYPE html>
<html>

<body>
    <p style = "color: blueviolet;">
        Color Name: blueviolet;
    </p>

    <p style = "color:#ff00ff;">
        Hexadecimal value: #ff00ff;
    </p>

    <p style = "color: rgb(255,124,100);">
        RGB value: rgb(255, 124, 100);
    </p>
</body>

</html>

CSS 文本对齐属性

网页中的文本可以在容器内水平和垂直对齐。

text-align 属性指定容器中文本的水平对齐方式。（左对齐、右对齐、居中、两端对齐）
vertical-align 属性用于将文本垂直对齐到顶部、底部、基线、中间。

示例

<!DOCTYPE html>
<html>
<head>
    <style>
        th{
            vertical-align: bottom;
            border: 2px solid; 
            width: 200px; 
            height: 150px;
        }
    </style>
</head>
<body>
   <h2>Text Alignment</h2>
        <p style="text-align: left;">Text Left Alignment.</p>
        <p style="text-align: right;">Text Right Alignment.</p>
        <p style="text-align: center;">Text Center Alignment.</p>

        <table>
            <th>This is vertical alignment</th>
        </table>
</body>
</html>

CSS 文本方向属性

文本方向是指文档或元素中文本字符的方向。在 CSS 中，您可以使用 direction 属性设置文本方向。此属性接受两个值

ltr（从左到右）：默认值，用于从左到右书写的语言，例如英语。除非您要覆盖继承的从右到左方向，否则无需显式指定此值。
rtl（从右到左）：用于从右到左书写的语言，例如阿拉伯语或希伯来语。使用 rtl 时，文本默认情况下将右对齐。

此外，CSS 提供了一个简写属性 unicode-bidi 来控制双向算法，该算法指定当不同书写方向的字符出现在同一段落中时的显示方式。

示例

<!DOCTYPE html>
<html>

<body>
    <p style = "direction: rtl;">
        Right to Left
    </p>

    <p style = "direction: ltr;">
        Left to Right
    </p>
</body>

</html>

CSS 文本修饰属性

text-decoration 属性有助于向文本添加额外的修饰，例如添加线条（下划线、删除线、上划线）以及线条的颜色、样式和粗细。

它是 text-decoration-line、text-decoration-style、text-decoration-color 和 text-decoration-thickness 的简写属性。

text-decoration: [text-decoration-line] || [text-decoration-style] ||
                 [text-decoration-color] || [text-decoration-thickness];

示例

<!DOCTYPE html>
<html>

<body>
    <h2>Text Decoration</h2>
    <p style="text-decoration: overline solid red 5px;">
        Overline text decoration.
    </p>
    <p style="text-decoration: line-through solid green 1px;">
        Line-through text decoration.
    </p>
    <p style="text-decoration: underline dashed 2pt blue;">
        Underline text decoration.
    </p>
</body>

</html>

CSS 文本转换属性

text-transform 属性用于通过多种方式转换文本的外观来更改文本的外观。它可以用于将文本转换为大写、小写、将每个单词的首字母大写，甚至将所有字母大写。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        p{
            font-family: arial, sans-serif;
            font-size: 1em;
        }
    </style>
</head>

<body>
    <h2>Text Transform</h2>
    <p style="text-transform: capitalize;">
        capitalizes the first character of each word.
    </p>

    <p style="text-transform: uppercase;">
        Transforms all text to uppercase.
    </p>

    <p style="text-transform: lowercase;">
        Transforms all text to Lowercase.
    </p>
</body>

</html>

CSS 文本强调属性

CSS 的 text-emphasis 属性用于在文本块上应用强调标记。这些标记通常用于突出显示特定内容或指示某些语言的发音或重音。

它是 text-emphasis-style 和 text-emphasis-color 的简写。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        p{
            font-family: arial, sans-serif;
            font-size: 1em;
        }
    </style>
</head>

<body>
   <h2>Text Emphasis</h2>
        <p style="text-emphasis: dot;"> 
            The text is emphasized using dot.
        </p>

        <p style="text-emphasis: circle red;">
            The text is emphasized using red circle.
        </p>

        <p style="text-emphasis: triangle;"> 
            The text is emphasized using triangle.
        </p>
</body>

</html>

CSS 文本缩进属性

css 中的 text-indent 属性用于在页边距和文本第一行之间添加空格。适当的缩进可以增强页面上文本的可读性和清晰度。

您可以为此属性使用长度（像素、em 等）、百分比或 inherit 等关键字的值。

示例

<html>

<body>
    <h2>Text indentation</h2>
    <p style="text-indent: 2cm;">Text indentation: 2 cm.</p>
    <p style="text-indent: 2in;">Text indentation: 2 inches.</p>
    <p style="text-indent: 20%;">Text indentation: 20%.</p>
</body>

</html>

CSS 字母间距属性

letter-spacing 属性用于调整文本字母之间的间距。字母之间的间距可以增加或减少。

您可以为此属性使用长度（像素、em 等）、百分比或 inherit 等关键字的值。

示例

<!DOCTYPE html>
<html>

<body>
    <h2>Letter spacing</h2>
    <p style="letter-spacing: normal;">
        Letter spacing normal.
    </p>
    <p style="letter-spacing: 5px;">
        Letter spacing increased.
    </p>
    <p style="letter-spacing: -1px;">
        Letter spacing decreased.
    </p>
</body>

</html>

CSS 字间距属性

与字母间距类似，word-spacing 属性用于调整文本单词之间的间距。单词之间的间距可以增加或减少。

您可以为此属性使用长度（像素、em 等）、百分比或 inherit 等关键字的值。

示例

<!DOCTYPE html>
<html>

<body>
    <h2>Word spacing</h2>
    <p style="word-spacing: normal;">
        Word spacing normal.
    </p>
    <p style="word-spacing: 100px;">
        Word spacing increased.
    </p>
    <p style="word-spacing: -2px;">
        Word spacing decreased.
    </p>
</body>

</html>

CSS white-space 属性

white-space 属性控制如何处理元素内的空白。它允许您管理文本中空格、制表符和换行符的处理方式。

您可以为此属性使用 normal、nowrap、pre、pre-wrap 和 pre-line 等值。

示例

<!DOCTYPE html>
<html>
<head>
    <style>
        p{
            border: 2px solid;
            padding: 5px;
            width: 50%;
        }
    </style>
</head>

<body>
    <h2>White-space property</h2>
    <p style="white-space: normal;">
        This is a paragraph with the white-space property set 
        to normal. The text will wrap when necessary, and 
        extra    spaces and line breaks are    ignored.
    </p>

    <p style="white-space: nowrap;">
        This is a paragraph with the white-space property set
        to nowrap. The text will not wrap to the next line, even 
        if it overflows the container.
    </p>

    <p style="white-space: pre;">
        This is a paragraph with white-space property set to pre.
        The text will respect all   spaces and line breaks. Means,
        the   text will be displayed as it is in     HTML code.
    </p>

    <p style="white-space: pre-wrap;">
        This is a paragraph with the white-space property set to
        pre-wrap. The text will respect all spaces and line breaks,
        but will wrap when necessary.
    </p>

    <p style="white-space: pre-line;">
        This is a paragraph with the white-space property set 
        to pre-line. The text will collapse spaces and wrap when 
        necessary, but will respect line breaks.
    </p>
</body>

</html>

CSS line-break 属性

line-break 属性控制如何在文本中处理换行符。这对于处理日语、中文或韩语等语言中的换行符非常有用。

您可以为此属性使用 auto、loose、normal、strict 和 anywhere 等值。

示例

<!DOCTYPE html>
<html>
<head>
    <style>
        p{
            border: 2px solid;
            padding: 5px;
            width: 50%;
        }
    </style>
</head>

<body>
    <h2>Line-break property</h2>
    <p style="line-break: auto;">
        This paragraph uses the line-break property set to auto.
        Line breaking is determined based on the default rules.
    </p>

    <p style="line-break: loose;">
        This paragraph uses the line-break property set to loose.
        Line breaking is done more frequently, typically used in 
        CJK (Chinese, Japanese, Korean) text.
    </p>

    <p style="line-break: normal;">
        This paragraph uses the line-break property set to normal.
        Line breaking follows the standard rules for the language 
        being used.
    </p>

    <p style="line-break: strict;">
        This paragraph uses the line-break property set to strict.
        Line breaking is restricted, typically preventing breaks 
        between characters that are normally kept together.
    </p>
    <p style="line-break: anywhere;">
        This paragraph uses the line-break property set to anywhere.
        Line breaks can happen at any point, even if it means 
        breaking words in unconventional places.
    </p>
</body>

</html>

CSS word-break 属性

属性 **word-break** 控制文本中单词换行和自动换行的行为。它对于管理过长的单词如何在容器内显示非常有用。

您可以为此属性使用 `normal`、`break-all`、`keep-all` 和 `break-word` 等值。

示例

<!DOCTYPE html>
<html>

<body>
    <h2>Word-break property</h2>
    <p style="word-break: normal;">
        This paragraph uses the word-break property set to normal.
        Words will break only at normal word boundaries (such as 
        spaces or hyphens).
    </p>

    <p style="word-break: break-all;">
        This paragraph uses the word-break property set to break-all.
        Words will break at any character to prevent overflow, 
        even in the middle of a word.
    </p>

    <p style="word-break: keep-all;">
        This paragraph uses the word-break property set to keep-all.
        Words will only break at normal word boundaries, but CJK text 
        characters will not break unless necessary.
    </p>

    <p style="word-break: break-word;">
        This paragraph uses the word-break property set to break-word.
        Words will break at normal boundaries or wherever necessary 
        to prevent overflow.
    </p>
</body>

</html>

CSS text-shadow 属性

属性 **text-shadow** 用于向文本添加阴影效果。通过指定阴影的水平和垂直偏移量、模糊半径和颜色，您可以创建文本后面的阴影。

您可以通过逗号分隔每个阴影来应用多个阴影。阴影的顺序很重要，第一个阴影最靠近文本。

示例

<!DOCTYPE html>
<html>
<body>
    <h2>Text-shadow property</h2>
    <p style="text-shadow: 2px 2px 5px grey;">
        This text has a grey shadow with a blur radius of 5px.
    </p>

    <p style="text-shadow: -2px -2px 3px red;">
        This text has a red shadow with a blur radius of 3px 
        and offset to the top-left.
    </p>

    <p style="text-shadow: 3px 3px 0px blue, -3px -3px 0px yellow;">
        This text has two shadows: a blue shadow offset to the 
        bottom-right and a yellow shadow offset to the top-left.
    </p>
</body>

</html>

以下是文本样式的 CSS 属性列表：

属性	描述	示例
color	设置文本的颜色。	尝试一下
text-align	设置文本的对齐方式。	尝试一下
text-align-last	设置文本块最后一行文本的对齐方式。	尝试一下
vertical-align	设置文本的垂直对齐方式。	尝试一下
direction	设置文本的方向。	尝试一下
text-indent	设置文本第一行的缩进。	尝试一下
letter-spacing	指定单词字母之间的间距。	尝试一下
word-spacing	指定文本块中单词之间的间距。	尝试一下
white-space	控制元素中文本内的空白流。	尝试一下
text-decoration	设置文本装饰的简写属性。	尝试一下
text-transform	将文本转换为大写、小写或首字母大写。	尝试一下
text-emphasis	在文本中应用强调标记。	尝试一下
text-shadow	向文本添加阴影。	尝试一下
line-break	控制如何设置换行规则。	尝试一下
word-break	控制如何设置断字规则。	尝试一下
text-combine-upright	将多个排版字符单元组合到单个排版字符单元的空间中。	尝试一下
text-orientation	设置一行中文本字符的方向。	尝试一下
text-underline-offset	向文本添加特殊的视觉效果。	尝试一下
text-overflow	控制如何向用户显示隐藏的溢出内容。	尝试一下

打印页面

CSS - 文本样式

目录

如何在 CSS 中设置文本样式？

CSS 文本颜色属性

示例

CSS 文本对齐属性

示例

CSS 文本方向属性

示例

CSS 文本修饰属性

示例

CSS 文本转换属性

示例

CSS 文本强调属性

示例

CSS 文本缩进属性

示例

CSS 字母间距属性

示例

CSS 字间距属性

示例

CSS white-space 属性

示例

CSS line-break 属性

示例

CSS word-break 属性

示例

CSS text-shadow 属性

示例

CSS 相关的文本属性