這是CSS設計指南的讀書筆記，用於加深學習效果。
最近想做一個小程式，前端是必修課，那就從css開始吧。
css 工作原理
每個html元素都有一組樣式屬性，可以通過css來設定。當html元素的同一個樣式屬性有多種樣式值的時候，css就要靠層疊機智來決定最終應用哪種樣式。
HUGOMORE42
css規則
規則實際上是一條完整的css指令，規則宣告瞭要修改的元素和要應用給改元素的樣式。
為文件新增樣式的三種方法：
- 寫在元素標籤裡（也叫行內樣式，只能影響它所在的標籤，會覆蓋嵌入樣式和連結樣式）
- 寫在
<style>標籤裡（也就嵌入樣式，應用範圍僅限於當前頁面，頁面樣式會覆蓋外部樣式表中的樣式，但會被行內樣式覆蓋） - 寫在單獨css樣式表中（也叫連結樣式，樣式表是一個副檔名為.css 的檔案，可以在任意多個HTML頁面連結同一個樣式表檔案。連結樣式的作用範圍是整個網站）
除了這三種為頁面新增樣式的方法，還有一種在樣式表中連結其他樣式表的方法，使用@import 指令：例如
@import url(css/styles.css)複製程式碼@import 指令必須出現在樣式表中其他樣式之前，否則@吹滅；@import引用的樣式表不會被載入。
對這個基本的結構有三種方法可以進行擴充套件
第一種方法：多個宣告包含在一條規則裡。
p {color: red; font-size: 12px; font-weight: bold;}複製程式碼第二種方法：多個選擇器組合在一起。例如：如果想讓<h1>、<h2>和 <h3>的文字都變成藍色粗體可以這麼寫：
h1 {color: blue; font-weight: bold;}
h2 {color: blue; font-weight: bold;}
h3 {color: blue; font-weight: bold;}複製程式碼也可以這麼寫：
h1, h2, h3 {color: blue; font-weight: bold;}複製程式碼分組選擇符以逗號作為分隔符
第三種方法： 多條規則應用給一個選擇符。
例如，寫完上邊的規則，還想把h3變成斜體，那麼可以再為h3單獨寫一條規則：
h1, h2, h3 {color: blue; font-weight: bold;}
h3 {font-style: italic;}複製程式碼選擇特定元素的選擇符
用於選擇特定元素的操作符有三種
- 上下文選擇符。基於祖先或者同胞元素選擇一個元素。
- ID和類選擇符。基於id和class屬性的值選擇元素。
- 屬性選擇符。基於屬性的有無和特徵選擇元素。
上下文選擇符
比如我們想給article中的段落設定不同的字號，可以使用上下文選擇符來解決。
上下文選擇符的格式如下：
標籤1 標籤2 {宣告}
其中標籤2 是我們要選擇的目標，而且只有在 標籤1是其祖先元素的情況下才會被選中。
上下文選擇符，叫後代組合式選擇符，就是一組以空格分隔的標籤名。用於選擇作為特定祖先元素後代的標籤。
article p {font-weight: bold;}複製程式碼上邊例子中，只有article後代的p元素才會應用後邊的樣式。
上下文選擇符以空格作為分隔符
特殊的上下文選擇符
- 子選擇符 >
格式如下：
標籤1 > 標籤2
標籤1 必須是 標籤2 的父元素，不能是其它的祖先元素。
section > h2 {font-style: italic;}複製程式碼- 緊鄰同胞選擇符+
格式如下：
標籤1 + 標籤2
標籤2 必須緊跟在期同胞標籤1後面。
h2 + p {font-variant: small-caps;}複製程式碼標籤 h2 和 p 為同一級標籤，且標籤p和 h2 相鄰。(只應用到p標籤）
- 一般同胞選擇符 ~
格式如下：
標籤1 ~ 標籤2
標籤2 必須跟在其 同胞標籤1 後面（可以不相鄰）。
h2 ~ a {color: red;}複製程式碼標籤a 和 標籤h2 同一級，且a標籤在h2 標籤之後。（只應用與a標籤）
- 通用選擇符 *
通用選擇符 * 是一個萬用字元，它匹配任何元素。
* {color: green;}複製程式碼這條規則會將所有元素（文字和邊框）都變成綠色。
p * {color: red;}複製程式碼這條規則會把p包含的所有元素的文字都變成紅色。
section * a {font-size: 1.3em;}複製程式碼所有section標籤的 非子標籤（*是所有的子標籤）的a標籤字型設定為 1.3 em;
ID和類選擇符
使用ID和類選擇符，首先要在HTML標記中為元素新增id和class屬性。
可以給id和class屬性設定任意值，但不能以數字或特殊符號開頭
類屬性
給標籤h1新增 specialtext 類。
<h1 class="specialtext">This is text</h1>複製程式碼- 類選擇符
格式為：
.類名
類選擇符使用點(.)，緊跟類名。
- 標籤帶類選擇符
格式為：
標籤1.類名
比如：
p.specialtext {color: red;}複製程式碼只對有 specialtext 類的p標籤有效。
- 多類選擇符
可以給元素新增多個類：
<p class="specialtext featured">Here the span tag <span> may or may not</span> be styled.</p>複製程式碼多個類名放在同一對引號吃，用空格分隔。
要選擇同時存在這兩個類名的元素可以這樣寫：
.specialtext.featured {font-size: 120%;}複製程式碼CSS 選擇符的兩個類名直接沒有空格。如果加了，就變成祖先/後代關係的上下文選擇符了。
ID屬性
ID屬性與類寫法類似，用#表示。
<p id="specialtext">This is text</p>複製程式碼上邊p標籤就設定了ID屬性specialtext。
相應的ID選擇符就這樣寫：
#specialtext {css樣式}複製程式碼選擇元素方式其餘和class 一致。
ID屬性和類屬性的區別
- ID可以用於頁面導航連結中。
例如：
<a href="#bio">Biggraphy</a>複製程式碼使用者點選這個連結會滾到ID值為bio的位置。如果href屬性裡只有一個#，那麼點選連結會跳到頂部。
- ID值需要時獨一無二的。
- 類的目的是為了標識一組具有相同特徵的元素，以便我們為這些元素應用相同的css樣式。
屬性選擇符
屬性名選擇符
格式如下：
標籤名[屬性名]
選擇任何帶有屬性名的標籤名。
比如：
img[title] {border: 2px solid blue;}複製程式碼這個規則會選擇帶有title屬性的HTML img元素，title是什麼值都可以。
屬性值選擇符
格式如下：
標籤名[屬性名="屬性值"]（在html5中，屬性值得引號可不加)
例如：
img[title="red flower"] {border: 2px solid blue;}複製程式碼這個規則會選擇帶有title屬性的HTML img元素，且title值為"red flower"。
偽類
偽類分兩種：
- UI偽類會在HTML元素處於某個狀態時，為該元素應用CSS樣式。
- 結構化偽類會在標記中存在某種結構上的關係時，為相應元素應用CSS樣式。
偽類使用:(冒號)作為選擇符。
兩個冒號(::)表示新增的偽元素。
UI偽類
UI偽類會基於特定的HTML元素的狀態應用樣式。
連結偽類
針對連結的偽類有4個：
- Link。 此時，連結為被點選
- Visited。使用者點選過連結之後
- Hover。滑鼠懸停在連結上
- Active。連結正在被點選
使用方式舉例：
a:link {color: black;}
a:visited {color: blue;}
a:hover {text-decoration: none;}
a:active {color: red;}複製程式碼hover偽類可以應用在任何元素。
p:hover {background-color: gray;}複製程式碼:focus 偽類
可以應用於任何元素。
點選時會或得焦點。
:target 偽類
可以應用於任何元素。
如果使用者點選一個指向頁面中其他元素的連結，則那個元素就是目標，可以用:target 選中。
比如：
<a href="#more_info">More Infomation</a>複製程式碼應用上偽類後，ID為more_info的元素就是目標。點選a標籤時，會應用css樣式。
css規則如下：
#more_info:target {background: #eee;}複製程式碼結構化偽類
:first-child和:last-child
- :first-child 代表一組同胞元素的第一個元素
- :last-child 代表一組同胞元素的最後一個元素
:nth-child
規則如下：
e:nth-child(n)複製程式碼e表示元素名，n表示一個數值。
比如：
li:nth-child(3)複製程式碼會選中一組列表的每個第三項。
偽元素
偽元素是文件中若有實無的元素。
常用的偽類如下：
::first-letter
選擇首字母，使用規則：
e::first-letter複製程式碼比如
p::first-letter {font-size:300%;}複製程式碼會讓首字母變大。
::first-line
選擇段落的第一行。
e::first-line複製程式碼::before和::after
使用規則如下：
e::before
e::after複製程式碼可用於在特定的元素前面或者後面新增特殊內容。
以上CSS選擇符已經介紹完了，接下來討論在一個大的樣式表中，規則選擇的問題。
CSS提供了三種機制來決定那條規則會勝出：
- 繼承
- 層疊
- 特指
繼承
CSS屬性的值會向下傳遞。
比如我們新增一條這樣的規則：
body: {font-family: arial;}複製程式碼那麼文件的所有元素都將繼承這個樣式。
層疊
層疊，是樣式在文件層次中逐層疊加的過程，目的是讓瀏覽器面對某個標籤特定屬性值得多個來源，確定最終使用哪個值。
樣式來源
以下是瀏覽器層疊各個來源樣式的順序：
- 瀏覽器預設的樣式表
- 使用者的樣式表
- 作者連結樣式表（按照它們連結到頁面的先後順序）
- 作者嵌入樣式
- 作者行內樣式
瀏覽器會按上述順序依次檢查每個來源的樣式，並在有定義的情況下，更新對每個標籤屬性值得設定。整個檢查更新過程結束後，再將每個標籤已最終設定的樣式顯示出來。
比如，如果作者連結樣式表將p的字型設定為Helvetica，而頁面中有一條嵌入規則以相同的選擇符吧字型設定為Verdana，那麼段落文字最終會以Verdana字型顯示。因為瀏覽器是在讀取連結樣式表之後讀取嵌入樣式。
層疊規則
層疊規則一：找到應用給每個元素和屬性的所有宣告。
層疊規則二：按照順序和權重排序。瀏覽器一次檢查5個來源，並設定匹配的屬性，如果匹配的屬性在下一個來源有定義，則更新改屬性值。
宣告也可以加權重。比如：
p {color: green !important; font-size: 12pt;}複製程式碼空格!important分號(;) 用於加重宣告的權重。
這條規則加重了將文字設定為綠色的權重。所以就算層疊的下一來源給段落設定了其他顏色，最終的顏色仍然還是綠色。
層疊規則三：按特指度排序。特指度是表示一條規則有多明確。
比如某個樣式表中包含如下規則：
p {font-size: 12px;}
p.largetext {font-size: 16px;}
<p class="largetext">A bit of text</p>複製程式碼那麼上邊的p標籤將顯示16px 文字，因為第二條規則的選擇符既包含標籤名，又包含類名（特指度高）。
如果是下邊的樣式：
p {font-size: 12px;}
.largetext {font-size: 16px;}
<p class="largetext">A bit of text</p>複製程式碼還是會顯示16px畫素，因為類的特指度高。
層疊規則四 順序決定權重。如果兩條規則都影響某一元素的屬性，特指度也相同，後出現的勝出。
計算特指度
計算特指度有一個記分規則，被稱為“ICE”公式：
I-C-E
I(ID)C(Class)E(Element)並非真正的三個數，但是 0-1-12比0-2-0 小。
ICE記分規則如下：
- 選擇符中有一個ID，在I的位置上加1；
- 選擇符中有一個類，在C的位置上加1；
- 選擇符中有一個元素，在E的位置上加1；
- 得到一個三位數。
好了，我們來看一個例子：
| 選擇符 | 特指度 |
|---|---|
| p | 0-0-1 |
| p.largetext | 0-1-1 |
| p#largetext | 1-0-1 |
| body p#largetext | 1-0-2 |
| body p#largetext ul.mylist | 1-1-3 |
| body p#largetext ul.mylist li | 1-1-4 |
簡化版層疊規則
- 包含ID的選擇符勝過包含類的選擇符，包含類的勝過包含標籤的選擇符。
- 如果幾個不同來源都為同一個標籤的同一個屬性定義了樣式，行內樣式勝過嵌入樣式，嵌入樣式勝過連結樣式。在連結樣式表中，具有相同特指度的樣式，後宣告的優先。
- 規則一勝過規則二。
- 設定的樣式勝過繼承的樣式。
這一篇我們主要介紹了CSS規則，以及如何用它來為HTML應用樣式。
最後，感謝女朋友支援。
| >歡迎關注(April_Louisa) | >請我喝芬達 |
|---|---|