CSS 層疊樣式表 (Cascading Style Sheets)
1、CSS的語(yǔ)法：
CSS的注釋是/*.....*/，作用和HTML注釋類(lèi)似旗唁，只不過(guò)它必須編寫(xiě)在style標(biāo)簽中，或者是CSS文件中
CSS的語(yǔ)法：
選擇器 聲明塊
選擇器：
- 通過(guò)選擇器可以選中頁(yè)面中指定的元素痹束，并且將聲明塊中的樣式應(yīng)用到選擇器對(duì)應(yīng)的元素上
聲明塊：
- 聲明塊緊跟在選擇器的后邊检疫，使用一對(duì){}括起來(lái)
- 聲明塊中實(shí)際上就是一組一組的名值對(duì)結(jié)構(gòu)
- 這一組一組的名值對(duì)我們稱(chēng)為聲明
- 在一個(gè)聲明塊中可以寫(xiě)多個(gè)聲明，多個(gè)聲明之間使用;隔開(kāi)
- 聲明的樣式名和樣式值之間使用:來(lái)連接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS語(yǔ)法</title>
<style type="text/css">
p{
color:red;
font-size:40px;
}
</style>
</head>
<body>
<p>今天天氣真不錯(cuò)祷嘶，PM2.5也就500</p>
</body>
</html>
2屎媳、CSS開(kāi)發(fā)工具
行內(nèi)樣式:
<p style="color: red;font-size: 30px"></p>
內(nèi)部樣式表:
<style>
p{color:red; font-size: 30px;}
<style>
外部樣式表:
<link rel="stylesheet" type="text/css"href="style.css">
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<!--<style type="text/css">
h1{
color: purple;
}
</style>-->
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<h1>這是一個(gè)非常漂亮的網(wǎng)頁(yè)</h1>
<h2>你看我出不出來(lái)</h2>
<h2>你看我出不出來(lái)</h2>
<h2>你看我出不出來(lái)</h2>
<h2>你看我出不出來(lái)</h2>
<h2>你看我出不出來(lái)</h2>
<h2>你看我出不出來(lái)</h2>
<h2>你看我出不出來(lái)</h2>
<h2>你看我出不出來(lái)</h2>
</body>
</html>
3、塊元素和內(nèi)聯(lián)元素
塊元素:
所謂的塊元素就是會(huì)獨(dú)占一行的元素
無(wú)論它的內(nèi)容有多少论巍，它都會(huì)獨(dú)占一整行
常見(jiàn)的塊元素：div p h1 h2 h3……
div這個(gè)標(biāo)簽沒(méi)有任何語(yǔ)義烛谊，就是一個(gè)純粹的塊元素
并且不會(huì)為它里邊的元素設(shè)置任何的默認(rèn)樣式
div元素主要用來(lái)對(duì)頁(yè)面進(jìn)行布局的
內(nèi)聯(lián)元素:（行內(nèi)元素）
所謂的行內(nèi)元素指的是只占自身大小的元素，不會(huì)占用一行
常見(jiàn)的內(nèi)聯(lián)元素：span a img iframe
span沒(méi)有任何語(yǔ)義嘉汰，span標(biāo)簽專(zhuān)門(mén)用來(lái)選中文字丹禀，然后為文字來(lái)設(shè)置樣式
塊元素主要用來(lái)做頁(yè)面中的布局，內(nèi)聯(lián)元素主要用來(lái)選中文本設(shè)置樣式
一般情況下只使用塊元素去包含內(nèi)聯(lián)元素鞋怀，而不會(huì)使用內(nèi)聯(lián)元素去包含一個(gè)塊元素
a元素可以包含任意元素双泪，除了他本身
p元素不可以包含任何其它的塊元素
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>塊和內(nèi)聯(lián)</title>
</head>
<body>
<p><div>我是一個(gè)span</div></p>
<a href="#"><a href="#">我是一個(gè)超鏈接</a></a>
<a href="#">
<div style="background-color: red; width: 200px;">
我是一個(gè)div
</div>
</a>
<div style="background-color: yellow; width: 200px;">
我是一個(gè)div
</div>
<p>我是一個(gè)p標(biāo)簽</p>
<p>我是一個(gè)p標(biāo)簽</p>
<hr />
<span>我是一個(gè)span</span>
<span>我是一個(gè)span</span>
<span style="color: red;">我是一段文字</span>
</body>
</html>
4、常用選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用選擇器</title>
<style type="text/css">
/*為頁(yè)面中的所有的p元素接箫，設(shè)置一個(gè)字體顏色為紅色*/
/*
元素選擇器
作用：通過(guò)元素選擇器可以選擇頁(yè)面中的所有指定元素
語(yǔ)法：標(biāo)簽名{}
*/
/*p{
color: red;
}
h1{
color: red;
}*/
/*
id選擇器
作用：通過(guò)元素的id屬性值選中唯一的一個(gè)元素
語(yǔ)法：#id屬性值{}
*/
/*#p1{
font-size: 20px;
}*/
/*
類(lèi)選擇器
作用：通過(guò)元素的class屬性值選中一組元素
語(yǔ)法：.class屬性值{}
*/
/*.p2{
color: red;
}
.hello{
font-size: 50px;
}*/
/*為id為p1的元素攒读，class為p2的元素朵诫，還有h1辛友，同時(shí)設(shè)置一個(gè)背景顏色為黃色*/
/*
選擇器分組（并集選擇器）
作用：通過(guò)選擇器分組可以同時(shí)選中多個(gè)選擇器對(duì)應(yīng)的元素
語(yǔ)法：選擇器1,選擇器2,選擇器N{}
*/
/*#p1,.p2,h1{
background-color: yellow;
}*/
/*
通配選擇器
作用：可以用來(lái)選中頁(yè)面中的所有的元素
語(yǔ)法：*{}
*/
/**{
color: red;
}*/
/*為擁有class為p3的span元素設(shè)置一個(gè)背景顏色為黃色*/
/*
復(fù)合選擇器（交集選擇器）
作用：可以選中同時(shí)滿(mǎn)足多個(gè)選擇器的元素
語(yǔ)法：選擇器1選擇器2選擇器N{}
*/
span.p3{
background-color: yellow;
}
/*
對(duì)于id選擇器來(lái)說(shuō)，不建議使用復(fù)合選擇器
p#p1{
background-color: red;
}
*/
</style>
</head>
<body>
<h1>憫農(nóng)</h1>
<p>床前明月光</p>
<p>床前明月光</p>
<p id="p1">床前明月光</p>
<!--
我們可以為元素設(shè)置class屬性
它和id屬性類(lèi)似剪返，只不過(guò)class屬性可以重復(fù)
擁有相同class屬性值的元素废累，我們說(shuō)他們是一組元素
可以同時(shí)為一個(gè)元素設(shè)置多個(gè)class屬性值，多個(gè)值之間使用空格隔開(kāi)
-->
<p class="p2 hello">床前明月光</p>
<p class="p2">床前明月光</p>
<p class="p2">床前明月光</p>
<p>床前明月光</p>
<p class="p3">床前明月光</p>
<span class="p3">疑是地上霜</span>
</body>
</html>
5脱盲、子元素和后代元素選擇器
子元素選擇器:
作用：選中指定父元素的指定子元素
語(yǔ)法：父元素 > 子元素
IE6及以下的瀏覽器不支持子元素選擇器
:first-child 可以選中第一個(gè)子元素
:last-child 可以選中最后一個(gè)子元素
:nth-child 可以選中任意位置的子元素
該選擇器后邊可以指定一個(gè)參數(shù)邑滨，指定要選中第幾個(gè)子元素
even 表示偶數(shù)位置的子元素
odd 表示奇數(shù)位置的子元素
元素之間的關(guān)系
父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或間接包含后代元素的元素，父元素也是祖先元素
后代元素：直接或間接被祖先元素包含的元素钱反，子元素也是后代元素
兄弟元素：擁有相同父元素的元素叫做兄弟元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子元素和后代元素選擇器</title>
<style type="text/css">
/*為div中的span設(shè)置一個(gè)顏色為綠色*/
/*
后代元素選擇器
作用：選中指定元素的指定后代元素
語(yǔ)法：祖先元素 后代元素{}
*/
#d1 span{
color: greenyellow;
}
/*選中id為d1的div中的p元素中的span元素*/
#d1 p span{
font-size: 50px;
}
/*為div的子元素span設(shè)置一個(gè)背景顏色為黃色*/
/*
子元素選擇器
作用：選中指定父元素的指定子元素
語(yǔ)法：父元素 > 子元素
IE6及以下的瀏覽器不支持子元素選擇器
*/
div > span{
background-color: yellow;
}
</style>
</head>
<body>
<div id="d1">
<span>我是div標(biāo)簽中的span</span>
<p><span>我是p標(biāo)簽中的span</span></p>
</div>
<div>
<span>我是body標(biāo)簽中的span</span>
</div>
</body>
</html>
6掖看、偽類(lèi)和偽元素
- 給鏈接定義樣式
正常鏈接
a:link
訪問(wèn)過(guò)的鏈接
a:visited（只能定義字體顏色）
鼠標(biāo)滑過(guò)的鏈接
a:hover
正在點(diǎn)擊的鏈接
a:active
- 其他
獲取焦點(diǎn)
:focus
指定元素前
:before
指定元素后
:after
選中的元素
::selection
- 給段落定義樣式
首字母
:first-letter
首行
:first-line
7匣距、屬性選擇器
- 語(yǔ)法
[屬性名]
[屬性名="屬性值"]
[屬性名~="屬性值"]
[屬性名|="屬性值"]
[屬性名^="屬性值"]
[屬性名$="屬性值"]
[屬性名*="屬性值"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>屬性選擇器</title>
<style type="text/css">
p[title*="c"]{
background-color: yellow;
}
</style>
</head>
<body>
<!--
title屬性，這個(gè)屬性可以給任何標(biāo)簽指定
當(dāng)鼠標(biāo)移入到元素上時(shí)哎壳，元素中的title屬性的值將會(huì)作為提示文字顯示
-->
<p title="hello">我是一個(gè)段落</p>
<p>我是一個(gè)段落</p>
<p title="abbc">我是一個(gè)段落</p>
<p title="abccd">我是一個(gè)段落</p>
<p title="abc">我是一個(gè)段落</p>
</body>
</html>
8毅待、兄弟元素選擇器
除了根據(jù)祖先父子關(guān)系，還可以根據(jù)兄弟 關(guān)系查找元素归榕。
語(yǔ)法:
查找后邊一個(gè)兄弟元素
兄弟元素 + 兄弟元素{}
查找后邊所有的兄弟元素
兄弟元素 ~ 兄弟元素{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>兄弟元素選擇器</title>
<style type="text/css">
/*
選中后邊的所有兄弟元素
語(yǔ)法：前一個(gè) ~ 后邊所有
*/
span ~ p{
background-color: yellow;
}
</style>
</head>
<body>
<p>我是一個(gè)p標(biāo)簽</p>
<p>我是一個(gè)p標(biāo)簽</p>
<p>我是一個(gè)p標(biāo)簽</p>
<span>我是一個(gè)span</span>
<div>我是div</div>
<p>我是一個(gè)p標(biāo)簽</p>
<p>我是一個(gè)p標(biāo)簽</p>
<p>我是一個(gè)p標(biāo)簽</p>
</body>
</html>
9尸红、否定偽類(lèi)：
作用：可以從已選中的元素中剔除出某些元素
語(yǔ)法：
:not(選擇器)
10、樣式繼承
像兒子可以繼承父親的遺產(chǎn)一樣刹泄，在CSS中外里，祖先元素上的樣式，也會(huì)被他的后代元素所繼承
利用繼承特石，可以將一些基本的樣式設(shè)置給祖先元素盅蝗，這樣所有的后代元素將會(huì)自動(dòng)繼承這些樣式
但是，并不是所有的樣式都會(huì)被子元素所繼承县匠，比如：背景风科、邊框、定位相關(guān)的樣式都不會(huì)被繼承
11乞旦、選擇器的優(yōu)先級(jí):
內(nèi)聯(lián)樣式贼穆，優(yōu)先級(jí)1000
id選擇器，優(yōu)先級(jí)100
類(lèi)和偽類(lèi)兰粉，優(yōu)先級(jí)10
元素選擇器故痊，優(yōu)先級(jí)1
通配*，優(yōu)先級(jí)0
繼承的樣式玖姑，沒(méi)有優(yōu)先級(jí)
12愕秫、偽類(lèi)的優(yōu)先級(jí):
涉及到a的偽類(lèi)一共有四個(gè)
:link
:visited
:hover
:active
而這四個(gè)選擇器的優(yōu)先級(jí)是一樣的,一定要按照順序來(lái)寫(xiě)
練習(xí)：
第一題：plate（plate元素）
第二題：bento（bento元素）
第三題：fancy（id為fancy的元素）
第四題：plate apple（plate祖先元素下的apple后代元素）
第五題：#fancy pickle （id為#fancy的祖先元素下的pickle后代元素）
第六題：.small（組為small的元素）
第七題：orange small （組為small的orange元素）
第八題：bento orange.small（bento父元素下的組為small的orange子元素）
第九題：plate,bento,div （plate,bento兄弟元素在div元素中）
第十題：*（代表所有元素）
第十一題：plate> （plate父元素的所有子元素）
第十二題：plate+apple （兄弟元素選擇器，plate元素的后一個(gè)元素）
第十三題：bento~pickle （兄弟元素選擇器,bento元素后的多個(gè)pickle元素)
第十四題：plate>apple (plate父元素下的apple子元素)
第十五題：orange:first-child(子元素選擇器焰络，plate元素下的第一個(gè)orange元素)
第十六題：plate :only-child （所有plate元素下的元素）
第十七題：#fancy :last-child,pickle:last-child（id為fancy的元素的最后一個(gè)和pickle元素的最后一個(gè)）
第十八題：plate:nth-child(3)（div元素中的第三個(gè)plate元素）
第十九題：bento:nth-last-child(4)（div元素中倒數(shù)第四個(gè)bento元素）
第二十題：apple:first-of-type （第一個(gè)apple元素）
第二十一題：plate:nth-of-type(even) （所有偶數(shù)個(gè)的plate元素）
第二十二題：plate:nth-of-type(3),plate:nth-of-type(5) （plate元素下的第3個(gè)和第5個(gè)元素）
第二十三題：plate apple:only-of-type （plate元素下滿(mǎn)足apple.small元素的唯一一個(gè)元素）
第二十四題：orange.small:last-of-type,apple.small:last-of-type （是orange.samll和apple.small元素的最后一個(gè)元素）
第二十五題：bento:empty （bento元素里沒(méi)有包括額外元素）
第二十六題：apple:not(.small)（apple里沒(méi)有組是.small的元素）
image.png
