前端學習（三）——CSS的三種寫法與優先順序
阿新 • • 發佈：2018-12-26
1.style屬性中寫CSS
樣例：
<!DOCTYPE html>
<html>
<head>
<title>CSS寫法優先順序測試</title>
<meta charset="utf-8"/>
</head>
<body>
<p style="color:red;font-size:30px;">CSS寫法優先順序測試</p>
</body>
</html>
2.在<style>標籤中寫CSS
樣例：
<!DOCTYPE html> <html> <head> <title>CSS寫法優先順序測試</title> <meta charset="utf-8"/> <style type="text/css"> p{ color: green; font-size: 50px; } </style> </head> <body> <p>CSS寫法優先順序測試</p> </body> </html>
3.link標籤外聯樣式表
test.html
<!DOCTYPE html>
<html>
<head>
<title>CSS寫法優先順序測試</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="./test.css">
</head>
<body>
<p>CSS寫法優先順序測試</p>
</body>
</html>p{ color: blue; font-size: 10px; }
。
三種寫法的優先順序優先順序
第一種>第二種>第三種
樣例
test.css如上<!DOCTYPE html> <html> <head> <title>CSS寫法優先順序測試</title> <meta charset="utf-8"/> <link rel="stylesheet" type="text/css" href="./test.css"> <style type="text/css"> p{ color: blue; font-size: 50px; } </style> </head> <body> <p style="color:red;font-size:30px;">CSS寫法優先順序測試</p> </body> </html>
結果
