CSS引入選取器繼承入門教程(一）

CSS檔案的引入：

有如下常用的幾種方法：

代碼如下	複製代碼
1、@import url(‘base.css’); (引入樣式表) 2、<link rel="stylesheet" type="text/css" href="base.css" media="all" />（外鏈樣式表） 3、<style type=”text/css” media=”all”> （內聯樣式表，一般位於header標籤中）          /*                    Css layout                  */          </style> 4、style=” margin:0px; ”（內聯樣式規則）

引入樣式表：

使用這種方法之前，我們首先需要把我們的央視規則內容寫在一個單獨的以CSS為尾碼名的檔案當中。然後才能使用@import 引入這個CSS樣式表檔案。通常我們會把@import 寫在一個使用

代碼如下	複製代碼
<link rel="stylesheet" type="text/css" href="base.css" media="all" />

這種方法引入的樣式表檔案當中或者如下這樣寫

代碼如下	複製代碼
：<style type=”text/css”> @import url(‘layout.css’);</style>。

使用這種方法的好處是我們不需要為每個外部的樣式表檔案寫上一句：<

代碼如下	複製代碼
link rel="stylesheet" type="text/css" href="base.css" media="all" />。

說能夠減少頻寬這種說法是騙人的，因為它始終會被載入進來，只不過是載入的時間不同！@import 會在頁面body載入完成之後才會載入。所以在網速不太理想的情況下，使用！@import引入CSS樣式表的頁面開始載入的時候會顯示的比較混亂，等待一段時間（也就是@import引入的CSS載入進來之後）頁面才會正常的顯示！

PS:@import引入的時候可以不寫url，例如：@import ‘base.css’; 可以不加引號，樣式表的路徑可以是相對定位也可以是絕對位置，語句的末尾必須使用’;’進行結尾，不然會報錯！@import引入的CSS樣式表最好放在其它樣式規則的前面，否則會發生覆蓋的情況，出現一些奇怪的問題。

外鏈樣式表：

這種連結樣式的方式是我們通常最常用的方法！把頁面樣式規則檔案寫在不同的檔案中，然後使用外鏈的方式把它們引入到頁面當中。我們通常把<link rel="stylesheet" type="text/css" href="base.css" media="all" />語句放在<header></header>中。Link標籤中的屬性rel的值定義了樣式表檔案和頁面的關係，有：

    alternate -- 定義交替出現的連結

    appendix -- 定義文檔的附加資訊

    bookmark -- 書籤

    canonical -- 規範網頁是一組內容高度相似的網頁的首選版本

    chapter -- 當前文檔的章節

    contents

    copyright -- 當前文檔的著作權

    glossary -- 詞彙

    help -- 連結協助資訊

    index -- 當前文檔的索引

    next -- 記錄文檔的下一頁.(瀏覽器可以提前載入此頁)

    nofollow -- 不被用於計算PageRank

    prev -- 記錄文檔的上一頁.(定義瀏覽器的後退鍵)

    section -- 作為文檔的一部分

    start -- 通知搜尋引擎,文檔的開始

    stylesheet -- 定義一個外部載入的樣式表

subsection -- 作為文檔的一小部分

此外A標籤也有rel屬性，所以也會有上面的這些值。這些資訊只是稍作瞭解就行。不用完全記錄。

Type屬性定義檔案的類型一般是text/css，告訴伺服器或者需要識別的資源這個是CSS檔案.

Href定義外鏈css檔案的位置，可以使用url進行設定。

Media定義的是使用的平台或者說裝置。預設情況是screen（瀏覽器），還可以有:print, projection(投影儀)，aural（擴音器），all(所有的裝置)。

PS:有些情況下我們的頁面會動態更改CSS樣式檔案，我們可以為LINK標籤加上一個ID屬性，然後使用DOM進行替換href屬性的值就可以了。

內聯樣式表：

<style type=”text/css”>

<!—

         Body{

                   Margin:0;

}

à

</style>

早些的瀏覽器不能識別style標籤會把樣式規則顯示到頁面上，解決方案是為樣式表加上<!---->注釋標籤，可以識別style的瀏覽器會直接忽略這個注釋。

內聯樣式表中也可以使用@import引入樣式表，當然也需要放在規則的第一行位置。

Css3中規定了style標籤就是定義css檔案的標籤，所以我們不需要定義type=”text/css”屬性和值了。

行內樣式：

定義在html標籤中的style屬性當中的樣式規則。此處定義的CSS樣式表在比其它幾種方式定義的規則的優先順序要高，如果同一元素在不同地方定義了樣式規則，此處的樣式會覆蓋其它定義的樣式。

這種方式定義樣式不符合我們設計頁面的時候所要求的結構、表現、行為分離的元素，所以一般情況下不推薦使用。

我個人通常是使用前三種方式，第四種方式基本不去使用。我個人通常會把檔案劃分為如下幾個部分：

Reset.css（重設頁面元素）

golble.css（定義全域常用一般樣式）

form.css（定義表單樣式）

base.css（基本規則樣式表）

然後使用@improt把reset.css,globle.css,form.css引入到base.css的檔案當中。

然後再使用,link標籤把base.css樣式檔案應用到html頁面當中。

PS:樣式表的優先順序，行內樣式>內聯樣式>外鏈樣式>引用樣式