CSS - 文本

本章教您如何使用CSS属性操作文本.您可以设置元素的以下文本属性 :

• 颜色属性用于设置文本的颜色.

• 方向属性用于设置文本方向.

• letter-spacing 属性用于在组成单词的字母之间添加或减去空格.

• 单词间距属性用于在句子的单词之间添加或减去空格.

• text-indent 属性用于缩进段落的文本.

• text-align property用于对齐文档的文本.

• text-decoration 属性用于下划线，上划线，和删除线文本.

• text-transform 属性用于大写文本或将文本转换为大写或小写字母.

• white-space 属性用于con控制文本的流程和格式.

• text-shadow 属性用于设置文本周围的文本阴影./p>

设置文本颜色

以下示例演示如何设置文本颜色.可能的值可以是任何有效格式的任何颜色名称.

                        This text will be written in red.      
   

它将产生以下结果 :

Set the Text Direction

以下示例演示如何设置文本的方向。 可能的值是ltr或rtl。

                        This text will be rendered from right to left      
   

Set the Space between Characters

以下示例演示如何设置字符之间的间距。 可能的值是正常的或指定空间的数字..

                        This text is having space between letters.      
   

Set the Space between Words

以下示例演示如何设置单词之间的空格。 可能的值是正常值或指定空间的数字。

                        This text is having space between words.      
   

Set the Text Indent

以下示例演示如何缩进段落的第一行。 可能的值为％或指定缩进空格的数字。

                        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.      
   

Set the Text Alignment

以下示例演示如何对齐文本。 可能的值为left，right，center，justify。

                        This will be right aligned.      
                     This will be center aligned.      
                     This will be left aligned.      
   

Decorating the Text

以下示例演示如何装饰文本。 可能的值为none，underline，overline，line-through，blink。

                        This will be underlined      
                     This will be striked through.      
                     This will have a over line.      
                     This text will have blinking effect      
   

Set the Text Cases

以下示例演示如何设置文本的大小写。 可能的值为none，capitalize，uppercase，lowercase。

                        This will be capitalized      
                     This will be in uppercase      
                     This will be in lowercase      
   

Set the White Space between Text

以下示例演示如何处理元素内的空白。 可能的值是normal，pre，nowrap。

                        This text has a line break and the white-space pre setting          tells the browser to honor it just like the HTML pre tag.      
   

Set the Text Shadow

以下示例演示如何在文本周围设置阴影。 所有浏览器可能都不支持此功能。

                        If your browser supports the CSS text-shadow property,          this text will have a  blue shadow.