css層疊樣式表的知識點有哪些

這篇文章主要講解了“css層疊樣式表的知識點有哪些”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“css層疊樣式表的知識點有哪些”吧！

css 層疊樣式表

CSS: 層疊樣式表 style:樣式
修飾和美化整個網頁，實現各種不同的網頁布局風格

行內樣式的優先級最高 內部樣式和外部樣式并沒有明確的優先級，看先后書寫順序，后寫的會覆蓋先寫的

行內樣式：將css樣式直接加到html每一個標簽上，在頭部標簽書寫 類似于寫HTML的屬性 使用style="樣式名:樣式內容;" 來設置
例： <p style="color:red;">文字顏色是紅色</p>

內部樣式： <style></style>需要使用一對style標簽，一般寫在html的head標簽中
外部樣式：需要使用link標簽來引入一個css文件 rel屬性表示引入文件的類型 href屬性表示引入文件的路徑
導入樣式： 暫時已經被廢棄掉

導入樣式和外部樣式的區別：
導入樣式：加載順序是先加載HTML頁面，當所有頁面內容加載完之后，才會開始加載css，
會導致頁面剛打開的前一兩秒有短暫的沒有css效果的網頁
外部樣式：加載HTML頁面的同時一起加載CSS樣式

常見的CSS樣式：
color：文字顏色
background-color 背景顏色

關于編程語言 命名要求：不能以數字開頭，不能使用特殊符號 可以使用的有 字母 數字 下劃線 _ 美元符號 $

css的選擇器：
基本選擇器（元素選擇符）： 優先級：
id > 類 > 標簽 > 通配符
優先級的計算： 采用權重值計算
id 權重值 100
類 10
標簽 1
通配 0
通配選擇符： * 表示 代表匹配頁面中所有的HTML標簽，設置統一的樣式
注意：該選擇符盡量避免使用，對頁面的性能有影響
例： *{color:red;} 將頁面所有的文字顏色設置成紅色

標簽選擇符（類型選擇符）：
通過標簽名來選擇對應的HTML標簽，設置統一樣式
例： p{color:red;} 將頁面中所有的p標簽文字顏色設置成紅色

類選擇符： class屬性 每一個標簽都可以添加一個class屬性，該屬性代表類名
在css中 使用 . 來表示類選擇符
例： .co{color:green;} 將所有class名字是co的標簽設置文字顏色是綠色

ID選擇符： id屬性 每一個標簽都可以加一個id屬性，但是該屬性具有唯一性，同一個id名只允許出現一次
在css中 使用 # 來代表ID選擇符
例： #lis{color:red;} 將id名為lis的標簽設置文字顏色是紅色

關系選擇符：
包含選擇符(后代選擇器) 語法： 選擇器1 選擇器2{樣式名:樣式值;}
例： ul .lis{color:red;} 表示獲取到ul中所有后代標簽class屬性是lis的標簽，設置顏色是紅色
子選擇符 語法： 選擇器1>選擇器2{樣式名:樣式值;}
例： ul>li{color:red;} 表示獲取到ul中所有子元素是li的標簽，設置顏色是紅色
相鄰選擇符 語法： 選擇器1+選擇器2{樣式名:樣式值;}
相鄰選擇符只會選擇到下一個相鄰的兄弟標簽，不會選擇之前的兄弟標簽
例： #li3+li{color:red;} 表示選擇id是li3的標簽的下一個兄弟元素是li的標簽，設置顏色是紅色
兄弟選擇符 語法： 選擇器1~選擇器2{樣式名:樣式值;}
兄弟選擇符只會選擇當前標簽之后的所有兄弟標簽，不會選擇到前面的兄弟標簽
例： #li3~li{color:red;} 表示選擇id是li3的標簽的后面所有兄弟元素是li的標簽，設置顏色是紅色

感謝各位的閱讀，以上就是“css層疊樣式表的知識點有哪些”的內容了，經過本文的學習后，相信大家對css層疊樣式表的知識點有哪些這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！