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

作者：陳大魚(yú)頭
github： KRISACHAN

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

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

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

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

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

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

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

屬性與值之間由冒號(hào)隔開(kāi)，聲明與聲明直接由分號(hào)隔開(kāi)。

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

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

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

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

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

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

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




  
      
  
  
      

  

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

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

/* @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是用來(lái)定義使用在CSS樣式表中的XML命名空間的@規(guī)則。

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

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

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

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

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

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

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

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

@supports用來(lái)檢測(cè)規(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)頁(yè)指定文本字體。

/*
 * @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ī)則會(huì)應(yīng)用在下面的網(wǎng)頁(yè):
     + URL為"http://www.w3.org/"的頁(yè)面.
     + 任何URL以"http://www.w3.org/Style/"開(kāi)頭的網(wǎng)頁(yè)
     + 任何主機(jī)名為"mozilla.org"或者主機(jī)名以".mozilla.org"結(jié)尾的網(wǎng)頁(yè)     
     + 任何URL以"https:"開(kāi)頭的網(wǎng)頁(yè) */

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

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

在講CSS的工作流程之前，首先來(lái)簡(jiǎn)單看看頁(yè)面的渲染機(jī)制。

頁(yè)面渲染可分為下面5個(gè)步驟：

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

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

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

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

繪制render tree。

以上便是頁(yè)面渲染的過(guò)程。

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

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

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

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

頁(yè)面渲染初始化；

DOM元素的增刪；

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

resize事件發(fā)生時(shí)。

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

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

瀏覽器是如何工作的？

CSS是如何工作的？

CSS語(yǔ)法

CSS參考 MDN

層疊樣式表

瀏覽器渲染頁(yè)面的過(guò)程

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

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