【Hello CSS】第一章-CSS的語法與工做流

時間 2019-12-07

原文原文鏈接

做者：陳大魚頭

github： KRISACHAN

在上一篇【Hello CSS】的序章CSS起源中介紹了CSS的誕生緣由以及發展歷史，瞭解了CSS的存在乎義。從正篇篇開始將會正式開始介紹CSS這門語言的特色與功能。本篇則主要介紹CSS的語法與CSS是如何工做的。css

CSS語法

1. 基本規則

CSS規則主要由兩部分組成： 選擇器(selector)與 聲明(declarations)。

選擇器(selector)是開發者但願改變樣式的HTML元素。html

聲明(declarations)則是開發者制定的但願HTML改變的元素規則，能夠是一條或多條。html5

每條聲明(declarations)由一個屬性(property)和一個值(value)組成。git

屬性(property)是開發者但願設置的樣式屬性（style attribute）。github

值(value)爲屬性的具體內容。api

屬性與值之間由冒號隔開，聲明與聲明直接由分號隔開。瀏覽器

CSS中的註釋以 /* 開始並以 */ 結束。微信

/* selector {property: value} */
h1 {color:red; font-size:14px;}

上面這行代碼的做用是將 h1 元素內的文字顏色定義爲紅色，同時將字體大小設置爲 14 像素。dom

這是基本規則，具體規則請看CSS 基礎語法。ide

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海洋」。衷心但願能夠碰見你。