H5——CSS選擇器

mapanpan0502發表於2020-12-08

學習目標:

知識目標:
 1. HTML與XHTML
 2. (X)HTML與CSS
 3. 構造CSS規則
 4. CSS的繼承性
 5. CSS的層疊特性
 6. 基本CSS選擇器
 7. 在HTML中使用CSS方法

學習內容:

1. HTML與XHTML追根溯源
  概念:(1)(X)HTML是所有上網的人每天都離不開的基地,所有網頁都是使用(X)HTML編寫的。隨著網路技術日新月異的發展,HTML也經歷不斷改進,因此可以認為XHTML是HTML的“嚴謹版”。
             (2)HTML在初期,為了能更廣泛地被接受,因此大幅度放寬了標準的嚴格性,例如標記可以不封閉,屬性可以加引號,也可以不加引號等等。這導致出現了很多混亂和不規範的程式碼,這不符合標準化的發展趨勢,影響了網際網路的進一步發展。

2. 追根溯源
   為此,相關規定的制定者——W3C組織。一直在不斷地努力,逐步退出新的版本
   HTML2.0 :於1995年11月釋出。
   HTML3.2 : 於1996年1月14日釋出。
   HTML4.0 : 於1997年12月18日釋出。
   HTML4.01(微小改進):於1999年12月24日釋出。
   XHTML1.0:於2000年1月釋出,後又經過修訂於2002年8月1日重新發布。
   XHTML1.1:於2001年5月31日釋出。
   XHTML2.0:正在制定中。

3. DOCTYPE
   (1)由於同時存在不同的規範和版本,因此為了使瀏覽器能夠相容多種規範,規範中規定可以使用DOCTYPE指令來宣告使用哪種規範解釋該文件。
   (2)<!doctype html>宣告方式:html5版  <!doctype>是要強制使用的
   (3)版本型別宣告:告訴瀏覽器寫頁面所用的標記的版本

4. XHTML與HTML的重要區別  有以下區別:
   (1)在XHTML中標記名稱必須小寫;在HTML中,標記名稱可以大寫或者小寫
   (2)在XHTML中標記必須嚴格巢狀
   (3)在XHTML中標記必須封閉
   (4)在XHTML中即使是空元素的標記也必須封閉
   (5)在XHTML中屬性值用雙引號括起來

5. 如何編輯css
   css的語言是內嵌在HTML中,所以編寫css的方法和編寫HTML文件的方法是一樣。你可以用任何一種文字編輯工具來編寫。
   例如:window下的記事本和寫字板,專門的HTML文字編輯軟體。比如:editplus、sublime、Hbuilder、DW等。

6. 瀏覽器與css
   瀏覽器與css的相容問題一直是一個很頭疼的問題,在網頁完成後做測試的時候,一般都會出現很多的相容性問題,這是每一個開發者都會面臨的問題。下面我們介紹一下常見的相容問題:
   (1)圖片預設有間距;解決:對img進行float
   (2)不同瀏覽器的margin和padding差異較大
   (3)css控制透明度問題:一般就直接 opacity:0.6; IE, filter:alpha(opacity=60)
   (4)IE6雙邊距bug:塊屬性新增浮動float之後,若在浮動方向上也有margin值,則margin值會加倍。解決:display:inline;
   (5)IE6中有連結的圖片預設有邊距;解決:border:none; border:0;

7. 傳統HTML的缺點:有以下缺點:
  (1)維護困難。為了修改某個特殊標記(<h2>標籤)的格式,需要花費很多的時間,尤其對於整個網站而言,後期修改和維護的成本很高。
  (2)標記不足。HTML本身的標籤很少,很多標記都是為網站內容服務的,而關於美工樣式的標記,如文字間距、段落縮排等標記在HTML中很難找到。
  (3)網頁過“胖”。由於沒有統一對各種風格樣式進行控制,因此HTML的頁面往往體積過大,佔用了很多寶貴的寬頻。
  (4)定位困難。在整體佈局頁面時,HTML對於各個模組的位置調整顯得捉襟見肘,過多的其它標記也導致頁面的複雜和後期維護的困難。

8. CSS標準
   CSS(cascading Style Sheet的縮寫),可譯為層疊樣式表或級聯樣式表,是一組格式設定規則,用於控制web頁面的外觀。

9. 構造CSS規則
   (1)css基礎語法
   (2)選擇器{屬性:值;屬性:值}
   (3)選擇器通常是您需要改變樣式的html元素。
   (4)每條宣告由一個屬性和一個值組成,每個屬性有一個值。屬性和值用冒號分開,分號結束。
   (5)p {color:red; border:1px solid black;}  

10. CSS繼承性
   css的某些樣式是具有繼承性的,那麼什麼是繼承呢?
   繼承是一種規則,它允許樣式不僅應用於某個特定html標籤元素,而且應用於其後代。所有的css語句都是基於各個標籤的繼承關係的,如下:
   <style>
        p { border:1px solid red;
             color:blue;
             font-size:20px;
             text-align:center;
         }
   </style>
   <body>
          <p>
              我是父元素
              <span>我是子元素<em>我是孫子元素</em></span>
         </p>
   </body>

字型大小顏色都繼承了,但是邊框屬性沒有繼承。不能繼承的不僅僅是邊框屬性。

11. CSS繼承性-繼承關係
             ↗ 爸爸  → 自己  → 兒子
   爺爺
            ↘  大伯  →  堂哥
            ↗  body  →  p  →  em
  html 
           ↘  head  →  title

12. CSS繼承的運用
   <!DOCTYPE html>
   <html>
           <head>
                    <meta charset="UTF-8">
                    <title></title>
                    <style>
                            p { color:red;}
                            em {background:#ccc;}
                    </style>
           </head>
           <body>
                   <p>
                       我是父元素
                       <em>我是子元素</em>
                   </p>
           </body>
     </html>
     注意:孩子能繼承父元素的屬性,但是父元素不能繼承孩子的屬性。

13. 基本CSS選擇器
(1)標記選擇器
   標籤名選擇器 給body裡面的所有p標籤設定border屬性
   p { border:1px solid black; }
   <div>
         <p>css入門</p>
         <span>css選擇器</span>
         <p>css優先順序</p>
  </div>

(2)類別選擇器
寫法:.後跟類名


css入門


css選擇器


(3)ID選擇器
寫法:#後跟ID名
ID選擇器的優先順序最高,頁面中不能出現同名的ID,css樣式的語法是


css入門


(4)通用選擇器
寫法:{ }
”作為通用的選擇器它的優先順序是最低的,所以如果有css定義了指定的元素的樣式的時候,那麼它就會失去對於指定了css樣式的元素的樣式的控制了。

(5)偽類選擇器
利用CSS的偽類別屬性製作特效:
① :hover 滑鼠經過超連結時的樣式
② :active 滑鼠在超連結上點選時的樣式
③ cursor: pointer 小手
偽類選擇器css編寫:hover 導航

(6)後代選擇器
① 在css選擇器中,還可以通過巢狀的方式,對特殊位置的html元素進行控制,後代選擇器對應用物件內的所有相應子節點都有效。包含選擇器的寫法是把外層的標記寫在前面,內層的標記寫在後面,之間用空格隔開。其選擇範圍如:



我是div標籤裡面的p標籤




② 寫法:div p {background:red; color:white; }

(7)子選擇器
① 子選擇器只對應用物件的直接相應子節點有效。
② css的編寫如:



兒子


孫子



(8)群組選擇器
定義:群組選擇器是多個選擇器通過逗號連線而成的,在宣告各種css選擇器時,如果某些選擇器的風格是完全相同的或者部分相同,這時便可以利用並集選擇器同時宣告風格相同的css選擇器。







我是h1


我是p


我是div

(9)交叉選擇器
① 定義:“交叉”複合選擇器是由兩個選擇器直接連線構成,其結果是選中二者元素範圍的交集。其中第一個必須是標記選擇器,第二個必須是類別選擇器或者ID選擇器。這兩個選擇器之間不能有空格,必須連續書寫。
② 注意!其中第一個必須是標記選擇器,如p.class1,但有時候會看到.class1.class2,即兩個都是類選擇器,在其他瀏覽器中是允許出現這種情況的,但IE6不相容。
③ 如:div.box { width:200px; }




Document



1

2


3

14. 子代選擇器與後代選擇器的區別
   (1)注意理解:子代選擇器與後代選擇器的區別
   (2)後代選擇器:就是物件當中所有的子元素,孫子元素以及最底層的元素
   (3)子選擇器:就單單是子元素,子元素的子元素就不算了

15. CSS的層疊特性
   (1)層疊就是在html檔案中對於同一個元素可以有多個css樣式存在,當有相同權重的樣式存在時,會根據這些css樣式的前後順序來決定,處於最後面的css樣式會被應用。
   (2)層疊特性程式碼如:
      <style>
          p { color:#000; }
          .red { color:red; }
          #blue { color:blue; }
          .pink { color:pink !important; }
     </style>
     <body>
         <p>我是第一個</p>
         <p class="red">我是第二個</p>
         <p class="red" id="blue">我是第三個</p>
         <p style="color:orange" class="red" id="blue">我是第四個</p>
         <p class="pink" style="color:orange;" class="red"; id="blue";>我是第五個</p>
   </body>

16. 使用CSS選擇器的優點
   (1)準確的控制內容的樣式
   (2)程式碼簡化,爭取最少的程式碼量
   (3)程式碼美觀易讀
   (4)利用樣式優先順序的區別實現樣式的覆蓋

17. 選擇器優先順序總結
   優先順序別:行內 > ID選擇器 > 類選擇器 > 標記選擇器

18. 在HTML中使用CSS
   (1)標籤內引入式
       直接在標籤裡面加style樣式
       <body>
            <h2>css入門</h2>
            <p style="color:red">用於控制web頁面的外觀</p>
       </body>
   (2)內嵌式引入
       在head部分加入<style>標籤
       <head>
            <title>css入門</title>
            <style>
                 p { font-size:14px;
                       color:black;
                    }
           </style>
        </head>
   (3)連結式
       在head部分加入link標籤,引入外部css檔案
       <head>
             <title>css入門</title>
             <link rel="stylesheet" type="text/css" href="my.css" />
      </head>
  (4)@import引入式
       @import是在style標籤內寫,引入css檔案的
       <style type="text/css"> @import url(my.css); </style>

19. link和import的區別: 一般使用link較多,推薦使用link
  兩者都是外部引用css的方式,但是存在一定的區別:
  (1)區別1:link是XHTML標籤,除了載入css外,還可以定義RSS等其他事物;@import屬於css範疇,只能載入css。
  (2)區別2:link引用css時,在頁面載入時同時載入;@import需要頁面完全載入以後載入。
  (3)區別3:link是XHTML標籤,無相容問題;@import是在css2.1提出的,低版本的瀏覽器不支援。
  (4)區別4:link支援使用Javascript控制DOM區改變樣式;而@import不支援。

20. 在HTML中使用CSS方法-各種方式的優先順序問題
   行內樣式 > 內嵌式 > 連結式 > @import

學習產出:

1. CSS有幾種引入方式,各自的特點是什麼
2. CSS常用的選擇器有哪些,如何書寫