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,则与left相同;如果方向为RTL,则与right相同。
-
end : 如果方向为LTR,则与right相同;如果方向为RTL,则与left相同。
-
left : 与左边距对齐。
-
right : 与右边距对齐。
-
center : 居中对齐。
-
justify : 两边对齐。
-
justify-all : 与justify相同,同时使最后一行也对齐。
-
match-parent : 类似于inherit,从父元素的值中获取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 属性可以有以下值之一:
- baseline :元素的基线与其父元素的基线对齐。
-
sub :元素的基线降低至适当的下标文字位置。
-
super :元素的基线提升至适当的上标文字位置。
-
top :元素框的顶部与行框的顶部对齐(在内联内容的上下文中)或表格中单元格的顶部对齐(在表格的上下文中)。
-
text-top :元素框的顶部与该行中最高的内联框的顶部对齐。
-
middle :元素的基线与父元素的基线加上父元素字体x-height的一半的点对齐。
-
bottom :元素框的底部与行框的底部对齐(在内联内容的上下文中)或表格中单元格的底部对齐(在表格的上下文中)。
-
text-bottom :元素框的底部与该行中最低的内联框的底部对齐。
-
percentage :元素的基线根据属性line-height的给定百分比值上下调整。
-
length :元素的基线根据给定的长度值上下调整。此属性允许使用负数长度值。此属性的值为0时与基线值相同。
示例
这是一个示例。您可以尝试使用不同的vertical-align值来测试此示例:
<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 ,用于控制 双向算法 ,在同一段落中出现具有不同书写方向的字符时如何显示。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>
示例
让我们看一个使用< b >unicode-bidi< /b >
的示例:
<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 :不跳过任何内容,文本装饰应用于所有文本内容。
-
objects :跳过元素的整个外边距框,比如图片或inline-block元素。
-
spaces :跳过所有空格。
-
leading-spaces :和spaces一样,只跳过前导空格。
-
trailing-spaces :和spaces一样,只跳过尾随空格。
-
edges :在文本的开头和结尾略微缩进,相邻元素具有独立的下划线。
-
box-decoration :跳过盒子的外边距、边框和内边距上的文本装饰。
-
initial :将text-decoration-skip的值设置为其默认值(none)。
-
inherit :从父元素继承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 – 文本转换
文本转换(text-transform)属性用于通过各种方式对文本进行转换以改变其外观。它可以将文本转换为大写、小写、将每个单词的首字母大写,甚至将所有字母都大写。
text-transform属性可以具有以下值:
- lowercase :将所有文本转换为小写。
-
uppercase :将所有文本转换为大写。
-
capitalize :将每个单词的第一个字符大写。
-
none :不应用任何文本转换。
-
full-width :将所有字符转换为其全角变体。
-
full-size-kana :将所有小假名字符转换为全尺寸假名字符。这是专门用于注释文本的。
-
initial :将text-transform的值设置为其默认值(none)。
-
inherit :从其父元素继承text-transform的值。
-
unset :移除先前设置的text-transform的任何值。
重要的是要注意,text-transform影响文本的视觉呈现,而不会改变实际的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 : 不设置强调标记。
-
filled : 用实心颜色填充元素,这是默认值。
-
open : 设置形状为空心。
-
dot : 标记显示为小圆点,可以是空心或实心。
-
circle : 标记显示为大圆圈,可以是空心或实心。默认形状在水平书写中使用。
-
double-circle : 标记显示为双重圆圈,可以是空心或实心。
-
triangle : 标记显示为三角形,可以是空心或实心。
-
sesame : 标记显示为芝麻(~),可以是空心或实心。默认形状在垂直书写中使用。
-
< string>
: 标记显示为传递的字符串值。 -
<color>
: 设置标记的颜色。
示例
这是一个示例:
<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),ems(em)等}。默认值为0。
-
percentage (%) : 传递的值与父元素的宽度的百分比相关。
-
each-line : 影响一个文本块的第一行以及每个强制换行后的每一行。
-
hanging : 缩进是倒置的,除了第一行之外。
-
initial : 将文本缩进设置为其默认值。
-
inherit : 允许从其父元素继承text-indent的值。
注意 :目前,值 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 用于调整文本字母之间的间距。可以增加或减小字母之间的间距。
以下是此属性可能具有的值:
- normal :默认值,表示字母之间的正常间距。
-
length :任何特定长度 {像素 (px),点 (pt),ems (em),百分比 (%)}。
-
initial :将字母间距设置为默认值。
-
inherit :允许从父元素继承字母间距值。
实际的字母间距可能因使用的字体而不同。
示例
这是一个示例:
<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 。
该属性可以取以下任意值:
- normal :默认值,表示单词间的正常间距。
-
length :任何特定长度(像素(px)、点(pt)、ems(em)或百分比(%))。
-
initial :将单词间距设置为其默认值。
-
inherit :允许从父元素继承单词间距的值。
示例
这里是一个例子:
<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实体’nspb’( ),可以使用。
-
文本中连续的空白被视为单个空格。例如,多次按空格键。
CSS提供了 white-space(空白) 属性来设置文本空白。在 white-space 的不同值如下:
- normal(正常) :默认值,空白序列被折叠,当文本达到可用宽度时,文本换行到下一行。
-
nowrap(不换行) :空白被折叠,文本不换行。它在同一行上继续,超出可用宽度。
-
pre(原样保留) :完全保留HTML代码中的空白。换行和多个空白按原样显示。
-
pre-wrap(保留换行) :保留换行和空白,与HTML代码中的一样。
-
pre-line(保留换行,折叠空白) :折叠空白,但保留换行。当文本达到可用宽度时,文本换行。
-
break-spaces(折叠空白,保留换行和换行机会) :折叠空白序列,但保留换行和换行机会。这是一个实验性的值,可能不被所有浏览器支持。
-
initial(初始值) :将值设置为默认值normal。
-
inherit(继承值) :从父元素继承该值。
这些值可以与其他CSS属性(如 overflow(溢出) 和 text-overflow(文本溢出) )结合使用,以控制空白的行为。
示例
这是一个例子:
<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 属性用于给文本添加阴影效果。它允许你指定阴影的颜色、偏移量、模糊半径和扩散半径。以下是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 属性接受以下值:
<color>
:- 设置阴影的颜色。
-
可选项。
-
可以在偏移值之前或之后指定。
-
可以指定任何颜色值,例如名称,HEX或RGB值。
-
<offset-x><offset-y>
:- 任何长度值,用于指定x和y值。
-
x值表示阴影相对于文本的水平距离。
-
y值表示阴影相对于文本的垂直距离。
-
如果x和y的值都为0,则阴影出现在文本后面。
-
<blur-radius>
- 任何长度值,用于指定模糊半径的值。
-
可选项。
-
要使模糊效果变大,需要提供更高的值。
-
如果未传递值,则默认为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 :应用默认换行规则。
-
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 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中, 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 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>