CSS 语法规则

CSS 虽然不能真正算是程序语言，但也是一种“样式语言”，因此也会有撰写的语法规则和结构，这篇教学会介绍 CSS 的语法规则和结构，只要掌握基本要领，就能写出容易阅读与管理的 CSS。

快速导览：

• 规则结构
• 空白与缩排
• 厂商字首
• 注解
• 巢状结构

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

前往：https://www.youtube.com/@steam.oxxostudio

规则结构

每个 CSS 规则主要分成两个结构，分别是“选择器 selector”和“宣告区块 declaration”，选择器位在结构的左侧，可以选择 HTML 里的特定元素，宣告区块位在结构的右侧，由“大括号 {}”搭配一个以上的“宣告”组成，每个宣告又由一组“属性:数值”组成，每个宣告使用“分号 ;”结尾。

举例来说，下方的写法执行后，会将 h1 里的文字改成“黄底红字”。

h1 { color:red; background:yellow; }

实际撰写时，如果有很多的宣告内容，也可以改成下方“列表式”的写法，在阅读上也会更加一目了然。

h1 { 
  color:red; 
  background:yellow; 
}

空白与缩排

CSS 的“空白”主要目的在于“美化排版”和“方便阅读”，与规则并没有实际的关联性，也不会影响到功能的呈现，CSS 在处理空白的方式与 HTML 相同，会将“多个连续空白合并为一个空白”，下方列出一些常用的空白与缩排规则，实际撰写时不一定要按照这些规则，但这是最常见的排版方式。

下方范例的 h1 是大多数编辑器自动排版时会用的方法，h2 是许多工程师撰写 CSS 时常见的写法，p 则是单行 CSS 的常见写法。

h1 {
  font-size: 30px;
  color: red;
  background: yellow;
}
h2 {
  font-size:20px;
  color:blue;
  background:green;
}
p { font-size:14px; color:black; background:white; }

厂商字首

早期 CSS 为了因应不同的浏览器对于 CSS 的支援度不一致，会刻意在部分属性前方标记“厂商字首 vendor prefix”，藉以区分不同的浏览器所呈现的效果 ( 常见的“破折号 -”标注的都是厂商字首 )，但随着浏览器的进步，逐渐不需使用这些厂商字首，但如果要跨足比较旧版的浏览器，部分属性可能还是需要加上厂商字首。

常见的厂商字首如下：

• -webkit-：以 Webkit 为基础的浏览器，例如 Chrome、Safari。
• -moz：以 Mozilla 为基础的浏览器，例如 Firefox。
• ms：以微软 IE 为基础的浏览器。
• o：以 Opera 为基础的浏览器。

注解

CSS 的注解类似 C/C++ 的注解模式，使用“/* */”包覆注解的内容，注解可以自己独立一行、摆放在宣告区块后方或写在指定属性后方，例如下方三种方式都是常见的注解写法。

/* 這是 h1 呦 */
h1 { color: red; }
h2 { color: blue; }  /* 這是 h2 呦 */
h3 { 
  color: green;       /* 這是綠色呦 */
}

除了单行注解，也可以使用“多行注解”的方式，例如下方使用多行注解的方式说明 h1 和 h2 的差异。

/* 這是 h1 呦
   顏色是紅色
   表示大標題 */
h1 { color:red; }

/* 這是 h2 呦
   顏色是藍色
   表示各個段落的小標題 */
h2 { color:blue; }

使用多行注解需要注意注解的结尾“*/”，只要是包覆在注解里的内容，都会成为注解的一部分，以下方的程序码为例，因为有一些规则被注解所包覆，因此这些规则就不会执行，最后就只有 h1 被改变颜色，h2 和 h3 都不会改变颜色。

h1 { color:red; } /* 這是 h1 呦
h2 { color:red; }    這是 h2 呦
h3 { color:red; }    這是 h3 呦 */

巢状结构

过去除了 CSS 扩展语言 ( 例如 less、sass ) 可以使用巢状结构 ( 大括号里还有大括号 )，通常只有“媒体特性 @media”或“特性查询 @supports”才能使用类似巢状结构的写法 ( 现在 CSS 基本上已经支援巢状结构 )，举例来说，下方 CSS 会让文字在屏幕浏览时呈现红色，打印时呈现蓝色。

更多参考：@media 媒体查询 ( Media Queries )

@media screen {
  h1 {
    color: red;
  }
}
@media print {
  h1 {
    color: blue;
  }
}

虽然现在的 CSS 支援巢状结构，但仍有部分浏览器“不支援”巢状结构，下方范例使用“纯 CSS”写法和“巢状结构”写法呈现同一种样式。

CSS 的巢状结构写法参考：使用巢状结构选择器 ( 嵌套选择器 )。

下方是标准写法：

div {color: gray;}
div h2 {color: red;}
div nav {color: black;}
div nav h2{color: blue;}

改成巢状结构写法：

div {
  color: gray;
  h2 {color: red;}
  nav {
    color: black;
    h2 {
      color: blue;
    }
  }
}

小结

CSS 的语法和结构相当简单，且撰写上也不容易出错，就算出错也只会影响版面设计，因此只要熟练掌握基本的原则，就能够写出干净漂亮的 CSS。

意见反馈