學習目標

1. 復合選擇器

   • 后代選擇器
   • 并集選擇器

2. 標簽顯示模式

3. CSS 背景

   • 背景位置

4. CSS 三大特性

   • 優(yōu)先級

1. CSS 復合選擇器

目標

• 理解

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

• 應用

  • 使用后代選擇器給元素添加樣式
  • 使用并集選擇器給元素添加樣式
  • 使用偽類選擇器

為什么要學習 css 復合選擇器

CSS 選擇器分為 基礎選擇器 和 復合選擇器 ，但是基礎選擇器不能滿足我們實際開發(fā)中，快速高效的選擇標簽。

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

1.1 后代選擇器（重點）

• 概念：

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

• 作用：

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

• 其寫法就是把外層標簽寫在前面，內(nèi)層標簽寫在后面，中間用空格分隔，先寫父親爺爺，在寫兒子孫子。

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

• 語法：

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

• 當標簽發(fā)生嵌套時，內(nèi)層標簽就成為外層標簽的后代。
• 子孫后代都可以這么選擇。 或者說：它能選擇任何包含在內(nèi)的標簽。

1.2 子元素選擇器

• 作用：

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

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

• 語法：

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

這里的子指的是親兒子，不包含孫子、重孫子之類。

白話：

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

1.3 交集選擇器

• 條件

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

• 語法：

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

記憶技巧：

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

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

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

1.4 并集選擇器（重點）

• 應用：

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

• 并集選擇器（CSS 選擇器分組）是各個選擇器通過 , 連接而成的，通常用于集體聲明。

• 語法：

• 任何形式的選擇器（包括標簽選擇器、class 類選擇器、id 選擇器等），都可以作為并集選擇器的一部分。

• 記憶技巧：

  并集選擇器通常用于集體聲明，逗號隔開的，所有選擇器都會執(zhí)行后面樣式，逗號可以理解為和的意思。

比如：
.one, p , #test {color: #F00;}  /* 表示 .one 和 p 和 #test 這三個選擇器都會執(zhí)行顏色為紅色。通常用于集體聲明。*/

他和他，在一起， 在一起 一起的意思。。。

測試題

 <!-- 主導航欄 -->
<div class="nav">   
  <ul>
    <li><a href="#">公司首頁</a></li>
    <li><a href="#">公司簡介</a></li>
    <li><a href="#">公司產(chǎn)品</a></li>
    <li><a href="#">聯(lián)系我們</a></li>
  </ul>
</div>
<!-- 側(cè)導航欄 -->
<div class="sitenav">    
  <div class="site-l">左側(cè)側(cè)導航欄</div>
  <div class="site-r"><a href="#">登錄</a></div>
</div>

在不修改以上結(jié)構(gòu)代碼的前提下，完成以下任務：

1. 鏈接 登錄 的顏色為紅色
2. 主導航欄里面的所有的鏈接改為橙色
3. 主導航欄和側(cè)導航欄里面文字都是 14 像素并且是微軟雅黑。

1.5 鏈接偽類選擇器（重點）

偽類選擇器：

為了和我們剛才學的類選擇器相區(qū)別
類選擇器是一個點 比如 .demo {}
而我們的偽類 用 2 個點 就是 冒號 比如 :link{} 偽娘

作用：

用于向某些選擇器添加特殊的效果。比如給鏈接添加特殊效果，比如可以選擇第 1 個、第 n 個元素。

因為偽類選擇器很多，比如鏈接偽類，結(jié)構(gòu)偽類等等。我們這里先給大家講解鏈接偽類選擇器。

- a:link      /* 未訪問的鏈接 */
- a:visited   /* 已訪問的鏈接 */
- a:hover     /* 鼠標移動到鏈接上 */
- a:active    /* 選定的鏈接 */

注意

• 寫的時候，他們的順序盡量不要顛倒 按照 lvha 的順序。否則可能引起錯誤。
• 記憶法
  • love hate 愛上了討厭
  • **lv **包包 非常 hao
• 因為叫鏈接偽類，所以都是 利用交集選擇器 a:link a:hover
• 因為 a 鏈接瀏覽器具有默認樣式，所以我們實際工作中都需要給鏈接單獨指定樣式。
• 實際工作開發(fā)中，我們很少寫全四個狀態(tài)，一般我們寫法如下：

a { /* a是標簽選擇器 所有的鏈接 */
    font-weight: 700;
    font-size: 16px;
    color: gray;
}
a:hover { /* :hover 是鏈接偽類選擇器 鼠標經(jīng)過 */
    color: red; /* 鼠標經(jīng)過的時候，由原來的 灰色 變成了紅色 */
}

1.6 復合選擇器總結(jié)

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

目標：

• 理解
  • 標簽的三種顯示模式
  • 三種顯示模式的特點以及區(qū)別
  • 理解三種顯示模式的相互轉(zhuǎn)化
• 應用
  • 實現(xiàn)三種顯示模式的相互轉(zhuǎn)化

2.1 什么是標簽顯示模式

• 什么是標簽的顯示模式？

  標簽以什么方式進行顯示，比如 div 自己占一行，比如 span 一行可以放很多個。

• 作用：

  我們網(wǎng)頁的標簽非常多，再不同地方會用到不同類型的標簽，以便更好的完成我們的網(wǎng)頁。

• 標簽的類型 (分類)

  HTML 標簽一般分為塊標簽和行內(nèi)標簽兩種類型，它們也稱塊元素和行內(nèi)元素。

2.2 塊級元素 (block-level)

• 例：

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

塊級元素

• 塊級元素的特點

（1）比較霸道，自己獨占一行

（2）高度，寬度、外邊距以及內(nèi)邊距都可以控制。

（3）寬度默認是容器（父級寬度）的 100%。

（4）是一個容器及盒子，里面可以放行內(nèi)或者塊級元素。

• 注意：
  • 只有文字才能組成段落，因此 p 里面不能放塊級元素，特別是 p 不能放 div。
  • 同理還有這些標簽 h1,h2,h3,h4,h5,h6,dt，他們都是文字類塊級標簽，里面不能放其他塊級元素。

2.3 行內(nèi)元素 (inline-level)

• 例：

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

行內(nèi)元素

• 行內(nèi)元素的特點：

（1）相鄰行內(nèi)元素在一行上，一行可以顯示多個。

（2）高、寬直接設置是無效的。

（3）默認寬度就是它本身內(nèi)容的寬度。

（4）行內(nèi)元素只能容納文本或則其他行內(nèi)元素。

注意：

• 鏈接里面不能再放鏈接。
• 特殊情況 a 里面可以放塊級元素，但是給 a 轉(zhuǎn)換一下塊級模式最安全。

2.4 行內(nèi)塊元素（inline-block）

• 例：

在行內(nèi)元素中有幾個特殊的標簽 —— <img />、<input />、<td>，
可以對它們設置寬高和對齊屬性，有些資料可能會稱它們?yōu)樾袃?nèi)塊元素。

行內(nèi)塊元素

• 行內(nèi)塊元素的特點：

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

  ?

2.5 三種模式總結(jié)區(qū)別

2.6 標簽顯示模式轉(zhuǎn)換 display

• 塊轉(zhuǎn)行內(nèi)：display: inline;
• 行內(nèi)轉(zhuǎn)塊：display: block;
• 塊、行內(nèi)元素轉(zhuǎn)換為行內(nèi)塊：display: inline-block;

此階段，我們只需關(guān)心這三個，其他的是我們后面的工作。

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

目標

• 理解

  • 能說出 行高 和 高度 三種關(guān)系
  • 能簡單理解為什么行高等于高度單行文字會垂直居中

• 應用

  • 使用行高實現(xiàn)單行文字垂直居中
  • 能會測量行高

3.1 行高測量

行高的測量方法：

line1

line2

3.2 單行文本垂直居中

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

文字的行高等于盒子的高度。

這里情況些許復雜，開始學習，我們可以先從簡單地方入手學會。

行高 = 上距離 + 內(nèi)容高度 + 下距離

上距離和下距離總是相等的，因此文字看上去是垂直居中的。

行高和高度的三種關(guān)系

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

4. CSS 背景 (background)

目標

• 理解

  • 背景的作用
  • css 背景圖片和插入圖片的區(qū)別

• 應用

  • 通過 css 背景屬性，給頁面元素添加背景樣式
  • 能設置不同的背景圖片位置

4.1 背景顏色 (color)

• 語法：

  background-color: 顏色值;   /* 默認的值是 transparent 透明的 */
  

4.2 背景圖片(image)

• 語法：

background-image : none | url (url) 

background-image: url(images/demo.png);

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

4.3 背景平鋪（repeat）

• 語法：

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

4.4 背景位置 (position) 重點

• 語法：

background-position : length || length

background-position : position || position 

• 注意：
  • 必須先指定 background-image 屬性
  • position 后面是 x 坐標和 y 坐標?？梢允褂梅轿幻~或者精確單位
  • 如果指定兩個值，兩個值都是方位名字，則兩個值前后順序無關(guān)，比如 left top和 top left 效果一致
  • 如果只指定了一個方位名詞，另一個值默認居中對齊
  • 如果 position 后面是精確坐標， 那么第一個，肯定是 x 第二的一定是 y
  • 如果只指定一個數(shù)值,那該數(shù)值一定是 x 坐標，另一個默認垂直居中
  • 如果指定的兩個值是 精確單位和方位名字混合使用，則第一個值是 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);

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

4.8 背景總結(jié)

5. CSS 三大特性

目標：

• 理解
  • 能說出 CSS 樣式?jīng)_突采取的原則
  • 能說出那些常見的樣式會有繼承
• 應用
  • 能寫出 CSS 優(yōu)先級的算法
  • 能會計算常見選擇器的疊加值

5.1 CSS 層疊性

層疊性

• 概念：

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

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

• 原則：

  • 樣式?jīng)_突，遵循的原則是就近原則。 那個樣式離著結(jié)構(gòu)近，就執(zhí)行那個樣式。
  • 樣式不沖突，不會層疊。

CSS 層疊性最后的執(zhí)行口訣：長江后浪推前浪，前浪死在沙灘上。

5.2 CSS 繼承性

繼承性

• 概念：

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

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

簡單的理解就是：子承父業(yè)。

• 注意：
  • 恰當?shù)厥褂美^承可以簡化代碼，降低 CSS 樣式的復雜性。比如有很多子級孩子都需要某個樣式，可以給父級指定一個，這些孩子繼承過來就好了。
  • 子元素可以繼承父元素的樣式（text-，font-，line- 這些元素開頭的可以繼承，以及 color 屬性）

CSS 繼承性口訣：龍生龍，鳳生鳳，老鼠生的孩子會打洞。

5.3 CSS 優(yōu)先級（重點）

優(yōu)先級

• 概念：

  定義 CSS 樣式時，經(jīng)常出現(xiàn)兩個或更多規(guī)則應用在同一元素上，此時：

  • 選擇器相同，則執(zhí)行層疊性。
  • 選擇器不同，就會出現(xiàn)優(yōu)先級的問題。

1). 權(quán)重計算公式

關(guān)于 CSS 權(quán)重，我們需要一套計算公式來去計算，這個就是 CSS Specificity（特殊性）

• 值從左到右，左面的最大，一級大于一級，數(shù)位之間沒有進制，級別之間不可超越。
• 關(guān)于 CSS 權(quán)重，我們需要一套計算公式來去計算，這個就是 CSS Specificity（特殊性）

div {
    color: pink!important;  
}

2). 權(quán)重疊加

我們經(jīng)常用交集選擇器，后代選擇器等，是有多個基礎選擇器組合而成，那么此時，就會出現(xiàn)權(quán)重疊加。

就是一個簡單的加法計算

• 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. 數(shù)位之間沒有進制 比如說：0,0,0,5 + 0,0,0,5 = 0,0,0,10 而不是 0,0, 1, 0，所以不會存在 10 個 div 能趕上一個類選擇器的情況。

3). 繼承的權(quán)重是 0

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

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

6. CSS 注釋

CSS 注釋規(guī)則：

/*  需要注釋的內(nèi)容  */  
進行注釋，即在需要注釋的內(nèi)容前使用 "/*" 標記開始注釋，在內(nèi)容的結(jié)尾使用 "*/"結(jié)束。

例如：

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