【目錄】
一、CSS基礎
1、什么是CSS3，如何學習？
2、CSS的注釋方法
3、CSS語法結構
4、CSS的三種引入方式
二、CSS選擇器
1、基本選擇器
2、組合選擇器
3、屬性選擇器
4、群組選擇器
5、交叉選擇器
6、偽類選擇器
7、偽元素選擇器
8、選擇器優先級
一、CSS基礎
1、什么是CSS3，如何學習？
CSS3 就是 CSS（Cascading Style Sheet ）語言，也屬于標記語言，數字3 是該語言的版本號；
CSS語言開發的檔案后綴名是 .CSS，通過在HTML檔案中引入該 CSS檔案 來控制HTML代碼的樣式（CSS 也可直接寫在HTML檔案中），
如何學習CSS？
css的學習流程 1.先學如何查找標簽 css查找標簽的方式你一定要學會 因為后面所有的框架封裝的查找陳述句都是基于css來的 css選擇器很簡單很好學不要有壓力!!! 2.之后再學如何添加樣式
2、CSS的注釋方法
/*單行注釋*//*多行注釋1多行注釋2多行注釋3*/通常我們在寫css樣式的時候也會用注釋來劃定樣式區域(因為HTML代碼多所以對呀的css代碼也會很多)/*這是博客園首頁的css樣式檔案*//*頂部導航條樣式*/.../*左側選單欄樣式*/.../*右側選單欄樣式*/...
3、CSS語法結構
選擇器 { 屬性1:值1; 屬性2:值2; 屬性3:值3; 屬性4:值4;}
4、CSS的三種引入方式（書寫方式）
1.style標簽內部直接書寫 <style> h1 { color: burlywood; } </style>2.link標簽引入外部css檔案(最正規的方式 解耦合) <link rel="stylesheet" href="mycss.css">3.行內式(一般不用) <h1 style="color: green">老板好 要上課嗎?</h1>二、CSS選擇器
1、基本分類 以及 語法格式
/* 基本選擇器 *//* # id選擇器# 類選擇器# 元素/標簽選擇器# 通用選擇器 */<style> /* id選擇器*/ /* !*找到id是d1的標簽 將文本顏色變成綠黃色*! */ #d1 { color: greenyellow; } /* 類選擇器 */ /* !*找到class值里面包含c1的標簽*! */ .c1 { color: red; } /* 元素(標簽)選擇器 */ /* !*找到所有的span標簽*! */ span { color: red; } /*通用選擇器*/ /* !*將html頁面上所有的標簽全部找到*! */ *{ color: green; }</style>
# 語法技巧—— p#d1.c1 （插件 emmet 的功能）
2、組合選擇器
組合選擇器分類：
# 后代選擇器 （ 連接識別符號： 空格# 兒子選擇器 （ 連接識別符號： >
# 毗鄰選擇器 （ 連接識別符號： +
# 弟弟選擇器 （ 連接識別符號： ~
/* 在前端 我們將標簽的嵌套用親戚關系來表述層級 */<div> <p>div p</p> <p>div p <span>div p span</span> </p> <span>span</span> <span>span</span></div> /* div里面的p span都是div的后代 p是div的兒子 p里面的span是p的兒子 是div的孫子 div是p的父親 ... *//*后代選擇器*/div span { color: red;}/*兒子選擇器*/div>span { color: red;}/*毗鄰選擇器*//* !*同級別緊挨著的下面的第一個(即 只能匹配 直接兄弟關系的標簽)*! */div+span { color: aqua;}/*弟弟選擇器*//*同級別下面所有的span*/div~span { color: red;}3、群組選擇器
<style> /*逗號表示并列關系*/ div,p,span { color: yellow; } /* 多種選擇器組合使用，表示并列關系使用逗號分隔 */ #d1,.c1,span { color: orange; } </style>4、交叉選擇器
/* 連接識別符號 緊挨著(沒有任何連接符) *//* 交叉選擇器本質上是對一個目標標簽的多個名字的同時表示 */div.box#ele.tag { /*div是標簽名，box和tag都是class屬性值，ele是id屬性值*/ /* 樣式塊 */}<!-- 標簽名div、class名box及tag和id名ele都是對一個目標標簽的修飾空格隔開<!-- class屬性擁有多個值時，多個值之間用空格隔開 --><div class="box tag" id="ele"></div>
5、屬性選擇器
/* 屬性選擇器 *//* 1 含有某個屬性2 含有某個屬性并且有某個值3 含有某個屬性并且有某個值的某個標簽# 屬性選擇器是以[]作為標志的 *//* !*將所有含有屬性名是username的標簽背景色改為紅色*! */[username] { background-color: red;}/* !*找到所有屬性名是username并且屬性值是jason的標簽*! */[username='jason'] { background-color: orange;}/* !*找到所有屬性名是username并且屬性值是jason的input標簽*! */input[username='jason'] { background-color: wheat;}6、偽類選擇器 ——標簽 ：標簽狀態
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { background-color: black; } a:link { /*訪問之前的狀態*/ color: red; } a:hover { /*需要記住*/ color: aqua; /*滑鼠懸浮態*/ } a:active { color: black; /*滑鼠點擊不松開的狀態 激活態*/ } a:visited { color: darkgray; /*訪問之后的狀態*/ }
p { color: darkgray; font-size: 48px; } p:hover { color: white; } input:focus { /*input框獲取焦點(滑鼠點了input框)*/ background-color: red; } </style></head><body><a href="https://www.jd.com/">小軒在不在?</a><p>點我有你好看哦</p><input type="text"></body></html>
7、偽元素選擇器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> /* 為首字符設定樣式 如首個文字為大寫 */ p:first-letter { font-size: 48px; color: orange; } /*在文本開頭 用css在前面或者后面 添加內容，用CSS添加的內容時無法選中復制的*/ p:before { content: '你說的對'; color: blue; } p:after { content: '雨露均沾'; color: orange; } </style></head><body> <p>生命如此多嬌</p></body></html>
8、選擇器優先級——不同選擇器 同時控制 同一標簽的同一屬性
（1）普通選擇器的優先級
1.選擇器相同 書寫順序不同
就近原則:誰離標簽更近就聽誰的（同級的執行順序是從上而下，因此以最后執行的樣式為準）
2.選擇器不同
行內 > id選擇器 > 類選擇器 > 標簽選擇器
精確度越高，越有效
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- <link rel="stylesheet" href="https://www.cnblogs.com/bigorangecc/p/mycss1.css"> --> <style> #d1 { color: aqua; } .c1 { color: orange; } p { color: red; } </style> <link rel="stylesheet" href="mycss1.css"></head><body> <p id="d1" class="c1" style="color: blue">你好鴨子</p></body></html>
<head> <style> * { width: 50px; height: 50px; background-color: red; color: pink; } div { width: 60px; height: 60px; background-color: orange; } .box { width: 70px; height: 70px; } #ele { width: 80px; } </style></head><body> <div class="box" id="ele">文字內容</div></body><!--1. 四種選擇器都控制目標標簽的寬度，最終目標標簽寬度為80px，所以id選擇器優先級最高2. 三種選擇器都控制目標標簽的高度，最終目標標簽寬度為70px，所以class選擇器優先級其次3. 二種選擇器都控制目標標簽的背景顏色，最終目標標簽背景顏色為orange，所以標簽選擇器優先級再次4. 只有一種選擇器控制目標標簽的字體顏色，目標標簽字體顏色一定為pink優先級：通配選擇器 < 標簽選擇器 < class選擇器 < id選擇器-->優先級：通配選擇器 < 標簽選擇器 < class選擇器 < id選擇器
（2）復雜組合選擇器的優先級
1. 復雜選擇器的種類并不會影響優先級 -- 后代：div #ele | 兄弟：div~#ele | 交叉：div#ele 優先級一樣2. 復雜選擇器本質是通過同型別(簡單選擇器)的個數來確定優先級 -- 三層標簽選擇器后代：body div i 大于 兩層標簽選擇器后代：div i | body i3. 簡單選擇器的優先級起關鍵性作用，也就是一個id選擇器要大于無限個class選擇器，一個class選擇器要大于無限個標簽選擇器 -- id選擇器：#i 大于 n層class選擇器：.box .i -- class選擇器：.box 大于 n層標簽選擇器：body div
參考閱讀：
https://www.cnblogs.com/xiaoyuanqujing/articles/11669933.html
https://www.cnblogs.com/xiaoyuanqujing/articles/11669943.html
https://www.cnblogs.com/Dominic-Ji/p/10474769.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/39099.html
標籤：Html/Css
上一篇：【2020Python修煉記】前端開發之 HTML常用標簽匯總
下一篇：CSS背景圖片的6個有趣的技巧