CSS中常見的6種文字樣式（總結）

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

應用於: 區塊級元素(包括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>

效果圖：

三、字間隔

#1.定義

字間隔是指單字間距，用來設定文字或單字之間的間距。實際上，"字"表示的是任何非空白符字符組成的串，並由某種空白符包圍

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

注意：字間隔可為負值

2.用法

word-spacing: <length> | normal | inherit

初始值: normal(預設為0)

應用於: 所有元素

繼承性: 有

四、字母間隔

字母間隔是指字元間距

注意：字母間隔可為負值

用法：

letter-spacing: <length> | normal | inherit

初始值: normal(預設為0)

應用於: 所有元素

繼承性: 有

五、文字轉換

文字轉換用於處理英文的大小寫轉換

#用法：

text-transform: uppercase(全大写) | lowercase(全小写) | capitalize(首字母大写) | none | inherit

初始值: none

套用於: 所有元素

繼承性: 有

#fee、文字修飾

1.定義

文字修飾用於為文字提供修飾線

注意：文字修飾線的顏色與文字顏色相同

2.用法

text-decoration: none | [underline(下划线) || overline(上划线) || line-through(中划线)] | inherit

初始值: none

#套用於: 所有元素

##繼承性: 無

繼承

文字修飾屬性無法繼承，表示子元素文字上的任何修飾線與父元素的顏色相同。子元素文字上的修飾線其實是父元素的，只是剛好"經過"而已。

注意：互不衝突的文字修飾線可出現多條

#2、最後

########################## ##

　　在首行縮排(text-index)、水平對齊(text-align)、字間隔(word-spacing)、字母間隔(letter-spacing)、文字轉換(text-transform)、文字修飾(text -decoration)這6種文字樣式中，首行縮排(text-index)和水平對齊(text-align)只能夠應用於區塊級元素(包括block和inline-block)，這是最應該注意的地方

以上是CSS中常見的6種文字樣式（總結）的詳細內容。更多資訊請關注PHP中文網其他相關文章！