开始使用 CSS
CSS 需要搭配 HTML 共同使用，因此需要一些简单的步骤才能执行，这篇教学会介绍使用本机环境、线上编辑器来编辑与执行 CSS，并会介绍如何在网页中套用 CSS。
快速导览：
教学影片
搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。
编辑器 ( 本机环境 )
要在本机环境开发 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 方法一：行内样式
第一种套用 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”，例如下方的范例，网页打开后会出现三段不同颜色的文字。
<style>
h2 {color: #f00;}
h3 {color: #00f;}
h4 {color: #0a0;}
</style>
<h2>我是紅色！</h2>
<h3>我是藍色！</h3>
<h4>我是綠色！</h4>
套用 CSS 方法三：link 标记
“link 标记”表示透过 HTML 的“<link rel="stylesheet" href="style.css">”标签“加载外部样式文件” ( 通常 <link> 放在 <head></head> 里 )，例如下方的范例，网页打开后会加载外部的 style.css 文件，让网页出现三段不同颜色的文字。
外部 style.css 内容：
h2 {color: #f00;}
h3 {color: #00f;}
h4 {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>我是紅色！</h2>
<h3>我是藍色！</h3>
<h4>我是綠色！</h4>
</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 内容：
h2 {color: #f00;}
外部 s2.css 内容：
h3 {color: #00f;}
外部 s3.css 内容：
h4 {color: #0f0;}
外部 s.css 内容：
@import url(s1.css); /* 內容是 h2 {color: #f00;} */
@import url(s2.css); /* 內容是 h3 {color: #00f;} */
@import url(s3.css); /* 內容是 h4 {color: #0f0;} */
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>我是紅色！</h2>
<h3>我是藍色！</h3>
<h4>我是綠色！</h4>
</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 文件更容易管理。
微信扫码关注
抖音扫码关注