摘要：本篇則主要介紹的語法與是如何工作的。語法基本規(guī)則規(guī)則主要由兩部分組成選擇器與聲明。用于自定義的樣式用于給網(wǎng)頁指定文本字體。

作者：陳大魚頭
github： KRISACHAN

在上一篇【Hello CSS】的序章CSS起源中介紹了CSS的誕生原因以及發(fā)展歷史，了解了CSS的存在意義。從正篇篇開始將會正式開始介紹CSS這門語言的特點與功能。本篇則主要介紹CSS的語法與CSS是如何工作的。

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

選擇器(selector)是開發(fā)者希望改變樣式的HTML元素。

聲明(declarations)則是開發(fā)者制定的希望HTML改變的元素規(guī)則，可以是一條或多條。

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

屬性(property)是開發(fā)者希望設(shè)置的樣式屬性（style attribute）。

值(value)為屬性的具體內(nèi)容。

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

CSS中的注釋以 /* 開始并以 */ 結(jié)束。

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

上面這行代碼的作用是將 h1 元素內(nèi)的文字顏色定義為紅色，同時將字體大小設(shè)置為 14 像素。

這是基本規(guī)則，具體規(guī)則請看CSS 基礎(chǔ)語法。

每個HTML元素都有初始的樣式，但是也可以經(jīng)過開發(fā)者書寫而改變樣式規(guī)則。

HTML的元素樣式修改有以下的書寫規(guī)則。

h1 {color:red; font-size:14px;}




  
      
  
  
      

  

一個at-rule就是一個CSS語句，以@開頭，后接標(biāo)識符，最后以；結(jié)束。

@charset用于定義樣式表中使用的字符編碼。它必須寫在樣式表的最開頭且前面不可有別的字符。

/* @charset ""; */
@charset "UTF-8";

@import用于導(dǎo)入外部CSS樣式表文件。

/* @import url; */
/* @import url list-of-media-queries; */
@import "custom.css";
@import url("fineprint.css") print;

@namespace是用來定義使用在CSS樣式表中的XML命名空間的@規(guī)則。

/* @namespace ? [  |  ]; */
@namespace url(http://www.w3.org/1999/xhtml);
@namespace svg url(http://www.w3.org/2000/svg);

@media用于定義在一個或多個設(shè)備類型、具體特點和環(huán)境的媒體查詢來應(yīng)用樣式。

/* @media */
@media screen and (min-width: 900px) {
    h1 {
        color:red;
        font-size:14px;
    }
}

@page用于在打印文檔時修改某些CSS屬性。@page規(guī)則只能修改margin、orphans、widow 和 page breaks of the document，對其他屬性的修改是無效的。

/*
 *  @page  {
 *    
 *  }
 */
@page {
    size: 10in 20in;
    margin: 10% 20%;
}

@keyframs通過定義動畫序列中的關(guān)鍵幀來控制CSS動畫不同步驟的狀態(tài)。

/* @keyframes */
@keyframes slidein {
    from {
        margin-left: 100%;
        width: 300%;
    }

    to {
        margin-left: 0%;
        width: 100%;
    }
}

@supports用來檢測規(guī)則組的規(guī)則是否生效。規(guī)則與@media類似

/*
 *  @supports  {
 *    
 *  }
 */
@supports (display: flex) {
    div {
        display: flex;
    }
}

@viewport用于設(shè)置視口（viewport）的特性。

/*
 * @viewport {
 *    
 * }
 */
@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的樣式

/*
 * @counter-style  {
 *   
 * }
 */
@counter-style circled-alpha {
    system: fixed;
    symbols: ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?;
    suffix: " ";
}

.items {
    list-style: circled-alpha;
}

@font-face用于給網(wǎng)頁指定文本字體。

/*
 * @font-face {
 *    
 * } 
 */
@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 }

@document如果滿足條件組的條件，則規(guī)則生效（推延至 CSS Level 4 規(guī)范）

/*
 * @document name(guide) {
 *    
 * }
 */
@document url(http://www.w3.org/),
               url-prefix(http://www.w3.org/Style/),
               domain(mozilla.org),
               regexp("https:.*") {
  /* 該條CSS規(guī)則會應(yīng)用在下面的網(wǎng)頁:
     + URL為"http://www.w3.org/"的頁面.
     + 任何URL以"http://www.w3.org/Style/"開頭的網(wǎng)頁
     + 任何主機名為"mozilla.org"或者主機名以".mozilla.org"結(jié)尾的網(wǎng)頁     
     + 任何URL以"https:"開頭的網(wǎng)頁 */

  /* make the above-mentioned pages really ugly */
    body {
        color: purple;
        background: yellow;
    }
}

注：上面的@規(guī)則屬性并非完整，還有少量相關(guān)的沒有列出，需要詳細列表的可以翻閱MDN

在講CSS的工作流程之前，首先來簡單看看頁面的渲染機制。

頁面渲染可分為下面5個步驟：

處理HTML來創(chuàng)建DOM tree；

處理CSS來創(chuàng)建CSSOM tree；

根據(jù)DOM跟CSSOM來合并render tree；

根據(jù)render tree來布局；

繪制render tree。

以上便是頁面渲染的過程。

從上面的頁面渲染流程可以知道瀏覽器在解析了HTML跟CSS之后便開始合并渲染，簡單來說就是繪制帶有樣式的HTML規(guī)則。

CSS的工作流程就是把CSS規(guī)則定義到DOM tree上。

HTML與CSS具體解析規(guī)則屬于編譯原理的內(nèi)容，在這里就不作展開了。但是有在CSS工作的過程中有兩個詞值得注意的就是重排（reflow）跟重繪（repaint）。

重排：render tree的重新構(gòu)建叫重排。也就是當(dāng)頁面布局或者DOM元素的幾何屬性發(fā)生變化時，就會發(fā)生瀏覽器重排。以下5種情況便會引發(fā)瀏覽器回流：

頁面渲染初始化；

DOM元素的增刪；

DOM元素的位置、尺寸以及引起尺寸變化的內(nèi)容改變；

resize事件發(fā)生時。

重繪：render tree中只影響外觀而不影響風(fēng)格的屬性改變就叫重繪。例如color與background-color的改變。

注：后面的文章會仔細講解重排（reflow）跟重繪（repaint）以及相關(guān)的性能問題與優(yōu)化。

瀏覽器是如何工作的？

CSS是如何工作的？

CSS語法

CSS參考 MDN

層疊樣式表

瀏覽器渲染頁面的過程

【Hello CSS】是以CSS基礎(chǔ)概念為主題的系列文章，旨在幫助大家更深刻地了解并且提高CSS在各位開發(fā)者心目中的地位。由于魚頭我水平有限，文筆有限，如果各位在文章中發(fā)現(xiàn)有任何不合理，不正確的地方，還煩不吝指出，我會非常感謝的；如果通過文章有任何想法或疑問，也希望各位能積極留言，我們互相探討；如果通過本系列文章有所收獲，這就讓魚頭我喜不自勝了！

如果你也喜歡CSS，喜歡探討技術(shù)，或者對本文，本系列有任何的意見或建議，魚頭非常希望你能加入一個有趣的微信群 — “進擊的CSS”。你可以掃描下方二維碼，添加魚頭微信，添加時注明 “加群”，如果你覺得我的文章有趣，歡迎關(guān)注微信公眾號“魚頭的Web海洋”。衷心希望可以遇見你。