CSS 文本樣式
CSS文本樣式是相對于內(nèi)容進行的樣式修飾。由于在層疊關(guān)系中，內(nèi)容要高于背景。所以文本樣式相對而言更加重要。
CSS控制文本屬性：
1、設(shè)置文本縮進：text-indent:length(長度單位)可以負(fù)值
2、文本水平對齊方式：text-align:left左，center居中，right右
3、空白處理: white-space:nowrap(nowrap強制在一行中顯示，pre換行和空格保留，normal自動換行)
4、大小寫控制：text-transform:(capitalize每個單詞的第一個字母大寫,uppercase每個字母都大寫，loowercase每個字母都小寫，none正常大?。?/strong>
5、文本垂直對齊方式：vertical-align:(sub設(shè)置文本為下標(biāo)，super設(shè)置文本為上標(biāo) ， top與頂端對齊 ，text-bottom與低端對齊)
6、文字顏色：color設(shè)置文字的顏色
首行縮進
定義 ：首行縮進是將段落的第一行縮進，這是常用的文本格式化效果。一般地，中文寫作時開頭空兩格，類似于此。
[注意]該屬性可以為負(fù)值
text-indent ??
? ? ? ?值: <length> | <percentage> | inherit
初始值: 0
應(yīng)用于: 塊級元素(包括block和inline-block)
繼承性: 有
百分?jǐn)?shù): 相對于包含塊的寬度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
p {text-indent:50px;}
</style>
</head>
<body>
<p>亞冠聯(lián)賽是亞洲最高等級的俱樂部賽事，相當(dāng)于歐洲的歐洲冠軍聯(lián)賽及南美洲的南美解放者杯，高于亞足聯(lián)杯和亞足聯(lián)主席杯，
獲得冠軍的球隊將代表亞洲參加當(dāng)年12月舉行的國際足聯(lián)世界俱樂部杯。期待恒大在世俱杯中為中國足球爭光添彩。</p>
</body>
</html>水平對齊
定義：水平對齊是影響一個元素中的文本的水平對齊方式。
text-align
值: left | center | right | justify | inherit
初始值: left
應(yīng)用于: 塊級元素(包括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>亞冠聯(lián)賽是亞洲最高等級的俱樂部賽事，相當(dāng)于歐洲的歐洲冠軍聯(lián)賽及南美洲的南美解放者杯，高于亞足聯(lián)杯和亞足聯(lián)主席杯，</p>
<p>獲得冠軍的球隊將代表亞洲參加當(dāng)年12月舉行的國際足聯(lián)世界俱樂部杯。期待恒大在世俱杯中為中國足球爭光添彩。</p>
</div>
</body>
</html>文本轉(zhuǎn)換
文本轉(zhuǎn)換用于處理英文的大小寫轉(zhuǎn)換
text-transform
值: uppercase(全大寫) | lowercase(全小寫) | capitalize(首字母大寫) | none | inherit
初始值: none
應(yīng)用于: 所有元素
繼承性: 有
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轉(zhuǎn)換</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
應(yīng)用于: 所有元素
繼承性: 無
<!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>
