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

我自己是一名從事了多年開發的web前端老程式設計師，目前辭職在做自己的web前端私人定製課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習乾貨，各種框架都有整理，送給每一位前端小夥伴，想要獲取的可以關注我的頭條號並在後台私信我：前端，即可免費獲取

作者：大前端世界
連結：https://www.jianshu.com/p/aee8cf7d0183