css基礎,css選擇器

07.29自我總結

css基礎

一.什麼是CSS

• CSS是級聯樣式表

• CSS術語標記語言,沒有邏輯

• CSS做用 完成網頁內容的樣式與佈局

二.CSS的三種引入方式

1. 內聯式

• 書寫位置:在 head標籤內定義一個stype標籤內
• CSS語法:css選擇器{樣式1;樣式2}
• 優缺點:可讀性強，有複用性，樣式被html頁面綁定了，不能提供給其它html頁面使用

2. 外聯式

• 書寫位置:在外部css文件中，在html文件中經過link標籤引入css文件
• CCS文件內CSS語法:css選擇器{樣式1;樣式2}
• HTML文件中導入CSS文件語法:<link rel="stylesheet" href="CSS文件路徑">
• 優缺點: 可讀性強，有複用性，適合團隊開發(文件級別的複用性)

3. 行間式

• 書寫位置:在標籤的style屬性中書寫樣式
• CSS語法:<標籤 stype='樣式1;樣式2;'>
• 優缺點:可讀性差，沒有複用性，書寫直接

4. 三種方式的優先級別

• 內聯與外聯之間沒有優先級區別，因爲html屬於解釋性語言，書寫在下方的會覆蓋上方的樣式
• 行間式的優先級要高於一切

三.CSS選擇器

• 統配選擇器

  * {
    樣式1;
  }
  <!--表示全部樣式-->

• 標籤選擇器

  標籤名 {
    樣式1;
  }
  <!--表示該標籤內的樣式-->

• 類選擇器

  .類名{
    樣式1;
  }
  <!--表示該類內的樣式-->

• ID選擇器

  #ID名稱{
    樣式1;
  }
  <!--表示該ID下的樣式-->

• 高級選擇器(簡單講解)

  標籤名.類名{
      樣式1;
  }
  <!--同類名的狀況下比較前面的標籤的個數,個數越多優先級越高-->

• 關鍵字! important

  寫在樣式後面用宮格隔開

優先級:! important > 行間式 > id > class > 標籤 > 統配

從做用範圍來判斷的優先級:做用範圍越精確，優先級越高

樣式內容key若是有根據優先級進行取捨,沒有則增長