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如果有根據優先順序進行取捨,沒有則增加