HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第3章初识CSS
本教程案例在線演示
有路網PC端
有路網移動端
免費配套視頻教程
免費配套視頻教程
教程配套源碼資源
教程配套源碼資源
考慮對人的描述方式
人 {身高:175cm; 體重:70kg; 膚色:黃色 }CSS基本語法結構
選擇器 {聲明1;聲明2;} h1 {font-size:12px;color:#F00; }style標簽
<style type="text/css"> h1 {font-size:12px;color:#F00; } </style>標簽選擇器
HTML標簽作為標簽選擇器的名稱
<h1>…<h6>、<p>、<img/> p { font-size:16px;}類選擇器
<標簽名 class= “類名稱”>標簽內容</標簽名>
.類名稱 { font-size:16px;}ID選擇器
<標簽名 id= “id名稱”>標簽內容</標簽名>
#id名稱 { font-size:16px;}標簽選擇器直接應用于HTML標簽
類選擇器可在頁面中多次使用
ID選擇器在同一個頁面中只能使用一次
制作《浣溪沙》
使用標簽選擇器設置標題字體大小為20px
頁面中所有段落中的文本字體大小為16px
使用類選擇器設置正文和譯文內容字體顏色為綠色
使用ID選擇器設置譯文標題顏色為藍色
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>《浣溪沙》</title><style type="text/css">h1 {font-size: 20px;}p {font-size: 16px;}.poem {color: green;}#title {color: blue;}</style> </head> <body><h1>浣溪沙</h1><hr /><p class="poem">一曲新詞酒一杯，<br />去年天氣舊亭臺。<br />夕陽西下幾時回？<br />無可奈何花落去，<br />似曾相識燕歸來。<br />小園香徑獨徘徊。</p><p id="title">譯文</p><p class="poem">聽一支新曲喝一杯美酒，還是去年的天氣舊日的亭臺，西落的夕陽何時再回來？那花兒落去我也無可奈何，那歸來的燕子似曾相識，在小園的花徑上獨自徘徊。</p> </body> </html>CSS復合選擇器
后代選擇器
交集選擇器
并集選擇器
后代選擇器
在CSS選擇器中通過嵌套的方式，對特殊位置的HTML標簽進行聲明.
外層的標簽寫在前面，內層的標簽寫在后面，之間用空格分隔.
標簽嵌套時，內層的標簽成為外層標簽的后代.
h3 strong{color:blue; font-size:36px;}交集選擇器
由兩個選擇器直接連接構成，選中二者各自元素范圍的交集.
第一個必須是標簽選擇器，第二個必須是類選擇器或者ID選擇器.
選擇器之間不能有空格，必須連續書寫
p.txt{color:blue; line-height:28px;}并集選擇器
多個選擇器通過逗號連接而成.
利用并集選擇器同時聲明風格相同樣式.
h3,.first,.second,#end{font-size:16px; color:green; font-weight:normal; }制作《花千骨大結局》
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">p strong,h1 strong {color: red;}</style> </head><body><h1><strong>花千骨</strong>大結局</h1><p>人間帝王軒轅郎、無所不知所不能東方彧卿（其實他就是超脫六界之外的異朽君）、妖魔兩界圣君殺阡陌那時都是愛花千骨的，都希望白子畫能夠善待花千骨。</p><p>白子畫的善待是八十一根消魂釘，普通仙一根消魂釘就死去活來。花千骨受了17根，又被白子畫用斷念劍看了近百劍，<strong>花千骨心里那個痛苦不言而喻</strong>。而后，花千骨扔到地牢。白子畫替她承受了剩下的消魂釘。<strong>白子畫</strong>在霓漫天的告知下，白子畫的師兄摩嚴得知花千骨居然悖逆天理愛上白子畫，用絕情水潑到花千骨的喉嚨里，臉上，于是花千骨又瞎又啞又毀容，被發配到了幾乎不可能走出來的蠻荒之地。</p><strong>花千骨又瞎又啞又毀容</strong> </body> </html>HTML中引入CSS樣式
- 行內樣式
- 內部樣式表
- 外部樣式表
行內樣式
<h1 style="color:red;">style屬性的應用</h1> <p style="font-size:14px; color:green;">直接在HTML標簽中設置的樣式</p>內部樣式表
CSS代碼寫在<head>的<style>標簽中優點
方便在同頁面中修改樣式
缺點
不利于在多頁面間共享復用代碼及維護，對內容與樣式的分離也不夠徹底
外部樣式表
CSS代碼保存在擴展名為.css的樣式表中.
HTML文件引用擴展名為.css的樣式表，有兩種方式
- 鏈接式
- 導入式
鏈接外部樣式表
導入外部樣式表
<head> …… <style type="text/css"> <!-- @import url("style.css"); --> </style> </head>CSS繼承特性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> body{color:red;} </style> </head><body><p>父級P<strong>子級strong</strong>父級P</p><ul> <li>子級li1</li><li>子級li2</li></ul></body> </html>子標簽可以繼承父標簽的樣式風格
子標簽可以覆寫父標簽的樣式，但不會影響父標簽的樣式風格
<h1>勇氣</h1> <p class="first">三年級時，我還是一個<strong>膽小如鼠</strong>的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。 </p> <p id="second">到了三年級下學期時，我們班上了一節公開課，老師提出了一個很<strong>簡單</strong>的問題，班里很多同學都舉手了，甚至成績比我差很多的，也舉手了，還說著："我來，我來。"我環顧了四周，就我沒有舉手。 </p> p{color:red;}? .first strong{color: blue}CSS的優先級
ID選擇器>類選擇器>標簽選擇器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> p{color:red;} .first{color:green;} </style> </head> <body> <p class="first" id="pid">三年級時，我還是一個<strong>膽小如鼠</strong>的小女孩。</p></body> </html>p和.first都匹配到了p這個標簽上，green是正確的顏色
在html文件中對于同一個元素可以有多個css樣式存在，當有相同權重的樣式存在時，會根據這些css樣式的前后順序來決定，處于最后面的css樣式會被應用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css">p{color:red;} p{color:green;} </style> </head> <body><p class="first" id="pid">三年級時，我還是一個<strong>膽小如鼠</strong>的小女孩。</p> </body> </html>內聯樣式表（標簽內部）> 嵌入樣式表（當前文件中）> 外部樣式表（外部文件中）。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> p{color:red;} p{color:blue;} </style> </head> <body> <p class="first" id="pid" style="color:green">三年級時，我還是一個<strong>膽小如鼠</strong>的小女孩。</p> </body> </html>有些特殊的情況需要為某些樣式設置具有最高權值，怎么辦？這時候我們可以使用!important來解決。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> p{color:red!important;} .first{color:blue;} </style> </head> <body> <p class="first" id="pid" style="color:green">三年級時，我還是一個<strong>膽小如鼠</strong>的小女孩。</p> </body> </html>總結
以上是生活随笔為你收集整理的HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第3章初识CSS的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 天猫网站迁移VPS
- 下一篇： 1.2 win10下Docker 和 D