網頁中引入css方式

阿新 • • 發佈：2018-12-31

網頁中引入css方式

要想在瀏覽器上顯示出樣式表效果，就要讓瀏覽器識別並呼叫。當瀏覽器讀取樣式表時，要依照文字格式來讀。以下是四種在頁面中引用樣式表的方法：定義內部樣式表、定義行內樣式表、鏈入外部樣式表和匯入外部樣式表。
1.內部樣式表
單個頁面需要應用樣式時，最好使用內部樣式表。可以用標籤在文件頭部…區內定義內部樣式表，type屬性是必須的，定義style元素的內容型別，其唯一的值是“text/css”。內部樣式可以在整個頁面中呼叫。
（1）內部樣式表的格式

<style type="text/css">
<!--
選擇符1{屬性：屬性值； 屬性：屬性值…}         /*註釋內容*/
選擇符2{屬性：屬性值； 屬性：屬性值…}
…
</style>

(2)組合選擇符的格式

<style type="text/css">
<!--選擇符1，選擇符2，…，選擇符n{屬性：屬性值；屬性：屬性值…}
-->
</style>

2.行內樣式表
行內樣式表就是在元素標籤內使用style屬性，style屬性值可以包含任何CSS樣式宣告。用這個方法，可以很簡單地堆某個標籤單獨定義樣式表。這種樣式表只對所定義的標籤起作用，並不對整個頁面起作用。
行內樣式表的格式為：

<標籤 style="屬性：屬性值;屬性：屬性值…">

3.鏈入外部樣式表
多個頁面需要應用相同的樣式時，應該使用外部樣式表。外部樣式表將宣告的樣式放在樣式檔案中，當頁面需要使用樣式時，通過<link>標籤連結外部樣式表文件。使用外部樣式表，可以通過改變一個檔案就能改變整個站點的外觀。
（1）用<link>標籤連結樣式表文件
<link>標籤必須放到頁面的<head>…</head>標籤內部。其格式為：

<head>
…
<link rel="stylesheet" href="外部樣式表文件名.CSS" type="text/css">
…
</head>

(2）樣式表文件的格式

選擇符1{屬性：屬性值；屬性：屬性值…}
選擇符2{屬性：屬性值；屬性：屬性值…}
…
選擇符n{屬性：屬性值；屬性：屬性值…}

4.匯入外部樣式表
匯入外部樣式表就是當瀏覽器讀取HTML檔案時，複製一份樣式表到這個HTML檔案中，即在內部樣式表的

<style type="text/css">
<!--
@import url("外部樣式表的檔名1.css");
@import url("外部樣式表的檔名2.css");
其他樣式表的宣告
-->
<style>

以上是四種在頁面中引用樣式表的方法。

網頁中引入css方式