柚子快報激活碼778899分享:前端 CSS3語法及選擇器總結
柚子快報激活碼778899分享:前端 CSS3語法及選擇器總結
CSS定義
css是一種樣式表語言,用來美化HTML文檔
一.CSS的引用
方式一:內部樣式表(HTML中引用)
在HTML的title標簽下方添加style雙標簽,style標簽里面書寫CSS
*style里面的注釋為/ * … /
CSS的書寫規(guī)則: 選擇器{屬性名:屬性值;}
代碼示例
CSS展示
方式二.外部樣式表(單獨的CSS文件)
將CSS代碼寫在單獨的CSS文件中(.css)在HTML使用link標簽(單標簽)引入
引用語法:
代碼示例
CSS文件
p{
color: red;
font-size: 50px;
}
HTML文件
CSS外部樣式表引用方式示例
方式三:行內樣式(寫在標簽的style屬性值里)
通常這種方式用來配合JavaScript使用
語法:
展示div標簽使用CSS樣式
代碼示例
CSS外部樣式表引用方式示例
展示div標簽使用CSS樣式
二.選擇器
選擇器的作用:查找標簽,設置樣式
1.標簽選擇器
使用標簽名作為選擇器,選中同名標簽設置相同樣式,并且無法差異化同名化標簽的樣式
代碼示例
展示標簽選擇器的作用
標簽p1
標簽p2
標簽p3
2.類選擇器
作用:查找標簽,差異化設置標簽的顯示效果
一個類選擇器可以給多個標簽使用
一個標簽可以使用多個類名,class屬性值寫多個類名使用空格隔開即可
類名如果想命名為多個單詞,可以使用-連接,例如my-news
使用步驟:
定義類選擇器——> .類名使用類選擇器——> 標簽添加class=“類名”
代碼示例
展示類選擇器的使用
這是第一行,展示第一個類選擇器的使用
這是第二行,沒有使用類選擇器
3.id選擇器
作用:查找標簽,差異化設置標簽的顯示效果
場景:id選擇器一般配合JavaScript使用,很少用來設置CSS樣式
使用步驟:
定義id選擇器——> #id名使用id選擇器——> 標簽添加id=“id名”
同一個id選擇器在一個頁面只能使用一次
代碼示例
展示類選擇器的使用
這是第一行,展示id選擇器的使用
這是第二行,沒有使用選擇器
4.通配符選擇器
作用:查找頁面所有標簽,設置相同樣式
通配符選擇器符號:*
通配符選擇器不需要調用,瀏覽器會自動查找頁面所有標簽,設置相同樣式
代碼示例
展示通配符選擇器的使用
這是第一行
這是第二行
- 列表1
- 列表2
- 列表3
加粗標簽
5.復合選擇器
定義:由兩個或多個基礎選擇器,通過不同方式組合而成作用:更準確,更高效的選擇目標元素(標簽)
后代選擇器
作用:選中某元素的后代元素選擇器寫法:父選擇器,子選擇器后代選擇器會選中所有的后代(子標簽,孫子標簽等)
代碼示例
展示后代選擇器的使用
這是個span標簽
這是個被div包裹的span標簽
子代選擇器
與后代選擇器不同的是,子代選擇器只會選擇子標簽選擇器寫法:父選擇器 > 子選擇器{CSS屬性}
代碼示例:
展示后代選擇器的使用
這是個span標簽
這是個被div包裹的span子標簽
這個是被div包裹的span孫子標簽
并集選擇器
作用:選中多組標簽設置相同的樣式選擇器寫法:選擇器1,選擇器2,…選擇器N{CSS屬性},選擇器之間用,隔開
展示并集選擇器的使用
這是一個p標簽
這是一個span標簽
交集選擇器
作用:選中同時滿足多個條件的元素選擇器寫法:選擇器1選擇器2{CSS屬性},選擇器之間連寫,沒有任何復合
代碼示例
展示并集選擇器的使用
這是一個p標簽
這是一個span標簽
柚子快報激活碼778899分享:前端 CSS3語法及選擇器總結
參考文章
本文內容根據(jù)網(wǎng)絡資料整理,出于傳遞更多信息之目的,不代表金鑰匙跨境贊同其觀點和立場。
轉載請注明,如有侵權,聯(lián)系刪除。