H5——CSS選擇器

mapanpan0502發表於2020-12-08
H5CSS

學習目標：

知識目標：
 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常用的選擇器有哪些，如何書寫

相關文章