CSS基礎語法
阿新 • • 發佈：2017-08-20
大於 根據 簽名 css 命名 方式 tro 兩個 標簽 (9)偽類選擇器（後續講解
一、CSS常用選擇器
前言：
頁面中，所有的CSS代碼，需要寫入到<style></style>標簽中。
style標簽的type屬性應該選擇"text/css"，但是type屬性可以省略。
CSS修改頁面中的所有標簽，必須借助選擇器選中。
選擇器中，可以寫多對CSS屬性，用{}包裹。每個屬性名與屬性值之間用:分隔，多對屬性之間，必須用;分隔。
寫法：
選擇器{
屬性1:屬性值1;
}
(1)通用選擇器：
1. 寫法：*{ } 2.作用：選中頁面中的所有標簽 3.優先級：最低(2)標簽選擇器：
(3)類選擇器：(class選擇器):
1. 寫法：.class名（註意：一定不能忘記前面的點.） 調用：在html標簽中，使用class="class名"調用選擇器。 2.優先級：class選擇器>標簽選擇器(4)ID選擇器：
1. 寫法：#ID名{ } 調用：在html標簽中，使用id="id名"調用選擇器。 2.優先級：id選擇器大於class選擇器(5)交集選擇器:
1. 寫法：選擇器1選擇器2選擇器3……{ } 多個選擇器之間緊挨著，沒有任何分隔；(6)並集選擇器
1. 寫法：選擇器1，選擇器2，……選擇器N{}。多個選擇器之間用逗號分隔。 2. 生效規則：只要滿足並集選擇器中的一個，即可生效。(7)後代選擇器
1. 寫法：選擇器1選擇器2……選擇器N{}。選擇器之間用空格分隔 2.生效規則：必須滿足，後一個選擇器，是前一個選擇器的後代（子代、孫代、），才會生效。(8)子代選擇器
1.寫法：選擇器1>選擇器2>……選擇器N{}。選擇器之間用>分隔 2.生效規則：必須滿足，後一個選擇器，是前一個選擇器的直接子代才會生效。隔代，即中間包含其他標簽，則不會生效。(9)偽類選擇器（後續講解
二、CSS導入方式和優先級
【選擇器的註意事項】
1 .id選擇器與class選擇器的區別？
①寫法不同：class選擇器使用.聲明，而ID選擇器使用#聲明。 ②優先級不同：當作用於同一標簽時，id選擇器高於class選擇器 ③在同一HTML文件中，ID是唯一的，所以ID選擇器只能作用於一個標簽上，但是，class選擇器可以作用於N個標簽。2.選擇器的命名規則：
只能有：字母、數字、下劃線、減號組成。開頭不能是數字。3.選擇器的優先級排序：
①首先遵循近者優先原則。哪個選擇器，作用於最裏層標簽，則哪個選擇器生效。 ②當作用於同一層標簽時，優先級排序如下： id選擇器大於class選擇器大於標簽選擇器大於通用選擇器。【選擇器的優先級】
1.第一原則： 近者優先。作用於最裏層的選擇器生效。 2.當作用於同一層時： 每種選擇器所占優先級，可以進行運算獲得： 標簽選擇器占權重1 class選擇器占權重10 id選擇器占權重100 行級樣式表style=""占權重1000 註意：只有交集、後代、子代選擇器，才參與優先級的累加！！而，並集選擇器相當於寫了兩個選擇器，沒有總優先級。 3.如果計算出的優先級權重完全相同，則後寫的選擇器生效。【引入CSS的三種方式】
1、行級樣式表：在HTML標簽中，使用style=""的形式引用； <div style="height:100px"></div> 優點：使用靈活，優先級權重最高。 缺點：不符合W3c關於內容和表現分離的要求。不利於樣式復用。代碼雜亂，不利於後期維護。 2、內部樣式表：在head標簽中，使用style標簽包裹CSS代碼。 特點：一定程度的實現了HTML與CSS的分離，但是分離不夠徹底，沒有辦法多頁面公用樣式。 <head> <style type="text/css"> <style/> </head> 3、外部樣式表：將CSS代碼,全部寫到一個CSS文件中，使用link標簽，將html文件與css文件關聯。 rel:選擇stylesheet type選擇"text/css"，可以省略。 href選擇CSS文件地址。 <link rel="stylesheet" type="text/css" href="css/01-css.css"/> 優點：徹底實現CSS與HTML的分離，符合W3C規範，有利於多頁面復用統一樣式。[導入CSS文件的兩種方式]
①在<head>標簽中，使用link鏈接： <link rel="stylesheet" type="text/css" href="css/01-css.css"/> ②在style標簽中，[email protected]； @import url("css/01-css.css");【兩種導入方式的區別】
①link術語標準的HTML標簽，[email protected] url不是標準的標簽； ②link可以兼容所有低版本的瀏覽器，[email protected] url只在CSS2之後可用； ③link是將兩個文件鏈接起來，起橋梁作用，[email protected]； ④link會在HTML文件邊加載的過程當中，邊加載CSS文件；@import會在HTML文件加載完之後，再導入CSS文件； 綜上所述，我們使用link連接的方式加載CSS文件.CSS基礎語法