CSS - Text
本章将教您如何使用CSS属性操作文本。 您可以设置元素的以下文本属性 -
color属性用于设置文本的颜色。
direction属性用于设置文本方向。
letter-spacing属性用于在组成单词的字母之间添加或减去空格。
word-spacing属性用于在句子的单词之间添加或减去空格。
text-indent属性用于缩进段落的文本。
text-align属性用于对齐文档的文本。
text-decoration属性用于下划线，上划线和删除文本。
text-transform属性用于大写文本或将文本转换为大写或小写字母。
white-space属性用于控制文本的流和格式。
text-shadow属性用于设置文本周围的文本阴影。
设置文本颜色
以下示例演示如何设置文本颜色。 可能的值可以是任何有效格式的任何颜色名称。
<html>
<head>
</head>
<body>
<p <b class="notranslate">style = "color:red;"</b>>
This text will be written in red.
</p>
</body>
</html>
它会产生以下结果 -
新页面打开设置文本方向
以下示例演示如何设置文本的方向。 可能的值是ltr or rtl 。
<html>
<head>
</head>
<body>
<p <b class="notranslate">style = "direction:rtl;"</b>>
This text will be rendered from right to left
</p>
</body>
</html>
它会产生以下结果 -
新页面打开设置字符之间的空格
以下示例演示如何设置字符之间的空格。 可能的值是normal or a number specifying space. 。
<html>
<head>
</head>
<body>
<p <b class="notranslate">style = "letter-spacing:5px;"</b>>
This text is having space between letters.
</p>
</body>
</html>
它会产生以下结果 -
新页面打开设置单词之间的空间
以下示例演示如何设置单词之间的空格。 可能的值是normal or a number specifying space 。
<html>
<head>
</head>
<body>
<p <b class="notranslate">style = "word-spacing:5px;"</b>>
This text is having space between words.
</p>
</body>
</html>
这将产生以下结果 -
新页面打开设置文本缩进
以下示例演示如何缩进段落的第一行。 可能的值为% or a number specifying indent space 。
<html>
<head>
</head>
<body>
<p <b class="notranslate">style = "text-indent:1cm;"</b>>
This text will have first line indented by 1cm and this line will remain at
its actual position this is done by CSS text-indent property.
</p>
</body>
</html>
它会产生以下结果 -
新页面打开设置文本对齐方式
以下示例演示如何对齐文本。 可能的值为left, right, center, justify 。
<html>
<head>
</head>
<body>
<p <b class="notranslate">style = "text-align:right;"</b>>
This will be right aligned.
</p>
<p <b class="notranslate">style = "text-align:center;"</b>>
This will be center aligned.
</p>
<p <b class="notranslate">style = "text-align:left;"</b>>
This will be left aligned.
</p>
</body>
</html>
这将产生以下结果 -
新页面打开装饰文本
以下示例演示如何装饰文本。 可能的值为none, underline, overline, line-through, blink 。
<html>
<head>
</head>
<body>
<p <b class="notranslate">style = "text-decoration:underline;"</b>>
This will be underlined
</p>
<p <b class="notranslate">style = "text-decoration:line-through;"</b>>
This will be striked through.
</p>
<p <b class="notranslate">style = "text-decoration:overline;"</b>>
This will have a over line.
</p>
<p <b class="notranslate">style = "text-decoration:blink;"</b>>
This text will have blinking effect
</p>
</body>
</html>
这将产生以下结果 -
新页面打开设置文本案例
以下示例演示如何设置文本的大小写。 可能的值为none, capitalize, uppercase, lowercase 。
<html>
<head>
</head>
<body>
<p <b class="notranslate">style = "text-transform:capitalize;"</b>>
This will be capitalized
</p>
<p <b class="notranslate">style = "text-transform:uppercase;"</b>>
This will be in uppercase
</p>
<p <b class="notranslate">style = "text-transform:lowercase;"</b>>
This will be in lowercase
</p>
</body>
</html>
这将产生以下结果 -
新页面打开在文本之间设置空格
以下示例演示如何处理元素内的空白。 可能的值是normal, pre, nowrap 。
<html>
<head>
</head>
<body>
<p <b class="notranslate">style = "white-space:pre;"</b>>
This text has a line break and the white-space pre setting
tells the browser to honor it just like the HTML pre tag.
</p>
</body>
</html>
这将产生以下结果 -
新页面打开设置文字阴影
以下示例演示如何在文本周围设置阴影。 所有浏览器可能都不支持此功能。
<html>
<head>
</head>
<body>
<p <b class="notranslate">style = "text-shadow:4px 4px 8px blue;"</b>>
If your browser supports the CSS text-shadow property,
this text will have a blue shadow.
</p>
</body>
</html>
它会产生以下结果 -
新页面打开