學習筆記，僅供參考，有錯必糾
文章目錄 CSS 文本外觀屬性 color:文本顏色 letter-spacing word-spacing line-height test-decoration text-align text-indent white-space word-break
CSS
文本外觀屬性
color:文本顏色
color屬性用于定義文本的顏色，其取值方式有如下3種：
預定義的顏色值，如red, green, blue等 十六進制，如#FFFFFF, #29D794等 RGB代碼，如rgb(255, 0, 0)或rgb(100%, 0%, 0%) letter-spacing
letter-spacing屬性可以增加或減少字符間的空白 （字符間距），其屬性值可為不同單位的數值，允許使用負值，默認為normal，例如：
p { letter-spacing: 5px; }
h2 { letter-spacing: -3px; }
<!DOCTYPE html>
< htmllang = " en" > < head> < metacharset = " UTF-8" > < title> 文本布局
</ title> < style> .datam { letter-spacing : 10px; } </ style> </ head> < body> < pclass = " datam" > 數據挖掘是指從大量的數據中通過算法搜索隱藏于其中信息的過程。數據挖掘通常與計算機科學有關，并通過統計、在線分析處理、情報檢索、機器學習、專家系統
</ p> < p> 數據挖掘是指從大量的數據中通過算法搜索隱藏于其中信息的過程。數據挖掘通常與計算機科學有關，并通過統計、在線分析處理、情報檢索、機器學習、專家系統
</ p> </ body> </ html> 頁面：
word-spacing
word-spacing屬性增加或減少英文單詞 之間的間隔，對中文字符無效。和letter-spacing類似，其屬性值可為不同單位的數值，允許使用負值，默認為normal，例如：
p { word-spacing : 30px
; }
<!DOCTYPE html>
< htmllang = " en" > < head> < metacharset = " UTF-8" > < title> 文本布局
</ title> < style> .datam { word-spacing : 20px; } </ style> </ head> < body> < pclass = " datam" > Anhui University of Finance and Economics
</ p> < p> Anhui University of Finance and Economics
</ p> </ body> </ html> 頁面：
雖然該屬性對中文字符無效，但是如果中文字符之間有空格，它會把中文字符當成單詞，依然放大中文字符之間的間距，比如：
<!DOCTYPE html>
< htmllang = " en" > < head> < metacharset = " UTF-8" > < title> 文本布局
</ title> < style> .datam { word-spacing : 20px; } </ style> </ head> < body> < pclass = " datam" > 安徽 財經 大學
</ p> < p> 安徽 財經 大學
</ p> </ body> </ html> 頁面：
line-height
line-height屬性用于設置行間距(行高)，也就是行與行之間的距離，即字符的垂直間距。line-height常用的屬性值單位有3種，分別為像素px, 相對值em和百分比%，實際工作中使用最多的是像素px，例如：
p { line-height : 90%
; }
行高也可以在font屬性中和字體大小寫在一起：
p { font : 20px/1.5em
"黑體" ; }
上面的一段CSS代碼表示字體大小為20px，行高為30px(1.5*20px)，它和下面這段CSS代碼顯示的效果是一樣的：
p { font : 20px/150%
"黑體" ; }
行高 即2個0.5倍行距 加上文字頂部到文字底部的距離 ，圖示：
按照CSS中的定義，行高就是兩行文本基線之間的距離 ，即2個0.5倍行距 加上文字頂部到文字底部的距離 ，它與前面我們定義的行高的含義是等同的，圖示：
如果我們定義行高為100px，文本大小為20px，那么它在頁面中應該是這樣呈現的：
行高(line-height)和高度(height)的3種關系 (1) 如果行高 = 高度，文字會垂直居中
<!DOCTYPE html>
< htmllang = " en" > < head> < metacharset = " UTF-8" > < title> 行高
</ title> < style> * { padding : 0; margin : 0; } p.demo { height : 100px; line-height : 100px; text-align : center; font-size : 40px; background-color : silver; } .wrap { font : 16px "黑體" ; background-color : green; } .wrap p { background-color : red; font : 20px/1.5em "宋體" ; } </ style> </ head> < body> < pclass = " demo" > ARE YOU OK?
</ p> < divclass = " wrap" > < div> 我是父div的文本內容
</ div> < p> 我是子段落標簽的文本
</ p> 我是父div的文本內容
</ div> </ body> </ html> 頁面：
test-decoration
test-decoration屬性用于設置文本的下劃線，上劃線，刪除線等裝飾效果，test-decoration后可以賦多個值，用于給文本添加多種顯示效果。
屬性值 none underline overline line-through <!DOCTYPE html>
< htmllang = " en" > < head> < metacharset = " UTF-8" > < title> 文本裝飾
</ title> < style> .txt-underline { text-decoration : underline; } a { text-decoration : none; } .txt-linethrough { text-decoration : line-through; } #top-line { text-decoration : overline; } </ style> </ head> < body> < div> < ahref = " #" > 我是超級鏈接
</ a> < spanclass = " txt-underline" > 我是下劃線
</ span> < spanclass = " txt-linethrough" > 我是刪除線
</ span> < spanid = " top-line" > 我是頂線
</ span> </ div> </ body> </ html> 頁面：
text-align
text-align屬性用于設置文本內容的水平對齊方式。
屬性值 left(左對齊) right(右對齊) center(居中對齊) text-indent
text-indent屬性用于設置段落首行文本的縮進，只能設置于塊級標簽 。其屬性值可為px、em、百分比%等等，允許使用負值，建議使用em作為設置單位，例如：
p { text-indent : 50px
; }
<!DOCTYPE html>
< htmllang = " en" > < head> < metacharset = " UTF-8" > < title> 首行縮進
</ title> < style> h1 { text-indent : -9999px; } p { text-indent : 2em; } </ style> </ head> < body> < h1> < ahref = " #" > 我是logo
</ a> </ h1> < p> 需要是發明之母。近年來，數據挖掘引起了信息產業界的極大關注，其主要原因是存在大量數據，可以廣泛使用，并且迫切需要將這些數據轉換成有用的信息和知識。獲取的信息和知識可以廣泛用于各種應用，包括商務管理，生產控制，市場分析，工程設計和科學探索等
</ p> < p> 數據挖掘是通過分析每個數據，從大量數據中尋找其規律的技術，主要有數據準備、規律尋找和規律表示三個步驟。數據準備是從相關的數據源中選取所需的數據并整合成用于數據挖掘的數據集；規律尋找是用某種方法將數據集所含的規律找出來；規律表示是盡可能以用戶可理解的方式（如可視化）將找出的規律表示出來。數據挖掘的任務有關聯分析、聚類分析、分類分析、異常分析、特異群組分析和演變分析等。
</ p> </ body> </ html> 頁面：
我們再看一下，沒有設置text-indent屬性值為-9999px時的頁面：
white-space
使用HTML制作網頁時，不論源代碼中有多少空格，在瀏覽器中只會顯示一個字符的空白。在CSS中，使用white-space屬性，可以設置空白符的處理方式。
屬性值 normal(常規，文本中的空格、空行無效，滿行或到達區域邊界后自動換行) pre(預格式化，按文檔的書寫格式保留空格、空行原樣顯示。) nowrap(空格空行無效，強制文本不能換行，除非遇到換行標記 <br>，內容超出元素的邊界也不換行，若超出瀏覽器頁面則會自動增加滾動條 ) <!DOCTYPE html>
< htmllang = " en" > < head> < metacharset = " UTF-8" > < title> 文本空白符處理
</ title> < style> div { background-color : green; height : 200px; width : 200px; border : 1px solid red; } .nowrap { white-space : nowrap; } .pre { white-space : pre; } </ style> </ head> < body> < divclass = " normal" > normal： 數據挖掘是通過分析每個數據，從大量數據中尋找其規律的技術，主要有數據準備、規律尋找和規律表示三個步驟。
</ div> < divclass = " nowrap" > nowrap: 數據挖掘是通過分析每個數據，從大量數據中尋找其規律的技術，主要有數據準備、規律尋找和規律表示三個步驟。
</ div> < divclass = " pre" > pre:數據挖掘是通過分析每個數據，從大量數據中尋找其規律的技術，主要有數據準備、規律尋找和規律表示三個步驟。
</ div> </ body> </ html> 頁面：
word-break
word-break屬性會指定非CJK腳本的斷行規則，CJK腳本是中國，日本和韓國（“中日韓”）腳本。
屬性值 normal(使用瀏覽器默認的換行規則，不允許在單詞內換行) break-all(允許在單詞內換行) keep-all(只能在半角空格或連字符處換行) <!DOCTYPE html>
< htmllang = " en" > < head> < metacharset = " UTF-8" > < title> 換行
</ title> < style> div { background-color : green; height : 150px; width : 150px; border : 1px solid red; } .break-all { word-break : break-all; } .keep-all { word-break : keep-all; } </ style> </ head> < body> < divclass = " normal" > normal： This is the student office of Anhui University of Finance and economics OKOKOKOKOKOKOKOKOK
</ div> < divclass = " break-all" > break-all: This is the student office of Anhui University of Finance and economics OKOKOKOKOKOKOKOKOK
</ div> < divclass = " keep-all" > keep-all:This is the student office of Anhui University of Finance and economics OKOKOKOKOKOKOKOKOK
</ div> </ body> </ html> 頁面：
總結
以上是生活随笔 為你收集整理的CSS基础(part8)--文本外观属性 的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔 網站內容還不錯，歡迎將生活随笔 推薦給好友。
