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>


#
繼續學習
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS控制文本</title> </head> <style type="text/css"> #one{text-indent:2em;} #two{text-align:center; white-space:pre; text-transform:uppercase;} span{vertical-align:super;} #t2{width:100px; vertical-align:middle;} </style> <body> <p id="one">0.5秒三分绝杀!波特兰上演波什时刻 第N次拯救热火</p> <h1 id="two">玩命暴扣扳平+助攻绝杀三分 <span>热火</span>太幸运有这fkasfjklas fklasdj颗队魂</h1> <p>热火今夜还一功臣必须赞 11分不多但却分分是金!</p> <p>詹波为小弟恶犯叫屈 当事人他都起飞了!肯定假摔</p> <p>斯帅称客战开拓者奥登不打 波什:他很快就可复出</p> <p id="t2"> 斯帅称客战开拓者奥登不打 波什:他很快就可复出 </p> </body> </html>