CSS-讀取來源方式與來源套用順序

Posted on Edited on In , Views: Disqus:

 

一、html網頁可用三種方式讀取CSS

1、External style sheet

先準備一個檔案名為mystyle.css內容為

hr {
    color: sienna;
}

p {
    margin-left: 20px;
}

body {
    background-image: url("images/background.gif");
}

然後於html檔裡的<head>中讀進myStyle.css檔

<head>
    <link rel ="stylesheet" type="text/css" href="mystyle.css">
</head>

 

另外CSS也有提供使用@import的方式來達到 External style sheet，如下範例

<head>
    <style>
        @import url(p1.css);
    </style>
</head>

而@import的方式也可以用獨立用在CSS檔裡面。

 

2、Internal style sheet

直接在<head>加入<style>樣式設定

<head>
    <style>
        hr {
            color: sienna;
        }

        p {
            margin-left: 20px;
        }

        body {
            background-image: url("images/background.gif");
        }
    </style>
</head>

 

3、Inline style

直接在tag裡加入style

<p style="color:sienna;margin-left:20px;">This is a paragraph.</p>

 

二、External、Internal、Inline style 三種來源優先套用順序

當External style sheet準備了

h3 {
    text-align: left;
    font-size: 10pt;
}

並且Internal style sheet 準備了

h3 {
    text-align: right;
    font-size: 20pt;
}

 

而Inline style現有

<h3 style ="text-align:center;font-size:30px;">This is a paragraph.</h3>

 

例1：三者同時被讀取並使用則最後將會被採用的style為

text-align:center;

font-size:30px;

 

例2：如果Inline style變成了<h3>This is a paragraph.</h3>

那三者同時被讀取並使用的結果為

text-align:right;

font-size:20px;

 

例3：如果只有External style sheet與Inline style<h3>This is a paragraph.</h3>

則最後呈現得結果為

text-align:left;

font-size:10px;

 

結論：其style套用的優先順序為

Inline style > Internl style sheet > External style sheet

 

三、!important

但是屬性值 !important 的定可以打破已固定 style 套用優先順序，

經由指定 !important 屬性值可以擁有最高套用優先權。

使用範例如下

.adsbygoogle {
    display: none !important;
}

 

參考資料：

Specificity