Menu - Pages

網頁教學:利用CSS語法設定文字樣式

 

壹、文字型式屬性

      文字樣式不外乎文字顏色、字型、字體大小、文字特效等,雖然HTML本身有空制文字外觀的標記,不過文字之樣式選擇性較少;而CSS語法提供較多的文字樣式,可以較有彈性地調整網頁內容中之文字外觀。

      常用之新字字型屬性示如下表:

表1  常用文字字型屬性一覽表

屬性 屬性用途 設定值 備註
color 設定字體顏色

1.顏色名稱(英文)
2.HEX碼(16進位)
3.RGB碼

 
font-family 指定字型樣式

1.字型名稱(例如"標楷體"、"boardway")

 
font-size 設定字體大小

1.設定值+百比分(%)
2.設定值+單位(px、pt、em、ex、cm、mm)

 
font-style 設定文字呈現之型式
(普通、斜體)

1.normal(普通)
2.italic(斜體)
3.oblique(斜體)

 
font-weight 設定文字之粗細
(普通、粗體、超粗體及細體)

1.normal(普通)
2.bold(粗體)
3.bolder(超粗體)
4.lighter(細體)

 

一、<color>屬性

二、<font-family>屬性

三、<font-size>屬性

四、<font-style>屬性

五、<font-weight>屬性

 

貳、文字效果屬性

在編輯網頁內容時,可能會需要上標字、下標字(例如編輯數學公式、化學反應式或註解時),或是為文字加上底線之類的效果,CSS也有提供類似的屬性。常用之文字效果屬性一覽表如下表所示:

表2  常用文字效果屬性一覽表

屬性 屬性用途 設定值 備註
vertical-align 重垂對齊

1.baseline(一般位置)
2.super(上標字)
3.sub(下標字)
4.top(對齊頂端)
5.middle(垂直置中)
6.bottom(對齊底部)

 
text-decoration 增加文字之底線、上方線、刪除線

1.none
2.underline(文字下方線)
3.line-through(刪除線)
4.overline(文字上方線)

 
text-trasform 轉換字母大小寫

1.none
2.lowercase
3.uppercase
4.capitalize

 

 

一、<vertical-align>屬性

二、<text-decoration>屬性

三、<text-trasform>屬性