站長資訊網(wǎng)本篇文章給大家?guī)砹薱ss知識總結(jié)，其中系統(tǒng)的從零開始講解了css的使用方法，希望對大家有幫助。
第一部分：CSS的基本使用
（1）CSS是什么？
CSS全稱Cascading Style Sheets，翻譯：層疊（級聯(lián)）樣式表。
如果說HTML是網(wǎng)頁的結(jié)構(gòu)，那么CSS就是網(wǎng)頁化妝師。
（2）CSS寫在哪里？
CSS有三種寫法：
- 直接寫在標(biāo)簽內(nèi)
- 寫在style標(biāo)簽內(nèi)
- 使用外部.css文件
（對應(yīng)CSS的三種寫法，就有三種引入CSS的方式，見下：）
（3）CSS的三大引入方式：
1.直接寫在標(biāo)簽內(nèi)（直接在標(biāo)簽內(nèi)設(shè)置）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS的引入方式1</title> </head> <body> <!--第一種引入方式：行內(nèi)樣式--> <!--注意：只能寫在開始標(biāo)簽或者自閉合標(biāo)簽里，不能寫在結(jié)束標(biāo)簽里哦--> <!-- 直接給標(biāo)簽添加style屬性，style的屬性值里書寫樣式——樣式與樣式之間用分號隔開；樣式的名稱與樣式值用冒號隔開！ --> <!-- 注意：嵌套標(biāo)簽設(shè)置了最外層的樣式，其內(nèi)所有標(biāo)簽都會應(yīng)用此樣式！ --> <p style="color:red;font-size:30px;">我是段落標(biāo)簽</p> <!-- 優(yōu)勢：直觀，很容易區(qū)分是給哪個標(biāo)簽添加的樣式 --> <!-- 劣勢：代碼冗余，樣式過多的話，代碼的可讀性很差--> <!-- 一般用于測試，不用于實(shí)際開發(fā)頁面中 --> </body> </html>
小知識點(diǎn)：
在設(shè)置屬性color屬性時，如下圖操作，可以對顏色進(jìn)行更加直觀詳細(xì)的選擇：
2.寫在style標(biāo)簽內(nèi)（在< head > 標(biāo)簽內(nèi)加入< style >標(biāo)簽進(jìn)行設(shè)置）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS的引入方式2</title> <!--第二種引入方式：內(nèi)部樣式--> <!-- 優(yōu)勢：實(shí)現(xiàn)了標(biāo)簽和樣式的分離，讓代碼的可讀性更高 --> <style> p{ color: #c481ff } </style></head><body><p>我是段落標(biāo)簽</p></body></html>
3.使用外部.css文件設(shè)置css文本，如1.css
第一種：用@import "1.css"將css文件引入；
第二種：通過< link >將css文件引入。
本處用的1.css文件內(nèi)容：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS的引入方式3</title> <!--第一種：鏈接式(建議使用)--> <!--rel屬性（relation）是當(dāng)前這個HTML頁面與鏈接進(jìn)來的樣式表之間的關(guān)系，在此鏈接進(jìn)來的是本頁面的樣式表 href屬性寫樣式表的路徑--> <link rel="stylesheet" href="1.css"> <!--第二種：導(dǎo)入式(不建議使用)--> <style> @import "1.css"; </style></head><body><!--第三種引入方式：外部樣式（有兩種）--><!--小提示：新建.css文件的方法，在pycharm中是新建Stylesheet文件--><!-- 優(yōu)勢:實(shí)現(xiàn)了html文件和樣式的分離，讓代碼的可讀性更高，而且讓代碼的復(fù)用性也更高！ --><p>我是段落標(biāo)簽2</p></body></html>
小知識點(diǎn)：
@import導(dǎo)入式不推薦使用，因?yàn)榇嬖谌毕荩涸谡麄€網(wǎng)頁裝載完之后再裝載.CSS文件，如果網(wǎng)頁文件過大時，會導(dǎo)致先出現(xiàn)無樣式的頁面，閃爍以后再出現(xiàn)樣式網(wǎng)頁。
而推薦使用< link >，因?yàn)樗窍妊b載.css文件，再裝載網(wǎng)頁
總結(jié)—上述三種引入方式的異同：
在實(shí)際開發(fā)中我們不使用行內(nèi)樣式！ 使用最多的是外部樣式。 一般寫demo的時候使用內(nèi)部樣式————因?yàn)榻o別人發(fā)demo的時候，只發(fā)一個文件即可。 無論是外部樣式，內(nèi)部樣式還是行內(nèi)樣式，都會生效，它們共同為標(biāo)簽添加樣式。 如果一個標(biāo)簽通過外部樣式，內(nèi)部樣式設(shè)置了同一類樣式（值不同），會產(chǎn)生覆蓋效果————覆蓋的原則：后寫的樣式覆蓋先寫的樣式！
第二部分：選擇器
（1）選擇器權(quán)重：
現(xiàn)實(shí)生活中—誰的權(quán)利大，就聽誰的，同理，選擇器權(quán)重也是一樣，誰的權(quán)重值高，應(yīng)用誰的。這里的權(quán)重高低通過精確度評判，精確度越高，權(quán)重越大。
（2）選擇器的用處：
用于準(zhǔn)確的選中元素（就是HTML種講的標(biāo)簽），并賦予樣式。
1.標(biāo)簽選擇器：
| 作用：根據(jù)標(biāo)簽的名字找到標(biāo)簽； |
| 注意：它會找到所有的同名標(biāo)簽。 |
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>標(biāo)簽選擇器</title> <style> /*標(biāo)簽選擇器。直接把頁面中的標(biāo)簽當(dāng)做一個選擇器進(jìn)行選擇*/ p{ color: chartreuse; } </style> </head><body><p>我是段落標(biāo)簽1</p><p>我是段落標(biāo)簽2</p></body></html>
注意：
你可以理解為下圖這個整體叫做選擇器！！！
2.類選擇器（class選擇器）
| 通過標(biāo)簽的class屬性，選擇對應(yīng)的元素，借助了一個類的概念，一處定義，可以多處使用。 |
| 使用場景：它的作用對多個標(biāo)簽（往往需要相同的樣式）設(shè)置樣式。 |
| 一個標(biāo)簽可以設(shè)置多個class值，值與值之間用空格隔開，這個標(biāo)簽會具有所有class包含的樣式。 |
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>類選擇器</title> <style> /*類選擇器，也稱class選擇器。通過.進(jìn)行選擇*/ .p1{ color:red; } </style></head><body><p class="p1">我是段落標(biāo)簽</p></body></html>
小tip：
類選擇器可以選擇多個，因?yàn)閏lass屬性不唯一；
但是id選擇器只能選擇一個，因?yàn)閕d是唯一的。
3.id選擇器
| 通過標(biāo)簽的id屬性，選擇對應(yīng)的元素。 |
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>id選擇器</title> <style> /*第三種選擇器：id選擇器 通過#進(jìn)行選擇*/ #p2{ color:cadetblue; } </style></head><body><p id="p2">我是段落標(biāo)簽</p></body></html>
小tip：
以上三個選擇器的權(quán)重： id選擇器 > 類選擇器 >標(biāo)簽選擇器
拓展：如果一個標(biāo)簽同時通過id選擇器和類選擇器設(shè)置了同一個樣式，而我們想要其類選擇器設(shè)置的樣式（background-color）生效，但是看上面選擇器權(quán)重——類選擇器的權(quán)重是低于id選擇器的，應(yīng)該是id選擇器設(shè)置的樣式生效。但是我們可以通過在指定樣式后添加!import來使其生效！！！
!important是權(quán)重最大的！！！
注意：!important只能作用于單個樣式的值，它不是選擇器！
4.群組選擇器
| 群組選擇器是可以同時選擇多個標(biāo)簽的選擇器。 |
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>群組選擇器</title> <style> /*第四種選擇器：群組選擇器 不同選擇器之間用逗號隔開。*/ p,span{ color: #ff82c1; } </style></head><body><p>我是段落標(biāo)簽</p><span>我是文本標(biāo)簽</span><h1>我是一級標(biāo)簽</h1></body></html>
5.全選擇器
| 顧名思義，選擇所有標(biāo)簽！ |
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>全選擇器</title> <style> /*第五種選擇器：全選擇器 通過*選擇此頁面的所有元素，進(jìn)行統(tǒng)一的樣式設(shè)置*/ *{ color: #a3ff50 } </style></head><body><p>我是段落標(biāo)簽</p><h1>我是一級標(biāo)題</h1><h2>我是二級標(biāo)簽</h2><span>我是文本標(biāo)簽</span></body></html>
6.層次選擇器（分為后代，子代，相鄰和兄弟四種選擇器）
注 意：塊狀標(biāo)簽可以嵌套內(nèi)聯(lián)標(biāo)簽和其他塊狀標(biāo)簽；內(nèi)聯(lián)標(biāo)簽只能嵌套文本和其他內(nèi)聯(lián)標(biāo)簽,但不能嵌套塊狀標(biāo)簽。
有個特例：p標(biāo)簽和h標(biāo)簽不能嵌套塊狀標(biāo)簽，也不能嵌套本身，只能嵌套內(nèi)聯(lián)標(biāo)簽！！！
（1）后代選擇器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>后代選擇器</title> <style> /*層次選擇器第一種：后代選擇器 用空格隔開*/ /*后代是它里面嵌套的所有標(biāo)簽*/ /*此例就是p標(biāo)簽里的所有的ol標(biāo)簽，不管ol里嵌套多少ol，都是p的后代*/ p ol{ list-style: none; } </style> </head><body><p> <ol> <li>我是有序列表1</li> <li>我是有序列表2</li> <li>我是有序列表3 <ol> <li>我是有序列表111</li> <li>我是有序列表222</li> </ol> </li> </ol></p></body></html>
（2）子代選擇器（可以往里一層一層的選）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>子代選擇器</title> <style> /*層次選擇器第二種：子代選擇器 用>隔開*/ /*子代選擇器只能選擇他的兒子，在此就是選擇id為ul1的無序列表的兒子*/ /* 上述語法格式中的選擇器可以是id選擇器，class選擇器也可以是標(biāo)簽名選擇器 */ #ul1>li{ list-style: none; /*這個屬性作用是去除列表的樣式，代表去掉無序列表前面的小圓圈*/ } </style></head><body><!--子代選擇器 顏色，字體等等在子代選擇器里會繼承。所以此處用list-style屬性進(jìn)行觀察--><ul id="ul1"> <li>1</li> <li>2</li> <li>3 <ul> <li>11</li> <li>22</li> <li>33</li> </ul> </li></ul></body></html>
（3）兄弟選擇器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>兄弟選擇器</title> <style> /*層次選擇器第三種：兄弟選擇器 用~進(jìn)行選擇*/ /*只要是有同一個父親的就稱為兄弟*/ /*在本例中，id為p2的父親是body，所以body里都是他的兄弟 又因?yàn)榇a是從上向下執(zhí)行的，所以不會選中 我是段落標(biāo)簽1*/ #p2~p{ color:#ff8971 } </style></head><body><p>我是段落標(biāo)簽1</p><p id="p2">我是段落標(biāo)簽2</p><p>我是段落標(biāo)簽3</p><p>我是段落標(biāo)簽4</p></body></html>
（4）相鄰選擇器（相鄰兄弟選擇器）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>相鄰兄弟選擇器</title> <style> /*層次選擇器第四種：相鄰選擇器（相鄰兄弟選擇器） 用+進(jìn)行選擇*/ /*先是找兄弟，然后選擇其中相鄰的*/ /*在本例中，因?yàn)榇a是從上向下執(zhí)行的，所以不會選中 我是段落標(biāo)簽1*/ #p2+p{ color:#ff8971 } </style></head><body><p>我是段落標(biāo)簽1</p><p id="p2">我是段落標(biāo)簽2</p><p>我是段落標(biāo)簽3</p><p>我是段落標(biāo)簽4</p></body></html>
7.屬性選擇器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>屬性選擇器</title> <style> /*屬性選擇器 選中所有p標(biāo)簽里有name屬性的 常用于Input里 如果只想選中 我是段落標(biāo)簽1 ，那么就改為p[name="p1"]即可*/ p[name]{ color: red; } </style></head><body><p name="p1">我是段落標(biāo)簽1</p><p name="p2">我是段落標(biāo)簽2</p><p name="p3">我是段落標(biāo)簽3</p><p>我是段落標(biāo)簽4</p></body></html>
選擇器的一個使用總結(jié)：
權(quán)重大小比較總結(jié)一句話：越具體（就是一開始說的準(zhǔn)確度）權(quán)重越大；越模糊權(quán)重越小！
8.偽類選擇器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>偽類選擇器</title> <!--偽類選擇器--> <!-- 語法格式—— 選擇器：偽類名 --> <!-- 如果要給一個元素加4個偽類，一定要遵守一個順序（link visited hover active） --> <style> /*未訪問超鏈接時的樣式 有超鏈接地址時（僅適用于a標(biāo)簽）*/ a:link{ color: #ff25ec; } /*鼠標(biāo)懸浮時的樣式 適用于所有標(biāo)簽*/ a:hover{ color: #3b29ff; } /*激活狀態(tài)時，即點(diǎn)擊的時候 適用于所有標(biāo)簽*/ a:active{ color: #ff9d47; } /* 訪問過后，點(diǎn)擊完超鏈接之后 （僅適用于a標(biāo)簽）*/ a:visited{ color:green; } </style> </head><body><!--#表示空鏈接--><a href="#">我是超鏈接</a></body></html>
第三部分：常用的字體的樣式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>字體的常用樣式</title> <style> p{ /*字體的類型（例如：黑體，宋體，仿宋...）*/ font-family: 黑體; /*字體的大小（默認(rèn)字號是16px）*/ font-size: 30px; /*字體的樣式（斜體italic 或者 正常normal）*/ font-style: italic; /*字體的粗細(xì)（默認(rèn)粗細(xì)是normal——400） bold是粗體*/ font-weight: bold; /*字體的小大寫 把英文小寫字母變?yōu)榇髮懽帜? 大小不變*/ font-variant: small-caps; /*字體的復(fù)合樣式，要注意順序,其實(shí)就是上面樣式的一個總寫 順序?yàn)椋簊tyle variant weight size/height family 可以少寫！*/ font:italic small-caps normal 50px 黑體; } </style></head><body><p>我是段落標(biāo)簽</p><p>HELLO</p><p>hello</p></body></html>
第四部分：文本的常用樣式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>文本常用樣式</title> <style> p{ /*用于設(shè)置標(biāo)簽內(nèi)的文本的對齊方式————left（左對齊，默認(rèn)）；center（居中對齊）;right（右對齊）*/ text-align: left; /* 用于設(shè)置標(biāo)簽內(nèi)單行文本的高度*/ line-height:40px; /*首行縮進(jìn) em是一個中文字距 也可以用px單位 1em=16px*/ text-indent:2em; /*文本線 underline是下劃線； line-through稱為刪除線 overline（上劃線） none為去除文本線*/ text-decoration: underline; /*字與字之間的距離*/ letter-spacing: 1em; /*詞距 在底下p標(biāo)簽里寫文本，空格隔開就是一個單詞*/ word-spacing:50px; /*行高 可以撐起高度*/ /*撐起高度就是可以通過設(shè)置行高把元素的高度撐到行高那么高*/ /*有個應(yīng)用：單行文本垂直居中（在垂直方向居中）：高度=行高*/ line-height: 50px; /* 用于設(shè)置換行模式————normal（默認(rèn)，滿了一行后正常換行）；nowrap（不換行）*/ white-space: normal; /* 用于設(shè)置內(nèi)容超出標(biāo)簽的處理辦法————hidden（超出部分隱藏）;*/ overflow: hidden; /* 用于設(shè)置文本溢出標(biāo)簽時，文本要做什么事情————ellipsis（用于設(shè)置顯示省略號） */ text-overflow: ellipsis; } a{ /*用于設(shè)置文本的裝飾模式————underline（下劃線）；line-through（中劃線）;overline（上劃線）*/ /* 可以通過設(shè)置為none去除超鏈接下的下劃線！ */ text-decoration: none; } </style></head><body><!--注意：如果是內(nèi)聯(lián)標(biāo)簽，比如span是內(nèi)聯(lián)標(biāo)簽，始終都是居中狀態(tài)，改對齊方式?jīng)]用。 因?yàn)閮?nèi)聯(lián)元素設(shè)置寬高無效，只與內(nèi)容有關(guān)。--><p>我是一個段落標(biāo)簽</p><p>中國 上海 河南</p><a href="">111</a></body></html>
行高的應(yīng)用之實(shí)現(xiàn)單行文本垂直居中：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>行高的一個應(yīng)用</title> <style> p{ /*通過讓行高=高度，實(shí)現(xiàn)單行文本的垂直居中*/ height: 200px; /*高度*/ line-height: 200px; /*行高*/ } </style></head><body><p>我是段落標(biāo)簽</p></body></html>
第五部分：背景的常用樣式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>背景的常用樣式</title> <style> p{ /*設(shè)置p的寬高*/ /* 行元素?zé)o法設(shè)置寬高；塊元素或者行級塊元素可以設(shè)置寬高。如果不設(shè)置寬高，那么使用默認(rèn)寬度——和父標(biāo)簽的寬度一樣；如果不設(shè)置高度，那么使用默認(rèn)高度是由內(nèi)容撐起！ */ width:300px; height:300px; /*設(shè)置背景顏色*/ /* 背景顏色的寫法：1.代表顏色的英文單詞（例如：red,yellow...）； 2.#加6位16進(jìn)制數(shù)（6位中前兩位是紅，中間兩位是綠，后兩位是藍(lán)。紅綠藍(lán)的取值范圍是00~FF/ff）————開發(fā)中最常用的寫法； 3.rgb（紅，綠，藍(lán)）函數(shù)獲取一個顏色————一般用于JS代碼； 4.rgba（紅，綠，藍(lán)，不透明度）函數(shù)獲取一個顏色————一般用于JS代碼 */ background-color: #a3ff50; /*背景圖片 url寫圖片的路徑*/ background-image: url(""); /*設(shè)置背景的大小 也可使用百分比，是參照它的容器*/ background-size:100px 100px; /*背景平鋪 不平鋪 平鋪意思：如果背景圖很小，那么就可以在這個p上放多個。不平鋪就是只放一個*/ background-repeat: no-repeat; /*背景定位 可以使用百分比定位（兩個百分比數(shù)據(jù)，第一個是相對于左，第二個是相對于上）*/ background-position: center; /*復(fù)合樣式 也要按照順序（中間空格隔開，如果不想定位而設(shè)置大小，將定位的那個屬性值寫為0） 屬性的順序是：background-color bacfground-image background-repeat background-position/background-size */ background:red url("") ; } </style></head><body><p></p></body></html>
小拓展：使用CSS實(shí)現(xiàn)漸變色：
（1）漸變色之線性漸變
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>漸變色之線性漸變</title> <style> #p1{ width:300px; height: 300px; /*linear-gradient()函數(shù)用于實(shí)現(xiàn)線性漸變*/ /*注意：顏色的漸變實(shí)現(xiàn)是靠漸變的圖像實(shí)現(xiàn)的，在函數(shù)里可以放多個顏色實(shí)現(xiàn)漸變*/ /*漸變的效果默認(rèn)是從上往下漸變填入的顏色 to right,to left,to top,to buttom right(從左上往右下漸變) 也可以以一定角度進(jìn)行漸變，格式為：度數(shù)deg,比如：90deg */ background-image: linear-gradient(to left,skyblue,pink); } </style></head><body><p id="p1" class="p2"></p></body></html>
（2）漸變色之徑向漸變
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>漸變色之徑向漸變</title> <style> #p1{ width: 200px; height: 300px; /*radial-gradient()函數(shù)用于實(shí)現(xiàn)徑向漸變*/ /*注意：顏色的漸變實(shí)現(xiàn)都是靠漸變的圖像實(shí)現(xiàn)的*/ /*默認(rèn)是從最中心向外發(fā)散進(jìn)行漸變（ellipse是橢圓形狀的漸變） circle(形狀變?yōu)閳A)*/ background-image: radial-gradient(ellipse,skyblue,pink,white); } </style></head><body><p id="p1"></p></body></html>
（3）拓展一個文本漸變色的實(shí)現(xiàn)：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>漸變色之文字漸變</title> <style> span{ /*給背景設(shè)置漸變色*/ /*默認(rèn)文字的顏色漸變是從上往下漸變的 改漸變的方向的話在顏色前面加，比如：to right*/ background-image: linear-gradient(to right,blue,black); /*規(guī)定這個背景漸變色繪制的區(qū)域 在此設(shè)置為文本那個區(qū)域*/ -webkit-background-clip: text; /*把原本的文字設(shè)置為透明的*/ color: transparent; } </style></head><body><!--文字本身是不能設(shè)置漸變的，我們是通過設(shè)置背景的漸變來實(shí)現(xiàn)文字的漸變的--><span>我是漸變的文字，我超級帥！</span></body></html>
（學(xué)習(xí)視頻分享：css視頻教程）
