022_CSS文本
1. CSS文本屬性可定義文本的外觀。通過文本屬性, 您可以改變文本的顏色、字符間距, 對齊文本, 裝飾文本, 對文本進行縮進, 等等。
2. CSS文本屬性
3. 縮進文本
3.1. text-indent屬性規定文本塊中首行文本的縮進。
3.2. 允許使用負值。如果使用負值, 那么首行會被縮進到左邊。
3.3. 這個屬性最常見的用途是將段落的首行縮進, 下面的規則會使所有段落的首行縮進2em:
p {text-indent: 2em; }3.4. 一般來說, 可以為所有塊級元素應用text-indent, 但無法將該屬性應用于行內元素, 圖像之類的行內塊元素上也無法應用text-indent屬性。不過, 如果一個塊級元素(比如段落)的首行中有一個圖像, 它會隨該行的其余文本移動。
3.5. 默認值
3.6. 可能的值
3.7. 百分數, 如果元素本身設置寬度相對縮進元素本身的寬度, 如果元素本身沒有設置寬度相對縮進父元素的寬度。
3.8.?text-indent屬性可以繼承。
3.9. 實例
3.9.1. 代碼
<!DOCTYPE html> <html><head><title>縮進文本</title><meta charset="utf-8" /></head><body><p style="text-indent: 2em;"><b>縮進文本</b>3.1. text-indent屬性規定文本塊中首行文本的縮進。3.2. 允許使用負值。如果使用負值, 那么首行會被縮進到左邊。3.3. 這個屬性最常見的用途是將段落的首行縮進, 下面的規則會使所有段落的首行縮進2em。</p><p style="text-indent: -2rem; margin-left: 2rem;"><b>縮進文本</b>3.4. 一般來說, 可以為所有塊級元素應用text-indent, 但無法將該屬性應用于行內元素, 圖像之類的行內塊元素上也無法應用text-indent屬性。不過, 如果一個塊級元素(比如段落)的首行中有一個圖像, 它會隨該行的其余文本移動。</p><p style="width: 320px; background-color: red; text-indent: 10%;"><b>縮進文本</b>3.7. 百分數, 如果元素本身設置寬度相對縮進元素本身的寬度, 如果元素本身沒有設置寬度相對縮進父元素的寬度。</p><div style="text-indent: 2em;"><img src="eg_bg_03.gif" alt="eg_bg_03.gif" /><b>縮進文本</b>3.8. text-indent屬性可以繼承。3.8. text-indent屬性可以繼承。3.8. text-indent屬性可以繼承。</div></body> </html>3.9.2. 效果圖
4. 文本的方向/書寫方向
4.1. direction屬性規定文本的方向/書寫方向。
4.2. 該屬性指定了塊的基本書寫方向。
4.3. 默認值
4.4. 可能值
4.5. 例子
4.5.1. 代碼
<!DOCTYPE html> <html><head><title>文本的方向/書寫方向</title><meta charset="utf-8" /><style type="text/css">.direction-ltr {direction: ltr;}.direction-rtl {direction: rtl;}</style></head><body><p class="direction-ltr">direction屬性規定文本的方向/書寫方向。ltr默認。文本方向從左到右。</p><p class="direction-rtl">direction屬性規定文本的方向/書寫方向。rtl文本方向從右到左。</p><span class="direction-ltr">direction屬性規定文本的方向/書寫方向。ltr默認。文本方向從左到右。</span><br /><span class="direction-rtl">direction屬性規定文本的方向/書寫方向。rtl文本方向從右到左。</span><br /><br /></body> </html>4.5.2. 效果圖
5. 水平對齊
5.1. text-align屬性規定元素中的文本的水平對齊方式。
5.2. text-align設置塊級元素內文本的水平對齊方式。
5.3. 默認值
5.4. 可能的值
5.5. 實例
5.5.1. 代碼
<!DOCTYPE html> <html><head><title>水平對齊</title><meta charset="utf-8" /><style type="text/css">h1 {text-align: center;}h2 {text-align: left;}h3 {text-align: right;}span {text-align: right;}</style></head><body><h1>text-align center 文本水平居中對齊。</h1><h2>text-align left 文本水平居左對齊。</h2><h3>text-align right 文本水平居右對齊。</h3><span>text-align設置塊級元素內文本的水平對齊方式。</span></body> </html>5.5.2. 效果圖
6. 單詞間距
6.1. word-spacing屬性增加或減少單詞間的空白(即字間隔)。
6.2. 該屬性定義元素中字之間插入多少空白符。針對這個屬性, "字"定義為由空白符包圍的一個字符串。如果指定為長度值, 會調整字之間的通常間隔; normal就等同于設置為0。允許指定負長度值, 這會讓字之間擠得更緊。
6.3. 漢字之間該屬性無效(因為漢字并不會用空格間隔字的格式書寫)。
6.4. 默認值
6.5. 可能的值
7. 字符間距
7.1. letter-spacing屬性增加或減少字符間的空白(字符間距)。
7.2. 與word-spacing屬性一樣, letter-spacing屬性的可取值包括所有長度。默認關鍵字是normal(這與letter-spacing:0 相同)。輸入的長度值會使字母之間的間隔增加或減少指定的量。
7.4. 默認值
7.5. 可能的值
7.6. 實例
7.6.1. 代碼
<!DOCTYPE html> <html><head><title>字及字母間隔</title><meta charset="utf-8" /><style type="text/css">p {word-spacing: 16px;}.span1 {word-spacing: -0.5em;}h1 {letter-spacing: -0.5rem;}#span2 {letter-spacing: 16px;}</style></head><body><p class="spread">word-spacing default is normal.</p><span class="span1">word-spacing can use length value.</span><h1>letter-spacing屬性增加或減少字符間的空白(字符間距)。</h1><span id="span2">與word-spacing屬性一樣, letter-spacing屬性的可取值包括所有長度。默認關鍵字是normal(這與letter-spacing:0 相同)。輸入的長度值會使字母之間的間隔增加或減少指定的量。</span></body> </html>7.6.2. 效果圖
8. 字符轉換
8.1. text-transform屬性處理文本的大小寫。
8.2. 默認值
8.3. 可能的值
8.4. 實例
8.4.1. 代碼
<!DOCTYPE html> <html><head><title>字符轉換</title><meta charset="utf-8" /><style type="text/css">h1 {text-transform: uppercase;}.uppercase {text-transform: none;}.lowercase {text-transform: lowercase;}.capitalize {text-transform: capitalize;}</style></head><body><h1>This is an h1 element.</h1><p class="uppercase">This is some text in a paragraph.</p><p class="lowercase">This is some text in a paragraph.</p><span class="capitalize">This is some text in a paragraph.</span></body> </html>8.4.2. 效果圖
9. 文本裝飾
9.1. text-decoration屬性規定添加到文本的修飾。
9.2. 默認值
9.3. 可能的值
9.4. 實例
9.4.1. 代碼
<!DOCTYPE html> <html><head><title>文本裝飾</title><meta charset="utf-8" /><style type="text/css">h1 {text-decoration: overline;}h2 {text-decoration: line-through;}h3 {text-decoration: underline;}h4 {text-decoration: blink;}a {text-decoration: none;}h5.stricken {text-decoration: underline overline line-through;}</style></head><body><h1>這是標題 1</h1><h2>這是標題 2</h2><h3>這是標題 3</h3><h4>這是標題 4</h4><p><a href="https://www.baidu.com">百度</a></p><h5 class="stricken">這是標題 5</h5></body> </html>9.4.2. 效果圖
10. 處理空白符
10.1. white-space屬性設置如何處理元素內的空白。就是對文檔中的空格、換行和tab字符的處理。
10.2. 默認值
10.3. 可能的值
10.4. 實例
10.4.1. 代碼
<!DOCTYPE html> <html><head><title>處理空白符</title><meta charset="utf-8" /><style type="text/css">div {width: 500px; background-color: pink;}#p1 {white-space: normal;}#p2 {white-space: pre;}#p3 {white-space: nowrap;}#p4 {white-space: pre-wrap;}#p5 {white-space: pre-line;}</style></head><body><div><p id="p1">注釋:當white-space屬性設置為normal時, 瀏覽器會合并所有的空白符, 忽略換行符, 并且允許自動換行。</p><hr /><p id="p2">注釋: 當white-space屬性設置為pre時, 瀏覽器會保留所有的空白符, 保留換行符, 并且不允許自動換行。</p><hr /><p id="p3">注釋: 當white-space屬性設置為nowrap時, 瀏覽器會合并所有的空白符, 忽略換行符, 并且不允許自動換行。</p><hr /><p id="p4">注釋: 當white-space屬性設置為pre-wrap時, 瀏覽器會保留所有的空白符, 保留換行符, 并且允許自動換行。</p><hr /><p id="p5">注釋: 當white-space屬性設置為pre-line時, 瀏覽器會合并所有的空白符, 保留換行符, 并且允許自動換行。</p></div></body> </html>10.4.2. 效果圖
11. 文本顏色
11.1.?color屬性規定文本的顏色。
11.2.?這個屬性設置了一個元素的前景色(在html表現中, 就是元素文本的顏色)。這個顏色還會應用到元素的所有邊框, 除非被border-color或另外某個邊框顏色屬性覆蓋。
11.3.?默認值
11.4.?可能的值
12. 行高
12.1.?line-height屬性設置行間的距離(行高)。
12.2.?不允許使用負值。
12.3.?該屬性會影響行框的布局, 應用到塊級元素。
12.4.?line-height與font-size的計算值之差(在CSS中成為"行間距")分為兩半, 分別加到一個文本行內容的頂部和底部。
12.5.?默認值
12.6.?可能的值
12.7. 實例
12.7.1. 代碼
<!DOCTYPE html> <html><head><title>行高</title><meta charset="utf-8" /><style type="text/css">p {width: 300px;height: 200px;border: solid 10px;color: blue; background-color: red;line-height: 100px; }</style></head><body><p>line-height屬性設置行間的距離(行高)。line-height屬性設置行間的距離(行高)。</p></body> </html>12.7.2. 效果圖
總結
