本章教您如何使用CSS屬性操作文本。可以設置元素的以下文本屬性−
color屬性用於設置文本的顏色。
方向屬性用於設置文本方向。
字母間距屬性用於在組成單詞的字母之間添加或減去空格。
單詞間距屬性用於在句子的單詞之間添加或減去空格。
文本縮進屬性用於縮進段落的文本。
文本對齊屬性用於對齊文檔的文本。
文本裝飾屬性用於下劃線、上劃線和刪除線文本。
文本轉換屬性用於將文本大寫或將文本轉換爲大寫或小寫字母。
空白屬性用於控制文本的流動和格式。
文本陰影屬性用於設置文本周圍的文本陰影。
Set the Text Color
下面的示例演示如何設置文本顏色。可能的值可以是任何有效格式的任何顏色名稱。
<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
下面的示例演示如何設置單詞之間的空格。可能的值是normal或指定空格的數字。
<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
下面的示例演示如何對齊文本。可能的值爲左、右、中、對正。
<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
下面的示例演示如何裝飾文本。可能的值有無、下劃線、上劃線、直線穿過、閃爍。
<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
下面的示例演示如何設置文本的大小寫。可能的值爲無、大寫、大寫、小寫。
<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
下面的示例演示如何處理元素中的空白。可能的值爲正常值、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>
它將產生以下結果&負;