-為什么要用CSS
- 什么是CSS
- CSS與HTML的關(guān)系
- CSS語(yǔ)法
為什么要用CSS
HTML標(biāo)簽語(yǔ)法中有屬性及值的描述窿春，它們是用來(lái)定義元素的樣式的此蜈，然而使用HTML屬性會(huì)有哪些問(wèn)題呢？
- 相同的效果全闷，不同的標(biāo)簽會(huì)通過(guò)不同的屬性來(lái)表示催植；
- 屬性很不通用酌畜，一對(duì)一羊异，一旦修改起來(lái)怎顾，哇哇那個(gè)慘螟够。灾梦。。應(yīng)該不會(huì)有人這么干了
所以CSS就來(lái)拯救悲慘世界妓笙，干掉HTML屬性（But惹不起那些HTML的獨(dú)有屬性）
什么是CSS
CSS: Cascading Style Sheets
層疊樣式表斥废，級(jí)聯(lián)樣式表，簡(jiǎn)稱樣式表
[它的作用]
1给郊、用于HTML文檔中元素的樣式定義
2牡肉、實(shí)現(xiàn)內(nèi)容（html元素）與表現(xiàn)（css樣式）的分離
3、實(shí)現(xiàn)代碼的可重用性和可維護(hù)性
CSS與HTML的關(guān)系
HTML用于構(gòu)建網(wǎng)頁(yè)的結(jié)構(gòu)
CSS則是用來(lái)構(gòu)建HTML的樣式
CSS語(yǔ)法
1- 使用CSS的三種方式
1-1 內(nèi)聯(lián)方式
內(nèi)聯(lián)方式淆九，也叫行內(nèi)樣式
將樣式的內(nèi)容统锤，放在html元素中的style屬性中
[語(yǔ)法]
屬性：屬性值；
<div style="color:#000炭庙；background-color:red;......"></div>
[特點(diǎn)]
只針對(duì)當(dāng)前元素有效饲窿，其他相同的元素要用的時(shí)候只能Ctrl+C/Ctrl+V來(lái)讓手少打點(diǎn)字。---不通用還特長(zhǎng)焕蹄，代碼重用性0
1-2 內(nèi)部樣式表
將樣式的內(nèi)容逾雄，放在網(wǎng)頁(yè)中的<head></head>間，通過(guò)<style></style>定義內(nèi)部樣式
[樣式規(guī)則]
<head>
<style>
選擇器{
/*樣式聲明*/
color:#000;
background-color:red;
...
}
</style>
</head>
【注：選擇器】定義了一組樣式的名稱，規(guī)定了哪些元素可以使用這些定義好的樣式鸦泳，詳細(xì)下拉
[特點(diǎn)]
提高了代碼的通用型和可維護(hù)性银锻，But僅限當(dāng)前網(wǎng)頁(yè)，寫小demo的時(shí)候可以用用做鹰，做項(xiàng)目就棄了吧
從用戶體驗(yàn)度來(lái)講击纬，打開(kāi)網(wǎng)頁(yè)加載速度比下面要說(shuō)的第三種，也是*最常用的方式*快（見(jiàn)過(guò)京東首頁(yè)這么干）
1-3 外部樣式表
將樣式規(guī)則钾麸，單獨(dú)放在*樣式表*文件中（新建一個(gè)文件并命名：.css）哪個(gè)頁(yè)面要用更振，就*引入*當(dāng)前的樣式表文件
step-1 新建一個(gè)文件，將其后綴修改為.css饭尝，在文件中編寫n個(gè)樣式規(guī)則
step-2 在想使用的頁(yè)面<head></head>中肯腕，通過(guò)<link />引入外部樣式表
2-樣式表特征
2-1 繼承性
大多數(shù)CSS的樣式屬性是可以被繼承的,父元素定義好的樣式可以直接應(yīng)用在子元素上
2-2 層疊性
可以為一個(gè)元素定義多個(gè)樣式規(guī)則，樣式屬性不沖突時(shí)钥平，多個(gè)樣式表中的樣式可以層疊為一個(gè)
如：
div{
font-size:40px;
}
#d1{
font-family:"微軟雅黑";
}
<div id="d1">這是父元素div</div>
2-3 優(yōu)先級(jí)
樣式定義沖突時(shí)实撒，會(huì)按照不同樣式的優(yōu)先級(jí)來(lái)應(yīng)用
最低：瀏覽器缺省設(shè)置
中：外部樣式表和內(nèi)部樣式表（就近原則）
最高：內(nèi)聯(lián)樣式
2-4 調(diào)整顯示優(yōu)先級(jí)：!important
可以顯示的調(diào)整樣式規(guī)則的優(yōu)先級(jí)
語(yǔ)法
選擇器{
屬性:值 !important；
}
沖突樣式中帖池，以!important為準(zhǔn)
