文本是指以可以阅读和理解的单词或字符形式书写或印刷的信息。文本可以包括书籍、文章、电子邮件、消息、网页等内容。
文本样式设计涉及修改其外观,使其更具视觉吸引力或传达特定消息。本章演示如何使用 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 文本 - 文本颜色
更改文本的颜色可以添加视觉兴趣或与特定设计方案保持一致。
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>
CSS 文本 - 文本对齐方式
页面上文本的位置或放置称为对齐方式。文本根据页面的左右边距对齐。
定义文本对齐方式的 CSS 属性是 text-align。它设置文本的水平对齐方式。
以下是该属性可以包含的可能值:
start:与 left 相同,如果方向为 LTR,如果方向为 RTL,则为右。
end:如果方向为 LTR,则与右相同;如果方向为 RTL,则与左相同。
left:与左边距对齐。
right:与右边距对齐。
center:在页面中心对齐。
justify:与两侧边距对齐。
justify -all:与 justify 相同,使最后一行也对齐。
match-parent:与继承类似。 start 和 right 的值取自父级的值,并替换为 left 和 right。
当方向为 ltr 时,默认对齐方式为左对齐-aligned,当方向为rtl时,默认对齐方式为右对齐。
示例如下:
<html>
<head>
</head>
<body>
<h2>文本对齐</h2>
<p style="text-align: left;">文本左对齐。</p>
<p style="text-align: right;">文本右对齐。</p>
<p style="text-align: center;">文本居中对齐。</p>
<p style="text-align: justify; border: 2px solid red; width: 200px; height: 100px;">
文本对齐。 此对齐方式根据左右边距来对齐文本。
</p>
</body>
</html>
CSS 文本 - 垂直对齐
vertical-align 属性用于在内联、内联块和表格单元格中垂直对齐文本。
vertical-align属性可以具有以下值之一:
baseline:元素的基线与父元素的基线对齐。
sub:元素的基线降低到适合下标文本的点。
super:元素的基线升高到适合下标文本的点。上标文本。
top:元素框的顶部与行框的顶部对齐,在内联内容的上下文中,或者与表格单元格的顶部对齐表格的上下文。
text-top:元素框的顶部与行中最高内联框的顶部对齐。
middle:在内联内容的上下文中,元素的基线与父元素的基线加上父元素字体的 x 高度的一半定义的点对齐。
bottom:元素框的底部与行框的底部(在内联内容的上下文中)或表格上下文中的表格单元格的底部对齐。
text-bottom:元素框的底部与行中最低行内框的底部对齐。
百分比:基线元素的基线升高或降低给定的 line-height 属性值的百分比。
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>
没有垂直对齐
</p>
</td>
</tr>
</table>
<p>
top: <img style="vertical-align: top" src="/css/images/smiley.png" alt="star"/>
middle: <img style="vertical-align: middle" src="/css/images/smiley.png" alt="star"/>
bottom: <img style="vertical-align: bottom" src="/css/images/smiley.png" alt="star"/>
super: <img style="vertical-align: super" src="/css/images/smiley.png" alt="star"/>
sub: <img style="vertical-align: sub" src="/css/images/smiley.png" alt="star"/>
</p>
<p>
text-top: <img style="vertical-align: text-top" src="/css/images/smiley.png" alt="star"/>
text-bottom: <img style="vertical-align: text-bottom" src="/css/images/smiley.png" alt="star"/>
0.2em: <img style="vertical-align: 0.3em" src="/css/images/smiley.png" alt="star"/>
-1em: <img style="vertical-align: -2em" src="/css/images/smiley.png" alt="star"/>
20%: <img style="vertical-align: 30%" src="/css/images/smiley.png" alt="star"/>
-100%: <img style="vertical-align: -100%" src="/css/images/smiley.png" alt="star"/>
</p>
</body>
</html>
CSS 文本 - 方向
文本方向是指文档或元素内文本字符的方向。它根据所使用的书写系统确定文本是从左到右 (LTR) 还是从右到左 (RTL) 显示。
在 CSS 中,您可以使用 direction属性。 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>
CSS 文本 - 使用 unicode-bidi
让我们看一个使用 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-decoration 有助于为文本添加额外的装饰,例如,添加一条线(下划线、删除线、上划线)以及线的颜色、样式和粗细。
它是以下属性的简写属性:
text-decoration-line:设置装饰线的类型(下划线、删除线或上划线)。
text-decoration-color:设置装饰线的类型文本装饰的颜色。
text-decoration-style:设置文本装饰的样式(点线、虚线、实线、波浪线、双线等)
text-decoration-thickness:设置文本装饰的粗细。
下面是一个示例:
<html>
<head>
</head>
<body>
<h2>文字装饰</h2>
<p style="text-decoration: overline Solid red 5px;">上划线文本装饰。</p>
<p style="text-decoration: line-through Solid green 1px;">穿线文本装饰。</p>
<p style="text-decoration: underline dashed 2pt blue;">下划线文本装饰。</p>
</body>
</html>
CSS 文本 - text-decoration-skip
text-decoration-skip 属性确定需要跳过元素内容中受文本修饰影响的部分。
text-decoration-skip 属性可以具有以下值:
none:不跳过任何内容,并对所有文本内容应用文本装饰。
objects:跳过元素的整个边距框,例如图像或内联块。
spaces:跳过所有间距.
leading-spaces:与空格相同,仅跳过前导空格。
trailing-spaces:与空格相同,仅跳过尾随空格。
edges:边缘(例如文本的开头和结尾)稍微插入。相邻元素的下划线分开。
box-decoration:跳过框的边距、边框和填充区域上的文本装饰。
initial:将 text-decoration-skip 值设置为其默认值(无)。
inherit:从其父元素继承 text-decoration-skip 值。
unset:删除任何先前设置的 text-decoration-skip 值。
此属性仅在 Safari 上受支持,如下所示现在。
这是一个例子:
<html>
<head>
</head>
<body>
<h2>Text Decoration Skip</h2>
<p style="font-size:3em; text-decoration: underline solid red 5px; text-decoration-skip: edges;">观察线条的边缘。</p>
<p style="font-size:3em; text-decoration: underline solid green 5px; text-decoration-skip: spaces;">其文本装饰跳过空格。</p>
</body>
</html>
CSS 文本 - text-decoration-skip-link
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-transform 属性用于通过以各种方式转换文本来更改文本的外观。它可用于将文本转换为大写、小写、将每个单词的第一个字母大写,甚至将所有字母大写。
text-transform 属性可以具有以下值之一:
lowercase:将所有文本转换为小写。
uppercase:将所有文本转换为大写。
capitalize:将每个单词的第一个字符大写。
none:不应用文本转换。
full-width:将所有字符转换为全角变体。
full-size-kana:将所有小假名字符转换为全角假名字符。这专门用于 <ruby> 注释文本。
initial:将文本转换值设置为其默认值(无)。
inherit:从其父元素继承文本转换值。
unset:删除任何先前设置的文本转换值。
需要注意的是,文本转换会影响文本的视觉呈现,而不改变实际的 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>
CSS 文本 - 文本强调
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>文本强调</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 还提供了一个属性来设置文本缩进,即 text-indent。可以将以下值传递给此属性:
length:任何特定长度。默认值为 0。
百分比 (%):传递的值与父元素宽度的百分比有关。
each-line:影响文本块的第一行以及强制换行后的每一行。
hanging:缩进被反转,除了第一行。
initial:将文本缩进设置为其默认值。
inherit:允许继承其父元素的 text-indent 值。
注意:目前,不支持 every-line 和hanging 值任何浏览器。
这是一个示例:
<html>
<head>
</head>
<body>
<h2>Text indentation</h2>
<p style="text-indent: 2cm;">文本缩进 2 厘米。</p>
<p style="text-indent: 2in;">文本缩进 2 英寸。</p>
<p style="text-indent: 20%;">文本缩进 20%。</p>
</body>
</html>
CSS 文本 - 字母间距
调整文本中字母之间的间距,会影响网页的可读性和整体美观性。
属性 letter-spacing 用于调整文本字母之间的间距。字母之间的空格可以增加或减少。
以下是该属性可能具有的值:
normal:默认值,表示字母之间的正常间距。
length:任何特定长度。
initial:设置letter-spacing 为其默认值。
inherit:允许从其父元素继承 letter-spacing 值。
注意:字母之间的实际间距可能会有所不同,具体取决于所使用的字体。
下面是一个示例:
<html>
<head>
</head>
<body>
<h2>字母间距</h2>
<p style="letter-spacing: normal;">字母间距正常。</p>
<p style="letter-spacing: 5px;">字母间距增加。</p>
<p style="letter-spacing: -1px;">字母间距减小。</p>
</body>
</html>
CSS Text - Word Spacing
CSS 提供了调整一段文本中单词间距的属性,就像 letter-spacing。调整单词间距的属性是 word-spacing。
该属性可以采用以下值:
normal:默认值,表示单词之间的正常间距。
length:任何特定长度。
initial:将字间距设置为其默认值。
inherit:允许从其父元素继承字间距值。
这里是一个例子:
<html>
<head>
</head>
<body>
<h2>字间距</h2>
<p style="word-spacing: normal;">字间距正常。</p>
<p style="word-spacing: 15pt;">字间距增加。</p>
<p style="word-spacing: -1px;">字间距减小。</p>
</body>
</html>
CSS 文本 - 空白
在文本中,空白是指任何空白区域或不显示可见符号或对文本含义产生任何影响的字符。
以下是一些可能会遇到空格的情况:
前导空格是出现在行的第一个可见字符之前的空格,而尾随空格则出现最后一个可见字符之后。
空白,通常采用换行符或段落符的形式。
空白经常用于缩进,特别是在编程语言中或编写结构化文本时。
可以使用不间断的空白字符,例如 HTML 实体 nbsp ( ) .
文本中的连续空格被视为单个空格。例如,多次按空格键。
空白的不同值如下:
normal:默认值,其中空格序列被折叠,文本在达到可用宽度时换行到下一行。
nowrap:空格被折叠,并且文本不会换行到下一行。它在同一行上继续,溢出可用宽度。
pre:保留 HTML 代码中的空白。换行符和多个空格按原样显示。
pre-wrap换行:保留 HTML 代码中的换行符和空格。
pre-line:折叠空格,但保留换行符。文本在达到可用宽度时换行。
break-spaces:折叠空白序列,但保留换行和换行机会。这是一个实验值,可能并非所有浏览器都支持。
initial:将该值设置为默认值,这是正常现象。
inherit:从其父元素继承值。
这些值可以与其他 CSS 属性组合,例如作为溢出和文本溢出,以控制空白的行为。
这是一个示例:
<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 文本 - 空白折叠
white-space-collapse 属性检查如何折叠元素内的空白。
white-space属性是white-space-collapse和text-wrap属性的简写。
white-space-collapse的不同值如下:
collapse:折叠空白序列。
preserve:保留空白序列和分段符字符.
preserve-breaks:折叠空白序列并保留分段符字符。
preserve-spaces :保留空白序列,并将分段符和制表符转换为空格。
break-spaces:与“preserve”类似。连续的空格、制表符和换行符将折叠成一个空格,但单个空格将保持原样。
white-space-collapse 属性目前浏览器已部分支持,因为它仍处于实验模式。
CSS 文本 - 带阴影
text- Shadow 属性用于为文本添加阴影效果。它允许您指定color、offset、模糊半径和扩散- 阴影半径。
通过使用此属性,您可以创建各种文本效果,例如为文本提供 3D 或发光外观,或为文本添加强调和深度。
该属性指定 X 和 Y 偏移、模糊半径和颜色值的组合。没有强制规定值的固定顺序。它被指定为以逗号分隔的阴影值列表。
text-shadow 属性接受以下值:
<color>:
设置阴影的颜色。
可选。
可以在偏移值之前或之后指定。
可以指定任何颜色值,例如名称、十六进制或 RGB 值。
<offset-x><offset-y>:
任意长度值,指定 x 和 y 值。
x 值表示阴影距文本的水平距离。
y 值表示阴影与文本的垂直距离。
如果 x 和 y 值等于 0,则阴影出现在文本后面。
<blur-radius>
任意长度value,指定模糊半径的值。
它是可选的。
要使模糊看起来更大,您可以需要提供更高的值。
如果没有传递值,则视为0。
示例
下面是一个示例:
<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 文本 - 换行
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 文本 - word-break
CSS 中的 word-break 属性用于指定在大小写情况下应如何对单词进行分词或换行它们超出了元素的可用宽度。它确定浏览器是否应该允许单词在任何时候断开,或者是否应该将它们保留在一起。
以下是该属性可以具有的值:
normal:使用默认换行规则。
break-all:在任意两个字符之间应用分词,以防止溢出。
keep-all:中文、日文和韩文 (CJK) 文本不使用分词符;对于其他语言或非 CJK 文本行为与正常文本行为相同。
break-word:这与溢出换行相同:任何地方,即在任何地方断字词被应用。但这个值已被弃用。
下面是一个示例:
<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>
CSS 文本 - 相关属性
以下是样式文本的 CSS 属性列表:
属性 | 描述 |
---|---|
color | 设置文本的颜色。 |
text-align | 设置文本对齐方式。 |
text-align-last | 设置文本块最后一行的对齐方式。 |
vertical-align | 设置文本的垂直对齐方式。 |
direction | 设置文本的方向。 |
text-indent | 设置文本第一行的缩进。 |
letter-spacing | 指定单词字母之间的间距。 |
word-spacing | 指定文本块中单词之间的间距。 |
white-space | 控制元素文本内的空白流动。 |
text-decoration | 用于设置文本装饰的简写属性。 |
text-transform | 将文本转换为大写、小写或大写。 |
text-emphasis | 对文本应用强调标记。 |
text-shadow | 为文本添加阴影。 |
line- break | 控制如何设置换行规则。 |
word- break | 控制如何设置断词规则。 |
text-effects | 为文本添加特殊视觉效果。 |
text-combine-upright | 将多个印刷字符单元组合成单个印刷字符单元的空间。 |
text-orientation | 设置一行中文本字符的方向。 |
text-underline-offset | 为文本添加特殊视觉效果。 |
text-overflow | 控制如何向用户显示隐藏的溢出内容。 |