1. 程式人生 > >web前端第六節課

web前端第六節課

制作 基礎上 web前端 inline 即使 size 層級 疑問 而且

IE8怎麽兼容:

ie8已經出來有段時間了,但是經過使用有很多dss或者滾動圖片不兼容問題,比如滾動圖片在ie7完全好使,但ie8只能顯示靜態的,而且格式有問題,解決方法有兩種: 第一種是打開ie8,選擇[工具]內[兼容性視圖]選項,適合看到不兼容的網站時,自己調節. 第二種是網站制作方面的,在頭文件[head]下面加入代碼 [meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/] 在[title]的上面,註意:把[]換成<>

內聯元素和塊元素轉換:

<div style="display:inline">塊元素變內聯元素

</div><span style="display:block">內聯元素變塊元素</span>

css優先級的四大原則:

原則一: 繼承不如指定

如果某樣式是繼承來的永遠不如具體指定的優先級高。
例子1:
CODE:
<style type="text/css">
<!--
*{font-size:20px}
.class3{ font-size: 12px; }
-->
</style>
<span class="class3">我是多大字號?</span>

運行結果:.class3{ font-size: 12px; }

例子2:

CODE:
<style type="text/css">
<!--
#id1 #id2{font-size:20px}
.class3{font-size:12px}
-->
</style>

<div id="id1" class="class1">
<p id="id2" class="class2"> <span id="id3" class="class3">我是多大字號?</span> </p>
</div>

運行結果:.class3{ font-size: 12px; }

註意:後面的幾大原則都是建立在“指定”的基礎上的。

原則二: #ID > .class > 標簽選擇符

例子:
CODE:
<style type="text/css">
<!--
#id3 { font-size: 25px; }
.class3{ font-size: 18px; }
span{font-size:12px}
-->
</style>

<span id="id3" class="class3">我是多大字號?</span>

運行結果:#id3 { font-size: 25px; }

原則三:包含越具體越強大。

解釋:當對某個元素的CSS選擇符樣式定義的越具體,層級越明確,該定義的優先級就越高。
CODE:
<style type="text/css">
<!--
.class1 .class2 .class3{font-size: 25px;}
.class2 .class3{font-size:18px}
.class3 { font-size: 12px; }
-->
</style>

<div class="class1">
<p class="class2"> <span class="class3">我是多大字號?</span> </p>
</div>

運行結果:.class1 .class2 .class3{font-size: 25px;}

原則四:標簽#id >#id ; 標簽.class > .class

上面這條原則大家應該也都知道,看例子
CODE:
<style type="text/css">
<!--
span#id3{font-size:18px}
#id3{font-size:12px}
span.class3{font-size:18px}
.class3{font-size:12px}
-->
</style>
<span id="id3">我是多大字號?</span>
<span class="class3">我是多大字號?</span>

運行結果:span#id3{font-size:18px} | span.class3{font-size:18px}

很多人會有這樣的疑問,為什麽不把這個原則四歸入原則一形成:
【 標簽#ID > #ID > 標簽.class > .class > 標簽選擇符 > 通配符】 呢?或者將 “標簽.class” 看作多更為具體的 “.class” 從而歸入原則二呢?後面我將解答各位的疑惑,這就涉及到CSS的解析規律---------這四大原則間也是有優先級的,是不是有些糊塗了?別急,繼續看。

*四大原則的權重

相信很多人都知道上面的四大原則,不要以為知道了這四大原則就能分辨css中那條代碼是起作用的,不信?那你5秒內能肯定的知道下面這段代碼,測試中的文字的字號嗎?
CODE:
<style type="text/css">
<!--
.class1 p#id2 .class3{font-size:25px}
div .class2 span#id3{font-size:18px}
#id1 .class3{font-size:14px}
.class1 #id2 .class3{font-size:12px}
#id1 #id2{font-size:10px}
-->
</style>
<div id="id1" class="class1">
<p id="id2" class="class2"> <span id="id3" class="class3">我是多大字號?</span> </p>
</div>
為了大家方便閱讀,我去掉了一些代碼。

四大原則的權重就是: 原則一 > 原則二 > 原則三 > 原則四

解釋:

首先遵循原則一

有指定開始使用下面的原則,無指定則繼承離他最近的定義。

然後開始原則二

1、比較最高優先級的選擇符
例子:
CODE:
<style type="text/css">
<!--
#id3{font-size:18px}
.class1 .class2 .class3{font-size:12px}
.class3{font-size:18px}
div p span{font-size:12px}
-->
</style>
<div id="id1" class="class1">
<p id="id2" class="class2"> <span id="id3" class="class3">我是多大字號?</span> </p>
</div>


運行結果:#id3{font-size:18px}

刪掉上面CSS中的前兩行可以得出,如果沒有最高級別的#ID會尋找.class 即使後面的CSS按照“原則二” 描述的再具體也無法突破原則一。
2、如果兩條CSS的如果最高選擇符優先級一樣,則比較他們的數量
例子:
CODE:
<style type="text/css">
<!--
.class1 #id3{font-size:12px}
.class1 .class2 #id3{font-size:14px}
-->
</style>
<div id="id1" class="class1">
<p id="id2" class="class2"> <span id="id3" class="class3">我是多大字號?</span> </p>
</div>


運行結果:.class1 .class2 #id3{font-size:14px}


3、如果最高選擇符級別和數量都一樣,則按照原則二比較他們下一級,以此類推。
例子1:
CODE:
<style type="text/css">
<!--
#id1 .class2 .class3{font-size:14px}
div .class2 #id3{font-size:12px}
-->
</style>
<div id="id1" class="class1">
<p id="id2" class="class2"> <span id="id3" class="class3">我是多大字號?</span> </p>

運行結果:#id1 .class2 .class3{font-size:14px}


*最高級選擇符的位置沒有高下之分,論證: CODE:<style type="text/css"><!--#id1 .class2 .class3{font-size:18px}.class1 #id2 .class3{font-size:14px}.class1 .class2 #id3{font-size:12px}--></style><div id="id1" class="class1"><p id="id2" class="class2"> <span id="id3" class="class3">我是多大字號?</span> </p></div>上例中更換3條CSS的先後可以得出,哪條位於最後,哪條起作用。說明他們的級別一樣,後面的將覆蓋前面的。*將原則四歸入原則二的不合理性,論證:CODE:<style type="text/css"><!--.class1 span#id3{font-size:14px}#id1 .class2 .class3{font-size:12px}--></style><div id="id1" class="class1"><p id="id2" class="class2"> <span id="id3" class="class3">我是多大字號?</span> </p></div>#id1 .class2 .class3{font-size:12px}可以看到span#id3並不比#id1高出一個級別。無結果開始原則三如果比較結果,選擇符從最高級開始都對應,級別上的數量也相同,則開始比較誰更具體。例子:CODE:<style type="text/css"><!--#id1 .class2 span{font-size:14px}.class1 #id3{font-size:12px}--></style><div id="id1" class="class1"><p id="id2" class="class2"> <span id="id3" class="class3">我是多大字號?</span> </p></div>#id1 .class2 span{font-size:14px}當然也可以理解為在原則二層層比較中“少一個層級的樣式”,缺少的那個層級沒有“層級較多的樣式”多出的那個層級的級別高。(繞口令)*將原則四歸入原則三的不合理性,論證:CODE:<style type="text/css"><!--.class2 .class3{font-size:14px}span.class3{font-size:12px}--></style><div id="id1" class="class1"><p id="id2" class="class2"> <span id="id3" class="class3">我是多大字號?</span> </p></div>上例中可以看出,如果將原則四並入原則三,將span.class3看作兩層,那麽應該和.class2 .class3層級一樣多,那麽應該顯示12px,而事實不是這樣。最終對決原則四如果還分不出結果,則開始原則四的比較:例子1:CODE:<style type="text/css"><!--.class1 p.class2 .class3{font-size:14px}.class1 .class2 .class3{font-size:12px}--></style><div id="id1" class="class1"><p id="id2" class="class2"> <span id="id3" class="class3">我是多大字號?</span> </p></div>.class1 p.class2 .class3{font-size:14px}

web前端第六節課