CSS 文本格式
Text Color
顏色屬性被用來設置文字的顏色。
顏色是通過CSS最經(jīng)常的指定:
十六進制值 - 如"#FF0000"
一個RGB值 - "RGB(255,0,0)"
顏色的名稱 - 如"紅"
一個網(wǎng)頁的背景顏色是指在主體內(nèi)的選擇:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> body {color:red;} h1 {color:#00ff00;} p.ex {color:rgb(0,0,255);} </style> </head> <body> <h1>多些書卷氣 少些書生氣</h1> <p>人有書卷氣,氣質美如蘭。有書卷氣的人,身上有那么一股淡淡的書香,透著墨的芬芳,留著硯的韻味,帶著紙的氣息。 千百年來,那一縷縷飄逸的書香,把一批批文人志士熏陶和浸潤得文雅儒雅、優(yōu)雅高雅。</p> <p class="ex">漫步歷史長廊,洋溢書卷氣的人不勝枚舉</p> </body> </html>
文本的對齊方式
文本排列屬性是用來設置文本的水平對齊方式。
文本可居中或對齊到左或右,兩端對齊.
當text-align設置為"justify",每一行被展開為寬度相等,左,右外邊距是對齊(如雜志和報紙)。
<!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 實例</h1> <p class="date">xxxx 年 x 月 xx號</p> <p class="main">有一個年輕人去買碗,來到店里他順手拿起一只碗,然后依次與其它碗輕輕碰擊,碗與碗之間相碰時立即發(fā)出沉悶、渾濁的聲響,他失望地搖搖頭。 然后去試下一只碗。。。他幾乎挑遍了店里所有的碗,竟然沒有一只滿意的,就連老板捧出的自認為是店里碗中精品也被他搖著頭失望地放回去了。</p> <p><b>注意:</b> 重置瀏覽器窗口大小查看 "justify" 是如何工作的。</p> </body> </html>
文本修飾
text-decoration 屬性用來設置或刪除文本的裝飾。
從設計的角度看 text-decoration屬性主要是用來刪除鏈接的下劃線:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> a {text-decoration:none;} </style> </head> <body> <p>鏈接到: <a href="#">php.cn</a></p> </body> </html>
也可以這樣裝飾文字:
<!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>好好學習</h1> <h2>原價¥30</h2> <h3>現(xiàn)價¥10</h3> </body> </html>
文本轉換
文本轉換屬性是用來指定在一個文本中的大寫和小寫字母。
可用于所有字句變成大寫或小寫字母,或每個單詞的首字母大寫。
<!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>
文本縮進
文本縮進屬性是用來指定文本的第一行的縮進。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> p {text-indent:30px;} </style> </head> <body> <p>無疑的,這些人都在做著一個相同的動作:玩手機。 令人感到諷刺的是,盡管電視的廣告里不斷地重復著“不做低頭族,出行更安全”的提醒,可這些聚精會神的“低頭族們”壓根就當沒聽見似的, 繼續(xù)旁若無人地玩著手機不把自已的生命當回事兒。有些用微信在聊天,有些在玩手游,有些在看影視劇,有些打電話等等。</p> </body> </html>
所有CSS文本屬性。
屬性 描述
color 設置文本顏色
direction 設置文本方向。
letter-spacing 設置字符間距
line-height 設置行高
text-align 對齊元素中的文本
text-decoration 向文本添加修飾
text-indent 縮進元素中文本的首行
text-shadow 設置文本陰影
text-transform 控制元素中的字母
unicode-bidi 設置或返回文本是否被重寫
vertical-align 設置元素的垂直對齊
white-space 設置元素中空白的處理方式
word-spacing 設置字間距