CSS教程

CSS - 文本

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

颜色属性用于设置文本的颜色.
方向属性用于设置文本方向.
letter-spacing 属性用于在组成单词的字母之间添加或减去空格.
单词间距属性用于在句子的单词之间添加或减去空格.
text-indent 属性用于缩进段落的文本.
text-align property用于对齐文档的文本.
text-decoration 属性用于下划线，上划线，和删除线文本.
text-transform 属性用于大写文本或将文本转换为大写或小写字母.
white-space 属性用于con控制文本的流程和格式.
text-shadow 属性用于设置文本周围的文本阴影./p>

设置文本颜色

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

<html>
   <head>
   </head>

   <body>
      <p style = "color:red;">
         This text will be written in red.
      </p>
   </body>
</html>

它将产生以下结果 :

Set the Text Direction

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

<html>
   <head>
   </head>

   <body>
      <p style = "direction:rtl;">
         This text will be rendered from right to left
      </p>
   </body>
</html>

Set the Space between Characters

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

<html>
   <head>
   </head>

   <body>
      <p style = "letter-spacing:5px;">
         This text is having space between letters.
      </p>
   </body>
</html>

Set the Space between Words

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

<html>
   <head>
   </head>

   <body>
      <p style = "word-spacing:5px;">
         This text is having space between words.
      </p>
   </body>
</html>

Set the Text Indent

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

<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>

Set the Text Alignment

以下示例演示如何对齐文本。可能的值为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>

Decorating the Text

以下示例演示如何装饰文本。可能的值为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>

Set the Text Cases

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

<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>

Set the White Space between Text

以下示例演示如何处理元素内的空白。可能的值是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>

Set the Text Shadow

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

<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>