開始使用 CSS
CSS 需要搭配 HTML 共同使用，因此需要一些簡單的步驟才能執行，這篇教學會介紹使用本機環境、線上編輯器來編輯與執行 CSS，並會介紹如何在網頁中套用 CSS。
快速導覽：
編輯器 ( 本機環境 )
要在本機環境開發 CSS，只需使用「可以編輯純文字」的編輯器 ( 例如記事本 )，通常有兩種方法保存 CSS 檔案：
- 獨立檔案 CSS：存檔時副檔名使用「
.css」，就能用「link」標記載入 CSS。- HTML 內嵌 CSS：使用「
<style>」元素內嵌，或將特定樣式直接寫在 HTML 元素標籤中，存檔時與 HTML 一同儲存。
除了純文字編輯工具，也可以使用 VSCode 或 Sublime 這兩套不錯且相當有名的編輯工具，在編輯程式碼之餘，更會使用「顏色」標記 CSS 不同的屬性或樣式，下圖左邊是「純文字」文件，右邊是使用 VSCode「程式碼上色」文件。
編輯器 ( 線上編輯器 )
如果只是要教學或測試 CSS，也可以使用「線上編輯器」撰寫程式，下方列出三個免費線上編輯器：
| 編輯器 | 說明 |
|---|---|
| JS Bin | 老牌的「所見即所得」線上編輯器，可以編輯 HTML、CSS 和 JavaScript，許多課程或是範例分享，都會使用 JS BIN 作為展示。 |
| JSFiddle | 老牌的「所見即所得」線上編輯器，可以編輯 HTML、CSS 和 JavaScript，許多課程或是範例分享，也會使用 JSFiddle 作為展示。 |
| CodePen | 偏向「作品展示」的線上編輯器，除了可以編輯 HTML、CSS 和 JavaScript，更加入社群的功能，讓程式設計師可以在平台裡分享自己的程式作品。 |
此處推薦使用 JS Bin 編輯器，因為 JS Bin 是一個非常老牌且知名的「所見即所得」線上編輯器，可以編輯 HTML、CSS 和 JavaScript，許多課程或是範例分享，都會使用 JS Bin 作為展示。
開啟 JS Bin 後，中間上方可以開啟不同的程式碼區塊，下圖開啟 HTML、CSS 和 Output ( 預覽 ) 區塊，在各自的區塊裡編輯程式碼，立刻就能觀察效果。
套用 CSS ( link 標記 )
第一種套用 CSS 的方法為「行內樣式」，表示直接在 HTML 的元素標籤 ( tag ) 裡，修改 style 屬性，就能把該元素套用指定的樣式，例如下方的範例，網頁開啟後會出現三段不同顏色的文字。
HTML 屬性教學參考：HTML 元素屬性
<h2 style="color:#f00;">我是紅色！</h2>
<h2 style="color:#00f;">我是藍色！</h2>
<h2 style="color:#0a0;">我是綠色！</h2>
套用 CSS ( style 元素 )
「style 元素」表示在 HTML 的「<style></style>」標籤裡撰寫樣式 ( 通常 <style></style> 放在 <head></head> )，這種加入樣式的方法也稱為「文件樣式表 document stylesheet」或「內嵌樣式表 embedded stylesheet」，例如下方的範例，網頁開啟後會出現三段不同顏色的文字。
<h2 style="
<style>
h2{
color:#000;
}
</style>
<h2 style="color:#f00;">我是紅色！</h2>
<h2 style="color:#00f;">我是藍色！</h2>
<h2 style="color:#0a0;">我是綠色！</h2>
套用 CSS ( link 標記 )
「link 標記」表示透過 HTML 的「<link rel="styelsheet" href="style.css">」標籤「載入外部樣式檔案」 ( 通常 <link> 放在 <head></head> 裡 )，例如下方的範例，網頁開啟後會載入外部的 style.css 檔案，讓網頁出現三段不同顏色的文字。
外部 style.css 內容：
.rb{
color:#f00;
}
.bb{
color:#00f;
}
.gb{
color:#0a0;
}
HTML 內容 ( <link> 裡使用 href 屬性載入放在同一個目錄下的 style.css 檔案 )：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>oxxo.studio</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2 class="rb">我是紅色！</h2>
<h2 class="bb">我是藍色！</h2>
<h2 class="gb">我是綠色！</h2>
</body>
</html>
使用 line 標記載入 CSS 時，可以運用「media」屬性設定「哪種媒體載入哪個 CSS」，例如下方的範例，如果使用螢幕開啟網頁，會載入外部的 style-1.css 檔案，網頁會是紅色文字，如果要列印網頁，則會使用 style-2.css 的檔案 ，網頁則會是藍色文字。
外部 style-1.css 內容：
h2{
color:#f00;
}
外部 style-2.css 內容：
h2{
color:#00f;
}
HTML 內容：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>oxxo.studio</title>
<link rel="stylesheet" href="style-1.css" media="screen">
<link rel="stylesheet" href="style-2.css" media="print">
</head>
<body>
<h2>OXXO.STUDIO</h2>
</body>
</html>
套用 CSS ( @import 指令 )
「@import 指令」表示可以讓某個 CSS 檔案「匯入其他 CSS 檔案」的內容，以下方的程式碼為例，s.css 這個 CSS 檔案使用 @import 指令，匯入 s1.css、s2.css 和 s3.css 這三個檔案，最後呈現的結果就會是三個檔案綜合的結果。
注意，@import 指令需要放在 CSS 檔案的開頭，且會按照權重順序執行。
外部 s1.css 內容：
.rb{
color:#f00;
}
外部 s2.css 內容：
.bb{
color:#00f;
}
外部 s3.css 內容：
.gb{
color:#0f0;
}
外部 s.css 內容：
@import url(s1.css);
@import url(s2.css);
@import url(s3.css);
HTML 內容：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>oxxo.studio</title>
<link rel="stylesheet" href="s.css">
</head>
<body>
<h2 class="rb">我是紅色！</h2>
<h2 class="bb">我是藍色！</h2>
<h2 class="gb">我是綠色！</h2>
</body>
</html>
使用 @import 也可以加入「media 媒體類型」，判斷哪種媒體需要載入哪個 CSS，以下方程式碼為例，不論是哪種媒體都會載入 s1.css，如果是印刷則會額外載入 s2.css，如果是螢幕則會額外載入 s3.css。
@import url(s1.css) all;
@import url(s2.css) print;
@import url(s3.css) screen;
小結
要在網頁中使用 CSS 其實並不困難，通常簡單的網頁直接使用行內寫法或 style 寫法，但如果是功能較為複雜的頁面，往往會使用 link 或 @import 的方法處理，藉此讓 CSS 檔案更容易管理。
意見回饋
如果有任何建議或問題，可傳送「意見表單」給我，謝謝～