CSS Day02

• 複合選擇器

後代選擇器

並集選擇器

1. CSS複合選擇器

• 理解

理解css複合選擇器分別的應用場景

為什麼要學習css複合選擇器

CSS選擇器分為 基礎選擇器 和 複合選擇器 ，但是基礎選擇器不能滿足我們實際開發中，快速高效的選擇標籤。

• 目的是為了可以選擇更準確更精細的目標元素標籤。
• 複合選擇器是由兩個或多個基礎選擇器，通過不同的方式組合而成的

1.1 後代選擇器（重點）

• 概念：

後代選擇器又稱為包含選擇器

• 作用：

用來選擇元素或元素組的子孫後代

• 其寫法就是把外層標籤寫在前面，內層標籤寫在後面，中間用空格分隔，先寫父親爺爺，在寫兒子孫子。

父級 子級{屬性:屬性值;屬性:屬性值;}

• 語法：

.class h3{color:red;font-size:16px;}

• 當標籤發生巢狀時，內層標籤就成為外層標籤的後代。
• 子孫後代都可以這麼選擇。 或者說，它能選擇任何包含在內 的標籤。

1.2 子元素選擇器

• 作用：

子元素選擇器只能選擇作為某元素子元素(親兒子)的元素。

• 其寫法就是把父級標籤寫在前面，子級標籤寫在後面，中間跟一個 > 進行連線

• 語法：

.class>h3{color:red;font-size:14px;}

這裡的子 指的是 親兒子 不包含孫子 重孫子之類。

白話：

比如：  .demo > h3 {color: red;}   說明  h3 一定是demo 親兒子。  demo 元素包含著h3。

1.3 交集選擇器

• 條件

交集選擇器由兩個選擇器構成，找到的標籤必須滿足：既有標籤一的特點，也有標籤二的特點。

• 語法：

• 其中第一個為標籤選擇器，第二個為class選擇器，兩個選擇器之間不能有空格，如h3.special。

記憶技巧：

交集選擇器 是 並且的意思。 即...又...的意思

比如：   p.one   選擇的是： 類名為 .one  的 段落標籤。

用的相對來說比較少，不太建議使用。

1.4 並集選擇器（重點）

• 應用：

如果某些選擇器定義的相同樣式，就可以利用並集選擇器，可以讓程式碼更簡潔。

• 並集選擇器（CSS選擇器分組）是各個選擇器通過,連線而成的，通常用於集體宣告。

• 語法：

• 任何形式的選擇器（包括標籤選擇器、class類選擇器id選擇器等），都可以作為並集選擇器的一部分。
• 記憶技巧：

並集選擇器通常用於集體宣告 ，逗號隔開的，所有選擇器都會執行後面樣式，逗號可以理解為 和的意思。

比如  .one, p , #test {color: #F00;}  
表示   .one 和 p  和 #test 這三個選擇器都會執行顏色為紅色。 
通常用於集體宣告。

案例

<!-- 主導航欄 -->
<div class="nav">   
  <ul>
    <li><a href="#">公司首頁</a></li>
	<li><a href="#">公司簡介</a></li>
	<li><a href="#">公司產品</a></li>
	<li><a href="#">聯絡我們</a></li>
  </ul>
</div>
<!-- 側導航欄 -->
<div class="sitenav">    
  <div class="site-l">左側側導航欄</div>
  <div class="site-r"><a href="#">登入</a></div>
</div>

1.5 連結偽類選擇器（重點）

• 偽類選擇器：

為了和我們剛才學的類選擇器相區別

類選擇器是一個點 比如 .demo {}
而我們的偽類 用 2個點 就是 冒號  比如  :link{}    偽娘 

• 作用：

用於向某些選擇器新增特殊的效果。比如給連結新增特殊效果， 比如可以選擇 第1個，第n個元素。

因為偽類選擇器很多，比如連結偽類，結構偽類等等。我們這裡先給大家講解連結偽類選擇器。

• a:link /* 未訪問的連結 */
• a:visited /* 已訪問的連結 */
• a:hover /* 滑鼠移動到連結上 */
• a:active /* 選定的連結 */

注意:

• 寫的時候，他們的順序儘量不要顛倒 按照 lvha 的順序。否則可能引起錯誤。
• 因為叫連結偽類，所以都是 利用交集選擇器 a:link a:hover
• 因為a連結瀏覽器具有預設樣式，所以我們實際工作中都需要給連結單獨指定樣式。
• 實際工作開發中，我們很少寫全四個狀態，一般我們寫法如下：

a {   /* a是標籤選擇器  所有的連結 */
			font-weight: 700;
			font-size: 16px;
			color: gray;
}
a:hover {   /* :hover 是連結偽類選擇器 滑鼠經過 */
			color: red; /*  滑鼠經過的時候，由原來的 灰色 變成了紅色 */
}

1.6 複合選擇器總結

2. 標籤顯示模式（display）重點

• 理解

標籤的三種顯示模式

三種顯示模式的特點以及區別

理解三種顯示模式的相互轉化

• 應用

實現三種顯示模式的相互轉化

2.1 什麼是標籤顯示模式

• 什麼是標籤的顯示模式？

標籤以什麼方式進行顯示，比如div 自己佔一行， 比如span 一行可以放很多個

• 作用：

我們網頁的標籤非常多，再不同地方會用到不同型別的標籤，以便更好的完成我們的網頁。

• 標籤的型別(分類)

HTML標籤一般分為塊標籤和行內標籤兩種型別，它們也稱塊元素和行內元素。

2.2 塊級元素(block-level)

• 例：

常見的塊元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>標籤是最典型的塊元素。

• 塊級元素的特點

（1）比較霸道，自己獨佔一行
（2）高度，寬度、外邊距以及內邊距都可以控制。
（3）寬度預設是容器（父級寬度）的100%
（4）是一個容器及盒子，裡面可以放行內或者塊級元素。

• 注意：

只有 文字才 能組成段落 因此 p 裡面不能放塊級元素，特別是 p 不能放div

同理還有這些標籤h1,h2,h3,h4,h5,h6,dt，他們都是文字類塊級標籤，裡面不能放其他塊級元素。

2.3 行內元素(inline-level)

• 例：

常見的行內元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>標籤最
典型的行內元素。有的地方也成內聯元素

• 行內元素的特點：

（1）相鄰行內元素在一行上，一行可以顯示多個。
（2）高、寬直接設定是無效的。
（3）預設寬度就是它本身內容的寬度。
（4）行內元素只能容納文字或則其他行內元素。

注意：

• 連結裡面不能再放連結。
• 特殊情況a裡面可以放塊級元素，但是給a轉換一下塊級模式最安全。

2.4 行內塊元素（inline-block）

• 例：

在行內元素中有幾個特殊的標籤——<img />、<input />、<td>，可以對它們設定寬高和對齊屬性，有些資料可能會稱
它們為行內塊元素。

• 行內塊元素的特點：

（1）和相鄰行內元素（行內塊）在一行上,但是之間會有空白縫隙。一行可以顯示多個
（2）預設寬度就是它本身內容的寬度。
（3）高度，行高、外邊距以及內邊距都可以控制。

2.5 三種模式總結區別

2.6 標籤顯示模式轉換 display

• 塊轉行內：display:inline;

• 行內轉塊：display:block;

• 塊、行內元素轉換為行內塊： display: inline-block;

此階段，我們只需關心這三個，其他的是我們後面的工作。

3. 行高那些事（line-height）

• 理解

能說出 行高 和 高度 三種關係
能簡單理解為什麼行高等於高度單行文字會垂直居中

3.1 行高測量

行高的測量方法：

3.2 單行文字垂直居中

行高我們利用最多的一個地方是： 可以讓單行文字在盒子中垂直居中對齊。

文字的行高等於盒子的高度。
這裡情況些許複雜，開始學習，我們可以先從簡單地方入手學會。

行高 = 上距離 + 內容高度 + 下距離

上距離和下距離總是相等的，因此文字看上去是垂直居中的。
行高和高度的三種關係

• 如果行高 等於 高度 文字會 垂直居中
• 如果行高 大於 高度 文字會 偏下
• 如果行高 小於 高度 文字會 偏上

4. CSS 背景(background)

• 理解

背景的作用
css背景圖片和插入圖片的區別

4.1 背景顏色(color)

• 語法：

background-color:顏色值;   預設的值是 transparent  透明的

4.2 背景圖片(image)

• 語法：

background-image : none | url (url) 

• 小技巧： 我們提倡 背景圖片後面的地址，url不要加引號。

4.3 背景平鋪（repeat）

• 語法：

background-repeat : repeat | no-repeat | repeat-x | repeat-y 

4.4 背景位置(position) 重點

• 語法：

background-position : length || length

background-position : position || position 

• 注意：

1.必須先指定background-image屬性
2.position 後面是x座標和y座標。 可以使用方位名詞或者 精確單位。
3.如果指定兩個值，兩個值都是方位名字，則兩個值前後順序無關，比如left  top和top  left效果一致
4.如果只指定了一個方位名詞，另一個值預設居中對齊。
5.如果position 後面是精確座標， 那麼第一個，肯定是 x  第二的一定是y
6.如果只指定一個數值,那該數值一定是x座標，另一個預設垂直居中
7.如果指定的兩個值是 精確單位和方位名字混合使用，則第一個值是x座標，第二個值是y座標

實際工作用的最多的，就是背景圖片居中對齊了。

4.5 背景附著

• 背景附著就是解釋背景是滾動的還是固定的

• 語法：

background-attachment : scroll | fixed 

4.6 背景簡寫

• background：屬性的值的書寫順序官方並沒有強制標準的。為了可讀性，建議大家如下寫：

• background: 背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置;

• 語法：

background: transparent url(image.jpg) repeat-y  scroll center top ;

4.7 背景透明(CSS3)

• 語法：

background: rgba(0, 0, 0, 0.3);

• 最後一個引數是alpha 透明度 取值範圍 0~1之間
• 我們習慣把0.3 的 0 省略掉 這樣寫 background: rgba(0, 0, 0, .3);
• 注意：背景半透明是指盒子背景半透明， 盒子裡面的內容不受影響
• 因為是CSS3 ，所以 低於 ie9 的版本是不支援的。

4.8 背景總結

5. CSS 三大特性

• 理解

能說出css樣式衝突採取的原則
能說出那些常見的樣式會有繼承

• 應用

能寫出CSS優先順序的演算法
能會計算常見選擇器的疊加值

5.1 CSS層疊性

• 概念：

所謂層疊性是指多種CSS樣式的疊加。

是瀏覽器處理衝突的一個能力,如果一個屬性通過兩個相同選擇器設定到同一個元素上，那麼這個時候一個屬性
就會將另一個屬性層疊掉

• 原則：

樣式衝突，遵循的原則是就近原則。 那個樣式離著結構近，就執行那個樣式。
樣式不衝突，不會層疊

5.2 CSS繼承性

• 概念：

子標籤會繼承父標籤的某些樣式，如文字顏色和字號。

想要設定一個可繼承的屬性，只需將它應用於父元素即可。

簡單的理解就是： 子承父業。

• 注意：

恰當地使用繼承可以簡化程式碼，降低CSS樣式的複雜性。比如有很多子級孩子都需要某個樣式，可以給父級
指定一個，這些孩子繼承過來就好了。

子元素可以繼承父元素的樣式（text-，font-，line-這些元素開頭的可以繼承，以及color屬性）

5.3 CSS優先順序（重點）

• 概念：

定義CSS樣式時，經常出現兩個或更多規則應用在同一元素上，此時，

選擇器相同，則執行層疊性

選擇器不同，就會出現優先順序的問題。

1). 權重計算公式

關於CSS權重，我們需要一套計算公式來去計算，這個就是 CSS Specificity（特殊性）

• 值從左到右，左面的最大，一級大於一級，數位之間沒有進位制，級別之間不可超越。
• 關於CSS權重，我們需要一套計算公式來去計算，這個就是 CSS Specificity（特殊性）
• div {
  color: pink!important;
  }

2). 權重疊加

我們經常用交集選擇器，後代選擇器等，是有多個基礎選擇器組合而成，那麼此時，就會出現權重疊加。

就是一個簡單的加法計算

• div ul li ------> 0,0,0,3
• .nav ul li ------> 0,0,1,2
• a:hover -----—> 0,0,1,1
• .nav a ------> 0,0,1,1

注意：

1.數位之間沒有進位制 比如說： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不會存在10個div能趕上一個類
選擇器的情況。

3). 繼承的權重是0

這個不難，但是忽略很容易繞暈。其實，我們修改樣式，一定要看該標籤有沒有被選中。

1） 如果選中了，那麼以上面的公式來計權重。誰大聽誰的。
2） 如果沒有選中，那麼權重是0，因為繼承的權重為0.

6. CSS註釋

CSS註釋規則：

/*  需要註釋的內容  */  進行註釋的，即在需要註釋的內容前使用 "/*" 標記開始註釋，在內容的結尾使用 "*/"結束。

** 例如：**

p {
 /* 所有的字型是14畫素大小*/
  font-size: 14px;                 
}