本章教您如何使用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> <p style="text-align:center;"> This will be center aligned. </p> <p style="text-align:left;"> This will be left aligned. </p> </body> </html>
这将产生以下输出-
下面的示例演示如何装饰文本。可能的值为none,underline,overline,line-through,blink。
<html> <head> </head> <body> <p style="text-decoration:underline;"> This will be underlined </p> <p style="text-decoration:line-through;"> This will be striked through. </p> <p style="text-decoration:overline;"> This will have a over line. </p> <p style="text-decoration:blink;"> This text will have blinking effect </p> </body> </html>
这将产生以下输出-
下面的示例演示如何设置文本的大小写。可能的值是 none(无),capitalize(首字母大小),uppercase(大写),lowerase(小写)。
链接:https://www.learnfk.comhttps://www.learnfk.com/css/css-text.html
来源:LearnFk无涯教程网
<html> <head> </head> <body> <p style="text-transform:capitalize;"> This will be capitalized </p> <p style="text-transform:uppercase;"> This will be in uppercase </p> <p style="text-transform:lowercase;"> This will be in lowercase </p> </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>
它将产生以下输出-
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)