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>


