CSS 文字樣式
CSS文字樣式是相對於內容的樣式修飾。由於在層疊關係中,內容要高於背景。所以文字樣式相對而言更重要。
CSS控製文字屬性:
#1、設定文字縮排:text-indent:length(長度單位)可以負值
2、文字水平對齊方式:text-align:left左,center居中,right右
3、空白處理: white-space:nowrap(nowrap強制在一行中顯示,pre換行和空格保留,normal自動換行)
4 、大小寫控制:text-transform:(capitalize每個單字的第一個字母大寫,uppercase每個字母都大寫,loowercase每個字母都小寫,none正常大小)
#5、文字垂直對齊方式:vertical-align:(sub設定文字為下標,super設定文字為上標, top與頂端對齊,text-bottom與低階對齊)
6、文字顏色:color設定文字的顏色
首行縮排
定義:首行縮排是將段落的第一行縮排,這是常用的文字格式化效果。一般地,中文寫作時開頭空兩格,類似此。
[注意]此屬性可以為負值
text-indent
值: <length> | < ;percentage> | inherit
初始值: 0
應用於: 區塊級元素(包括block和inline-block)
繼承性: 有
百分數: 相對於包含區塊的寬度
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> p {text-indent:50px;} </style> </head> <body> <p>亚冠联赛是亚洲最高等级的俱乐部赛事,相当于欧洲的欧洲冠军联赛及南美洲的南美解放者杯,高于亚足联杯和亚足联主席杯, 获得冠军的球队将代表亚洲参加当年12月举行的国际足联世界俱乐部杯。期待恒大在世俱杯中为中国足球争光添彩。</p> </body> </html>
水平對齊
############################################################################################################################### #定義:###水平對齊是影響一個元素中的文字的水平對齊方式。 ############text-align######### 值: left | center | right | justify | inherit###
初始值: left
應用於: 區塊級元素(包括block和inline-block)
繼承性: 有
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>格式</title> <style> .center { margin:auto; width:70%; background-color:#b0e0e6; } </style> </head> <body> <div class="center"> <p>亚冠联赛是亚洲最高等级的俱乐部赛事,相当于欧洲的欧洲冠军联赛及南美洲的南美解放者杯,高于亚足联杯和亚足联主席杯,</p> <p>获得冠军的球队将代表亚洲参加当年12月举行的国际足联世界俱乐部杯。期待恒大在世俱杯中为中国足球争光添彩。</p> </div> </body> </html>
文字轉換
#文字轉換用來處理英文的大小寫轉換
text-transform
值: uppercase(全大寫) | lowercase(全小寫) | capitalize(首字母大寫) | none | inherit
初始值: none
應用於: 所有元素
繼承性: 有
#<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>转换</title> <style> p.uppercase {text-transform:uppercase;} p.lowercase {text-transform:lowercase;} p.capitalize {text-transform:capitalize;} </style> </head> <body> <p class="uppercase">hello css</p> <p class="lowercase">hello css</p> <p class="capitalize">hello css</p> </html>
文字修飾
定義:文字修飾用於提供文字修飾線
[注意]文字修飾線的色彩與文字色彩相同
text-decoration
值: none | [underline(底線) || overline(上劃線) || line-through(中劃線)] | inherit
初始值: none
套用於: 所有元素
繼承性: 無
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文本修饰</title> <style> h1 {text-decoration:overline;} h2 {text-decoration:line-through;} h3 {text-decoration:underline;} </style> </head> <body> <h1>这是用来进行文本修饰的</h1> <h2>这是用来进行文本修饰的</h2> <h3>这是用来进行文本修饰的</h3> </body> </html>