前面的話
CSS文本樣式是相對于內容進行的樣式修飾。由于在層疊關系中，內容要高于背景。所以文本樣式相對而言更加重要。有些人對文本和字體樣式之間的不同不太了解，簡單地講，文本是內容，而字體則用于顯示這個內容。本文將詳細介紹文本相關樣式
首行縮進
定義
首行縮進是將段落的第一行縮進，這是常用的文本格式化效果。一般地，中文寫作時開頭空兩格，類似于此
[注意]該屬性可以為負值
text-indent
值: <length> | <percentage> | inherit
初始值: 0
應用于: 塊級元素(包括block和inline-block)
繼承性: 有
百分數: 相對于包含塊的寬度
應用
【懸掛縮進】
div{
width: 200px;
border: 1px solid black;
text-indent: -1em;//關鍵代碼
padding-left: 1em;//關鍵代碼
}
【首字下沉】
div{
width: 200px;
border: 1px solid black;
text-indent: 0.5em;
}
div:first-letter{
font-size: 30px;
float: left;
}
水平對齊
定義
水平對齊是影響一個元素中的文本的水平對齊方式
text-align
值: left | center | right | justify | inherit
初始值: left
應用于: 塊級元素(包括block和inline-block)
繼承性: 有
兩端對齊
當水平對齊方式為兩端對齊時，word-spacing可能會調整，以便文本在整行中正好放下。如果為letter-spacing指定一個長度值，則letter-spacing不會受兩端對齊影響，除非letter-spacing值為normal
IE兼容
對于IE7-瀏覽器來說，使用text-align不僅會改變文本的水平對齊方式，也會改變后代塊級元素的水平對齊方式
.box{ width: 200px; height: 200px; background-color: pink; border: 1px solid black; text-align: right; } .in{ height: 100px; width: 100px; background-color: lightgreen; }
<div class="box"> <div class="in">測試文字</div> </div>
字間隔
字間隔是指單詞間距，用來設置文字或單詞之間的間距。實際上，"字"表示的是任何非空白符字符組成的串，并由某種空白符包圍
[注意]單詞之間用空格分開，單詞之間的間距 = word-spacing + 空格大小
[注意]字間隔可為負值
word-spacing
值: <length> | normal | inherit
初始值: normal(默認為0)
應用于: 所有元素
繼承性: 有
字母間隔
字母間隔是指字符間距
[注意]字母間隔可為負值
letter-spacing
值: <length> | normal | inherit
初始值: normal(默認為0)
應用于: 所有元素
繼承性: 有
文本轉換
文本轉換用于處理英文的大小寫轉換
text-transform
值: uppercase(全大寫) | lowercase(全小寫) | capitalize(首字母大寫) | none | inherit
初始值: none
應用于: 所有元素
繼承性: 有
文本修飾
定義
文本修飾用于為文本提供修飾線
[注意]文本修飾線的顏色與文本顏色相同
text-decoration
值: none | [underline(下劃線) || overline(上劃線) || line-through(中劃線)] | inherit
初始值: none
應用于: 所有元素
繼承性: 無
繼承
文本修飾屬性無法繼承，意味著子元素文本上的任何修飾線與父元素的顏色相同。子元素文本上的修飾線實際上是父元素的，只是正好"經過"而已。
[注意]互不沖突的文本修飾線可出現多條
最后
在首行縮進(text-index)、水平對齊(text-align)、字間隔(word-spacing)、字母間隔(letter-spacing)、文本轉換(text-transform)、文本修飾(text-decoration)這6種文本樣式中，首行縮進(text-index)和水平對齊(text-align)只能夠應用于塊級元素(包括block和inline-block)，這是最應該注意的地方
文章列表
留言列表
