CSS - 文本

文本是指以可以阅读和理解的文字或字符形式书写或印刷的信息。文本可以包括书籍、文章、电子邮件、消息、网页等内容。文本样式涉及修改其外观以使其更具视觉吸引力或传达特定消息。

使用 CSS 格式化文本

CSS 提供了许多属性来以漂亮的方式格式化文本。本教程演示如何使用 CSS 属性设置文本格式。CSS 提供的以下属性可用于设置文本格式：

  • color：设置文本的颜色。

  • text-align设置文本的对齐方式。

  • text-align-last：设置文本块最后一行的对齐方式。

  • Direction：设置元素文本的方向。

  • text-indent：设置文本第一行的缩进。

  • letter-spacing：指定组成单词或文本的字母或字符之间的间距。

  • word-spacing：指定文本中单词之间的间距。

  • white-space：控制元素文本内的空白流。

  • text-decoration：在一段文本上添加下划线、上划线和删除线。

  • text-decoration-skip：确定需要跳过元素内容中受文本装饰影响的部分。

  • text-decoration-skip-ink：指定如何在字形上升部和下降部周围绘制上划线和下划线文本装饰线。

  • text-transform：将文本转换为大写或小写字母。

  • text-emphasis：将强调标记应用于文本（空格和控制字符除外）。

  • text-shadow：为文本添加阴影。

  • line-break：控制如何设置换行规则。

  • word-break：控制如何设置断字规则。

CSS - 设置文本颜色

改变文本的颜色可以增加视觉趣味或与特定的设计方案保持一致。

CSS color属性用于设置文本的颜色。该属性的可能值如下：

  • 颜色名称：示例 = 红色、蓝色、绿色。

  • 十六进制值：示例 = #ff00ff。

  • RGB 值：示例 = rgb(125, 255, 0)。

例子

这是一个例子：

<html>
<head>
</head>
<body>
   <h2>Text Color</h2>
      <p style = "color: blueviolet;">
         Color Name
      </p>
      <p style = "color:#ff00ff;">
         Hexadecimal value
      </p>
      <p style = "color: rgb(255,124,100);">
         RGB value
      </p>
</body>
</html>

CSS - 设置文本对齐方式

页面上文本的位置或布局称为对齐方式。文本根据页面的左右边距对齐。

CSS 属性text-align定义网页上文本的对齐方式。text-align属性用于设置文本的水平对齐方式。

以下是可用于设置文本对齐属性的可能值。

  • start：如果方向为 LTR，则与左相同；如果方向为 RTL，则与右相同。

  • end：如果方向为 LTR，则与 right 相同；如果方向为 RTL，则与 left 相同。

  • left：与左边距对齐。

  • right：与右边距对齐。

  • center：在页面中心对齐。

  • justify：与两侧边距对齐。

  • justify-all：与 justify 相同，使最后一行也对齐。

  • match-parent：与继承类似。start 和 right 的值取自父级的值并替换为 left 和 right。

当direction的值为ltr时，默认对齐方式为左对齐；当direction的值为rtl时，默认对齐方式为右对齐。

例子

这是一个例子：

<html>
<head>
</head>
<body>
   <h2>Setting Text Alignment using CSS</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>
      <p style="text-align: justify; border: 2px solid red; width: 200px; height: 100px;">
         Text Justify Alignment. This alignment aligns the text based on both the margins, left and right.
      </p>
</body>
</html>

CSS - 设置垂直对齐方式

CSS Vertical-align属性设置内联、内联块或表格单元格框的垂直对齐方式。

Vertical -align属性可以具有以下值之一：

  • 基线：元素的基线与其父元素的基线对齐。

  • sub：元素的基线降低到适合下标文本的点。

  • super：元素的基线升高到适合上标文本的点。

  • top：在内联内容的上下文中，元素框的顶部与行框的顶部对齐，或者在表格上下文中与表格单元格的顶部对齐。

  • text-top：元素框的顶部与行中最高行内框的顶部对齐。

  • middle：在内联内容的上下文中，元素的基线与父元素的基线加上父元素字体的 x 高度的一半定义的点对齐。

  • 底部：元素框的底部与行框的底部对齐（在内联内容的上下文中），或者与表格上下文中的表格单元格的底部对齐。

  • text-bottom：元素框的底部与行中最低行内框的底部对齐。

  • 百分比：元素的基线升高或降低属性 line-height 值的给定百分比。

  • length：元素的基线升高或降低给定的长度值。该属性允许使用负长度值。此属性的长度值为 0 与值基线具有相同的效果。

例子

这是一个例子。您可以尝试使用不同的垂直对齐值来尝试此示例：

<html>
<head>
<style>
   table, td {
      height:100px; 
      width:400px; 
      border:1px solid red;
   }
</style>
</head>
<body>
   <h4>Setting Text Vertical Alignment</h4>
   <table>
   <tr>
      <td style="vertical-align: baseline">baseline</td>
      <td style="vertical-align: top">top</td>
      <td style="vertical-align: middle">middle</td>
      <td style="vertical-align: bottom">bottom</td>
      <td><p>No vertical alignment </p></td>
   </tr>
   </table>
</body>
</html>

CSS 文本方向

文本方向是指文档或元素中文本字符的方向。它根据所使用的书写系统确定文本是应从左到右 (LTR) 还是从右到左 (RTL) 显示。

在CSS中，您可以使用direction属性设置文本方向。方向属性接受两个主要值：

  • LTR（从左到右）：默认值，用于从左到右书写的语言，例如英语。除非您想要覆盖继承的从右到左方向，否则不需要显式指定该值。

  • RTL（从右到左）：用于从右到左书写的语言，例如阿拉伯语或希伯来语。使用 rtl 时，文本默认右对齐。

此外，CSS 还提供了一个简写属性unicode-bidi来控制bidi 算法，该算法指定不同书写方向的字符出现在同一段落中时如何显示。unicode-bidi 最常见的值是normal，它允许浏览器自动处理文本方向。

例子

这是一个例子：

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

例子

让我们看一个unicode-bidi的使用示例：

<html>
<body>
   <h2>Text Direction</h2>
   <p>Check for the text direction.</p>
   <p style="direction: rtl;unicode-bidi: bidi-override;">Check for the text direction.</p>
</body>
</html>

CSS - 文本装饰

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

它是以下属性的简写属性：

  • text-decoration-line：设置装饰线的类型（下划线、删除线或上划线）。

  • text-decoration-color：设置文本装饰的颜色。

  • text-decoration-style：将样式设置为文本装饰（点线、虚线、实线、波浪线、双线等）

  • text-decoration-thickness：设置文本装饰的厚度。

例子

这是一个例子：

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

CSS - 文本装饰跳过

text -decoration-skip属性确定需要跳过元素内容中受文本修饰影响的部分。

text -decoration-skip属性可以具有以下值：

  • none：不跳过任何内容，并对所有文本内容应用文本修饰。

  • 对象：跳过元素的整个边距框，例如图像或内联块。

  • space：跳过所有空格。

  • leading-spaces：与空格相同，仅跳过前导空格。

  • Trailing-spaces：与空格相同，仅跳过尾随空格。

  • 边缘：文本的开头和结尾等边缘稍微插入。相邻元素分开下划线。

  • box-decoration：跳过框的边距、边框和填充区域上的文本装饰。

  • 初始：将 text-decoration-skip 值设置为其默认值（无）。

  • 继承：从其父元素继承text-decoration-skip值。

  • unset：删除任何先前设置的 text-decoration-skip 值。

目前仅 Safari 支持此属性。

例子

这是一个例子。您可以使用text-decoration-skip属性的不同值尝试此示例：

<html>
<head>
<style>
   .edges{
      font-size:1.5em; 
      text-decoration: underline solid red 5px; 
      text-decoration-skip: edges;
   }
   .spaces{
      font-size:1.5em; 
      text-decoration: underline solid green 5px; 
      text-decoration-skip: spaces;
   }
</style>
</head>
<body>
   <h2>Text Decoration Skip</h2>
   <p class="edges">Observe the edges of the line.</p>
   <p class="spaces">Its text decoration skip spaces.</p>
</body>
</html>

CSS - 文本装饰跳过墨迹

text -decoration-skip-ink属性指定如何在字形或字符上升部和下降部周围绘制上划线和下划线文本装饰线。

text -decoration-skip-ink属性可以具有以下值：

  • none：不跳过任何内容，并对所有文本内容应用文本修饰。

  • auto：跳过元素的整个边距框，例如图像或内联块。

  • all：跳过所有间距。（仅在 Firefox 和 Safari 上支持）

例子

在下面的示例中，观察字母 (p,g) 的下伸部分和上伸部分 (h) 如何受到此属性的影响：

<html>
<head>
<style>
   .auto{
      font-size:3em; 
      text-decoration: underline solid red 5px; 
      text-decoration-skip-ink: auto;
   }
   .none{
      font-size:3em; 
      text-decoration: underline solid green 5px; 
      text-decoration-skip-ink: none;
   }
</style>
</head>
<body>
   <h2>Text Decoration Skip Ink</h2>
   <p class="auto">paragraph</p>
   <p class="none">paragraph.</p>
</body>
</html>

CSS - 文本转换

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

text -transform属性可以具有以下值之一：

  • lowercase：将所有文本转换为小写。

  • uppercase：将所有文本转换为大写。

  • Capitalize：将每个单词的第一个字符大写。

  • none：不应用文本转换。

  • full-width：将所有字符转换为其全角变体。

  • full-size-kana：将所有小假名字符转换为全尺寸假名字符。这专门用于 <ruby> 注释文本。

  • 初始：将文本转换值设置为其默认值（无）。

  • 继承：从其父元素继承文本转换值。

  • unset：删除任何先前设置的文本转换值。

值得注意的是，文本转换会影响文本的视觉呈现，但不会改变实际的 HTML 内容。

例子

这是一个例子：

<html>
<body>
   <h2>Text Transform Examples</h2>
   <p style="text-transform: capitalize;">This text will be capitalized.</p>

   <p style="text-transform: lowercase;">This text will be in lowercase.</p>

   <p style="text-transform: uppercase;">This text will be in upercase.</p>

   <p style="text-transform: none;">This text will not have any transformation.</p>

   <p style="text-transform: full-width;">TRANSFORMATION OF TEXT AS FULL-WIDTH.</p>
</body>
</html>

CSS - 文本强调

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

它允许设计者将重点放在文本块中的单个字符或短语上。

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

text -emphasis属性可以具有以下值之一：

  • none：不设置强调标记。

  • 填充：用纯色填充元素。默认值。

  • open：将形状设置为空心。

  • dot：标记显示为小圆圈，可以是空心点，也可以是实心点。

  • Circle：标记显示为大圆圈，可以是空心圆或实心圆。水平书写的默认形状。

  • 双圆：标记显示为双圆，空心双圆或实心双圆。

  • 三角形：标记显示为三角形，可以是空心三角形，也可以是实心三角形。

  • sesame：标记显示为芝麻 (~)，可以是开芝麻，也可以是实心芝麻。垂直书写的默认形状。

  • <string>：显示为传递的字符串值的标记。

  • <颜色>：设置标记的颜色。

例子

这是一个例子：

<html>
<head>
</head>
<body>
   <h2>Text Emphasis Examples</h2>
   <p style="text-emphasis: dot;">The emphasis is a dot.</p>
   <p style="text-emphasis: circle red;">The emphasis is a circle.</p>
   <p style="text-emphasis: triangle;">The emphasis is a triangle.</p>
   <p style="text-emphasis: none;">No emphasis to the text.</p>
   <p style="text-emphasis: double-circle green;">The emphasis is a double-circle.</p>
   <p style="text-emphasis: open;">The emphasis is open.</p>
   <p style="text-emphasis: sesame;">The emphasis is a sesame.</p>
   <p style="text-emphasis: 'u' #00ff00;">The emphasis is a string.</p>
</body>
</html>

CSS - 文本缩进

缩进是页边距和第一行文本之间的空间。正确的缩进可以增强页面上文本的可读性和清晰度。

CSS 还提供了一个设置文本缩进的属性，即text-indent。可以将以下值传递给此属性：

  • length : 任何特定长度{像素(px)、点(pt)、em(em)等}。默认值为 0。

  • 百分比 (%)：传递的值与父元素宽度的百分比有关。

  • every-line：影响文本块的第一行以及强制换行后的每一行。

  • hang：缩进是倒置的，第一行除外。

  • 初始：将文本缩进设置为其默认值。

  • 继承：允许从其父元素继承文本缩进值。

注意：到目前为止，任何浏览器都不支持“each-line”和“hanging”值。

例子

这是一个例子：

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

CSS - 文本字母间距

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

以下是该属性可能具有的值：

  • 正常：默认值，表示字母之间的正常空格量。

  • length：任何特定长度{像素 (px)、点 (pt)、em (em) 或百分比 (%)}。

  • 初始：将字母间距设置为其默认值。

  • 继承：允许从其父元素继承字母间距值。

字母之间的实际间距可能会根据所使用的字体而有所不同。

例子

这是一个例子：

<html>
<body>
   <h2>Letter Spacing Examples</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 - 文本字间距

CSS 提供了调整一段文本中单词之间间距的属性，就像字母间距一样。调整单词之间间距的属性是word-spacing。

该属性可以采用以下任意值：

  • 正常：默认值，表示单词之间的正常空格量。

  • length：任何特定长度{像素 (px)、点 (pt)、em (em) 或百分比 (%)}。

  • 初始：将字间距设置为其默认值。

  • 继承：允许从其父元素继承字间距值。

例子

这是一个例子：

<html>
<head>
</head>
<body>
   <h2>Word Spacing Examples</h2>
   <p style="word-spacing: normal;">Word spacing normal.</p>
   <p style="word-spacing: 15pt;">Word spacing increased.</p>
   <p style="word-spacing: -1px;">Word spacing decreased.</p>
</body>
</html>

CSS - 文本空白

在文本中，空白是指不显示可见符号或对文本含义产生任何影响的任何空白区域或字符。

以下是一些可能会遇到空格的情况：

  • 前导空格出现在一行的第一个可见字符之前，而尾随空格出现在最后一个可见字符之后。

  • 空白，通常以换行符或段落符的形式出现。

  • 空格经常用于缩进目的，特别是在编程语言中或在编写结构化文本时。

  • 可以使用不间断的空白字符，例如 HTML 实体“nbsp”( )。

  • 文本中的连续空格被视为单个空格。例如，多次按空格键。

CSS 提供了white-space属性来设置文本空白。空白的不同值如下：

  • Normal：默认值，其中空白序列被折叠，文本在达到可用宽度时换行到下一行。

  • nowrap：空格被折叠，文本不会换行到下一行。它在同一行上继续，超出了可用宽度。

  • pre：保留 HTML 代码中的空白。换行符和多个空格按原样显示。

  • pre-wrap：保留 HTML 代码中的换行符和空格。

  • pre-line：折叠空格，但保留换行符。文本达到可用宽度时会换行。

  • break-spaces：折叠空白序列，但保留换行和换行机会。这是一个实验值，可能并非所有浏览器都支持。

  • 初始：将值设置为其默认值，这是正常的。

  • 继承：继承其父元素的值。

这些值可以与其他 CSS 属性（例如Overflow和text-overflow ）结合使用，以控制空白的Behave。

例子

这是一个例子：

<html>
<head>
<style>
   div {border:2px solid red; padding: 5px; margin: 2px; width: 300px; height: 100px;}
</style>
</head>
<body>
   <h2>White Space Examples</h2>
   <h4>normal</h4>
   <div>
      <p style="white-space: normal;">white space refers to any empty space or characters that do not display
      a visible symbol or have any effect on the text's meaning</p>
   </div>
   <h4>pre</h4>
   <div>
      <p style="white-space: pre;">white space refers to any empty space or characters that do not display
      a visible symbol or have any effect on the text's meaning</p>
   </div>
   <h4>nowrap</h4>
   <div>
      <p style="white-space: nowrap;">white space refers to any empty space or characters that do not display
      a visible symbol or have any effect on the text's meaning</p>
   </div>
   <h4>pre-wrap</h4>
   <div>
      <p style="white-space: pre-wrap;">white space refers to any empty space or characters that do not display
   a visible symbol or have any effect on the text's meaning</p>
   </div>
   <h4>pre-line</h4>
   <div>
      <p style="white-space: pre-line;">white space refers to any empty space or characters that do not display
      a visible symbol or have any effect on the text's meaning</p>
   </div>
   <h4>break-spaces</h4>
   <div>
      <p style="white-space: break-spaces;">white space refers to any empty space or characters that do not display
      a visible symbol or have any effect on the text's meaning</p>
   </div>
</body>
</html>

CSS - 文本阴影

text-shadow属性用于为文本添加阴影效果。它允许您指定阴影的颜色、偏移、模糊半径和扩散半径。以下是文本阴影的语法：

/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px black;

/* color | offset-x | offset-y | blur-radius */
text-shadow: #fc0 1px 0 10px;

/* offset-x | offset-y | color */
text-shadow: 5px 5px #558abb;

/* color | offset-x | offset-y */
text-shadow: white 2px 5px;

/* offset-x | offset-y
/* Use defaults for color and blur-radius */
text-shadow: 5px 10px;

CSS text-shadow属性接受以下值：

  • <颜色>：

    • 设置阴影的颜色。

    • 它是可选的。

    • 它可以在偏移值之前或之后指定。

    • 可以指定任何颜色值，例如名称、十六进制或 RGB 值。

  • <偏移-x><偏移-y>：

    • 任何长度值，指定 x 和 y 值。

    • x 值表示阴影距文本的水平距离。

    • y 值表示阴影距文本的垂直距离。

    • 如果 x 和 y 值等于 0，则阴影出现在文本后面。

  • <模糊半径>

    • 任意长度值，指定模糊半径的值。

    • 它是可选的。

    • 为了使模糊看起来更大，您需要提供更高的值。

    • 如果没有传递任何值，则视为 0。

例子

这是一个例子：

<html>
<head>
</head>
<body>
   <h2>Text Shadow Examples</h2>
      <p style="text-shadow: 2px 5px yellow;"> Simple Text shadow </p>
      <p style="text-shadow: 5px 5px 2px #ff00ff;">Text shadow with blur radius</p>
      <p style="text-shadow: 1px 1px 2px green, 0 0 1em yellow, 0 0 0.2em red;">Multiple shadows</p>
      <p style="text-shadow: 0px 0px 10px rgb(26, 69, 105); ">Text shadow with RGB colors</p>
</body>
</html>

CSS - 文本换行符

CSS 提供了line-break属性，可用于确定如何在文本块中换行。

以下是该属性可以具有的值：

  • auto：应用默认换行规则。

  • 松散：应用最少限制的换行规则。

  • 正常：应用最常见的换行规则。

  • strict：应用最严格的换行规则。

  • Anywhere：允许浏览器在任何位置、任何字符处应用换行规则。

  • 初始值：设置初始值。

  • 继承：继承父元素的值。

例子

这是一个例子：

<html>
<head>
<style>
   p {
      border: 2px solid blue;
      width: 200px;
   }
   .normal {
      line-break: normal;
   }
   .loose {
      line-break: loose;
   }
   .strict {
      line-break: strict;
   }
   .auto {
      line-break: auto;
   }
   .anywhere {
      line-break: anywhere;
   }
</style>
</head>
<body>
   <h2>Line Break Examples</h2>
      <p class="normal">Normal - CSS provides property <b>line-break</b> that is useful in determining how to break lines in a block of text.</p>
      <p class="loose">Loose - CSS provides property <b>line-break</b> that is useful in determining how to break lines in a block of text</p>
      <p class="strict">Strict - CSS provides property <b>line-break</b> that is useful in determining how to break lines in a block of text</p>
      <p class="auto">Auto - CSS provides property <b>line-break</b> that is useful in determining how to break lines in a block of text</p>
      <p class="anywhere">Anywhere - CSS provides property <b>line-break</b> that is useful in determining how to break lines in a block of text</p>
</body>
</html>

CSS - 文本分词

CSS 中的CSS word-break属性用于指定在单词超过元素的可用宽度时应如何断开或换行。它决定浏览器是否应该允许单词在任何时候中断，或者是否应该将它们保留在一起。

以下是该属性可以具有的值：

  • 正常：使用默认换行规则。

  • break-all：在任意两个字符之间应用分词符，以防止溢出。

  • keep-all：中文、日文和韩文 (CJK) 文本不使用断字符；对于其他语言或非 CJK 文本Behave与普通.

  • break-word ：这与Overflow-wrap: Anywhere 的Behave相同，即在任何单词处应用断字。但该值已被弃用。

例子

这是一个例子：

<html>
<head>
<style>
   p {
      border: 2px solid green;
      width: 200px;
   }
   .normal {
      word-break: normal;
   }
   .all {
      word-break: break-all;
   }
   .keep {
      word-break: keep-all;
   }
   .wordbreak {
      word-break: break-word;
   }
</style>
</head>
<body>
   <h2>Word Break Examples</h2>
      <p class="normal">normal - CSS provides property <b>word-break</b> that is useful in determining how to break words in a block of text</p>
      <p class="all">break-all - CSS provides property <b>word-break</b> that is useful in determining how to break words in a block of text</p>
      <p class="keep">keep-all - CSS provides property <b>word-break</b> that is useful in determining how to break words in a block of text</p>
      <p class="wordbreak">break-word - CSS provides property <b>word-break</b> that is useful in determining how to break words in a block of text</p>
</body>
</html>