Css 简明教程

CSS - Text

text 指以可读和可理解的单词或字符形式书面或印刷的信息内容。文本可包括诸如书籍、文章、电子邮件、信息、网页等内容。

给文本设置样式涉及修改其外观，使其在视觉上更吸引人或传达特定信息。本章演示了如何使用 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 Text - Text Color

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

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

Color Name ：示例 = 红色、蓝色、绿色。
Hexadecimal value ：示例 = #ff00ff。
RGB value ：示例 = 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 Text - Text Alignment

文本在页面上的位置或放置称为对齐方式。文本按页面的左右边距对齐。

定义文本对齐方式的 CSS 属性是 * text-align* 。它设置文本的水平对齐。

以下是可以放置在此属性中的可能值：

start ：与左对齐相同，如果方向为 LTR 则为右对齐，如果方向为 RTL 则为左对齐。
end ：与右对齐相同，如果方向为 LTR 则为左对齐，如果方向为 RTL 则为右对齐。
left ：与左边界对齐。
right ：与右边界对齐。
center ：与页面中心对齐。
justify ：与两个边界对齐。
justify-all ：与 justified 相同，使得最后一行也靠齐。
match-parent ：类似于 inherit。start 和 right 的值取自 parent 的值并用 left 和 right 替换。

这是一个示例：

<html>
<head>
</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>
      <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 Text - Vertical Alignment

vertical-align 属性用来在内嵌、行内块表和表格单元格中垂直对齐文本。

vertical-align 属性可以拥有以下值：

baseline ：元素的基线与父元素的基线对齐。
sub ：元素的基线降至适合下标文本的位置。
super ：元素的基线升至适合上标文本的位置。
top ：在内嵌内容的上下文中，元素的外框顶部与行框的顶部对齐，或在表格的上下文中与表格单元格的顶部对齐。
text-top ：元素的外框顶部与行中最高内嵌框的顶部对齐。
middle ：在内嵌内容的上下文中，元素的基线与父元素的基线加上父元素字体 x 高度的点对齐。
bottom ：在内嵌内容的上下文中，元素的外框底部与行框的底部对齐，或在表格的上下文中与表格单元格的底部对齐。
text-bottom ：元素的外框底部与行中最底部内嵌框的底部对齐。
percentage ：元素的基线会根据行高属性值的给定百分比提升或降低。
length ：元素的基线会根据给定的长度值提升或降低。此属性允许使用负值长度。此属性的长度值为 0 则会产生与基线值相同的效果。

这是一个示例：

<html>
<head>
<style>
   table,td {height:100px; width:400px; border:1px solid red;}
</style>
</head>
<body>
   <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>
   <p>
   top:         <img style="vertical-align: top" src="images/smiley.png" alt="star"/>
   middle:      <img style="vertical-align: middle" src="images/smiley.png" alt="star"/>
   bottom:      <img style="vertical-align: bottom" src="images/smiley.png" alt="star"/>
   super:       <img style="vertical-align: super" src="images/smiley.png" alt="star"/>
   sub:         <img style="vertical-align: sub" src="images/smiley.png" alt="star"/>
   </p>

   <p>
   text-top:    <img style="vertical-align: text-top" src="images/smiley.png" alt="star"/>
   text-bottom: <img style="vertical-align: text-bottom" src="images/smiley.png" alt="star"/>
   0.2em:       <img style="vertical-align: 0.3em" src="images/smiley.png" alt="star"/>
   -1em:        <img style="vertical-align: -2em" src="images/smiley.png" alt="star"/>
   20%:         <img style="vertical-align: 30%" src="images/smiley.png" alt="star"/>
   -100%:       <img style="vertical-align: -100%" src="images/smiley.png" alt="star"/>
   </p>
</body>
</html>

CSS Text - Direction

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

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

LTR (Left-to-Right) ：默认值，用于从左到右书写的语言（比如英语）。除非要覆盖继承而来的从右到左的方向，否则不需要显式指定该值。
RTL (Right-to-Left) ：用于从右到左书写的语言（比如阿拉伯语或希伯来语）。在使用 rtl 时，文本默认右对齐。

此外，CSS 还有简写属性 * unicode-bidi* ，用于控制 bidi algorithm ，即指定当具有不同书写方向的字符出现在同一段落时如何显示。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>

CSS Text - With unicode-bidi

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

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

CSS Text - Text Decoration

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

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

text-decoration-line ：设置装饰线的类型（下划线、删除线或上划线）。
text-decoration-color ：为文本装饰设置颜色。
text-decoration-style ：为文本装饰设置样式（点状、破折号、实线、波浪线、双线等）。
text-decoration-thickness ：为文本装饰设置粗细。

这是一个示例：

<html>
<head>
</head>
<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 - Text Decoration Skip

text-decoration-skip 属性确定元素内容的哪一部分会受到文本装饰的影响，需要跳过哪些部分。

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

none ：不跳过任何内容，为所有文本内容应用文本装饰。
objects ：跳过元素的整个外边距框，比如图像或内联块。
spaces: Skips all spacing.
leading-spaces ：与空格相同，仅跳过前导空格。
trailing-spaces : 与空格相同，只跳过尾部空格。
edges : 文本的开始和结束边缘会轻微缩进。为相邻元素设置独立的下划线。
box-decoration : 跳过框的边距、边框和填充区域上的文本装饰。
initial : 将文本装饰跳过值设置为其默认值（无）。
inherit : 从其父元素继承文本装饰跳过值。
unset : 删除任何先前设置的文本装饰跳过值。

这是一个示例：

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

CSS Text - Text Decoration Skip Ink

text-decoration-skip-ink 属性指定如何绘制上划线和下划线文本装饰线，使其围绕字形或字符上肩线和下肩线。

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

none ：不跳过任何内容，为所有文本内容应用文本装饰。
auto : 跳过元素的整个边距框，例如图像或内联块。
all : 跳过所有间距。（仅受 Firefox 和 Safari 支持）

在下例中，观察字母（p、g）的下肩线和上肩线（h）如何受此属性影响：

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

CSS Text - Text Transform

text-transform* 属性通过各种方式变换文本的外观，可以用来将文本转换为大写、小写、大写每个单词的首字母，甚至是所有字母。

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

lowercase : 将所有文本转换为小写。
uppercase : 将所有文本转换为大写。
capitalize : 大写每个单词的第一个字符。
none : 不应用文本转换。
full-width : 将所有字符转换为全角变体。
full-size-kana : 将所有小假名字符转换为全角假名字符。这专门用于 <ruby> 注解文本。
initial ：将 text-transform 属性值设为其默认值 (none)。
inherit ：继承其父元素的 text-transform 属性值。
unset ：删除任何之前设置的 text-transform 属性值。

这是一个示例：

<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>

CSS Text - Text Emphasis

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

它允许设计者对文本块中的各个字符或短语应用强调。

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

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

none ：不设置强调标记。
filled ：使用纯色填充元素。默认值。
open ：将形状设为镂空。
dot ：标记显示为小圆圈，要么是空心的要么是实心的点。
circle ：标记显示为大圆圈，要么是空心的要么是实心的圆圈。水平书写中的默认形状。
double-circle ：标记显示为双圆圈，要么是空心的要么是实心的双圆圈。
triangle ：标记显示为三角形，要么是空心的要么是实心的三角形。
sesame ：标记显示为芝麻形 (~)，要么是空心的要么是实心的芝麻形。竖直书写中的默认形状。
<string> ：标记显示为传递的字符串值。
<color> ：设置标记的颜色。

这是一个示例：

<html>
<head>
</head>
<body>
   <h2>Text Emphasis</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 Text - Text Indentation

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

CSS 还提供了一个用来设置文本缩进的属性，该属性即为 * text-indent* 。该属性可传递以下值：

length ：任何特定长度 {像素 (px)、点数 (pt)、em (em) 等}。默认值为 0。
percentage (%) ：传递的值与父元素宽度的百分比相关。
each-line ：影响文本块的第一行以及强制换行后的每一行。
hanging ：缩进被反转，除了第一行。
initial ：将文本缩进设置为其默认值。
inherit ：允许从其父元素继承文本缩进值。

这是一个示例：

<html>
<head>
</head>
<body>
   <h2>Text indentation</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 Text - Letter Spacing

调整文本中字母之间的空格，会影响网页的可读性和整体美观性。

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

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

normal ：默认值，表示字母之间的正常空格量。
length ：任何特定长度 {像素 (px)、点数 (pt)、em (em) 或百分比 (%) }。
initial ：将字间距设置为其默认值。
inherit ：允许从其父元素继承字间距值。

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

这是一个示例：

<html>
<head>
</head>
<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 Text - Word Spacing

就像 letter-spacing 一样，CSS 提供了用于调整文本中单词之间间距的属性。用于调整单词之间空格的属性是 * word-spacing* 。

此属性可以采用以下值：

normal ：默认值，表示单词之间的正常空格量。
length ：任何特定长度 {像素 (px)、点数 (pt)、em (em) 或百分比 (%) }。
initial ：将字间距设置为其默认值。
inherit ：允许从其父元素继承字间距值。

这是一个示例：

<html>
<head>
</head>
<body>
   <h2>Word spacing</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 Text - White Space

文本中的空白是指不显示任何可见符号或对文本含义没有任何影响的任何空隙或字符。

以下列举了一些你可能遇到空白的情况：

行首空白是出现在行第一个可见字符之前的那些空白，行尾空白是出现在最后一个可见字符之后的那些空白。
空白，通常采用换行符或段落符的形式。
空白通常用于缩进，尤其是在编程语言中或书写结构化文本时。
可以使用不换行的空白字符，例如 HTML 实体 nbsp ( )。
文本中的连续多个空白会被当作一个空白来处理。例如，多次按下空格键。

white-space 的不同值如下：

normal ：默认值，其中空白序列会被折叠，当文本达到可用宽度时，文本会自动换行到下一行。
nowrap ：空白被折叠，文本不会自动换行到下一行。它会继续在同一行显示，超出可用宽度。
pre ：按照 HTML 代码中显示的方式完全保留空白。换行符和多个空白将按照它们所显示的方式显示。
pre-wrap ：按照 HTML 代码中显示的方式保留换行符和空白。
pre-line ：折叠空白，但保留换行符。当文本达到可用宽度时，文本自动换行。
break-spaces ：折叠连续空白，但保留换行符和断行机会。这是一个实验性的值，可能不受所有浏览器支持。
initial ：将值设置为其默认值，即正常。
inherit ：从其父元素继承值。

这是一个示例：

<html>
<head>
<style>
   div {border:2px solid red; padding: 5px; margin: 2px; width: 300px; height: 100px;}
</style>
</head>
<body>
   <h2>White Space</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 - White Space Collapse

white-space-collapse 属性检查如何在元素内折叠空白。

white-space* 属性是 white-space-collapse 和 text-wrap 属性的简写。

white-space-collapse 的不同值如下：

collapse ：折叠空格序列。
preserve ：保留空格序列和段落分隔符。
preserve-breaks ：折叠空格序列并保留段落分隔符。
preserve-spaces ：保留空格序列，并转换段落分隔符和制表符为空格。
break-spaces ：类似于“保留”。连续空格、制表符和换行符将折叠成一个空格，但一个空格将保持原样。

CSS Text - With Shadow

text-shadow* 属性用于向文本添加阴影效果。它允许您指定阴影的 color 、 offset 、模糊半径和散布半径。

通过使用此属性，您可以创建各种文本效果，如给文本赋予 3D 或发光外观，或为文本添加强调和深度。

该属性指定 X 和 Y 偏移量、模糊半径和颜色值的组合。它不要求以固定顺序指定值。它以逗号分隔的阴影值列表形式指定。

text-shadow 属性接受以下值：

<color> ：设置阴影颜色。它是可选的。它可以在偏移值之前或之后指定。可以指定任何颜色值，例如名称、HEX 或 RGB 值。
<offset-x><offset-y> ：任何长度值，指定 x 和 y 值。x 值表示阴影与文本的水平距离。y 值表示阴影与文本的垂直距离。如果 x 和 y 值等于 0，阴影将出现在文本后面。
<blur-radius> 任何长度值，指定模糊半径的值。它是可选的。为了使模糊看起来更大，您需要提供更高的值。如果未传递值，则将其视为 0。

Example

这是一个示例：

<html>
<head>
</head>
<body>
   <h2>Text Shadow</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 Text - Line Break

CSS 提供 * line-break* 属性，它在确定如何换行文本块方面很有用。

以下是可以使用的属性值：

auto ：应用默认换行规则。
loose ：应用最宽松的换行规则。
normal ：应用最常见的换行规则。
strict ：应用最严格的换行规则。
anywhere ：允许浏览器在任何字符处应用换行规则。
initial ：设置初始值。
inherit ：继承父元素的值。

这是一个示例：

<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</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 Text - Word Break

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

以下是可以使用的属性值：

normal ：使用默认换行规则。
break-all ：在任意两个字符之间应用断字，防止溢出。
keep-all ：断字不能用于中文、日文和韩文 (CJK) 文本；对于其他语言或非 CJK 文本，行为与 normal 相同。
break-word ：与 overflow-wrap: anywhere 的行为相同，即断开任何单词。但此值已弃用。

这是一个示例：

<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</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>