CSS 套用方式

CSS 教學 > CSS 套用方式

我們可以用以下四種方式，將 CSS 套用入 HTML 文件中：

行內套用 (Inline)

嵌入套用 (Embed)

外部連接套用 (External Link)

匯入套用 (Import)

行內套用

我們可以在 HTML 文件內直接宣告樣式。舉例來說，

以上的 HTML 文件在瀏覽器上會顯現為：

This is font size 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 檔案連接進入：

以上這一行會將在 external-stylesheet.css 這個檔案內所宣告的樣式加入 HTML 文件內。

匯入套用

外部的 CSS 樣式也可以被匯入進 HTML 文件。匯入的做法為利用 @import 這個指令。@import 的語法為：

@import 指令最初的用意，是為了能夠針對不同的瀏覽器而運用不同的樣式。不過，現在已經沒有這個必要。現在用 @import 的目的，最常是要加入多個 CSS 樣式。當多個 CSS 樣式被 @import 的方式加入，而不同 CSS 樣式互相有衝突時，後被加入的 CSS 樣式有優先的順位 (詳情請見 CSS 串接)。

下一頁： CSS 媒體類別

CSS 語法教學
CSS 語法
CSS 套用方式
CSS 媒體類別
CSS 串接
CSS 繼承
CSS Class 與 ID
CSS Div 與 Span
CSS 長度單位

CSS 盒子模式
CSS 邊界 (Margin)
CSS 邊框 (Border)
CSS 留白 (Padding)
CSS 背景 (Background)
CSS 顏色
CSS 字體
CSS 連接
CSS 清單 (List)
CSS 表格 (Table)
CSS 位置 (Position)
CSS 文字 (Text)
CSS 浮動 (Float)
CSS 清除 (Clear)
CSS 滑鼠游標圖案

CSS 樣式