Like HTML, CSS is not a programming language. It's not a markup language either. CSS is a style sheet language. MDN What is CSS?

CSS的重要概念是聯級、權重、繼承，而這樣的設計是為了更加彈性的處理畫面，畢竟畫面主要是由使用者、作者、代理UA三者共同來決定，為了處理這個問題而產生的『彈性機制』。這邊引用了大量的原文，不做太多的翻譯，是為了讓事情簡單一點(稀釋太多，怕跑掉原汁原味)也貼心附上原文出處，想了解更多歡迎前往探險。然而這些解釋名詞，需要透過有操作幾次的經驗，才比較有感在供蝦密。如果還沒用過CSS這無疑是天書無誤！

奇怪的CSS？

CSS不同於程式語言的原因之一，因為畫面呈現的控制權，是由使用者、作者、代理ＵＡ裝置所決定的。如何跟各種裝置大小互動，是CSS很重要的事情！

• Cascade 藉由這些規則，讓瀏覽器會考慮所有的變數，形成最終渲染畫面狀態 the different var and put them together the Cascade
• CSS is declarative language 陳述性語言
  describe intent rather than specific steps is designers suggest not control
• more linguistic then logical 語言性大於邏輯性
  comminicating subtext and implications 傳達潛台詞和意義
• meaningful relationships 有意義的關係
  normal flow and relative unites
• intentionally resilient 故意有彈性
  fails silently up the cascade
• intentionally contextual 有意地結合上下文
  isolation would defeat the purpose
  寫CSS就像在排戲劇，是攸關上下文的。就是上一句與下一句的關係。
• CSS is presentation layer
  graceful degradation & progressive enhancement are built in

參考資料：Why Is CSS So Weird?
更多閱讀：W3C 2.4 CSS design principles

W3C規範名詞解釋

Style sheet
A set of statements that specify presentation of a document.
Style sheets may have three different origins: author, user, and user agent. The interaction of these sources is described in the section on cascading and inheritance.
參考資料： W3C 3.1 Definitions

Cascade(聯級)與Specificity(權重/特異性)

• CSS聯級，為每個樣式規則分配一個權重。當適用多個規則時，權重最大則優先。如果兩個樣式具有相同的優先級別，那麼權重高的樣式，『後面』蓋掉『前面』。
  • 例如：前後都是!important，那後面的!important就可以蓋過前面的。
• 權重，通常是由選擇器中包含的ID數量、類別數量、屬性數量和標籤數量來決定的，不同的選擇器有不同的權重值，值越高的選擇器，會優先於值低的選擇器。
• 使用心得：在使用時要留意權重大小，避免不小心被蓋了！此外，也不要下太大的權重，會把CSS越寫越髒。

W3C規範名詞解釋

Style sheets may have three different origins: author, user, and user agent.Style sheets from these three origins will overlap in scope, and they interact according to the cascade.The CSS cascade assigns a weight to each style rule. When several rules apply, the one with the greatest weight takes precedence.
參考資料： W3C 6.4 The cascade

比大小

!important > animation> transition >inline style > id > class > tag > 繼承

• 0-0-0-0 ＊很常用到的全站預設值，只要權重超過就可以覆蓋過它的預設。
• 0-0-0-1 常見的Element(Html Tag)：<div>, <p>, <ul>, <ol>, <li>, <header>, <footer>, <article>
• 0-0-1-0 class 在 html 上面會寫成 class=“box” ，在 css 內長這樣 .box
• 0-0-1-0 psuedo-class(偽類)attribute（屬性選擇器)權重跟 class 是一樣。
• 0-1-0-0 ID: html 上面是這樣寫的 id=“home” ，在css內長這樣 #home
• 1-0-0-0 inline style attribute 就是寫在 html 行內的 style
• 終極大魔王 !important 權重非常高，蓋過所有的權重，只有 !important 能超越 !important，沒事不要亂用

更進階原理

• 級聯(Cascade)，具有三個不同的來源：
  • 作者(author)，例如：開發者
  • 用戶(user)，例如：使用者
  • 用戶代理(user agent)，例如：瀏覽器
• 默認情況下，作者樣式表中的規則比，用戶樣式表中的規則具有更大的權重。作者(author)>用戶(user)
• 然而，對於“!important”規則，優先級是相反的。所有用戶和作者規則都比 UA 默認樣式表中的規則具有更大的權重。作者(author)&用戶(user)>用戶代理(user agent)

更多閱讀：6.4.3 Calculating a selector's specificity

W3C規範名詞解釋

Author
An author is a person who writes documents and associated style sheets. An authoring tool is a User Agent that generates style sheets.
User
A user is a person who interacts with a user agent to view, hear, or otherwise use a document and its associated style sheet. The user may provide a personal style sheet that encodes personal preferences.
User agent (UA)
A user agent is any program that interprets a document written in the document language and applies associated style sheets according to the terms of this specification. A user agent may display a document, read it aloud, cause it to be printed, convert it to another format, etc.
參考資料： W3C 3.1 Definitions

Inheritance（繼承）

是指元素可以繼承其父元素的一些樣式屬性。例如，如果父元素設置了字體大小，那麼子元素可以繼承這個屬性，但是，不是所有的樣式屬性都可以繼承，例如邊框、背景等樣式屬性就不會繼承。

W3C規範名詞解釋

Inheritance
Some values are inherited by the children of an element in the document tree, as described above. Each property defines whether it is inherited or not.When inheritance occurs, elements inherit computed values. The computed value from the parent element becomes both the specified value and the computed value on the child.
參考資料：W3C 6.2 Inheritance

目前最新版的規範版本

• CSS Cascading and Inheritance Level 3 W3C Recommendation
• CSS Cascading and Inheritance Level 4 W3C Candidate Recommendation Snapshot