網頁教學：利用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>屬性