CSS語法、選擇器、繼承、層疊
阿新 • • 發佈:2020-08-10
行內樣式(內聯樣式)
<h1 style="color:red;font-size:20px;">css行內樣式</h1>
內部樣式表(嵌入樣式)
<!-- -->解決低版本瀏覽器不識別style標籤的情況
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> <!-- p{ color:blue; } --> </style> </head> <body> <h1 style="color:red;font-size:20px;">css行內樣式</h1> <p>行內樣式</p> <p>嵌入樣式</p> <p>外部樣式</p> <p>匯入樣式</p> </body> </html>
外部樣式表(建議)
<link rel="stylesheet" href="index2.css"><!-- grey -->
匯入式
頁面載入很慢時可能出現無樣式
同時存在瀏覽器相容性問題
位於style標籤的第一行
<style> <!-- @import url('index.css');/*green*/ p{ color:blue; } --> </style>
css使用方式區別
優先順序:
就近原則,誰距離元素最近,誰的優先順序越高
css選擇器
標籤選擇器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> p{ color:blue; } </style> </head> <body> <p>css樣式</p> </body> </html>
類選擇器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> p{color:blue;} .red{color:red;} </style> </head> <body> <p>css樣式</p> <p class="red">通過類設定樣式</p> </body> </html>
id選擇器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> p{color:blue;} .red{color:red;} #big{font-size:30px;} </style> </head> <body> <p>css樣式</p> <p class="red">通過類設定樣式</p> <p id="big">通過id設定樣式</p> </body> </html>
全域性選擇器(萬用字元選擇器)
*{margin:0;padding:0;font-family: "宋體";}
群組選擇器
p,div{font-family: "宋體";}
後代選擇器
之間用空格隔開
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> p em{color:red;} </style> </head> <body> <p><em>css</em>樣式</p> <div>通過<em>id</em>設定樣式</div> </body> </html>
偽類選擇器
連結偽類的順序,a:hover必須置於a:link和a:visited之後,才有效,a:active必須在a:hover之後,才有效。而link、visited兩個偽類之間順序無所謂,誰在前都可以
順序::link :visited :hover :active 或者 :visited :link :hover :active
IE6不支援其他元素的:hover和:active狀態
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> a:link{color:black;} a:hover{color:yellow;} a:visited{color:green;} a:active{color:red;} p:hover{color:yellow;} p:active{font-size:20px;} </style> </head> <body> <a href="#">連結樣式</a> <p>p標籤樣式</p> </body> </html>
css繼承和層疊
IE6以下版本,表格不會繼承body的屬性
IEtester測試IE瀏覽器個版本的相容性
谷歌瀏覽器預設字型大小是16px,h1標籤預設字型大小是2em,在谷歌瀏覽器中顯示為32px
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{font-size:12px;} p{color:red;border:1px solid;} div{color:red;} div{font-weight:bold;} </style> </head> <body> <!-- span會繼承p元素的部分樣式屬性 部分樣式無法繼承,如border --> <p>css<span>繼承</span></p> <div>css層疊</div> <!-- h1字型大小為24px --> <h1>h1字型大小是2em</h1> </body> </html>