「學習筆記」CSS-2

「學習筆記」CSS

重點：

• 復合選擇器

  • 后代選擇器
  • 并集選擇器
• 標簽顯示模式
• CSS背景

  • 背景位置
• CSS三大特性

  • 優先級

CSS復合選擇器

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

• 應用

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

為什么要學習css復合選擇器： CSS選擇器分為 基礎選擇器 和 復合選擇器

• 但是基礎選擇器不能滿足我們實際開發中，快速高效的選擇標簽，
• 目的是為了可以選擇更準確更精細的目標元素標簽，
• 復合選擇器是由兩個或多個基礎選擇器，通過不同的方式組合而成的

后代選擇器（重點）

• 概念：后代選擇器又稱為包含選擇器

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

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

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

• 語法：

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

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

子元素選擇器

• 作用：子元素選擇器只能選擇作為某元素子元素(親兒子)的元素，

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

• 語法：

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

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

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

交集選擇器

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

• 語法：

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

記憶技巧：

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

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

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

并集選擇器（重點）

• 應用：如果某些選擇器定義的相同樣式，就可以利用并集選擇器，可以讓代碼更簡潔，
• 并集選擇器（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. 鏈接 登錄 的顏色為紅色
2. 主導航欄里面的所有的鏈接改為橙色
3. 主導航欄和側導航欄里面文字都是14像素并且是微軟雅黑，

鏈接偽類選擇器（重點）

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

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

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

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

注意:

• 寫的時候，他們的順序盡量不要顛倒 按照 lvha 的順序，否則可能引起錯誤，
• 記憶法

  • love hate 愛上了討厭
  • **lv **包包 非常 hao
• 因為叫鏈接偽類，所以都是 利用交集選擇器 a:link a:hover
• 因為a鏈接瀏覽器具有默認樣式，所以我們實際作業中都需要給鏈接單獨指定樣式，
• 實際作業開發中，我們很少寫全四個狀態，一般我們寫法如下：

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

復合選擇器總結

標簽顯示模式（display）重點

• 理解

  • 標簽的三種顯示模式
  • 三種顯示模式的特點以及區別
  • 理解三種顯示模式的相互轉化
• 應用

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

什么是標簽顯示模式

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

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

• 作用：

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

• 標簽的型別(分類)

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

塊級元素(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，他們都是文字類塊級標簽，里面不能放其他塊級元素，

行內元素(inline-level)

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

• 行內元素的特點：

  1. 相鄰行內元素在一行上，一行可以顯示多個，

  2. 高、寬直接設定是無效的，

  3. 默認寬度就是它本身內容的寬度，

  4. 行內元素只能容納文本或則其他行內元素，

  

注意：

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

行內塊元素（inline-block）

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

• 行內塊元素的特點：

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

三種模式總結區別

標簽顯示模式轉換 display

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

此階段，我們只需關心這三個，其他的是我們后面的作業，

行高那些事（line-height）

• 理解

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

  • 使用行高實作單行文字垂直居中
  • 能會測量行高

行高測量

行高的測量方法：

單行文本垂直居中

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

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

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

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

行高和高度的三種關系：

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

CSS 背景(background)

• 理解

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

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

背景顏色(color)

• 語法：

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

背景圖片(image)

• 語法：

background-image : none | url (url) 

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

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

背景平鋪（repeat）

• 語法：

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

背景位置(position) 重點

• 語法：

background-position : length || length

background-position : position || position 

• 注意：

  • 必須先指定background-image屬性
  • position 后面是x坐標和y坐標， 可以使用方位名詞或者 精確單位，
  • 如果指定兩個值，兩個值都是方位名字，則兩個值前后順序無關，比如left top和top left效果一致
  • 如果只指定了一個方位名詞，另一個值默認居中對齊，
  • 如果position 后面是精確坐標， 那么第一個，肯定是 x 第二的一定是y
  • 如果只指定一個數值,那該數值一定是x坐標，另一個默認垂直居中
  • 如果指定的兩個值是 精確單位和方位名字混合使用，則第一個值是x坐標，第二個值是y坐標

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

• 練習1：

  • 背景大圖

• 練習2：

  • 小圖片在盒子左側垂直居中

背景附著

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

• 語法：

  background-attachment : scroll | fixed 
  

背景簡寫

• background：屬性的值的書寫順序官方并沒有強制標準的，為了可讀性，建議大家如下寫：
• background: 背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置;
• 語法：

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

背景透明(CSS3)

• 語法：

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

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

背景總結

CSS 三大特性

• 理解

  • 能說出css樣式沖突采取的原則
  • 能說出那些常見的樣式會有繼承
• 應用

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

CSS層疊性

• 概念：

  所謂層疊性是指多種CSS樣式的疊加，是瀏覽器處理沖突的一個能力,如果一個屬性通過兩個相同選擇器設定到同一個元素上，那么這個時候一個屬性就會將另一個屬性層疊掉

• 原則：

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

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

CSS繼承性

• 概念：

  • 子標簽會繼承父標簽的某些樣式，如文本顏色和字號，
  • 想要設定一個可繼承的屬性，只需將它應用于父元素即可，

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

• 注意：

  • 恰當地使用繼承可以簡化代碼，降低CSS樣式的復雜性，比如有很多子級孩子都需要某個樣式，可以給父級指定一個，這些孩子繼承過來就好了，
  • 子元素可以繼承父元素的樣式（text-，font-，line-這些元素開頭的可以繼承，以及color屬性）

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

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

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

3). 繼承的權重是0

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

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

CSS注釋

CSS注釋規則：

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

例如：

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

今日總結