CSS 文本属性

2025年3月17日 | 阅读13分钟

总的来说，文本是一种由人类容易阅读和理解的字符或单词集合组成的交流媒介。它用于通过计算机、智能手机等数字设备向他人传达信息。

在网页设计中，CSS 属性可用于装饰文本。网页设计师使用这些属性将纯文本转化为外观精美且引人入胜的文本。

CSS 中有各种文本属性，可用于增强网页文本的外观。在本文中，我们将了解用于使网页看起来吸引人并吸引用户注意力的各种文本属性。

CSS 文本属性

CSS 文本属性如下：

1. 文本颜色

此属性用于为 HTML 元素的文本设置颜色。

语法

文本颜色属性可以接受多种颜色格式来定义文本的颜色。颜色格式为：

1. 关键字：这是 CSS 中颜色的名称，例如 pink、coral 等。

语法

2. RGB：它是红、绿、蓝的缩写，它们是光源。红、绿、蓝是介于 0 到 255 之间的整数。

语法

3. RGBA：它是红、绿、蓝和 alpha 的缩写。

语法

4. HSL：它是色相、饱和度和亮度的缩写。

语法

5. HSLA：它是色相、饱和度、亮度与 alpha 的缩写。

语法

6. HEX：它用于使用十六进制值定义颜色。

语法

演示使用所有颜色格式的 CSS 颜色的示例

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS Color</title>
    <style>
        .keyword {
            color: violet;
        }
        .rgb {
            color: rgb(0, 0, 255);
        }
        .rgba {
            color: rgba(100, 250, 0, 0.5);
        }
        .hsl {
            color: hsl(0, 60%, 50%);
        }
        .hsla {
            color: hsla(45, 50%, 75%, 0.5);
        }
        .hex {
            color: #FFA500;
        }
    </style>
</head>
<body>
    <h1>Example of CSS Color Property</h1>
    <p class="keyword">The text in this paragraph is colored using the color keyword.</p>
    <p class="rgb">The text in this paragraph is colored using the RGB value.</p>
    <p class="rgba">The text in this paragraph is colored using the RGBA value.</p>
    <p class="hsl">The text in this paragraph is colored using the HSL value.</p>
    <p class="hsla">The text in this paragraph is colored using the HSLA value.</p>
    <p class="hex">The text in this paragraph is colored using the hexadecimal value.</p>
</body>
</html>

输出

如您在下面的输出中所见，文本颜色已使用 CSS 颜色属性应用于 HTML 元素。

2. 文本背景颜色

此属性用于为 HTML 元素的文本背景设置颜色。

语法

演示使用所有颜色格式的 CSS 背景颜色属性的示例

<!DOCTYPE html>
<html>
<head>
    <title>CSS Background Color</title>
    <style>
        .keyword {
            background-color: orange;
        }
        .rgb {
            background-color: rgb(215, 231, 31);
        }
        .rgba {
            background-color: rgba(220, 182, 215, 0.5);
        }
        .hsl {
            background-color: hsl(0, 60%, 50%);
        }
        .hsla {
            background-color: hsla(202, 68%, 72%, 0.5);
        }
        .hex {
            background-color: #49d939;
        }
    </style>
</head>
<body>
    <h1>Example of CSS Background-Color Property</h1>
    <p class="keyword">The background color of this text in the paragraph is given using the keyword.</p>
    <p class="rgb">The background color of this text in the paragraph is given using the RGB value.</p>
    <p class="rgba">The background color of this text in the paragraph is given using the RGBA value.</p>
    <p class="hsl">The background color of this text in the paragraph is given using the HSL value.</p>
    <p class="hsla">The background color of this text in the paragraph is given using the HSLA value.</p>
    <p class="hex">The background color of this text in the paragraph is given using the hexadecimal value.</p>
</body>
</html>

输出

如您在下面的输出中所见，背景颜色已使用 CSS 背景颜色属性应用于 HTML 元素的文本。

3. 字体系列

此属性用于更改 HTML 元素内文本的字体。

语法

演示 CSS 字体系列属性的示例

<!DOCTYPE html>
<html>
<head>
    <title>CSS Font Family</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        h1 {
            font-family: 'Georgia', serif;
        }
        p {
            font-family: 'Helvetica', sans-serif;
            font-size: 16px;
            line-height: 1.6;
        }
        .monospace {
            font-family: 'Courier New', monospace;
        }
        .cursive {
            font-family: 'Brush Script MT', cursive;
        }
        .fantasy {
            font-family: 'Impact', fantasy;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Example of CSS Font-Family Property</h1>
        <p>This is a sample text using various font families for styling.</p>
        <p class="monospace">This text uses a "monospace" font family.</p>
        <p class="cursive">This text uses a "cursive" font family.</p>
        <p class="fantasy">This text uses a "fantasy" font family.</p>
    </div>
</body>
</html>

输出

如您在下面所见，文本的字体系列已使用 CSS 字体系列属性应用。

4. 字体大小

此属性用于定义 HTML 元素文本的大小。

语法

font-size: length| xx-small| x-small| small| xx-large| x-large| large| larger| medium| smaller| initial| inherit;

演示 CSS 字体大小属性的示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Font Size</title>
    <style>
        .large-font {
            font-size: large;
        }
        .small-font {
            font-size: small;
        }
        .font1 {
            font-size: 20px;
        }
        .font2 {
            font-size: 50px;
        }
    </style>
</head>
<body>
    <div>
    <h1>Example of CSS Font-Size Property</h1>
    <p class="large-font">The size of this text is large.</p>
    <p class="small-font">The size of this text is small.</p>
    <p class="font1">The size of this text is 20px.</p>
    <p class="font2">The size of this text is 50px.</p>
    </div>
</body>
</html>

输出

如您在下面所见，文本的大小已使用 CSS 字体大小属性更改。

5. 字体样式

此属性用于定义 HTML 元素文本的样式，例如斜体等。

语法

演示 CSS 字体样式属性的示例

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS Font Style</title>
    <style>
        .italic-style {
            font-style: italic;
        }
        .normal-style {
            font-style: normal;
        }
        .oblique-style {
            font-style: oblique;
        }
    </style>
</head>
<body>
    <h1>Example of CSS Font-Style Property</h1> 
    <p class="italic-style">The style of this text is italic.</p>
    <p class="normal-style">The style of this text is normal.</p>
    <p class="oblique-style">The style of this text is oblique.</p>
</body>
</html>

输出

如您在下面的输出中所见，文本的样式已使用 CSS 字体样式属性更改。

6. 字体粗细

此属性用于定义 HTML 元素文本的粗细，例如粗体、细体、特粗体、特细体等。

语法

font-weight: normal| 100 (thin)| 200 (extra light)| 300 (light)| 400 (normal)| 500 (medium)| 600 (semi bold)| 700 (bold)| 800 (extra bold)| 900 (black)| initial| inherit;

演示 CSS 字体粗细属性的示例

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS Font Weight</title>
    <style>
        .thin-weight {
            font-weight: 100;
        }
        .light-weight {
            font-weight: light;
        }
        .bold-weight {
            font-weight: bold;
        }
        .extra-bold-weight {
            font-weight: 800;
        }
    </style>
</head>
<body>
    <h1>Example of CSS Font-Weight Property</h1>
    <p class="thin-weight">The weight of this text is 100 (thin).</p>
    <p class="light-weight">The weight of this text is light.</p>
    <p class="bold-weight">The weight of this text is bold.</p>
    <p class="extra-bold-weight">The weight of this text is 800 (extra-bold).</p>
</body>
</html>

输出

如您在下面的输出中所见，HTML 元素的文本粗细已使用 CSS 字体粗细属性应用。

7. 字体变体

此属性用于定义 HTML 元素文本字符的外观。

语法

演示 CSS 字体变体属性的示例

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS Font Variant</title>
    <style>
        .normal-variant {
            font-variant: normal;
        }
        .small-caps-variant {
            font-variant:small-caps;
        }
    </style>
</head>
<body>
    <h1>Example of CSS Font-Variant Property</h1>
    <p class="normal-variant">The variant of this text is normal.</p>
    <p class="small-caps-variant">The variant of this text is small-caps.</p>
</body>
</html>

输出

如您在下面的输出中所见，HTML 元素文本的变体已使用 CSS 字体变体属性更改。

8. 文本装饰

此属性用于装饰 HTML 元素的文本。它是 text-decoration-line、text-decoration-style 和 text-decoration-color 的简写属性。

语法

text-decoration: text-decoration-line text-decoration-style text-decoration-color;

演示文本装饰属性的示例

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS Text Decoration</title>
    <style>
        .underline {
            text-decoration: underline;
        }
        .line-through {
            text-decoration: line-through;
        }
        .dotted-double-line {
            text-decoration: underline double;
        }
        .dashed-red-overline {
            text-decoration: overline dashed red;
        }
    </style>
</head>
<body>
    <h1>Example of CSS Text-Decoration Property</h1>
    <p class="underline">The text of this paragraph is underlined.</p>
    <p class="line-through">The text of this paragraph has a line-through.</p>
    <p class="dotted-double-line">The text of this paragraph has a dotted double line.</p>
    <p class="dashed-red-overline">The text of this paragraph has a red dashed overline.</p>
</body>
</html>

输出

如您在下面的输出中所见，HTML 元素的文本已使用 CSS 文本装饰属性进行装饰。

9. 文本阴影

此属性用于为 HTML 元素的文本添加阴影。

语法

演示文本阴影属性的示例

<!DOCTYPE html>
<html lang="en">
<head>	
    <title>CSS Text Shadow</title>
    <style>
        .shadow1 {
            font-size: 25px;
            text-shadow: 2px 2px 3px red;
        }
        .shadow2 {
            font-size: 25px;
            text-shadow: 4px 4px 2px purple;
        }
    </style>
</head>
<body>
    <h1>Example of CSS Text-Shadow Property</h1>
    <p class="shadow1">The text of this paragraph shows a red shadow.</p>
    <p class="shadow2">The text of this paragraph shows a purple shadow.</p>
</body>
</html>

输出

如您在下面的输出中所见，阴影已使用 CSS 文本阴影属性应用于 HTML 元素的文本。

10. 文本对齐

此属性用于将 HTML 元素的文本对齐到右侧、左侧、中心和两端对齐。

语法

演示 CSS 文本对齐属性的示例

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS Text Align</title>
    <style>
        .left {
            text-align: left;
        }
        .right {
            text-align: right;
        }
        .center {
            text-align: center;
        }
        .justify {
            text-align: justify;
        }
    </style>
</head>
<body>
    <h1>Example of CSS Text-Align Property</h1>
    <p class="left">The text of this paragraph is aligned to the left.</p>
    <p class="right">The text of this paragraph is aligned to the right.</p>
    <p class="center">The text of this paragraph is aligned to the center.</p>
    <p class="justify">The text of this paragraph is aligned to the justified.</p>
</body>
</html>

输出

如您在下面的输出中所见，HTML 元素的文本已使用 CSS 文本对齐属性进行对齐。

11. 字母间距

此属性用于在 HTML 元素文本的字母之间提供间距。

语法

演示 CSS 字母间距属性的示例

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS Letter Spacing</title>
    <style>
        .spacing1 {
            letter-spacing: 2px;
        }
        .spacing2 {
            letter-spacing: 6px;
        }
    </style>
</head>
<body>
    <h1>Example of CSS Letter-Spacing Property</h1>   
    <p class="spacing1">The text in this paragraph has 2px of space between letters.</p>
    <p class="spacing2">The text in this paragraph has 6px of space between letters.</p>
</body>
</html>

输出

如您在下面的输出中所见，HTML 元素文本中的字母已使用 CSS 字母间距属性进行间距设置。

12. 单词间距

此属性用于在 HTML 元素文本的单词之间提供间距。

语法

演示 CSS 单词间距属性的示例

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS Word Spacing</title>
    <style>
        .spacing1 {
            word-spacing: 4px;
        }
        .spacing2 {
            word-spacing: 10px;
        }
    </style>
</head>
<body>
    <h1>Example of CSS Word-Spacing Property</h1>   
    <p class="spacing1">The text in this paragraph has 4px of space between words.</p>
    <p class="spacing2">The text in this paragraph has 10px of space between words.</p>
</body>
</html>

输出

如您在下面的输出中所见，HTML 元素文本中的单词已使用 CSS 单词间距属性进行间距设置。

13. 行高

此属性用于在 HTML 元素的文本行之间提供间距。

语法

演示 CSS 行高属性的示例

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS Line Height</title>
    <style>
        .height1 {
            line-height: 15px;
        }
        .height2 {
            line-height: 20px;
        }
    </style>
</head>
<body>
    <h1>Example of CSS Line-Height Property</h1>   
    <p class="height1">
        This text is the line 1 of the paragraph 1. <br>
        This text is the line 2 of the paragraph 1.
    </p>
    <p class="height2">
        This text is the line 1 of the paragraph 2. <br>
        This text is the line 2 of the paragraph 2.
</body>
</html>

输出

如您在下面的输出中所见，HTML 元素文本行之间的行高已使用 CSS 行高属性应用。

14. 文本转换

此属性用于定义 HTML 元素中文本的资本化。

语法

演示 CSS 文本转换属性的示例

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS Text Transform</title>
    <style>
        .uppercase {
            text-transform: uppercase;
        }
        .lowercase {
            text-transform: lowercase;
        }
        .capitalize {
            text-transform: capitalize;
        }
    </style>
</head>
<body>
    <h1>Example of CSS Text-Transform Property</h1>
    <p class="uppercase">The text of this paragraph is in uppercase.</p>
    <p class="lowercase">The text of this paragraph is in lowercase.</p>
    <p class="capitalize">The first letter of each word in the text of this paragraph is capitalized.</p>
</body>
</html>

输出

如您在下面的输出中所见，HTML 元素的文本已使用 CSS 文本转换属性进行转换。

15. 文本缩进

此属性用于指定 HTML 元素中文本块第一行的缩进。

语法

演示 CSS 文本缩进属性的示例

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS Text Indent</title>
    <style>
        .para1 {
            text-indent: 40px;
        }
        .para2 {
            text-indent: 50%;
        }
        .para3 {
            text-indent: -2em;
        }
        .para4 {
            text-indent: 4em;
        }
    </style>
</head>
<body>
    <h1>Example of CSS Text-Indent Property</h1>
    <div>
        <p class="para1">The first line of this paragraph is intended by 40px.</p>
    </div>
    <div>
        <p class="para2">The first line of this paragraph is intended by 50%. </p>
    </div>
    <div>
        <p class="para3"> The first line of this paragraph is intended by -2em. </p>
        <p class="para4"> The first line of this paragraph is intended by 4em. </p>
    </div>
</body>
</html>

输出

如您在下面的输出中所见，HTML 元素文本的第一行已使用 CSS 文本缩进属性进行缩进。

16. 文本两端对齐

当 text-align 设置为 justify 时，此属性定义了对齐的类型。

语法

演示 CSS 文本两端对齐属性的示例

<!DOCTYPE html>
<html lang="en">
<head>
    <title> CSS Text Justify</title>
    <style>
        p {
            width: 100px;
            border: 2px solid #e27272;
            padding: 12px;  
        }
        .none {
            text-align: justify;
            text-justify: none;
        }
        .inter-word  {
            text-align: justify;
            text-justify: inter-word;
        }
        .inter-character  {
            text-align: justify;
            text-justify: inter-character;
        }
    </style>
</head>
<body>
    <h1>Example of CSS Text-Justify Property</h1>
    <div>
        <p class="none">The text of this paragraph is none justified.</p>
    </div>
   <div>
    <p class="inter-word">The text of this paragraph is inter-word justified.</p>
</div>
<div>
    <p class="inter-character">The text of this paragraph is inter-character justified.</p>
</div>
</body>
</html>

输出

如您在下面的输出中所见，对齐的类型已使用 CSS 文本两端对齐属性应用于文本。

17. 文本强调

此属性用于通过在 HTML 元素的文本上创建独特的标记来强调它。

语法

text-emphasis: dot| sesame| double-circle| open| circle| triangle| filled| none;

或

text-emphasis: "any_character"; /* Use this syntax when you want to create a mark of the character of your choice to emphasize the text. */

或

text-emphasis: emphasis_name color_name; /* Use this syntax to create a colored mark on text to emphasize it. */

演示 CSS 文本强调属性的示例

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS Text Emphasis</title>
    <style>
        .dot  {
            text-emphasis: dot;
        }
        .circle  {
            text-emphasis: circle red;
        }
        .double-circle  {
            text-emphasis: double-circle;
        }
        .triangle  {
            text-emphasis: triangle pink;
        }
        .character  {
            text-emphasis: "z";
        }     
    </style>
</head>
<body>
    <h1>Example of CSS Text-Emphasis Property</h1>
   <div>
    <p class="dot">The text of this paragraph is emphasized using dots.</p>
</div>
<div>
    <p class="circle">The text of this paragraph is emphasized using colored circles.</p>
</div>
<div>
    <p class="double-circle">The text of this paragraph is emphasized using double-circle.</p>
</div>
<div>
    <p class="triangle">The text of this paragraph is emphasized using colored triangles.</p>
</div>
<div>
    <p class="character">The text of this paragraph is emphasized using the character "z".</p>
</div>
</body>
</html>

输出

如您在下面的输出中所见，HTML 元素的文本已使用 CSS 文本强调属性进行强调。

18. 空白处理

此属性用于处理文本中的空白符，例如制表符、空格、换行符等。

语法

演示 CSS 空白处理属性的示例

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS White Space</title>
    <style>
    p {
        width: 350px;
        height: 60px;
        white-space: pre;
        background-color: rgb(243, 245, 133);
    }
        .white-space-normal  {
            white-space: normal;
        }
        .white-space-no-wrap  {
            white-space: nowrap;
        }
        .white-space-pre  {
            white-space: pre;
        }
    </style>
</head>
<body>
    <h1>Example of CSS White-Space Property</h1>
   <div>
    <p class="white-space-normal">
    The text in this paragraph is set to "normal" white space.
    The text in this paragraph is set to "normal" white space.</p>
</div>
<div>
    <p class="white-space-no-wrap">
    The text in this paragraph is set to "nowrap" white space.
    The text in this paragraph is set to "nowrap" white space.</p>
</div>
<div>
    <p class="white-space-pre">
    The text in this paragraph is set to "pre" white space.
    The text in this paragraph is set to "pre" white space.</p>
</div>
</body>
</html>

输出

如您在下面的输出中所见，HTML 元素文本的空白符已得到处理。

19. 文本溢出

此属性用于处理文本溢出元素内容区域时的显示。

使用 text-overflow 时，务必使用两个必需的属性：white-space: nowrap; 和 overflow: hidden;

语法

演示 CSS 文本溢出属性的示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Text Overflow</title>
    <style>
        p {
            white-space: nowrap;
            overflow: hidden;
            border: 2px solid purple;
            width: 100px;
        }
        .clip {
            text-overflow: clip;
        }
        .ellipsis {
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <h1>Example of CSS Text-Overflow Property</h1>
    <div>
        <p class="clip">
            The text of this paragraph is the clip.
        </p>
        <p class="ellipsis">
            The text of this paragraph is the ellipsis.
        </p>
    </div>
</body>
</html>

输出

如您在下面的输出中所见，文本溢出属性已应用于 HTML 元素的文本。

下一主题CSS EM

← 上一个下一个 →

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

CSS 文本属性

CSS 文本属性

1. 文本颜色

2. 文本背景颜色

语法

3. 字体系列

语法

4. 字体大小

语法

5. 字体样式

语法

6. 字体粗细

语法

7. 字体变体

语法

8. 文本装饰

语法

9. 文本阴影

语法

10. 文本对齐

语法

11. 字母间距

语法

12. 单词间距

语法

13. 行高

语法

14. 文本转换

15. 文本缩进

语法

16. 文本两端对齐

语法

17. 文本强调

语法

18. 空白处理

语法

19. 文本溢出

语法

相关帖子

CSS Position

CSS Outline

CSS Slider

CSS Element Selector

CSS Word Wrap

CSS 伪元素 before 和 after

CSS White Space

DropDown Menus in CSS

CSS text-orientation

CSS 备忘单

订阅 Tpoint Tech

联系信息

关注我们