學習筆記，僅供參考，有錯必糾
文章目錄 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屬性可以增加或減少字符間的空白 （字符間距），其屬性值可為不同單位的數(shù)值，允許使用負值，默認為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" > 數(shù)據(jù)挖掘是指從大量的數(shù)據(jù)中通過算法搜索隱藏于其中信息的過程。數(shù)據(jù)挖掘通常與計算機科學有關，并通過統(tǒng)計、在線分析處理、情報檢索、機器學習、專家系統(tǒng)
</ p> < p> 數(shù)據(jù)挖掘是指從大量的數(shù)據(jù)中通過算法搜索隱藏于其中信息的過程。數(shù)據(jù)挖掘通常與計算機科學有關，并通過統(tǒng)計、在線分析處理、情報檢索、機器學習、專家系統(tǒng)
</ p> </ body> </ html> 頁面：
word-spacing
word-spacing屬性增加或減少英文單詞 之間的間隔，對中文字符無效。和letter-spacing類似，其屬性值可為不同單位的數(shù)值，允許使用負值，默認為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" > 安徽 財經(jīng) 大學
</ p> < p> 安徽 財經(jīng) 大學
</ 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，那么它在頁面中應該是這樣呈現(xiàn)的：
行高(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> 需要是發(fā)明之母。近年來，數(shù)據(jù)挖掘引起了信息產(chǎn)業(yè)界的極大關注，其主要原因是存在大量數(shù)據(jù)，可以廣泛使用，并且迫切需要將這些數(shù)據(jù)轉換成有用的信息和知識。獲取的信息和知識可以廣泛用于各種應用，包括商務管理，生產(chǎn)控制，市場分析，工程設計和科學探索等
</ p> < p> 數(shù)據(jù)挖掘是通過分析每個數(shù)據(jù)，從大量數(shù)據(jù)中尋找其規(guī)律的技術，主要有數(shù)據(jù)準備、規(guī)律尋找和規(guī)律表示三個步驟。數(shù)據(jù)準備是從相關的數(shù)據(jù)源中選取所需的數(shù)據(jù)并整合成用于數(shù)據(jù)挖掘的數(shù)據(jù)集；規(guī)律尋找是用某種方法將數(shù)據(jù)集所含的規(guī)律找出來；規(guī)律表示是盡可能以用戶可理解的方式（如可視化）將找出的規(guī)律表示出來。數(shù)據(jù)挖掘的任務有關聯(lián)分析、聚類分析、分類分析、異常分析、特異群組分析和演變分析等。
</ p> </ body> </ html> 頁面：
我們再看一下，沒有設置text-indent屬性值為-9999px時的頁面：
white-space
使用HTML制作網(wǎng)頁時，不論源代碼中有多少空格，在瀏覽器中只會顯示一個字符的空白。在CSS中，使用white-space屬性，可以設置空白符的處理方式。
屬性值 normal(常規(guī)，文本中的空格、空行無效，滿行或到達區(qū)域邊界后自動換行) 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： 數(shù)據(jù)挖掘是通過分析每個數(shù)據(jù)，從大量數(shù)據(jù)中尋找其規(guī)律的技術，主要有數(shù)據(jù)準備、規(guī)律尋找和規(guī)律表示三個步驟。
</ div> < divclass = " nowrap" > nowrap: 數(shù)據(jù)挖掘是通過分析每個數(shù)據(jù)，從大量數(shù)據(jù)中尋找其規(guī)律的技術，主要有數(shù)據(jù)準備、規(guī)律尋找和規(guī)律表示三個步驟。
</ div> < divclass = " pre" > pre:數(shù)據(jù)挖掘是通過分析每個數(shù)據(jù)，從大量數(shù)據(jù)中尋找其規(guī)律的技術，主要有數(shù)據(jù)準備、規(guī)律尋找和規(guī)律表示三個步驟。
</ div> </ body> </ html> 頁面：
word-break
word-break屬性會指定非CJK腳本的斷行規(guī)則，CJK腳本是中國，日本和韓國（“中日韓”）腳本。
屬性值 normal(使用瀏覽器默認的換行規(guī)則，不允許在單詞內換行) 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)--文本外观属性 的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔 網(wǎng)站內容還不錯，歡迎將生活随笔 推薦給好友。
