CSS對HTML文檔外觀的表現形式進行排版和格式化。
一、使用方式
1. 元素內嵌樣式
<p style="color:red;font-size:50px">紅色五十像素的文字</p>
2. 文檔內嵌樣式
<head> <style type="text/css"> p { color:red; font-size:30px; } </style> </head> <body> <p>文字</p> </body>
3. 外部引用樣式
index.html
<head> <link rel="stylesheet" type="text/css" href="style.css"> </head>
style.css
@charset "utf-8"; p { color:red; font-size:30px; }
如有多個CSS文件,可在HTML文件中多次link(preferred),亦可在HTML link的CSS文件中使用import。
二、層疊和繼承
1. 層疊:衝突覆蓋+不衝突疊加,自帶樣式元素的樣式可被強制覆蓋,樣式優先級從低到高:
①瀏覽器樣式(元素自帶樣式,例如<b>)
②外部引用樣式(<link>元素)、文檔內嵌樣式(<style>元素),放在後面的優先級更高
③元素內嵌樣式(style屬性)
強制設爲最高優先級,使用important,示例:
color:green !important;
2. 繼承:子元素自動獲得父元素的外觀樣式,佈局樣式(如border)不會被繼承,但可使用inherit強制繼承。示例:
<head> <style type="text/css"> p { color:red; font-size:30px; border:1px solid blue; } b { border:inherit; } </style> </head> <body> <p>紅色放大<b>加粗的文字</b></p> </body>