CSS語(yǔ)法組成
- 作用：修飾美化頁(yè)面
- 組成：選擇器{聲明} --> 選擇器{屬性1:屬性值2;屬性2:屬性值2}
注意：
- 選擇器/選擇符是修飾當(dāng)前這個(gè)對(duì)象的（標(biāo)簽）
- {聲明} 聲明又分為屬性和屬性值
- 屬性和屬性值之間需要使用冒號(hào)相連
- 如果有多個(gè)屬性的時(shí)候結(jié)束后需要加分號(hào)
- CSS語(yǔ)法中屬性需要和HTML屬性區(qū)分開(kāi)
CSS樣式表的創(chuàng)建方式
行內(nèi)式收奔、內(nèi)部式荧飞、外部式
一凡人、行內(nèi)樣式表的創(chuàng)建方式
需要在標(biāo)簽的內(nèi)部書寫一個(gè)屬性style
在屬性值的位置書寫css語(yǔ)法組成
-
行內(nèi)樣式表的語(yǔ)法會(huì)比較特殊，不需要寫選擇器了
<div style="color:green">abc</div>
缺點(diǎn)：
結(jié)構(gòu)樣式?jīng)]有分離叹阔，不利于后期維護(hù)挠轴。
樣式不能重復(fù)使用，不推薦使用耳幢。
二岸晦、 內(nèi)部樣式表的創(chuàng)建方式
建議在頭部位置書寫style標(biāo)簽
-
在style標(biāo)簽的內(nèi)部書寫css語(yǔ)法組成
<style> p{ color:red; } </style>
特點(diǎn)：
- 結(jié)構(gòu)樣式分離，好維護(hù)
- 樣式可以重用
- 缺點(diǎn)：只能在一個(gè)頁(yè)面中使用css樣式睛藻，適合案例書寫
三启上、外部樣式表的創(chuàng)建方式
需要在外面創(chuàng)建一個(gè)后綴名為.css的文件
在這個(gè)文件中書寫規(guī)法的css語(yǔ)法即可
-
外部文件需要引入進(jìn)來(lái)使用
-
第一種方法【重點(diǎn)】
- 建議在頭部文件中書寫link標(biāo)簽，表示引入外部的資源
<!-- rel表示文檔關(guān)聯(lián) --> <link rel="stylesheet" href="css/style.css"> -
第二種方法【了解】
建議在頭部位置書寫style標(biāo)簽
在標(biāo)簽的內(nèi)部書寫@import url("路徑地址")
區(qū)別：
- link標(biāo)簽引入的時(shí)候是同時(shí)加載HTML和CSS的
- @import導(dǎo)入時(shí)候先加載HTML 后加載CSS
<style> @import url("css/style.css"); </style>
-
如果三種樣式表同時(shí)使用店印，優(yōu)先級(jí)是：
行內(nèi)樣式表的優(yōu)先級(jí)最高冈在，內(nèi)部和外部取決于當(dāng)前代碼的書寫順序在下面的優(yōu)先級(jí)更高（就近原則）。
提示：
移動(dòng)代碼：alt+上下按鍵
-
在瀏覽器控制臺(tái)中常見(jiàn)的提示
如果css屬性被黑色的線劃掉：表示當(dāng)前的屬性有相同并且優(yōu)先級(jí)比較高
如果有黃色的三角形和感嘆號(hào)表示當(dāng)前的代碼寫錯(cuò)了
基本選擇器的使用
標(biāo)簽按摘、id包券、class纫谅、群組選擇器、通配符
一溅固、標(biāo)簽選擇器
別名：元素選擇器
說(shuō)明：選擇中的就是當(dāng)前標(biāo)簽名稱
-
語(yǔ)法：標(biāo)簽名稱{}
div{ color:green }
二付秕、id選擇器
-
語(yǔ)法：
- 在想要修飾的標(biāo)簽內(nèi)部添加id屬性和屬性值
- 在樣式表中使用 #屬性值{}
-
說(shuō)明：建議在一塊布局中只適用一次，id是唯一的
#box{ color:red; }<div id="box"> testword </div>
三发魄、class選擇器
別名：類選擇器
-
語(yǔ)法：
- 在想要修飾的標(biāo)簽內(nèi)部添加class屬性和屬性值
- 在樣式表中使用盹牧，.屬性值 {}
.box{ color:red }
四、群組選擇器
- 說(shuō)明：表示有很多相同的聲明可以寫在一起
- 語(yǔ)法：選擇器1,選擇器2,選擇器3{}
.box,p{
color:red
}
五励幼、通配符
-
說(shuō)明：
學(xué)習(xí)的標(biāo)簽有默認(rèn)樣式，瀏覽器也有默認(rèn)樣式（上下左右有8px的間距）
-
語(yǔ)法：
*{margin:0;padding:0} 清除瀏覽器和所有標(biāo)簽的內(nèi)外邊距
*{
margin: 0;padding: 0;
}
層級(jí)選擇器
后代選擇器/包含選擇器口柳、子代選擇器苹粟、相鄰選擇器
一、 后代選擇器/包含選擇器
- 語(yǔ)法：父級(jí)選擇器 子級(jí)選擇器{}
- 說(shuō)明：表示可以通過(guò)父級(jí)元素選擇到下面的所有子級(jí)元素
ul li{
color:red;
}
ol li{
color:green;
}
二跃闹、 子代選擇器
- 語(yǔ)法：父級(jí)選擇器>子級(jí)選擇器{}
- 說(shuō)明：表示可以通過(guò)父級(jí)元素選擇到下面的直接子級(jí)元素
ul>li{
width:100px;
height:100px;
}
三嵌削、相鄰一個(gè)、相鄰全部【了解】
- 表示從當(dāng)前選擇器選擇到相鄰后面一個(gè)兄弟選擇器 +
- 表示從當(dāng)前選擇器選擇到相鄰后面全部的兄弟選擇器 ~
div+p{
color: red
}
div~p{
color: green
}
<div>哥哥</div>
<p>弟弟1</p>
<p>弟弟2</p>
<p>弟弟3</p>
選擇器的權(quán)重
權(quán)重可以使用四位數(shù)字表示：0000
- 行內(nèi)樣式表 1000
- id選擇器 100
- class選擇器 10
- 標(biāo)簽選擇器 1
- 通配符選擇器 0
- 群組選擇器 各自計(jì)算
- 包含選擇器 相加
拓展： 屬性:屬性值!important 權(quán)重最高望艺，謹(jǐn)慎使用
div{
color:red!important;
}
Q&A
Q：什么是層疊性苛秕？
A：一個(gè)標(biāo)簽可以設(shè)置多個(gè)選擇器，選擇器的使用規(guī)則是根據(jù)選擇器的權(quán)重決定找默，如果選擇器中的屬性是不同的就會(huì)進(jìn)行疊加艇劫，相同的就會(huì)以權(quán)重更高的進(jìn)行選擇。
