CSS繼承&覆蓋與常用的宣告方式目錄

Report
CH.4
CSS繼承&覆蓋與常用的宣告方式
CH.3
CSS繼承&覆蓋與常用的宣告方式
目錄
繼承的觀念
覆蓋的觀念
權重的觀念
覆蓋的規則
常用的宣告方式:同時/組合宣告(Grouping)
常用的宣告方式:後代選擇器 (Descendant Selectors)
CSS註解的寫法
HTML 註解的使用
CSS繼承的觀念
什麼是CSS繼承(inheritance)
id=“HEADER”
在一個 HTML 文件中,
標籤之間有所謂的親子關係。
h1
id=“NAV”
子標籤的樣式若無自訂的樣式,
子標籤樣式就會跟父標籤一樣。
ex.
title 這個標籤一定都是在 head 這個標籤之內,
所以我們就說 title 是 head 的子標籤。
id=“CONTRNT”
id=“FOOTER”
在CONTRNT的h1若沒有設定自身的樣式,就跟body的h1樣式一樣
body
CSS繼承的觀念
什麼是CSS覆蓋(overwrite)
當標籤所在位置與父層使用的屬性有衝突時,
就會產生子層覆蓋父層屬性值的現象,
規則是由上而下,由外而內一層一層被套用,
後套用的樣式屬性
會覆蓋掉先前外層的樣式屬性
在CONTRNT的h1若有設定自身的樣式,
就會覆蓋掉body的h1樣式設定
id=“HEADER”
h1
id=“NAV”
id=“CONTRNT”
id=“FOOTER”
body
CSS權重:影響顯示的效果
CSS 的權重概念
在css中,
Id的效果最大,
再來是class,
最弱的是tag,
權重會影響繼承效果,
進而版型影響顯示的效果
http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
CSS權重:影響顯示的效果
CSS 的權重比較整理
1. 只有元素是最弱的規則
<a>h1 p { font-size: 1em; }</a>
2. 在只有元素的規則內,多元素代表高權力
<a>body div div h1 p { font-size: 1.5em; }</a>
<a>div h1 p { font-size: 1em; }</a>
(5個元素勝3個,所以 1.5em 會被選上套用)
3. 如果有兩個相同權力的規則,後出現的會勝出
4. 一個 class 規則會勝過任何多個元素規則
<a>p.introduction{color:red}</a>
勝
<a>html body p{color:blue}</a>
CSS權重:影響顯示的效果
CSS 的權重比較整理
5. 多 class 規則勝過少 class 規則
<a>div.content div.summary .intro</a>
勝
<a>div.content div p.intro</a>
6. 有 id 規則的 CSS 勝過任何 class
<a>#content img</a>
勝
<a>body div.wrapper div.summary p.intro img</a>
7. id、class 混用時同時使用 id, class 勝過只用他們其中之一
<a>div#content.summary li</a>
勝
<a>div#content ul li</a>
<a>div.content div.secondary li</a>
<a>div ul li </a>
CSS覆蓋的規則
CSS套用規則重點
1. CSS樣式的繼承
部分CSS指定會讓子代元素繼承相同指定,例如 font-size、font-family等
當祖先之間的指定並不相同時,會以較接近的祖先的樣式為準
實務上常見指定font CSS給body,讓整個頁面都以相同的字體大小、風格呈現
不過當某個區塊被指定了不同的font CSS,其子代元素呈現的CSS就會是該區塊
的CSS指定
2.直接指定給元素的CSS樣式
直接指定的CSS套用優先度高於繼承的
其實跟上一點有關,離自己越近的規則的優先度越高,
當然指定給自己的就是最優先囉
CSS覆蓋的規則
CSS套用規則重點
3.直接指定的樣式發生衝突時,
以指定方式的加權值高者優先
4.當CSS樣式加權值相同時,
後指定者優先套用
CSS selectors
權值
Type selectors
1
Class selectors
10
ID selectors
100
p.s.越多層次的選擇器指定會降低效率
當頁面複雜度高時,有時也只能多套用選擇器來提升指定加權值
常用的宣告方式:後代選擇器
後代選擇器 (Descendant Selectors)
只有當A元素在B元素之內時,A元素才會用某個樣式。
若A元素不在B元素內的話,那A元素就可以有其他的樣式。
要達到這個目標,我們就要利用後代選擇器的方式。
語法
【父選擇器】【子選擇器】{
屬性:設定值;
...
}
在以上的宣告中,只有當子選擇器是在父選擇器之內時,樣式才會被用到。
這一類的語法可以繼續延伸好幾代的選擇器,而不是只有兩代而已。
常用的宣告方式:同時/組合宣告
同時/組合宣告(Grouping)
1.如果有數個選擇器享有同樣的樣式,
它們可以同時被宣告(Grouping)。不需再個別重複宣告
語法
h1, h2, h3{ 屬性:設定值;}
h1, h2, h3{ font-size:18px;}
h1 h2 h3 字體大小都已18px顯示
2.當div中有些相同的屬性需宣告,但有些是個別設定的屬性
.AAA h1, .BBB h1, .CCC h1 { font-size:18px;}
語法
.AAA h1{ color:red;}
.BBB h1{ color : bule;}
.CCC h1 { color : yellow;}
CSS註解的寫法
//
這是單行註解,可以用在你的每一個單一 css 語法後面
(例如:font-size:13px; //文字大小為 13px)
/*註解文字*/
這是多行註解,意思是你可以將多行的 css 語法一次註解掉,
最上方用 /*,最下方用 */,包起來的文字就會被註解掉
IE6 註解變亂碼的問題
(加減看,ie6快死光了)
• 註解文字前後加上空格 => /* 註解文字 */。
• 將整個網頁的編碼改為萬國碼 UTF-8。
HTML 註解使用介紹
標準的 HTML 註解寫法
HTML 多行註解使用簡單範例
<!-- ... 這裡是註解文字 ... -->
註解區塊內的文字不會顯示於網頁上,
在區塊內寫 HTML 程式碼也一樣不會執行!
<!-這裡是多行 HTML 註解文字
這裡是多行 HTML 註解文字
-->
無論是單行或多行,
只要是在註解符號 <!-- 與 --> 間的文字
都不會顯示在網頁上。
HTML 中 CSS 語法註解
<style type="text/css">
<!--...這裡是 CSS Code...-->
</style>

similar documents