首頁 > web前端 > css教學 > 主體

CSS中常見的6種文字樣式(總結)

青灯夜游
發布: 2018-09-14 17:36:48
原創
2613 人瀏覽過

CSS文字樣式是相對於內容的樣式修飾。由於在層疊關係中,內容要高於背景。所以文字樣式相對而言更重要。有些人對文字和字體樣式之間的差異不太了解,簡單地講,文字是內容,而字體則用於顯示這個內容。本章將詳細介紹CSS中常見的6種文字樣式(總結),讓大家可以在平常的網頁開發中可以使用。有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

一、首行縮排

1.定義

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

注意:此屬性可以為負值

2. 用法:

text-indent: <length> | <percentage> | inherit;
登入後複製

初始值: 0

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

繼承性: 有

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

CSS中常見的6種文字樣式(總結)

3.應用(程式碼實例)

懸掛縮排:

div{
    width: 200px;
    border: 1px solid black;
    text-indent: -1em;//关键代码
    padding-left: 1em;//关键代码
}
登入後複製

效果圖:

CSS中常見的6種文字樣式(總結)

#首字下沉:

div{
    width: 200px;
    border: 1px solid black;
    text-indent: 0.5em;
}
div:first-letter{
    font-size: 30px;
    float: left;
}
登入後複製

效果圖:CSS中常見的6種文字樣式(總結)

#二、水平對齊

#1. 定義

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

2.用法:

text-align: left | center | right | justify | inherit
登入後複製

初始值: left

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


## 繼承性: 有

CSS中常見的6種文字樣式(總結)

兩端對齊

  當水平對齊方式為兩端對齊時,word-spacing可能會調整,以便文字在整行中剛好放下。如果letter-spacing指定長度值,則letter-spacing不會受兩端對齊影響,除非letter-spacing值為normal

CSS中常見的6種文字樣式(總結)

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>
登入後複製

效果圖:

CSS中常見的6種文字樣式(總結)

三、字間隔

#1.定義

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


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


注意:字間隔可為負值

2.用法

word-spacing: <length> | normal | inherit
登入後複製

初始值: normal(預設為0)


應用於: 所有元素


繼承性: 有

CSS中常見的6種文字樣式(總結)

四、字母間隔

字母間隔是指字元間距


注意:字母間隔可為負值

用法:

letter-spacing: <length> | normal | inherit
登入後複製

初始值: normal(預設為0)


應用於: 所有元素


繼承性: 有

CSS中常見的6種文字樣式(總結)

五、文字轉換

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

#用法:

text-transform: uppercase(全大写) | lowercase(全小写) | capitalize(首字母大写) | none | inherit
登入後複製

初始值: none


套用於: 所有元素


繼承性: 有

CSS中常見的6種文字樣式(總結)

#fee、文字修飾

1.定義

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

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

2.用法

text-decoration: none | [underline(下划线) || overline(上划线) || line-through(中划线)] | inherit
登入後複製
初始值: none


#套用於: 所有元素

##繼承性: 無

繼承

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

CSS中常見的6種文字樣式(總結)

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

#2、最後

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

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


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

相關標籤:
css
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!