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 相关的文本属性

以下是文本样式的 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 控制如何向用户显示隐藏的溢出内容。
打印页面
上一页
下一页
广告