DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS基礎知識 >> 4.9 文本樣式總結
4.9 文本樣式總結
編輯:CSS基礎知識     

一、CSS段落屬性

表1 CSS段落屬性 屬性 說明 text-decoration 下劃線、刪除線、頂劃線 text-transform 文本大小寫 font-varient 將英文文本轉換為“小型”大寫字母 text-indent 段落首行縮進 text-align 文本水平對齊方式 line-height 行高 letter-spacing 字距 word-spacing 詞距

1、text-decoration

在CSS中,使用text-decoration屬性來定義字體下劃線、刪除線和頂劃線。

語法:

text-decoration:屬性值;

說明:

text-decoration屬性取值如下表:

表1 CSS段落屬性 text-decoration屬性值 說明 text-decoration 下劃線、刪除線、頂劃線 none 默認值,可以用這個屬性值也可以去掉已經有下劃線或刪除線或頂劃線的樣式 underline 下劃線 line-through 刪除線 overline 頂劃線

使用“text-decoration:none”這個屬性值可以去除a標簽的默認樣式。

學了這個屬性之後,我們應該摒棄HTML入門教程中學習到的<s>標簽(刪除線)和<u>標簽(下劃線)。

2、text-transform

在CSS中,使用text-transform屬性來轉換文本的大小寫,這個是針對英文而言,因為中文不存在大小寫之分。

語法:

text-transform:屬性值;

說明:

text-transform屬性取值如下表:

表1 text-transform屬性 text-transform屬性值 說明 none 默認值,無轉換發生 uppercase 轉換成大寫 lowercase 轉換成小寫 capitalize 將每個英文單詞的首字母轉換成大寫,其余無轉換發生

3、font-variant

使用font-variant屬性只有一個作用:把文本設置成小型大寫字母,這也是針對英文而言,因為中文不存在大小寫之分。

語法:

font-variant:normal/small-caps;

說明:

font-variant屬性取值如下表:

表1 font-variant屬性 font-variant屬性值 說明 normal 默認值,正常效果 small-caps 小型大寫字母的字體

4、text-indent

我們可以使用CSS的text-indent屬性來控制文本首行的縮進。

語法:

text-indent:像素值;

說明:

在CSS初學階段,全部都是使用像素作單位,在CSS進階階段我們會深入講解其他CSS單位

5、text-align

在CSS中,使用text-align屬性控制文本的水平方向的對齊方式:左對齊、居中對齊、右對齊。

語法:

text-align:屬性值;

說明:

text-align屬性取值如下表:

表1 text-align屬性 text-align屬性 說明 left 默認值,左對齊 center 居中對齊 right 右對齊

text-align屬性只能針對文本文字和<img>標簽,對其他標簽無效。

6、line-height

line-height屬性指的是行高,而不是行間距。

語法:

line-height:像素值;

說明:

在CSS初學者階段,我們都是采用像素做單位。

7、letter-spacing

語法:

letter-spacing:像素值;

說明:

letter-spacing控制的是字間距,每一個中文文字作為一個“字”,而每一個英文字母也作為一個“字”!大家要細心留意一下。

默認情況下,letter-spacing我們幾乎都用不上,我們直接采用浏覽器默認樣式就可以了。大家完全可以忽略掉這個屬性。

8、word-spacing

語法:

word-spacing:像素值;

說明:

定義詞間距,以空格為基准進行調節,如果多個單詞被連在一起,則被word-spacing視為一個單詞;如果漢字被空格分隔,則分隔的多個漢字就被視為不同的單詞,word-spacing屬性此時有效。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved