Articles
CSS简介
与文本相关的CSS属性

与文本相关的CSS属性

本文解释了与文本相关的CSS属性。

您可以了解如何使用和编写text-align、text-decoration和text-transform属性。

YouTube Video

创建用于预览的 HTML

css-text.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>Text-Related CSS Properties</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-text.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>Text-Related CSS Properties</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Typography (Text-Related)</h2>
20        </header>
21        <article>
22            <h3>text-align</h3>
23            <section>
24                <header><h4>text-align: left</h4></header>
25                <section class="sample-view">
26                    <p class="text-align-left">This is left-aligned text.</p>
27                </section>
28                <header><h4>text-align: center</h4></header>
29                <section class="sample-view">
30                    <p class="text-align-center">This is center-aligned text.</p>
31                </section>
32                <header><h4>text-align: right</h4></header>
33                <section class="sample-view">
34                    <p class="text-align-right">This is right-aligned text.</p>
35                </section>
36                <header><h4>text-align: justify</h4></header>
37                <section class="sample-view">
38                    <p class="text-align-justify">This is justified text, meaning it will be spaced so that the left and right edges are aligned evenly.</p>
39                </section>
40            </section>
41        </article>
42        <article>
43            <h3>text-decoration</h3>
44            <section>
45                <header><h4>text-decoration: underline</h4></header>
46                <section class="sample-view">
47                    <p class="text-decoration-underline">This text has an underline.</p>
48                </section>
49                <header><h4>text-decoration: overline</h4></header>
50                <section class="sample-view">
51                    <p class="text-decoration-overline">This text has an overline.</p>
52                </section>
53                <header><h4>text-decoration: line-through</h4></header>
54                <section class="sample-view">
55                    <p class="text-decoration-line-through">This text has a line-through.</p>
56                </section>
57                <header><h4>text-decoration: underline; text-decoration-color: red; text-decoration-style: wavy; text-decoration-thickness: 2px;</h4></header>
58                <section class="sample-view">
59                    <p class="text-decoration-custom-underline">This text has a custom underline (color and style).</p>
60                </section>
61            </section>
62        </article>
63        <article>
64            <h3>text-transform</h3>
65            <section>
66                <header><h4>text-transform: none</h4></header>
67                <section class="sample-view">
68                    <p class="text-transform-none">This is no transformation applied.</p>
69                </section>
70                <header><h4>text-transform: capitalize</h4></header>
71                <section class="sample-view">
72                    <p class="text-transform-capitalize">this is a sentence in lowercase but will be capitalized.</p>
73                </section>
74                <header><h4>text-transform: uppercase</h4></header>
75                <section class="sample-view">
76                    <p class="text-transform-uppercase">This text will be transformed to uppercase.</p>
77                </section>
78                <header><h4>text-transform: lowercase</h4></header>
79                <section class="sample-view">
80                    <p class="text-transform-lowercase">THIS TEXT WILL BE TRANSFORMED TO LOWERCASE.</p>
81                </section>
82            </section>
83        </article>
84    </main>
85</body>
86</html>

字体排版（与文本相关）

text-align 属性 

 1/* Text align examples */
 2.text-align-left {
 3    text-align: left; /* Align text to the left */
 4}
 5
 6.text-align-center {
 7    text-align: center; /* Center align text */
 8}
 9
10.text-align-right {
11    text-align: right; /* Align text to the right */
12}
13
14.text-align-justify {
15    text-align: justify; /* Justify text (aligns text to both left and right edges) */
16}

text-align是CSS中的一个属性，用于指定文本和行内元素的水平对齐方式。它通常用于将段落或标题文本对齐到左侧、右侧或居中。它在网页布局和文本格式化中起着重要作用。

text-align 的主要值

left (左对齐) 
1p {
2    text-align: left;
3}
  • left将文本对齐到左侧（这是许多语言的默认对齐方式）。
right (右对齐) 
1p {
2    text-align: right;
3}
  • right将文本对齐到右侧。它对从右向左书写的语言（如阿拉伯语和希伯来语）特别有效。
center (居中对齐) 
1p {
2    text-align: center;
3}
  • center将文本对齐到中央。它常用于标题和标题部分。
justify (两端对齐) 
1p {
2    text-align: justify;
3}
  • justify使文本的左右边缘对齐，呈现整齐的对齐效果。它用于报纸和杂志等布局中。
start (起始对齐) 
1p {
2    text-align: start;
3}
  • start根据起始位置对齐文本。对于从左到右书写的语言，它的行为与左对齐相同。
end (结束对齐) 
1p {
2    text-align: end;
3}
  • end根据结束位置对齐文本。对于从左到右书写的语言，它的行为与右对齐相同。

text-align 的使用及示例

使用居中对齐的标题
  • 居中对齐通常用于网页和文档的标题。它看起来美观，并带来视觉上的平衡设计。
段落的左右对齐
  • 文本段落默认通常左对齐，但在特定设计中可能使用右对齐或居中对齐。
文本的两端对齐
  • 当使用justify对齐时，每行文本会均匀地与左右边缘对齐。它适用于报纸或杂志风格的布局。

总结

  • **text-align**是一个CSS属性，用于水平对齐文本或行内元素。
  • 它可以处理诸如左对齐、右对齐、居中对齐和两端对齐等各种布局。
  • 根据布局和设计目标选择适当的对齐方式，是实现可读性和美观设计的关键。

让我们通过text-align有效地将文本对齐作为设计的一部分。

text-decoration属性 

 1/* Text decoration examples */
 2.text-decoration-underline {
 3    text-decoration: underline;
 4}
 5
 6.text-decoration-overline {
 7    text-decoration: overline;
 8}
 9
10.text-decoration-line-through {
11    text-decoration: line-through;
12}
13
14.text-decoration-custom-underline {
15    text-decoration: underline;
16    text-decoration-color: red;
17    text-decoration-style: wavy;
18    text-decoration-thickness: 2px;
19}

text-decoration 是一个CSS属性，用于为文本添加下划线、上划线、删除线或自定义样式的线条。通过使用此属性，您可以使文本样式更加装饰性或视觉上更突出。

解释：

  • text-decoration-underline 类会在文本下方显示一条下划线。
  • text-decoration-overline 类会在文本上方绘制一条上划线。
  • text-decoration-line-through 类会在文本上应用一条删除线。
  • text-decoration-custom-underline 类是自定义下划线颜色、样式和厚度的一个示例。

text-decoration的关键值

none 
1p {
2    text-decoration: none;
3}
  • 指定 none 将移除文本上的所有装饰。例如，当您希望移除链接的下划线时可以使用。
underline 
1p {
2    text-decoration: underline;
3}
  • 指定 underline 将会在文本下方绘制一条下划线。它可以用于链接或需要强调的部分。
overline 
1p {
2    text-decoration: overline;
3}
  • 指定 overline 将会在文本上方绘制一条线。可用于更改外观或进行特殊装饰。
line-through 
1p {
2    text-decoration: line-through;
3}
  • 指定 line-through 将会在文本上绘制一条删除线。它通常用于表示修正。
blink（点滅）
  • blink 是一个让文本闪烁的值，但由于大部分浏览器已不支持，它现在基本上不再使用。

text-decoration的高级设置

text-decoration允许的详细设置如下：

text-decoration-color 
1p {
2    text-decoration: underline;
3    text-decoration-color: red;
4}
  • text-decoration-color 属性允许您指定下划线或删除线的颜色。默认情况下，它与文本颜色相匹配，但您可以选择不同的颜色来添加视觉强调。
text-decoration-style 
 1p.dshed {
 2    text-decoration: underline;
 3    text-decoration-style: solid;
 4}
 5p.double {
 6    text-decoration: underline;
 7    text-decoration-style: double;
 8}
 9p.dotted {
10    text-decoration: underline;
11    text-decoration-style: dotted;
12}
13p.dashed {
14    text-decoration: underline;
15    text-decoration-style: dashed;
16}
17p.wavy {
18    text-decoration: underline;
19    text-decoration-style: wavy;
20}
  • text-decoration-style 属性允许您指定装饰线的样式。值包括以下几种：。
    • solid（默认，实线）
    • double（双线）
    • dotted（点线）
    • dashed（虚线）
    • wavy（波浪线）
**text-decoration-thickness 
1p {
2    text-decoration: underline;
3    text-decoration-thickness: 2px;
4}
  • text-decoration-thickness 属性允许您指定装饰线的粗细。例如，您可以使用 2px 或 0.1em 等单位调整。

总结：

  • text-decoration 是一个用于为文本添加装饰线（如下划线或删除线）的属性。
  • 借助 text-decoration-color、text-decoration-style 和 text-decoration-thickness，可以实现更细致的自定义样式。
  • 它经常用于强调链接或重要文本，或作为设计元素使用。

使用 text-decoration，您可以为文本添加细微的强调或装饰。

text-transform 属性 

 1/* Text transform examples */
 2.text-transform-none {
 3    text-transform: none;
 4}
 5
 6.text-transform-capitalize {
 7    text-transform: capitalize;
 8}
 9
10.text-transform-uppercase {
11    text-transform: uppercase;
12}
13
14.text-transform-lowercase {
15    text-transform: lowercase;
16}

text-transform 是一个CSS属性，用于改变文本的字母大小写。此属性允许您控制HTML中指定文本的显示格式，自动更改用户输入或现有文本的大小写。

解释：

  • 类 text-transform-none 显示文本时不对其进行更改，保持原样。
  • 类 text-transform-capitalize 将每个单词的首字母转换为大写。
  • 类 text-transform-uppercase 将整个文本转换为大写。
  • 类 text-transform-lowercase 将整个文本转换为小写。

text-transform 的主要值

none 
1p {
2    text-transform: none;
3}
  • 指定为 none 时，文本保持不变。
capitalize 
1/* "this is a sentence" -> "This Is A Sentence" */
2p {
3    text-transform: capitalize;
4}
  • 指定为 capitalize 时，将每个单词的首字母转换为大写。单词边界由空格或标点符号识别。
uppercase 
1/* "hello world" -> "HELLO WORLD" */
2p {
3    text-transform: uppercase;
4}
  • 指定为 uppercase 时，将整个文本转换为大写。
lowercase 
1/* "HELLO WORLD" -> "hello world" */
2p {
3    text-transform: lowercase;
4}
  • 指定为 lowercase 时，将整个文本转换为小写。
full-width
  • 指定为 full-width 时，将文本转换为全角字符。通常在处理汉字或假名时用作特殊样式，但很少有浏览器支持此功能。

总结：

  • text-transform 是一个方便的CSS属性，用于更改文本大小写。
  • 它通常用于为标题、导航菜单和表单文本创建视觉一致性。
  • 当您希望无论用户输入如何都以特定样式显示文本时，这个属性非常有用。

通过使用此属性，您可以轻松操作文本，同时保持视觉一致性。

您可以在我们的YouTube频道上使用Visual Studio Code跟随上述文章进行学习。 请也查看我们的YouTube频道。

YouTube Video

与字体相关的CSS属性与文本间距相关的CSS属性