- 首發：krissarea.gitee.io
- 作者：陳大魚頭
- github： KRISACHAN
在上一篇【Hello CSS】的序章CSS起源中介紹了CSS的誕生原因以及發展歷史，瞭解了CSS的存在意義。從正篇篇開始將會正式開始介紹CSS這門語言的特點與功能。本篇則主要介紹CSS的語法與CSS是如何工作的。
CSS語法
1. 基本規則
CSS規則主要由兩部分組成：選擇器(selector)與宣告(declarations)。
選擇器(selector)是開發者希望改變樣式的HTML元素。
宣告(declarations)則是開發者制定的希望HTML改變的元素規則，可以是一條或多條。
每條宣告(declarations)由一個屬性(property)和一個值(value)組成。
屬性(property)是開發者希望設定的樣式屬性（style attribute）。
值(value)為屬性的具體內容。
屬性與值之間由冒號隔開，宣告與宣告直接由分號隔開。
CSS中的註釋以 /* 開始並以 */ 結束。
/* selector {property: value} */
h1 {color:red; font-size:14px;}
複製程式碼上面這行程式碼的作用是將 h1 元素內的文字顏色定義為紅色，同時將字型大小設定為 14 畫素。
這是基本規則，具體規則請看CSS 基礎語法。
2. 樣式表書寫規則
每個HTML元素都有初始的樣式，但是也可以經過開發者書寫而改變樣式規則。
HTML的元素樣式修改有以下的書寫規則。
內部樣式表（寫在<head>標籤內部）
<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:red; font-size:14px;}
</style>
</head>
<body>
</body>
</html>
複製程式碼內聯樣式（寫在HTML標籤中）
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 style="color:red; font-size:14px;"></h1>
</body>
</html>
複製程式碼外部樣式表（寫在CSS檔案中，引入到HTML裡）
<!-- style.css -->
h1 {color:red; font-size:14px;}
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1></h1>
</body>
</html>
複製程式碼3. @規則（at-rule）
一個at-rule就是一個CSS語句，以
@開頭，後接識別符號，最後以；結束。
@charset
@charset用於定義樣式表中使用的字元編碼。它必須寫在樣式表的最開頭且前面不可有別的字元。
/* @charset "<charset>"; */
@charset "UTF-8";
複製程式碼@import
@import用於匯入外部CSS樣式表檔案。
/* @import url; */
/* @import url list-of-media-queries; */
@import 'custom.css';
@import url("fineprint.css") print;
複製程式碼@namespace
@namespace是用來定義使用在CSS樣式表中的XML名稱空間的@規則。
/* @namespace <namespace-prefix>? [ <string> | <url> ]; */
@namespace url(http://www.w3.org/1999/xhtml);
@namespace svg url(http://www.w3.org/2000/svg);
複製程式碼@media
@media用於定義在一個或多個裝置型別、具體特點和環境的媒體查詢來應用樣式。
/* @media */
@media screen and (min-width: 900px) {
h1 {
color:red;
font-size:14px;
}
}
複製程式碼@page
@page用於在列印文件時修改某些CSS屬性。@page規則只能修改margin、orphans、widow 和 page breaks of the document，對其他屬性的修改是無效的。
/*
* @page <page-selector-list> {
* <page-body>
* }
*/
@page {
size: 10in 20in;
margin: 10% 20%;
}
複製程式碼@keyframes
@keyframs通過定義動畫序列中的關鍵幀來控制CSS動畫不同步驟的狀態。
/* @keyframes */
@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}
複製程式碼@supports
@supports用來檢測規則組的規則是否生效。規則與@media類似
/*
* @supports <supports_condition> {
* <specific rules>
* }
*/
@supports (display: flex) {
div {
display: flex;
}
}
複製程式碼@viewport
@viewport用於設定視口（viewport）的特性。
/*
* @viewport {
* <group-rule-body>
* }
*/
@viewport {
min-width: 640px;
max-width: 800px;
}
@viewport {
zoom: 0.75;
min-zoom: 0.5;
max-zoom: 0.9;
}
@viewport {
orientation: landscape;
}
複製程式碼@counter-style
@counter-style用於自定義counter的樣式
/*
* @counter-style <counter-style-name> {
* <group-rule-body>
* }
*/
@counter-style circled-alpha {
system: fixed;
symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
suffix: " ";
}
.items {
list-style: circled-alpha;
}
複製程式碼@font-face
@font-face用於給網頁指定文字字型。
/*
* @font-face {
* <group-rule-body>
* }
*/
@font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}
body { font-family: "Bitstream Vera Serif Bold", serif }
複製程式碼@doucment
@document如果滿足條件組的條件，則規則生效（推延至 CSS Level 4 規範）
/*
* @document name(guide) {
* <group-rule-body>
* }
*/
@document url(http://www.w3.org/),
url-prefix(http://www.w3.org/Style/),
domain(mozilla.org),
regexp("https:.*") {
/* 該條CSS規則會應用在下面的網頁:
+ URL為"http://www.w3.org/"的頁面.
+ 任何URL以"http://www.w3.org/Style/"開頭的網頁
+ 任何主機名為"mozilla.org"或者主機名以".mozilla.org"結尾的網頁
+ 任何URL以"https:"開頭的網頁 */
/* make the above-mentioned pages really ugly */
body {
color: purple;
background: yellow;
}
}
複製程式碼注：上面的@規則屬性並非完整，還有少量相關的沒有列出，需要詳細列表的可以翻閱MDN
CSS是如何工作的？
頁面渲染機制
在講CSS的工作流程之前，首先來簡單看看頁面的渲染機制。
頁面渲染可分為下面5個步驟：
- 處理
HTML來建立DOM tree； - 處理
CSS來建立CSSOM tree； - 根據
DOM跟CSSOM來合併render tree； - 根據
render tree來佈局； - 繪製
render tree。
以上便是頁面渲染的過程。
CSS的工作流程
從上面的頁面渲染流程可以知道瀏覽器在解析了HTML跟CSS之後便開始合併渲染，簡單來說就是繪製帶有樣式的HTML規則。
CSS的工作流程就是把CSS規則定義到DOM tree上。
HTML與CSS具體解析規則屬於編譯原理的內容，在這裡就不作展開了。但是有在CSS工作的過程中有兩個詞值得注意的就是重排（reflow）跟重繪（repaint）。
- 重排：
render tree的重新構建叫重排。也就是當頁面佈局或者DOM元素的幾何屬性發生變化時，就會發生瀏覽器重排。以下5種情況便會引發瀏覽器迴流：- 頁面渲染初始化；
DOM元素的增刪；DOM元素的位置、尺寸以及引起尺寸變化的內容改變；resize事件發生時。
- 重繪：
render tree中隻影響外觀而不影響風格的屬性改變就叫重繪。例如color與background-color的改變。
注：後面的文章會仔細講解重排（reflow）跟重繪（repaint）以及相關的效能問題與優化。
參考資料
【Hello CSS】系列
【Hello CSS】是以CSS基礎概念為主題的系列文章，旨在幫助大家更深刻地瞭解並且提高CSS在各位開發者心目中的地位。由於魚頭我水平有限，文筆有限，如果各位在文章中發現有任何不合理，不正確的地方，還煩不吝指出，我會非常感謝的；如果通過文章有任何想法或疑問，也希望各位能積極留言，我們互相探討；如果通過本系列文章有所收穫，這就讓魚頭我喜不自勝了！
如果你也喜歡`CSS`，喜歡探討技術，或者對本文，本系列有任何的意見或建議，魚頭非常希望你能加入一個有趣的微信群 — “進擊的CSS”。你可以掃描下方二維碼，新增魚頭微信，新增時註明 “加群”，如果你覺得我的文章有趣，歡迎關注微信公眾號“魚頭的Web海洋”。衷心希望可以遇見你。