CSS基础教程：文本（一）

Hudson 译原文

文本指的是以文字或字符形式书写或打印的信息，可以被阅读和理解。文本可以包括书籍、文章、电子邮件、消息、网页等内容。

对文本进行样式设置涉及修改其外观，使其更具视觉吸引力或传达特定的信息。本章演示如何使用 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：控制断词规则的设置。

文本颜色

改变文字的颜色可以增加视觉吸引力或与特定设计方案保持一致。

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

颜色名称：示例 = red、blue、green。
十六进制值：示例 = #ff00ff。
RGB值：示例 = rgb(125, 255, 0)。

以下是一个例子：

<html>
<head>
</head>
<body>
   <h2>文本颜色</h2>
      <p style = "color: blueviolet;">
         颜色名称
      </p>
      <p style = "color:#ff00ff;">
         十六进制值
      </p>
      <p style = "color: rgb(255,124,100);">
         RGB值
      </p>
</body>
</html>

文本方向

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

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

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

以下是一个例子：

<html>
<head>
</head>
<body>
   <p style = "direction: rtl;">
      从右到左
   </p>
   <p style = "direction: ltr;">
      从左到右
   </p>
</body>
</html>

此外，CSS提供了一个简写属性unicode-bidi，用于控制双向文本的显示方式。该属性指定在同一段落中出现具有不同书写方向的字符时如何显示。

unicode-bidi的最常见值是normal，它允许浏览器自动处理文本方向。

下面是一个使用unicode-bidi的例子：

<html>
<head>
<style>
   p.example {
      direction: rtl;
      unicode-bidi: bidi-override;
   }
</style>
</head>
<body>
   <h2>文本方向</h2>
      <p>检查文本方向。</p>
      <p class="example">检查文本方向。</p>
</body>
</html>

文本缩进

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

CSS 也提供了一个用于设置文本缩进的属性 text-indent。该属性可以接受以下值：

length：任何具体长度 {像素 (px)，点 (pt)，ems (em) 等}。默认值为 0。
percentage (%)：传递的值是相对于父元素宽度的百分比。
each-line：影响文本块的第一行以及强制换行后的每一行。
hanging：缩进是反向的，除了第一行之外。
initial：将 text-indent 设置为其默认值。
inherit：允许从其父元素继承 text-indent 的值。

注意：截至目前，each-line 和 hanging 的值在任何浏览器中均不受支持。

下面是一个示例演示文本缩进：

<html>
<head>
</head>
<body>
   <h2>文本缩进</h2>
      <p style="text-indent: 2cm;">文本缩进为 2 厘米。</p>
      <p style="text-indent: 2in;">文本缩进为 2 英寸。</p>
      <p style="text-indent: 20%;">文本缩进为 20%。</p>
</body>
</html>

文本转换

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

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

lowercase：将所有文本转换为小写。
uppercase：将所有文本转换为大写。
capitalize：将每个单词的第一个字符大写。
none：不应用文本转换。
full-width：将所有字符转换为其全宽度变体。
full-size-kana：将所有小假名字符转换为全尺寸假名字符。这专门用于 <ruby> 标注文本。

重要提示：text-transform 影响文本的视觉呈现，而不会更改实际的 HTML 内容。

下面是一个示例：

<html>
<head>
<style>
   div {border:2px solid red; padding: 5px; margin: 2px; width: 300px;}
   span {text-transform: full-width;}
   strong {width: 100%;}
</style>
</head>
<body>
   <h2>Text Transform</h2>
   <div>
      <p style=”text-: capitalize;“>Text transformed.</p>
   </div>
   <div>
      <p style=”text-transform: lowercase;“>Text transformed.</p>
   </div>
   <div>
      <p style=”text-transform: uppercase;“>Text transformed.</p>
   </div>
   <div>
      <p style=”text-transform: none;“>Text transformed.</p>
   </div>
   <div>
      <strong>
      <span>TRANSFORMATION OF TEXT AS FULL-WIDTH.</span>
      </strong>
   </div>
</body>
</html>

文本强调

属性 text-emphasis属性用于在一段文本为句子、短语甚至单个字符应用强调标记。这些标记通常用于突出特定内容或指示某些语言中的发音或重音。

text-emphasis 是 text-emphasis-style 和 text-emphasis-color 的简写。可以具有以下值：

none：不设置强调标记。
filled：填充元素以实色。默认值。
open：将形状设置为空心。
dot：以小圆圈的形式显示标记，可以是空心或填充的圆点。
circle：以大圆圈的形式显示标记，可以是空心或填充的圆圈。默认形状在水平书写中。
double-circle：以双圆圈的形式显示标记，可以是空心或填充的双圆圈。
triangle：以三角形的形式显示标记，可以是空心或填充的三角形。
sesame：以芝麻（~）的形式显示标记，可以是空心或填充的芝麻。在垂直书写中的默认形状。
<string>：以传递的字符串值显示标记。
<color>：设置标记的颜色。

如下示例：

<html>
<head>
</head>
<body>
   <h2>CSS 文本 - 文本强调</h2>
      <p style="text-emphasis: dot;">强调是一个圆点。</p>
      <p style="text-emphasis: circle red;">强调是一个圆圈。</p>
      <p style="text-emphasis: triangle;">强调是一个三角形。</p>
      <p style="text-emphasis: none;">文本没有强调。</p>
      <p style="text-emphasis: double-circle green;">强调是一个双圆圈。</p>
      <p style="text-emphasis: open;">强调是空心的。</p>
      <p style="text-emphasis: sesame;">强调是芝麻形状的。</p>
      <p style="text-emphasis: 'u' #00ff00;">强调是一个字符串。</p>
</body>
</html>

CSS基础教程：文本 （一）

CSS基础教程：文本 （一）

文本颜色

文本方向

文本缩进

文本转换

文本强调

CSS基础教程：文本（一）

CSS基础教程：文本（一）