HTML 套用 CSS 样式
如果说 HTML 负责建构网页的骨架，CSS 就是负责处理网页的外观，这篇教学将会介绍 HTML 里三种套用 CSS 的方法。
快速导览：
所有范例可使用 JS Bin、CodePen 或 JSFiddle 进行线上实作，或使用笔记本编辑，不用安装任何软件 ( 参考：使用 HTML 编辑器 )
什么是 CSS？
CSS 是 阶层样式表 ( Cascading Stylesheets ) 的缩写，既非标准程序语言，也不是标记语言, 而是一种风格页面语言，CSS 能在不同的 HTML 元素上头，套用不同的样式，例如颜色、字体、文字大小、间距、定位和布局方式...等，只要是攸关网页样式的设定，几乎都是透过 CSS 进行处理 ( 从 HTML5 开始，语法规范中也舍弃了许多单纯透过 HTML 调整样式的元件属性 )。
CSS 教学参考：CSS 教学
套用 CSS 的三种方法
要在 HTML 套用 CSS，有下列三种方法：
- 行内撰写 ( Inline )：直接在元素标签的 style 属性撰写样式。
- 内部撰写 ( Internal )：在 HTML 里的
<style></style>标签里撰写样式。- 外部加载 ( External )：透过 HTML 的
<link rel="styelsheet" href="style.css">标签加载外部样式文件。
行内撰写 ( Inline )
“行内撰写 ( Inline )”方法表示“直接在元素标签的 style 属性里撰写 CSS 样式语法”，例如下方的范例，网页打开后会出现三段不同颜色的文字。
<h2 style="color:#f00;">我是紅色！</h2>
<h2 style="color:#00f;">我是藍色！</h2>
<h2 style="color:#0a0;">我是綠色！</h2>
由于行内撰写 ( Inline ) 方法的“权重”为第二高 ( 通常第一高是使用 !important )，使用后容易覆盖掉内部与外部套用的 CSS 样式，以下方的例子，例如下方的范例，虽然有使用 <style></style> 撰写样式，但因为权重较小，网页仍然会出现三段不同颜色的文字。
<style>
h2{
color:#000;
}
</style>
<h2 style="color:#f00;">我是紅色！</h2>
<h2 style="color:#00f;">我是藍色！</h2>
<h2 style="color:#0a0;">我是綠色！</h2>
内部撰写 ( Internal )
“内部撰写 ( Internal )”方法表示“在 HTML 里的 <style></style> 标签里撰写样式”( 通常会将 <style></style> 放在 <head></head> 里 )，例如下方的范例，网页打开后会出现三段不同颜色的文字。
<style>
h2{
color:#f00;
}
h3{
color:#00f;
}
h4{
color:#0a0;
}
</style>
<h2>我是紅色！</h2>
<h3>我是藍色！</h3>
<h4>我是綠色！</h4>
使用 内部撰写 ( Internal ) 或 外部加载 ( External ) 方法，通常都会搭配“CSS 选择器”( 选择 tag 名称、class、id 或属性 ) 一起使用，例如下方的范例，网页打开后会分别将样式套用到不同的 class 里，出现三段不同颜色的文字。
<style>
.rb{
color:#f00;
}
.bb{
color:#00f;
}
.gb{
color:#0a0;
}
</style>
<h2 class="rb">我是紅色！</h2>
<h2 class="bb">我是藍色！</h2>
<h2 class="gb">我是綠色！</h2>
外部加载 ( External )
“外部加载 ( External )”方法表示“透过 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 rel="stylesheet" href="style.css">
<h2 class="rb">我是紅色！</h2>
<h2 class="bb">我是藍色！</h2>
<h2 class="gb">我是綠色！</h2>
小结
通常 HTML 和 CSS 有着密不可分的关系，就如同人体的骨架和外皮是同等重要，因此在熟悉 HTML 语法之后，下一步就会接续学习 CSS 样式啰！
CSS 教学参考：CSS 教学
微信扫码关注
抖音扫码关注