CSS文字樣式是相對於內容的樣式修飾。由於在層疊關係中,內容要高於背景。所以文字樣式相對而言更重要。有些人對文字和字體樣式之間的差異不太了解,簡單地講,文字是內容,而字體則用於顯示這個內容。本章將詳細介紹CSS中常見的6種文字樣式(總結),讓大家可以在平常的網頁開發中可以使用。有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。
一、首行縮排
1.定義
首行縮排是將段落的第一行縮進,這是常用的文字格式化效果。一般地,中文寫作時開頭空兩格,類似此
注意:此屬性可以為負值
2. 用法:
text-indent: <length> | <percentage> | inherit;
初始值: 0
應用於: 區塊級元素(包括block和inline-block)
繼承性: 有
百分數: 相對於包含區塊的寬度
3.應用(程式碼實例)
懸掛縮排:
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; }
效果圖:
#二、水平對齊
#1. 定義
水平對齊是影響一個元素中的文字的水平對齊方式
2.用法:
text-align: left | center | right | justify | inherit
初始值: left
## 繼承性: 有
兩端對齊
當水平對齊方式為兩端對齊時,word-spacing可能會調整,以便文字在整行中剛好放下。如果letter-spacing指定長度值,則letter-spacing不會受兩端對齊影響,除非letter-spacing值為normalIE相容
對於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>
三、字間隔
#1.定義字間隔是指單字間距,用來設定文字或單字之間的間距。實際上,"字"表示的是任何非空白符字符組成的串,並由某種空白符包圍
注意:單詞之間用空格分開,單詞之間的間距= word-spacing 空格大小
注意:字間隔可為負值
word-spacing: <length> | normal | inherit
應用於: 所有元素
繼承性: 有
四、字母間隔
字母間隔是指字元間距
注意:字母間隔可為負值
letter-spacing: <length> | normal | inherit
應用於: 所有元素
繼承性: 有
五、文字轉換
文字轉換用於處理英文的大小寫轉換#用法:text-transform: uppercase(全大写) | lowercase(全小写) | capitalize(首字母大写) | none | inherit
套用於: 所有元素
繼承性: 有
#fee、文字修飾
1.定義
文字修飾用於為文字提供修飾線
2.用法
text-decoration: none | [underline(下划线) || overline(上划线) || line-through(中划线)] | inherit
繼承
文字修飾屬性無法繼承,表示子元素文字上的任何修飾線與父元素的顏色相同。子元素文字上的修飾線其實是父元素的,只是剛好"經過"而已。 注意:互不衝突的文字修飾線可出現多條#2、最後
########################## ##在首行縮排(text-index)、水平對齊(text-align)、字間隔(word-spacing)、字母間隔(letter-spacing)、文字轉換(text-transform)、文字修飾(text -decoration)這6種文字樣式中,首行縮排(text-index)和水平對齊(text-align)只能夠應用於區塊級元素(包括block和inline-block),這是最應該注意的地方
以上是CSS中常見的6種文字樣式(總結)的詳細內容。更多資訊請關注PHP中文網其他相關文章!