CSS中非常好用的六種文字樣式的範例程式碼分享

前面的話

　　CSS文字樣式是相對於內容進行的樣式修飾。由於在層疊關係中，內容要高於背景。所以文字樣式相對而言更重要。有些人對文字和字體樣式之間的差異不太了解，簡單地講，文字是內容，而字體則用於顯示這個內容。本文將詳細介紹文字相關樣式

首行縮排

# 定義

　　首行縮排是將段落的第一行縮進，這是常用的文字格式化效果。一般地，中文寫作時開頭空兩格，類似此

　　[注意]該屬性可以為負值

text-indent

　　值: | | inherit

　　初始值: 0

　　應用於: 區塊級元素(包括block和inline- block)

　　繼承性: 有

　　百分數: 相對於包含區塊的寬度

應用

【懸掛縮排】

p{
    width: 200px;
    border: 1px solid black;
    text-indent: -1em;//关键代码
    padding-left: 1em;//关键代码
}

 【首字下沉】

p{
    width: 200px;
    border: 1px solid black;
    text-indent: 0.5em;
}
p:first-letter{
    font-size: 30px;
    float: left;
}

水平對齊

定義

　　水平對齊是影響一個元素中的文字的水平對齊方式

text-align

##　　值: left | center | right | justify | inherit

　　初始值: left

　　應用於: 區塊級元素(包括block和inline-block)

　　繼承性: 有有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;
}

<p class="box">
    <p class="in">测试文字</p></p>

　　[注意]單詞之間用空格分開，單詞之間的間距= word-spacing + 空格大小

　　[注意]字間隔可為負值

word-spacing

　　值:

#word-spacing

　　值: | 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)，這是最應該注意的地方############## #

以上是CSS中非常好用的六種文字樣式的範例程式碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！