CSS樣式表一席談之CSS快速入門

來源:互聯網
上載者:User
css|快速入門|樣式表   在當今的網頁製作中,幾乎所有漂亮的網頁都用了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的預先設定,你會發現製作網頁變得更輕鬆了。

相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。