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