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

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>