DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> WEB前端代碼 >> CSS樣式優先級
CSS樣式優先級
編輯:WEB前端代碼     
CSS繼承優先級,留做備忘。
基本html代碼:

<!DOCTYPE html>
<html>
<head>
<title>Test the order of style-</title>
<link rel="stylesheet" type="text/css" href="style/external.css"/>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>


本頁面引用了外部樣式external.css:
Css代碼
@import url('base.css');
@import url('another.css');


可以看到external.css中又引用了base.css和another.css兩個樣式表:
在base.css中將p元素顏色設定為黃色, 在another.css將p元素顏色設定為藍色;
這個時候頁面中將顯示的是【藍色】,因為,another.css出現在base.css之後,優先級高於base.css;


如果在external.css中將p元素的顏色改為紅色,那麼頁面中最終呈現的顏色將會是【紅色】,因為,被import的樣色表優先級【低於】引用的樣式表。

總的說來CSS中樣式表優先級如下:
內部樣式表 > 外部樣式表 > 外部樣式表引用的樣式表(被引用的樣式表後出現的優先級較高) > 浏覽器自帶樣式
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved