【CSS新手必讀】CSS 套用方式
下面內容轉自1keydata.com
我們可以用以下四種方式，將 CSS 套用入 HTML 文件中：
行內套用 (Inline)
嵌入套用 (Embed)
外部連接套用 (External Link)
匯入套用 (Import)
行內套用
我們可以在 HTML 文件內直接宣告樣式。
以上的 HTML 文件在瀏覽器上會顯現為：
嵌入套用
樣式可以嵌入於 HTML 文件中 (通常是在 <head> 內)。舉例來說，
外部連接套用
在這種方式下，所有的 CSS 樣式宣告都是存在另外一個檔案中。該檔案通常名稱為 .css。在 HTML 文件的 <header> .. </header> 之中，我們將用以下的程式碼將這個 .css 檔案連接進入：
匯入套用
外部的 CSS 樣式也可以被匯入進 HTML 文件。匯入的做法為利用 @import 這個指令。@import 的語法為：
@import 指令最初的用意，是為了能夠針對不同的瀏覽器而運用不同的樣式。不過，現在已經沒有這個必要。現在用 @import 的目的，最常是要加入多個 CSS 樣式。當多個 CSS 樣式被 @import 的方式加入，而不同 CSS 樣式互相有衝突時，後被加入的 CSS 樣式有優先的順位
從最高優先權到最低優先權的排名如下：
內行套用的樣式表 (Inline stylesheet)
嵌入套用的樣式表 (Embedded stylesheet)
匯入套用的樣式表 (Imported stylesheet)
外部連接套用的樣式表 (Linked stylesheet)
瀏覽器本身的樣式表 (Browser's own stylesheet)
我們可以用以下四種方式，將 CSS 套用入 HTML 文件中：
行內套用 (Inline)
嵌入套用 (Embed)
外部連接套用 (External Link)
匯入套用 (Import)
行內套用
我們可以在 HTML 文件內直接宣告樣式。
<p style='font-family:verdana; font-size:16;'>這字體大小為16</p>
以上的 HTML 文件在瀏覽器上會顯現為：
這字體大小為16
嵌入套用
樣式可以嵌入於 HTML 文件中 (通常是在 <head> 內)。舉例來說，
<head>
<style type="text/css">
div {
background-color:#FF0000;
}
</style>
</head>
<body>
<div>
背景顏色是紅色
</div>
</body>
以上的 HTML 會顯現出：
背景顏色是紅色
外部連接套用
在這種方式下，所有的 CSS 樣式宣告都是存在另外一個檔案中。該檔案通常名稱為 .css。在 HTML 文件的 <header> .. </header> 之中，我們將用以下的程式碼將這個 .css 檔案連接進入：
<link rel=stylesheet type="text/css" href="external-stylesheet.css">以上這一行會將在 external-stylesheet.css 這個檔案內所宣告的樣式加入 HTML 文件內。
匯入套用
外部的 CSS 樣式也可以被匯入進 HTML 文件。匯入的做法為利用 @import 這個指令。@import 的語法為：
<STYLE TYPE="text/css"> <!-- @import url(http://www.w3school.com.cn/c3.css); --> </STYLE>
@import 指令最初的用意，是為了能夠針對不同的瀏覽器而運用不同的樣式。不過，現在已經沒有這個必要。現在用 @import 的目的，最常是要加入多個 CSS 樣式。當多個 CSS 樣式被 @import 的方式加入，而不同 CSS 樣式互相有衝突時，後被加入的 CSS 樣式有優先的順位
從最高優先權到最低優先權的排名如下：
內行套用的樣式表 (Inline stylesheet)
嵌入套用的樣式表 (Embedded stylesheet)
匯入套用的樣式表 (Imported stylesheet)
外部連接套用的樣式表 (Linked stylesheet)
瀏覽器本身的樣式表 (Browser's own stylesheet)
沒有留言