CSS入門指南-1：工做原理

這是CSS設計指南的讀書筆記，用於加深學習效果。

最近想作一個小程序，前端是必修課，那就從css開始吧。

css 工做原理

每一個html元素都有一組樣式屬性，能夠經過css來設定。當html元素的同一個樣式屬性有多種樣式值的時候，css就要靠層疊機智來決定最終應用哪一種樣式。

HUGOMORE42

css規則

規則其實是一條完整的css指令，規則聲明瞭要修改的元素和要應用給改元素的樣式。

爲文檔添加樣式的三種方法：

1. 寫在元素標籤裏（也叫行內樣式，只能影響它所在的標籤，會覆蓋嵌入樣式和連接樣式）
2. 寫在 <style> 標籤裏（也就嵌入樣式，應用範圍僅限於當前頁面，頁面樣式會覆蓋外部樣式表中的樣式，但會被行內樣式覆蓋）
3. 寫在單獨css樣式表中（也叫連接樣式，樣式表是一個擴展名爲.css 的文件，能夠在任意多個HTML頁面連接同一個樣式表文件。連接樣式的做用範圍是整個網站）

除了這三種爲頁面添加樣式的方法，還有一種在樣式表中連接其餘樣式表的方法，使用@import 指令：例如

@import url(css/styles.css)複製代碼

@import 指令必須出如今樣式表中其餘樣式以前，不然@吹滅；@import引用的樣式表不會被加載。

css 規則命名慣例

對這個基本的結構有三種方法能夠進行擴展

第一種方法：多個聲明包含在一條規則裏。

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;}複製代碼

選擇特定元素的選擇符

用於選擇特定元素的操做符有三種

1. 上下文選擇符。基於祖先或者同胞元素選擇一個元素。
2. ID和類選擇符。基於id和class屬性的值選擇元素。
3. 屬性選擇符。基於屬性的有無和特徵選擇元素。

上下文選擇符

好比咱們想給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"。

僞類

僞類分兩種：

1. UI僞類會在HTML元素處於某個狀態時，爲該元素應用CSS樣式。
2. 結構化僞類會在標記中存在某種結構上的關係時，爲相應元素應用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;}複製代碼

那麼文檔的全部元素都將繼承這個樣式。

層疊

層疊，是樣式在文檔層次中逐層疊加的過程，目的是讓瀏覽器面對某個標籤特定屬性值得多個來源，肯定最終使用哪一個值。

樣式來源

如下是瀏覽器層疊各個來源樣式的順序：

1. 瀏覽器默認的樣式表
2. 用戶的樣式表
3. 做者連接樣式表（按照它們連接到頁面的前後順序）
4. 做者嵌入樣式
5. 做者行內樣式

瀏覽器會按上述順序依次檢查每一個來源的樣式，並在有定義的狀況下，更新對每一個標籤屬性值得設定。整個檢查更新過程結束後，再將每一個標籤已最終設定的樣式顯示出來。

好比，若是做者連接樣式表將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記分規則以下：

1. 選擇符中有一個ID，在I的位置上加1；
2. 選擇符中有一個類，在C的位置上加1；
3. 選擇符中有一個元素，在E的位置上加1；
4. 獲得一個三位數。

好了，咱們來看一個例子：

選擇符	特指度
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

簡化版層疊規則

1. 包含ID的選擇符賽過包含類的選擇符，包含類的賽過包含標籤的選擇符。
2. 若是幾個不一樣來源都爲同一個標籤的同一個屬性定義了樣式，行內樣式賽過嵌入樣式，嵌入樣式賽過連接樣式。在連接樣式表中，具備相同特指度的樣式，後聲明的優先。
3. 規則一賽過規則二。
4. 設定的樣式賽過繼承的樣式。

這一篇咱們主要介紹了CSS規則，以及如何用它來爲HTML應用樣式。

---

最後，感謝女友支持。

>歡迎關注(April_Louisa)	>請我喝芬達
歡迎關注	請我喝芬達