CSS初級(jí)教程應(yīng)用CSS_CSS教程

教程Tag：暫無Tag,歡迎添加,賺取U幣!

就如 HTML初級(jí)教程，CSS初級(jí)教程假設(shè)你對CSS一無所知。這個(gè)教程的目的是教授CSS的骨干元素──已經(jīng)可以足夠讓你來開始學(xué)習(xí)了。CSS中級(jí)教程和CSS高級(jí)教程將探討CSS的更深層次。

CSS，或Cascading Styles Sheets，中譯層疊樣式表或級(jí)聯(lián)樣式表，是樣式化HTML的一種方法。HTML是文檔的內(nèi)容，則樣式表是文檔的表現(xiàn)，或者說外觀。

無論聞起來還是嘗起來，樣式表一點(diǎn)都不像HTML。它們有著這樣的格式：“屬性：值(property: value)”，而且大部分屬性可以應(yīng)用到HTML標(biāo)簽中去。

有三條途徑可以把CSS應(yīng)用到HTML中去。

內(nèi)聯(lián)

內(nèi)聯(lián)樣式通過style屬性直接套進(jìn)HTML中去。

看起來像這樣：

示例代碼 [www.hl5o.cn]

這將會(huì)是指定的段落變成紅色。
我們的建議是，HTML應(yīng)該是獨(dú)立的、樣式自由的文檔，所以內(nèi)聯(lián)樣式無論在什么情況下都應(yīng)該盡量避免。

內(nèi)部

內(nèi)部樣式服務(wù)于整個(gè)當(dāng)前頁面。在頭標(biāo)簽head里面，樣式標(biāo)簽style里包含當(dāng)前頁面的所有樣式。
看起來像這樣：

示例代碼 [www.hl5o.cn]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS Example</title>
<style type="text/css">
p { color: red; }
a { color: blue; }
</style>
...

這將使這個(gè)頁面的所有段落都是紅色的，所有的連接都是藍(lán)色的。
與內(nèi)聯(lián)樣式類似，你應(yīng)該是HTML文檔和CSS文檔分離開來，下面，我們的救世來了……

外部

外部樣式為整個(gè)網(wǎng)站的多個(gè)頁面服務(wù)。這是一個(gè)獨(dú)立的CSS文檔，簡單的一個(gè)范例如下：

示例代碼 [www.hl5o.cn]

p { color: red; } a { color: blue; }

假如這個(gè)文檔存為“web.css”的話，它可以這樣跟HTML文檔連接起來：

示例代碼 [www.hl5o.cn]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS Example</title>
<link rel="stylesheet" type="text/css" href="web.css" />
...

在CSS高級(jí)教程中，我們還將看到其他連接外部樣式表的方法，但到目前，這已經(jīng)足夠了。
想從本指南中收獲更多，嘗試著在你的文本編輯器中新建一個(gè)文檔，在HTML文檔相同的目錄中，把這些代碼保存為“web.css”。
現(xiàn)在像下面一樣改進(jìn)你的HTML文檔：

示例代碼 [www.hl5o.cn]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>My first web page</title>
<link rel="stylesheet" type="text/css" href="web.css" />
</head>
...

保存HTML文檔�，F(xiàn)在已經(jīng)把HTML和CSS連接起來了，但還是空白一片，沒有改變什么東西。隨著進(jìn)一步學(xué)習(xí)CSS初級(jí)教程，你可以增添或者改變CSS文檔，通過刷新瀏覽器里的HTML文檔，方便地看到效果，像我們以前做的一樣。
　　