重學前端筆記（七）-CSS語法
去除空格、HTML註釋等無效信息，CSS的頂層樣式表由兩種規則組成的規則列表構成，一種被稱爲 at-rule，也就是at 規則，另一種是 qualified rule，也就是普通規則。
at-rule由一個 @ 關鍵字和後續的一個區塊組成，如果沒有區塊，則以分號結束。
這些at規則正是掌握CSS的一些高級特性所必須的內容。qualified rule則是指普通的CSS規則，也就是我們所熟識的，由選擇器和屬性指定構成的規則。
at 規則
所有的CSS標準裏找到所有可能的 at-rule：
- @charset ： https://www.w3.org/TR/css-syntax-3/
- @import ：https://www.w3.org/TR/css-cascade-4/
- @media ：https://www.w3.org/TR/css3-conditional/
- @page ： https://www.w3.org/TR/css-page-3/
- @counter-style ：https://www.w3.org/TR/css-counter-styles-3
- @keyframes ：https://www.w3.org/TR/css-animations-1/
- @fontface ：https://www.w3.org/TR/css-fonts-3/
- @supports ：https://www.w3.org/TR/css3-conditional/
- @namespace ：https://www.w3.org/TR/css-namespaces-3/
簡單的例子和介紹：
@charset
@charset用於提示CSS文件使用的字符編碼方式，它如果被使用，必須出現在最前面。這個規則只在給出語法解析階段前使用，並不影響頁面上的展示效果。
@charset "utf-8";
@import
@import用於引入一個CSS文件，除了@charset規則不會被引入，@import可以引入另一個文件的全部內容。
@import "mystyle.css";
@import url("mystyle.css");
@import [ <url> | <string> ]
[ supports( [ <supports-condition> | <declaration> ] ) ]?
<media-query-list>? ;
通過代碼，我們可以看出，import還支持 supports 和media query形式。
@media
media就是大名鼎鼎的media query使用的規則了，它能夠對設備的類型進行一些判斷。在media的區塊內，是普通規則列表。
@media print {
body { font-size: 10pt }
}
@page
page用於分頁媒體訪問網頁時的表現設置，頁面是一種特殊的盒模型結構，除了頁面本身，還可以設置它周圍的盒。
@page {
size: 8.5in 11in;
margin: 10%;
@top-left {
content: "Hamlet";
}
@top-right {
content: "Page " counter(page);
}
}
@ counter-style
counter-style產生一種數據，用於定義列表項的表現。
@counter-style triangle {
system: cyclic;
symbols: ‣;
suffix: " ";
}
@ key-frames
keyframes產生一種數據，用於定義動畫關鍵幀。
@keyframes diagonal-slide {
from {
left: 0;
top: 0;
}
to {
left: 100px;
top: 100px;
}
}
@ fontface
fontface用於定義一種字體，icon font技術就是利用這個特性來實現的。
@font-face {
font-family: Gentium;
src: url(http://example.com/fonts/Gentium.woff);
}
p { font-family: Gentium, serif; }
@ support
support檢查環境的特性，它與media比較類似。
@ namespace
用於跟XML命名空間配合的一個規則，表示內部的CSS選擇器全都帶上特定命名空間。
@ viewport
用於設置視口的一些特性，不過兼容性目前不是很好，多數時候被html的meta代替。
其它
除了以上這些，還有些目前不太推薦使用的at規則。
- @color-profile 是 SVG1.0 引入的CSS特性，但是實現狀況不怎麼好。
- @document 還沒討論清楚，被推遲到了CSS4中。
- @font-feature-values 。todo查一下。
普通規則
qualified rule主要是由選擇器和聲明區塊構成。聲明區塊又由屬性和值構成。我在下面的列表中，介紹了這部分語法的組成要點。
選擇器
選擇器，它有一份獨立的標準，我們可以參考這個網址：https://www.w3.org/TR/selectors-4/
我們從語法結構可以看出，任何選擇器，都是由幾個符號結構連接的：空格、大於號、加號、波浪線、雙豎線，這裏需要注意一下，空格，即爲後代選擇器的優先級較低。
然後對每一個選擇器來說，如果它不是僞元素的話，由幾個可選的部分組成，標籤類型選擇器，id、class、屬性和僞類，它們中只要出現一個，就構成了選擇器。
如果它是僞元素，則在這個結構之後追加僞元素。只有僞類可以出現在僞元素之後。我在下面用一個列表（不太嚴謹地）整理了選擇器的語法結構：
我們在這裏可以參考一個示例圖：
聲明：屬性和值
聲明部分是一個由“屬性:值”組成的序列。
屬性是由中劃線、下劃線、字母等組成的標識符，CSS還支持使用反斜槓轉義。我們需要注意的是：屬性不允許使用連續的兩個中劃線開頭，這樣的屬性會被認爲是CSS變量。
在CSS Variables標準中，以雙中劃線開頭的屬性被當作變量，與之配合的則是 var 函數：
:root {
--main-color: #06c;
--accent-color: #006;
}
/* The rest of the CSS file */
#foo h1 {
color: var(--main-color);
}
值的部分，主要在標準 CSS Values and Unit，根據每個CSS屬性可以取到不同的值，這裏的值可能是字符串、標識符。
CSS屬性值可能是以下類型。
- CSS範圍的關鍵字：initial，unset，inherit，任何屬性都可以的關鍵字。
- 字符串：比如content屬性。
- URL：使用url() 函數的URL值。
- 整數/實數：比如flex屬性。
- 維度：單位的整數/實數，比如width屬性。
- 百分比：大部分維度都支持。
- 顏色：比如background-color屬性。
- 圖片：比如background-image屬性。
- 2D位置：比如background-position屬性。
- 函數：來自函數的值，比如transform屬性。
這裏我們要重點介紹一下函數。一些屬性會要求產生函數類型的值，比如easing-function會要求cubic-bezier()函數的值：
- calc()
- max()
- min()
- clamp()
- toggle()
- attr(）
CSS支持一批特定的計算型函數：
calc()函數是基本的表達式計算，它支持加減乘除四則運算。在針對維度進行計算時，calc()函數允許不同單位混合運算，這非常的有用。
section {
float: left;
margin: 1em; border: solid 1px;
width: calc(100%/3 - 2*1em - 2*1px);
}
max()、min()和clamp()則是一些比較大小的函數，max()表示取兩數中較大的一個，min()表示取兩數之中較小的一個，clamp()則是給一個值限定一個範圍，超出範圍外則使用範圍的最大或者最小值。
toggle()函數在規則選中多於一個元素時生效，它會在幾個值之間來回切換，比如我們要讓一個列表項的樣式圓點和方點間隔出現，可以使用下面代碼：
ul { list-style-type: toggle(circle, square); }
attr()函數允許CSS接受屬性值的控制。
CSS 函數
按照功能，分成以下 5 個類別（可能並不完全準確）：
1. 圖片
- filter
- blur()
- brightness()
- contrast()
- drop-shadow()
- grayscale()
- hue_rotate()
- invert()
- opacity()
- saturate()
- sepia()
- cross-fade()
- element()
- image-set()
- imagefunction()
2. 圖形繪製
- conic-gradient()
- linear-gradient()
- radial-gradient()
- repeating-linear-gradient()
- repeating-radial-gradient()
- shape()
3. 佈局
- calc()
- clamp()
- fit-content()
- max()
- min()
- minmax()
- repeat()
4. 變形/動畫
- transform
- matrix()
- matrix3d()
- perspective()
- rotate()
- rotate3d()
- rotateX()
- rotateY()
- rotateZ()
- scale()
- scale3d()
- scaleX()
- scaleY()
- scaleZ()
- skew()
- skewX()
- skewY()
- translate()
- translate3d()
- translateX()
- translateY()
- translateZ()
5. 環境與元素
- var()
- env()
- attr()
