CSS MDN文件閱讀筆記-CSS介紹
因為公司前端需要救火隊員，所以臨危受命，擺正心態，閱讀第一手資料，從MDN文件入手。
定義
CSS： (Cascading Style Sheets) 是用來樣式化和排版你的網頁的，是一種用於向用戶指定文件如何呈現的語言 — 它們如何被指定樣式、佈局等
CSS是如何工作的？
當瀏覽器顯示文件時，它分為兩個階段處理文件：
- 瀏覽器將HTML和 CSS 轉化成 DOM。DOM在計算機記憶體中表示文件。它把文件內容和其樣式結合在一起。
-
瀏覽器顯示 DOM 的內容
CSS引用方式
- 外部樣式表
儲存為.css檔案，如何用<link>元素引用。這種方法可以說是最好的，因為你可以使用一個樣式表來設定多個文件的樣式，並且需要更新 CSS 的時候只要在一個地方更新。 - 內部樣式表
CSS 放置在<style>元素中，該元素包含在 HTML head 內。 - 內聯樣式
<p style="color:red;">This is my first CSS example</p> 如非必要不要這樣做，很難維護。
CSS語法 (這部分需要動手練 + 隨時查詢文件)
CSS宣告
如果使用了未知屬性，或者給屬性賦予了無效值，該宣告會被視為無效，瀏覽器的 CSS 引擎會完全忽略它
CSS宣告塊
CSS 選擇器和規則
如果鏈或組中的某個選擇器無效，比如使用了未知的偽元素或偽類，整個組的選擇器仍然是有效的，除了這個無效的將被忽略的選擇器。
CSS 語句
CSS 規則是樣式表的主要組成塊 —— 是你在 CSS 中最常見的塊。但這有一些其它型別的塊，你以後偶爾會碰上 —— CSS 規則只是被稱為 CSS 語句中的一種
@-規則(At-rules)在CSS中被用來傳遞元資料、條件資訊或其它描述性資訊。它由（@）符號開始，緊跟著一個表明它是哪種規則的描述符，之後是這種規則的語法塊，並最終由一個半形分號（;）結束。每種由描述符定義的@-規則，都有其特有的內部語法和語義。一些例子如下：
@charset 和 @import （元資料）
@media 或 @document （條件資訊，又被稱為巢狀語句，見下方。)
@font-face （描述性資訊）
簡寫
比如 font ,background,padding,border,magin允許一行設定多個屬性，使程式碼簡潔。
/* 在padding和margin這樣的簡寫屬性中，值賦值的順序是top、right、bottom、left。它們還有其他簡寫方式，例如給padding兩個值，則第一個值表示top/bottom，第二個值表示left/right */
padding: 10px 15px 15px 5px;
等同於
padding-top: 10px;padding-right: 15px;padding-bottom: 15px;padding-left: 5px;
再比如：
background: red url(bg-graphic.png) 10px 10px repeat-x fixed;
等同於
background-color: red;background-image: url(bg-graphic.png);background-position: 10px 10px;background-repeat: repeat-x;background-scroll: fixed;
選擇器
- 簡單選擇器（Simple selectors）： 通過元素型別、class或者id匹配一個或多個元素。
- 屬性選擇器（Attribute selectors） ：通過 屬性 / 屬性值 匹配一個或多個元素。
[attr]：該選擇器選擇包含 attr 屬性的所有元素，不論 attr 的值為何。 [attr=val]：該選擇器僅選擇 attr 屬性被賦值為 val 的所有元素。 [attr~=val]：該選擇器僅選擇具有 attr 屬性的元素，而且要求 val 值是 attr [attr|=val] : 選擇attr屬性的值是 val 或值以 val- 開頭的元素（注意，這裡的 “-” 不是一個錯誤，這是用來處理語言編碼的）。 [attr^=val] : 選擇attr屬性的值以 val 開頭（包括 val）的元素。 [attr$=val] : 選擇attr屬性的值以 val 結尾（包括 val）的元素。 [attr*=val] : 選擇attr屬性的值中包含子字串 val 的元素（一個子字串就是一個字串的一部分而已，例如，”cat“ 是 字串 ”caterpillar“ 的子字串）。
值包含的被空格分隔的取值列表裡中的一個。
- 偽類（Pseudo-classes）： 匹配處於確定狀態的一個或多個元素，比如被滑鼠指標懸停的元素，或當前被選中或未選中的複選框，或元素是DOM樹中一父節點的第一個子節點。
a:link { color: blue } /* 未訪問連結 */
a:visited { color: purple } /* 已訪問連結 */
a:hover { font-weight: bold } /* 使用者滑鼠懸停 */
a:active { color: lime } /* 啟用連結 */
- 偽元素（Pseudo-elements） :匹配處於相關的確定位置的一個或多個元素，例如每個段落的第一個字，或者某個元素之前生成的內容。
q::before {
content: "«";
color: blue;
}
q::after {
content: "»";
color: red;
}
- 組合器（Combinators） ：這裡不僅僅是選擇器本身，還有以有效的方式組合兩個或更多的選擇器用於非常特定的選擇的方法。例如，你可以只選擇divs的直系子節點的段落，或者直接跟在headings後面的段落。
| 名稱 | 組合器 | 選擇 |
|---|---|---|
| 選擇器組 | A,B | 匹配滿足A（和/或）B的任意元素 |
| 後代選擇器 | A B | 匹配B元素，滿足條件：B是A的後代結點（B是A的子節點，或者A的子節點的子節點） |
| 子選擇器 | A > B | 匹配B元素，滿足條件：B是A的直接子節點 |
| 相鄰兄弟選擇器 | A + B | 匹配B元素，滿足條件：B是A的下一個兄弟節點（AB有相同的父結點，並且B緊跟在A的後面） |
| 通用兄弟選擇器 | A ~ B | 匹配B元素，滿足條件：B是A之後的兄弟節點中的任意一個（AB有相同的父節點，B在A之後，但不一定是緊挨著A） |
- 多重選擇器（Multiple selectors） ：這些也不是單獨的選擇器；這個思路是將以逗號分隔開的多個選擇器放在一個CSS規則下面， 以將一組宣告應用於由這些選擇器選擇的所有元素。
h1, h2, h3, h4, h5, h6 {
font-family: helvetica, 'sans serif';
}
CSS數值與單位
數值
畫素 (px) 是一種絕對單位（absolute units）， 因為無論其他相關的設定怎麼變化，畫素指定的值是不會變化的。其他的絕對單位如下：
- mm, cm, in: 毫米（Millimeters），釐米（centimeters），英寸（inches）
- pt, pc: 點（Points (1/72 of an inch)）， 十二點活字（ picas (12 points.)）
也有相對單位，他們是相對於當前元素的字號（ font-size ）或者視口尺寸。
-
em:1em與當前元素的字型大小相同（更具體地說，一個大寫字母M的寬度）。CSS樣式被應用之前，瀏覽器給網頁設定的預設基礎字型大小是16畫素，這意味著對一個元素來說1em的計算值預設為16畫素。但是要小心—em單位是會繼承父元素的字型大小，所以如果在父元素上設定了不同的字型大小，em的畫素值就會變得複雜。現在不要過於擔心這個問題，我們將在後面的文章和模組中更詳細地介紹繼承和字型大小設定。 em是Web開發中最常用的相對單位 。 -
ex,ch: 分別是小寫x的高度和數字0的寬度。這些並不像em那樣被普遍使用或很好地被支援。 -
rem: REM（root em）和em以同樣的方式工作，但它總是等於預設基礎字型大小的尺寸；繼承的字型大小將不起作用，所以這聽起來像一個比em更好的選擇，雖然在舊版本的IE上不被支援（檢視關於跨瀏覽器支援 ofollow,noindex">Debugging CSS .) -
vw,vh: 分別是視口寬度的1/100和視口高度的1/100，其次，它不像rem那樣被廣泛支援。
- 0為無單位數值
百分比
針對父元素的百分比
顏色
- 關鍵詞
- 十六進位制值 如：#e0b0ff
- RGB 如 rgb(255,0,0)
- HSL 如 hsl(0,100%,50%)
- RGBA 和 HSLA 多了透明度 如rgba(255,0,0,0.5) hsla(240,100%,50%,0.5);
- 不透明度（Opacity）
函式
每當你看到一個名字後跟著括號,括號裡包含用逗號分隔的一個或多個值,那麼你所使用的就是一個函式。例如:
/* calculate the new position of an element after it has been rotated by 45 degress */
transform: rotate(45deg);
/* calculate the new position of an element after it has been moved across 50px and down 60px */
transform: translate(50px, 60px);
/* calculate the computed value of 90% of the current width minus 15px */
width: calc(90%-15px);
/* fetch an image from the network to be used as a background image */
background-image: url('myimage.png');
層疊和繼承
層疊性 ： 就近原則
一般情況下，如果出現樣式衝突，則會按照CSS書寫的順序，以最後的樣式為準。
- 樣式衝突，遵循的原則是就近原則。 那個樣式離著結構近，就執行那個樣式。
- 樣式不衝突，不會層疊
- 貢獻值
關於CSS權重，我們需要一套計算公式來去計算，這個就是 CSS Specificity，我們稱為CSS 特性或稱非凡性，它是一個衡量CSS值優先順序的一個標準 具體規範入如下：
specificity用一個四位的數 字串(CSS2是三位)來表示，更像四個級別，值從左到右，左面的最大，一級大於一級，數位之間沒有進位制，級別之間不可超越。
| 繼承或者* 的貢獻值 | 0,0,0,0 |
|---|---|
| 每個元素（標籤）貢獻值為 | 0,0,0,1 |
| 每個類，偽類貢獻值為 | 0,0,1,0 |
| 每個ID貢獻值為 | 0,1,0,0 |
| 每個行內樣式貢獻值 | 1,0,0,0 |
| 每個!important貢獻值 重要的 | ∞ 無窮大 |
權重是可以疊加的
比如的例子：
div ulli------>0,0,0,3 .nav ul li------>0,0,1,2 a:hover-----—>0,0,1,1 .nav a------>0,0,1,1 #nav p----->0,1,0,1
繼承性： 子承父業
所謂繼承性是指書寫CSS樣式表時，子標籤會繼承父標籤的某些樣式，如文字顏色和字號。想要設定一個可繼承的屬性，只需將它應用於父元素即可。
恰當地使用繼承可以簡化程式碼，降低CSS樣式的複雜性。子元素可以繼承父元素的樣式（text-，font-，line-這些元素開頭的都可以繼承，以及color屬性）
CSS為處理繼承提供了四種特殊的通用屬性值：
-
inherit： 該值將應用到選定元素的屬性值設定為與其父元素一樣。 -
initial：該值將應用到選定元素的屬性值設定為與瀏覽器預設樣式表中該元素設定的值一樣。如果瀏覽器預設樣式表中沒有設定值，並且該屬性是自然繼承的，那麼該屬性值就被設定為inherit。 -
unset：該值將屬性重置為其自然值，即如果屬性是自然繼承的，那麼它就表現得像inherit，否則就是表現得像initial。 -
revert：如果當前的節點沒有應用任何樣式，則將該屬性恢復到它所擁有的值。換句話說，屬性值被設定成自定義樣式所定義的屬性（如果被設定）， 否則屬性值被設定成使用者代理的預設樣式。
注意: initial 和 unset 不被IE支援。