CSS屬性之文字（Text）屬性 常用14個
阿新 • • 發佈：2018-12-31
color屬性
color屬性設定文字字型顏色。 顏色值有三種寫法：- 直接寫顏色名，如：red
- 十六進位制，如：#d2d2d2
- rgb顏色，如：rgb(255,0,255),注：數值最大為255，最小為0，即rgb（0,0,0）到rgb(255,255,255)。
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"> <title>文字屬性</title> <style> div#div1 { color: red; } div#div2 { color: #d2d2d2; } div#div3 { color: rgb(255,0,255); } </style> </head> <body> <div id="div1"> Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </div> <div id="div2"> Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </div> <div id="div3"> Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </div> </body> </html>
效果如下：
direction屬性
direction屬性指定文字方向/書寫方向。 屬性值：- "ltr"--文字方向從左到右顯示。
- "rtl"--文字方向從右到左顯示。
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"> <title>文字屬性</title> <style> #p2 { direction: ltr; } #p3 { direction: rtl; } </style> </head> <body> <p id="p1">文字預設方向。</p> <p id="p2">文字從左到右顯示。這是設定的lrt值。！</p> <p id="p3">文字從右到左顯示。這是設定的rtl值。！</p> </body> </html>
效果如下：
letter-spacing屬性
letter-spacing屬性增加或減少字元間的空白（字元間距）。letter(字母，文字)，spacing(間距，距離)。 屬性值：- 可為正值，意為增加字元間距。
- 可為負值，意為減少字元間距。
- 當值為0時，表示字元間距不變，為預設。
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"> <title>文字屬性</title> <style> #p1 { letter-spacing: 0px; } #p2 { letter-spacing: 3px; } #p3 { letter-spacing: -5px; } </style> </head> <body> <p id="p1">文字預設方向。</p> <p id="p2">文字從左到右顯示。</p> <p id="p3">文字從右到左顯示。</p> </body> </html>
效果如下：
word-spacing屬性
word-spacing屬性增加或減少單詞間的間距。
屬性值同letter-spacing一樣。
line-height屬性
line-height屬性設定以百分比計的行高。大多數瀏覽器的預設行高間距為110%~120%。 屬性值：- number,設定數字，此數字與當前字型尺寸相乘來設定行高。
- 百分比，設定為當前字型尺寸的百分比行高間距。
- length,設定為固定的行高間距。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>文字屬性</title>
<style>
#p2 {
line-height: 60%;
}
#p3 {
line-height: 2;
}
</style>
</head>
<body>
<p id="p1">
這是預設的行高。<br>
這是預設的行高。<br>
大多數瀏覽器的預設行高是110%~120%。<br>
</p>
<p id="p2">
這是減少兩行間的的行高。<br>
這是減少兩行間的的行高。<br>
這是減少兩行間的的行高。<br>
</p>
<p id="p3">
這是增加兩行間的行高。<br>
這是增加兩行間的行高。<br>
這是增加兩行間的行高。<br>
</p>
</body>
</html>效果如下：
text-align屬性
text-align屬性設定文字水平方向上的對齊方式。 屬性值：- left,文字水平方向上左對齊，注：瀏覽器預設的方向。
- right,文字水平方向上右對齊。
- justify,文字水平方向上兩端對齊。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>文字屬性</title>
<style>
#p1 {
text-align: left /* 左對齊 */
}
#p2 {
text-align: right; /* 右對齊 */
}
#p3 {
text-align: justify; /* 兩端對齊 */
}
</style>
</head>
<body>
<p id="p1">
這是預設的行高。<br>
</p>
<p id="p2">
這是減少兩行間的的行高。<br>
</p>
<p id="p3">
這是增加兩行間的行高。<br>
</p>
</body>
</html>效果如下：
vertical-align屬性
vertical-align屬性設定文字在垂直方向上的對齊方式。 常用屬性值有：- top,元素的頂端與行中最高元素的頂端對齊。
- middle,把元素放在父元素的中部。
- bottom，元素的頂端與內中最低元素的頂端對齊。
- text-top，把元素的頂端與父元素字型的頂端對齊。
- text-tottom,把元素的低端與父元素字型的低端對齊。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>文字屬性</title>
<style>
#p1 img {
vertical-align: text-top ;
}
#p2 img {
vertical-align: text-bottom;
}
#p3 img {
vertical-align: top;
}
</style>
</head>
<body>
<p id="p1">
這是
<img src="1.gif" alt="文字替代">
預設的行高。
</p>
<p id="p2">
這是
<img src="1.gif" alt="文字替代">
減少兩行間的的行高。
</p>
<p id="p3">
這是
<img src="1.gif" alt="文字替代">
增加兩行間的行高。
</p>
</body>
</html>效果如下：
text-decoration屬性
text-decoration屬性新增到文字的修飾。（一般用於新增下劃線，或者上劃線，常用於a元素，一般取消a元素的下劃線。） 屬性值 ：- none,預設值，沒有修飾的，注：此值一般用於取消a元素的下劃線。
- overline，為文字頭部新增一條線。
- underline,為文字低部新增一條線。（下劃線）
- line-through,定義穿過文字的一條線。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>文字屬性</title>
<style>
#p1 {
text-decoration: line-through;
}
#p2 {
text-decoration: overline;
}
#p3 {
text-decoration: underline;
}
a {
text-decoration: none; /* 取消a元素的下劃線 */
}
</style>
</head>
<body>
<p id="p1">
定義穿過文字的一條線。
</p>
<p id="p2">
為文字頂部新增一條線。
</p>
<p id="p3">
為文字低部新增下劃線。
</p>
<a href="http://www.baidu.com" target="_blank">百度</a>
</body>
</html>效果如下：
text-indent屬性
text-indent屬性設定首行文字的縮排。 屬性值：- length,固定縮排，預設值：0。
- ?%,按父元素寬度的百分比縮排。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>文字屬性</title>
<style>
p {
text-indent: 50px;
}
</style>
</head>
<body>
<p id="p1">
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>效果如下：
text-transform屬性
text-transform屬性改變文字的大小寫（字母）。 屬性值：- none,預設。
- capitalize,每個單詞的首字母為大寫。
- uppercase，文字全為大寫。
- lowercase，文字全為小寫。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>文字屬性</title>
<style>
#p1 {
text-transform: capitalize;
}
#p2 {
text-transform: uppercase;
}
#p3 {
text-transform: lowercase;
}
</style>
</head>
<body>
<p id="p1">
This is some text.
</p>
<p id="p2">
This is some text.
</p>
<p id="p3">
This is some text.
</p>
</body>
</html>效果如下：
white-space屬性
white-space屬性規定文字中的空格符如何處理，以及是否換行。 屬性值：- pre,與<pre>標籤一樣，保留空格符。
- nowrap，文字不會換行，繼續在同一行上顯示，直到<br>為止。
- pre-wrap，保留空格符序列，正常換行。
- pre-line，合併空格符序列，正常換行。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>文字屬性</title>
<style>
#p1 {
white-space: nowrap;
}
#p2 {
white-space: pre-wrap;
}
#p3 {
white-space: pre-line;
}
</style>
</head>
<body>
<p id="p1">
This is some text.
This is some text.
This is some text.
</p>
<p id="p2">
This is some text.
This is some text.
This is some text.
</p>
<p id="p3">
This is some text.
This is some text.
This is some text.
</p>
</body>
</html>效果如下：
text-overflow屬性
text-overflow規定當文字溢位包含它的元素時，該如何處理。 屬性值：- clip,將溢位的部分裁剪掉。
- ellipsis,將溢位的部分用省略號代替。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>文字屬性</title>
<style>
p {
width: 80px;
border: 1px solid #000;
white-space: nowrap; /* 設定不能換行 */
overflow: hidden; /* 當溢位時，不顯示溢位的部分 */
}
#p2 {
text-overflow: clip;
}
#p3 {
text-overflow: ellipsis;
}
</style>
</head>
<body>
<p id="p1"> <!-- 當沒有設定該屬性時 -->
This is some text.This is some text.This is some text.
</p>
<p id="p2"> <!-- 當屬性值為clip時，會裁剪掉溢位的部分 -->
This is some text.This is some text.This is some text.
</p>
<p id="p3"> <!-- 當屬性值為ellipsis時，用省略號代替溢位的部分 -->
This is some text.This is some text.This is some text.
</p>
</body>
</html>注：要設定屬性"white-space: onwrap;" 和"overflow: hidden;" 效果如下：
text-shadow屬性
text-shadow屬性為文字新增陰影效果。 寫法：text-shadow: x y c color; 屬性值分別是：水平陰影位置、垂直方向陰影位置、模糊距離（模糊程度）、陰影的顏色。<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>文字屬性</title>
<style>
p {
text-shadow: 5px 5px 1px #ff0000;
}
</style>
</head>
<body>
<p id="p1">
This is some text.This is some text.This is some text.
</p>
<p id="p2">
This is some text.This is some text.This is some text.
</p>
<p id="p3">
This is some text.This is some text.This is some text.
</p>
</body>
</html>效果如下：
word-wrap屬性
word-wrap屬性允許長的內容自動換行。 屬性值：- normal,只在允許的斷點處換行。
- break-word,允許在長單詞或URL內部換行。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>文字屬性</title>
<style>
p {
width: 110px;
border: 1px solid #000;
}
#p3 {
word-wrap: break-word; /* 該屬性允許在長單詞和URL內部換行 */
}
</style>
</head>
<body>
<p id="p1">
Thisrrqrqwrtyfgf is some text.This is some text.This is some text.<a href="http://www.baidu.com">http://www.baidu.com</a>
</p>
<p id="p3">
Thisrrqrqwrtyfgf is some text.This is some text.This is some text.<a href="http://www.baidu.com">http://www.baidu.com</a>
</p>
</body>
</html>效果如下：
