本章教您如何使用CSS属性操作文本。
color : 设置文本的颜色。
direction : 设置文本方向。
letter-spacing : 设置字符间距。
word-spacing : 设置字间距。
text-indent : 文本首行缩进。
text-align : 文本对齐方式。
text-decoration : 文本下划线(underline)，上划线(overline)和删除线(strikethrough)。
text-transform : 控制元素中的字母。
white-space : 设置元素中空白的处理方式。
text-shadow : 设置文本阴影。
字体颜色
设置文本颜色，下面的示例演示如何设置文本颜色。
<html> <head> </head><body> <p style="color:red;"> This text will be written in red. </p> </body> </html>
它将产生以下输出-
文本方向
下面的示例演示如何设置文本的方向。可能的值为 ltr或rtl 。
<html> <head> </head><body> <p style="direction:rtl;"> This text will be rendered from right to left </p> </body> </html>
它将产生以下输出-
字符间距
下面的示例演示如何设置字符之间的间距。可能的值为正常值(normal)或数字(number)指定空格。
<html> <head> </head><body> <p style="letter-spacing:5px;"> This text is having space between letters. </p> </body> </html>
它将产生以下输出-
字间距
下面的示例演示如何设置字间距。可能的值为正常值(normal)或数字(number)指定空格。
<html> <head> </head><body> <p style="word-spacing:5px;"> This text is having space between words. </p> </body> </html>
这将产生以下输出-
文字缩进
下面的示例演示如何首行缩进的段落。可能的值为％或指定缩进空间的数字。
<html> <head> </head><body> <p style="text-indent:1cm;"> 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 style="text-align:right;">
This will be right aligned.
</p>
</span><span class="tag"><p</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">text</span><span class="pun">-</span><span class="pln">align</span><span class="pun">:</span><span class="pln">center</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln">
This will be center aligned.
</span><span class="tag"></p></span><span class="pln">
</span><span class="tag"><p</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">text</span><span class="pun">-</span><span class="pln">align</span><span class="pun">:</span><span class="pln">left</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln">
This will be left aligned.
</span><span class="tag"></p></span><span class="pln">
</body>
</html>
这将产生以下输出-
文本装饰
下面的示例演示如何装饰文本。可能的值为none，underline，overline，line-through，blink。
<html>
<head>
</head>
<body>
<p style="text-decoration:underline;">
This will be underlined
</p>
</span><span class="tag"><p</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">text</span><span class="pun">-</span><span class="pln">decoration</span><span class="pun">:</span><span class="pln">line</span><span class="pun">-</span><span class="pln">through</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln">
This will be striked through.
</span><span class="tag"></p></span><span class="pln">
</span><span class="tag"><p</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">text</span><span class="pun">-</span><span class="pln">decoration</span><span class="pun">:</span><span class="pln">overline</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln">
This will have a over line.
</span><span class="tag"></p></span><span class="pln">
</span><span class="tag"><p</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">text</span><span class="pun">-</span><span class="pln">decoration</span><span class="pun">:</span><span class="pln">blink</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln">
This text will have blinking effect
</span><span class="tag"></p></span><span class="pln">
</body>
</html>
这将产生以下输出-
文本大小
下面的示例演示如何设置文本的大小写。可能的值是 none(无)，capitalize(首字母大小)，uppercase(大写)，lowerase(小写)。
<html>
<head>
</head>
<body>
<p style="text-transform:capitalize;">
This will be capitalized
</p>
</span><span class="tag"><p</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">text</span><span class="pun">-</span><span class="pln">transform</span><span class="pun">:</span><span class="pln">uppercase</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln">
This will be in uppercase
</span><span class="tag"></p></span><span class="pln">
</span><span class="tag"><p</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">text</span><span class="pun">-</span><span class="pln">transform</span><span class="pun">:</span><span class="pln">lowercase</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln">
This will be in lowercase
</span><span class="tag"></p></span><span class="pln">
</body>
</html>
这将产生以下输出-
文本字间空白
下面的示例演示如何处理元素内的空白。可能的值为 normal，pre，nowrap 。
<html> <head> </head><body> <p style="white-space:pre;"> 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 style="text-shadow:4px 4px 8px blue;"> If your browser supports the CSS text-shadow property, this text will have a blue shadow. </p> </body> </html>
它将产生以下输出-
