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
顏色屬性被用來設(shè)置文字的顏色。
顏色是通過CSS最經(jīng)常的指定：
十六進(jìn)制值 - 如"＃FF0000"
一個(gè)RGB值 - "RGB（255,0,0）"
顏色的名稱 - 如"紅"
參閱 CSS 顏色值 查看完整的顏色值。
一個(gè)網(wǎng)頁的背景顏色是指在主體內(nèi)的選擇：
實(shí)例
<!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>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
對于W3C標(biāo)準(zhǔn)的CSS：如果你定義了顏色屬性，你還必須定義背景色屬性。
文本的對齊方式
文本排列屬性是用來設(shè)置文本的水平對齊方式。
文本可居中或?qū)R到左或右,兩端對齊.
當(dāng)text-align設(shè)置為"justify"，每一行被展開為寬度相等，左，右外邊距是對齊（如雜志和報(bào)紙）。
實(shí)例
<!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 實(shí)例</h1>
<p class="date">2015 年 3 月 14 號</p>
<p class="main">“當(dāng)我年輕的時(shí)候，我夢想改變這個(gè)世界；當(dāng)我成熟以后，我發(fā)現(xiàn)我不能夠改變這個(gè)世界，我將目光縮短了些，決定只改變我的國家；當(dāng)我進(jìn)入暮年以后，我發(fā)現(xiàn)我不能夠改變我們的國家，我的最后愿望僅僅是改變一下我的家庭，但是，這也不可能。當(dāng)我現(xiàn)在躺在床上，行將就木時(shí)，我突然意識到：如果一開始我僅僅去改變我自己，然后，我可能改變我的家庭；在家人的幫助和鼓勵(lì)下，我可能為國家做一些事情；然后，誰知道呢?我甚至可能改變這個(gè)世界。”</p>
<p><b>注意：</b> 重置瀏覽器窗口大小查看 "justify" 是如何工作的。</p>
</body>
</html>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
文本修飾
text-decoration 屬性用來設(shè)置或刪除文本的裝飾。
從設(shè)計(jì)的角度看 text-decoration屬性主要是用來刪除鏈接的下劃線：
實(shí)例
<!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>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
也可以這樣裝飾文字：
實(shí)例
<!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>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
我們不建議強(qiáng)調(diào)指出不是鏈接的文本，因?yàn)檫@常?；煜脩?。
文本轉(zhuǎn)換
文本轉(zhuǎn)換屬性是用來指定在一個(gè)文本中的大寫和小寫字母。
可用于所有字句變成大寫或小寫字母，或每個(gè)單詞的首字母大寫。
實(shí)例
<!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>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
文本縮進(jìn)
文本縮進(jìn)屬性是用來指定文本的第一行的縮進(jìn)。
實(shí)例
<!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>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
更多實(shí)例
指定字符之間的空間
這個(gè)例子演示了如何增加或減少字符之間的空間。
實(shí)例
<!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>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
指定行與行之間的空間
這個(gè)例子演示了如何指定在一個(gè)段落中行之間的空間
實(shí)例
<!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>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
設(shè)置元素的文本方向
這個(gè)例子演示了如何改變元素的文本方向。
實(shí)例
<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>一些文本。 默認(rèn)書寫方向</div>
<div class="ex1">一些文本。從右到左的書寫方向。</div>
</body>
</html>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
增加單詞之間的空白空間
這個(gè)例子演示了如何增加一個(gè)段落中的單詞之間的空白空間。
實(shí)例
<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>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
在元素內(nèi)禁用文字換行
這個(gè)例子演示了如何禁用一個(gè)元素內(nèi)的文字換行。
實(shí)例
<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>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
垂直對齊圖像
這個(gè)例子演示了如何設(shè)置文本的垂直對齊圖像。
實(shí)例
<!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>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
添加文本陰影
這個(gè)例子演示了如何設(shè)置文本陰影。
實(shí)例
<!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>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
所有CSS文本屬性。
| 屬性 | 描述 |
|---|---|
| color | 設(shè)置文本顏色 |
| direction | 設(shè)置文本方向。 |
| letter-spacing | 設(shè)置字符間距 |
| line-height | 設(shè)置行高 |
| text-align | 對齊元素中的文本 |
| text-decoration | 向文本添加修飾 |
| text-indent | 縮進(jìn)元素中文本的首行 |
| text-shadow | 設(shè)置文本陰影 |
| text-transform | 控制元素中的字母 |
| unicode-bidi | 設(shè)置或返回文本是否被重寫 |
| vertical-align | 設(shè)置元素的垂直對齊 |
| white-space | 設(shè)置元素中空白的處理方式 |
| word-spacing | 設(shè)置字間距 |