網頁製作中應用CSS控制文字的主要指令

2021-04-17 06:57:17 字數 3245 閱讀 8745

本章要介紹的是文字相關的

css指令。通 常乙個**的內容最多的就是文字了,透過這些文字相關的

css指令,您可以將您的 網頁內容排版得美美的。本章將分兩個部份為您介紹,第一部份是字型性質的

css指 令,用以控制文字字型的各種樣式;第二部份介紹的是文字性質的

css指令,用以控 制文字段落的外觀及擺設方式。

字型性質的css指令

font-family 設定文字字型

支 持:ie3、ie4

適 用:所有元素

可能值: 字型名稱

預設值:視瀏覽器而定

繼承性:有

一般範例:span

同軸範例:

font-style 設定字型樣式

支 持:ie3、ie4、nc4

適 用:所有元素

可能值: normal 普通字

italic 斜體字

oblique 斜體字

預設值:normal

繼承性:有

一般範例:span

同軸範例:

font-weight 設定字型份量

支 持:ie3、ie4、nc4

適 用:所有元素

可能值: normal 普通字

bold 粗體字

bolder 相對于父元素稍粗

lighter 相對于父元素稍細

100,200,300,

400,500,600,

700,800,900. 數字由小到大代表筆畫由細到粗

normal=400 bold=700

預設值:normal

繼承性:有

一般範例:span

同軸範例:

font-size 設定文字大小

支 持:ie3、ie4、nc4

適 用:所有元素

可能值: 絕對大小,可用的引數由小到大分別有七項

xx-**all, x-**all, **all, medium, large, x-large, xx-large

相對大小,可用的引數為larger, **aller兩項

以父元素字型大小為基準

百分比,以父元素字型大小為基準

預設值:medium

繼承性:有

一般範例:span

同軸範例:

font-variant 設定文字轉換

支 持:ie3、ie4、nc4

適 用:所有元素

可能值: normal 普通字

**all-caps 將小寫文字轉換為大寫

預設值:normal

繼承性:有

一般範例:span

同軸範例:

font 綜合設定字型性質

支 持:ie3、ie4、nc4

適 用:所有元素

可能值: 設定字型樣式

設定文字轉換

設定字型份量

設定文字大小與列高(請參考設定文字列高部份)

設定文字字型

預設值:無

繼承性:有

一般範例: span

同軸範例:< span style="font : bolder **all-caps 12pt/120% arial">

文字性質的css指令

line-height 設定列高

支 持:ie3、ie4、nc4

適 用:所有元素

可能值: normal 普通列高,根據字型變化合理高度,視瀏覽器而定

以元素字型大小乘以該數即為列高

百分比,相對於元素字型大小為比例

預設值:normal

繼承性:有

一般範例:div

同軸範例:

text-align 設定文字對 

支 持:ie3、ie4、nc4

適 用:區塊元素

可能值: center 對 **

right 對 右邊

left 對 左邊

justify 左右對 

預設值:視瀏覽器而定

繼承性:有

一般範例:div

同軸範例:

vertical-align 設定垂直對 

支 持:ie4

適 用:同軸元素

可能值: top 對 同列最高元素頂端

bottom 對 同列最低元素底端

baseline 對 底線

middle 對 **

sub 將元素置於下標

super 將元素置於上標

text-top 對 文字頂端

text-bottom 對 文字底端

參照元素本身列高,以父元素底線為基準作位移

預設值:baseline

繼承性:有

一般範例:span

同軸範例:

text-decoration 設定文字裝飾

支 持:ie3、ie4、nc4

適 用:所有元素

可能值: none 普通字

underline 文字加底線

overline 文字加頂線

line-through 文字加刪除線

blink 設定文字閃爍

預設值:none

繼承性:有

一般範例:span

同軸範例:

text-transform 設定文字轉換

支 持:ie3、ie4、nc4

適 用:所有元素

可能值: none 普通字

capitalize 將英文單字地乙個字母轉換為大寫

uppercase 將所有文字轉換為大寫

lowercase 將所有文字轉換為小寫

預設值:none

繼承性:有

一般範例:span

同軸範例:

letter-spacing 設定字母間隔

支 持:ie4

適 用:所有元素

可能值: normal 不改變字母間隔,使用瀏覽器預設值

要額外增加的間隔長度,可為負值

預設值:normal

繼承性:有

一般範例:span

同軸範例:

text-indent 設定文字縮排

支 持:ie3、ie4、nc4

適 用:區塊元素

以父元素寬度為基準的百分比值

預設值:0

繼承性:有

一般範例:div

同軸範例:

CSS控制網頁中文字的技巧

控制文字的樣式包括文字大小寫 文字修飾兩個部分。1.文字大小寫 文字大小寫使網頁的設計者不用在輸入文字時就完成文字的大小寫,而可以在輸入完畢後,再根據需要對區域性的文字設定大小寫。基本格式如下 text transform 引數 引數取值範圍 uppercase 所有文字大寫顯示 lowercase...

CSS控制網頁中文字的技巧

t color 0000ff 控制文字的樣式 控制文字的樣式包括文字大小寫 文字修飾兩個部分。1.文字大小寫 文字大小寫使網頁的設計者不用在輸入文字時就完成文字的大小寫,而可以在輸入完畢後,再根據需要對區域性的文字設定大小寫。基本格式如下 text transform 引數 引數取值範圍 upper...

CSS控制網頁中文字的技巧

控制文字的樣式包括文字大小寫 文字修飾兩個部分。1.文字大小寫 文字大小寫使網頁的設計者不用在輸入文字時就完成文字的大小寫,而可以在輸入完畢後,再根據需要對區域性的文字設定大小寫。基本格式如下 text transform 引數 引數取值範圍 uppercase 所有文字大寫顯示 lowercase...