CSS快速入門(轉)[@more@]

　　在當今的網頁製作中，幾乎所有漂亮的網頁都用了CSS。 CSS是 Cascading Style Sheet的縮寫，有些書上把它譯為 “層疊樣式表”。有了CSS的控制，我們的網頁便會給人一種賞心悅目、工工整整的感覺，同時字型的色彩變化也使主頁變得更加生動活潑。雖然只短短的十幾行程式碼，得到的效果卻不同凡響。其基本用法是在網頁中插入如下格式的一段程式碼：

　　下面以一段比較典型的CSS程式碼為例介紹其具體用法。

　　例：這段程式碼中間的部分共七行，可看出有這樣的特點：前兩行的格式分別為P {……} 和 TD {……} 。後五行均是 A:命令詞 {……} 的格式。其中前兩行的作用是對網頁文字的字型、大小、顏色等的控制，而後五行則是對連結的色彩及下劃線的控制。

　　1.文字控制

　　例中的前兩行:

　　P {FONT－FAMILY: 宋體; FONT－SIZE: 9pt; LINE－HEIGHT: 12pt; color:＃000000} TD {FONT－FAMILY: 宋體; FONT－SIZE: 9pt} 說明：FONT－FAMILY:宋體;(指定網頁文字的字型) FONT－SIZE:9pt;（指定網頁文字的字號大小，pt是表示大小的單位）LINE－HEIGHT:12pt;（指定行與行的垂直距離，即行高）color:＃000000（指定網頁文字的顏色，＃000000 代表黑色，為十六進位制數）TD {FONT－FAMILY:宋體;FONT－SIZE:9pt}（對網頁表格裡的文字進行控制）

　　2.連結色彩變化及下劃線的控制

　　例中的後5行說明：

　　A:hover {BACKGROUND－COLOR: ＃ffccff; COLOR: ＃0080ff}

　　(hover表示滑鼠指示時,連結文字背景色為＃ffccff;前景色為＃0080ff)

　　A:link {color:＃000000;TEXT－DECORATION: none}

　　(link表示未被訪問時,連結顏色為黑色,連結無下劃線.)

　　A:visited {color:gray;TEXT－DECORATION: none}

　　(visited表示被訪問後,連結顏色為灰色,連結無下劃線.)

　　A:active {color:green;text－decoration: none}

　　(active表示滑鼠點選時,連結顏色為綠色,連結無下劃線.)

　　A:hover {TEXT－DECORATION: underline}

　　(hover表示滑鼠指示時,連結顯示下劃線)

　　註釋：

　　none――沒有下劃線

　　underline――下劃線

　　overline――上劃線

　　line－through――中劃線

　　以上是比較典型的一段CSS程式碼，程式碼中的引數值可隨意更換除錯。有了CSS的預先設定，你會發現製作網頁變得更輕鬆了。

CSS快速入門(轉)

相關文章