CSS 在線手冊
/ CSS text（文本）
CSS text（文本）
CSS 文本格式
文本格式
This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from the "嘗試一下" link.
Text Color
顏色屬性被用來設置文字的顏色。
顏色是通過CSS最經(jīng)常的指定：
十六進制值 - 如"＃FF0000"
一個RGB值 - "RGB（255,0,0）"
顏色的名稱 - 如"紅"
參閱 CSS 顏色值 查看完整的顏色值。
一個網(wǎng)頁的背景顏色是指在主體內(nèi)的選擇：
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<p>This is an ordinary paragraph. Notice that this text is red. The default text-color for a page is defined in the body selector.</p>
<p class="ex">This is a paragraph with class="ex". This text is blue.</p>
</body>
</html>運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
對于W3C標準的CSS：如果你定義了顏色屬性，你還必須定義背景色屬性。
文本的對齊方式
文本排列屬性是用來設置文本的水平對齊方式。
文本可居中或?qū)R到左或右,兩端對齊.
當text-align設置為"justify"，每一行被展開為寬度相等，左，右外邊距是對齊（如雜志和報紙）。
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
</style>
</head>
<body>
<h1>CSS text-align 實例</h1>
<p class="date">2015 年 3 月 14 號</p>
<p class="main">“當我年輕的時候，我夢想改變這個世界；當我成熟以后，我發(fā)現(xiàn)我不能夠改變這個世界，我將目光縮短了些，決定只改變我的國家；當我進入暮年以后，我發(fā)現(xiàn)我不能夠改變我們的國家，我的最后愿望僅僅是改變一下我的家庭，但是，這也不可能。當我現(xiàn)在躺在床上，行將就木時，我突然意識到：如果一開始我僅僅去改變我自己，然后，我可能改變我的家庭；在家人的幫助和鼓勵下，我可能為國家做一些事情；然后，誰知道呢?我甚至可能改變這個世界?！?lt;/p>
<p><b>注意：</b> 重置瀏覽器窗口大小查看 "justify" 是如何工作的。</p>
</body>
</html>運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
文本修飾
text-decoration 屬性用來設置或刪除文本的裝飾。
從設計的角度看 text-decoration屬性主要是用來刪除鏈接的下劃線：
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
a {text-decoration:none;}
</style>
</head>
<body>
<p>鏈接到: <a href="http://miracleart.cn">php中文網(wǎng)</a></p>
</body>
</html>運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
也可以這樣裝飾文字：
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
</body>
</html>運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
我們不建議強調(diào)指出不是鏈接的文本，因為這常?；煜脩?。
文本轉(zhuǎn)換
文本轉(zhuǎn)換屬性是用來指定在一個文本中的大寫和小寫字母。
可用于所有字句變成大寫或小寫字母，或每個單詞的首字母大寫。
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
</style>
</head>
<body>
<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>
</body>
</html>運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
文本縮進
文本縮進屬性是用來指定文本的第一行的縮進。
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
p {text-indent:50px;}
</style>
</head>
<body>
<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>
</body>
</html>運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
更多實例
指定字符之間的空間
這個例子演示了如何增加或減少字符之間的空間。
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
h1 {letter-spacing:2px;}
h2 {letter-spacing:-3px;}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
</body>
</html>運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
指定行與行之間的空間
這個例子演示了如何指定在一個段落中行之間的空間
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
p.small {line-height:70%;}
p.big {line-height:200%;}
</style>
</head>
<body>
<p>
This is a paragraph with a standard line-height.<br>
This is a paragraph with a standard line-height.<br>
The default line height in most browsers is about 110% to 120%.<br>
</p>
<p class="small">
This is a paragraph with a smaller line-height.<br>
This is a paragraph with a smaller line-height.<br>
This is a paragraph with a smaller line-height.<br>
This is a paragraph with a smaller line-height.<br>
</p>
<p class="big">
This is a paragraph with a bigger line-height.<br>
This is a paragraph with a bigger line-height.<br>
This is a paragraph with a bigger line-height.<br>
This is a paragraph with a bigger line-height.<br>
</p>
</body>
</html>運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
設置元素的文本方向
這個例子演示了如何改變元素的文本方向。
實例
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style type="text/css">
div.ex1 {direction:rtl;}
</style>
</head>
<body>
<div>一些文本。 默認書寫方向</div>
<div class="ex1">一些文本。從右到左的書寫方向。</div>
</body>
</html>運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
增加單詞之間的空白空間
這個例子演示了如何增加一個段落中的單詞之間的空白空間。
實例
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style type="text/css">
p
{
word-spacing:30px;
}
</style>
</head>
<body>
<p>
This is some text. This is some text.
</p>
</body>
</html>運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
在元素內(nèi)禁用文字換行
這個例子演示了如何禁用一個元素內(nèi)的文字換行。
實例
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style type="text/css">
p
{
white-space:nowrap;
}
</style>
</head>
<body>
<p>
這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。
這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。
這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。
這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。
這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。
</p>
</body>
</html>運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
垂直對齊圖像
這個例子演示了如何設置文本的垂直對齊圖像。
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
img.top {vertical-align:text-top;}
img.bottom {vertical-align:text-bottom;}
</style>
</head>
<body>
<p>An <img src="https://img.php.cn/upload/article/000/000/015/5c67d9134b166854.png" alt="php中文網(wǎng)" width="80" height="50" /> image with a default alignment.</p>
<p>An <img class="top" src="https://img.php.cn/upload/article/000/000/015/5c67d9134b166854.png" alt="php中文網(wǎng)" width="80" height="50" /> image with a text-top alignment.</p>
<p>An <img class="bottom" src="https://img.php.cn/upload/article/000/000/015/5c67d9134b166854.png" alt="php中文網(wǎng)" width="80" height="50" /> image with a text-bottom alignment.</p>
</body>
</html>運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
添加文本陰影
這個例子演示了如何設置文本陰影。
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
h1 {text-shadow:2px 2px #FF0000;}
</style>
</head>
<body>
<h1>Text-shadow effect</h1>
<p><b>Note:</b> Internet Explorer 9 and earlier do not support the text-shadow property.</p>
</body>
</html>運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
所有CSS文本屬性。
| 屬性 | 描述 |
|---|---|
| color | 設置文本顏色 |
| direction | 設置文本方向。 |
| letter-spacing | 設置字符間距 |
| line-height | 設置行高 |
| text-align | 對齊元素中的文本 |
| text-decoration | 向文本添加修飾 |
| text-indent | 縮進元素中文本的首行 |
| text-shadow | 設置文本陰影 |
| text-transform | 控制元素中的字母 |
| unicode-bidi | 設置或返回文本是否被重寫 |
| vertical-align | 設置元素的垂直對齊 |
| white-space | 設置元素中空白的處理方式 |
| word-spacing | 設置字間距 |