行內樣式（行內樣式）
<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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/24702.html
標籤：其他
上一篇：JavaScript自學筆記（2）---function a(){} 和 var a = function(){}的區別（javascript)