|
CSS小竅門
很明顯，一旦你去很認(rèn)真的學(xué)習(xí)使用CSS，你一定會(huì)發(fā)現(xiàn)某些問題，這些問題可能是由誤解造成的，可能是由對(duì)規(guī)則的不了解或者瀏覽器的漏洞造成的。CSS Crib Sheet就是一個(gè)好建議的薈萃，有Dave Shea整理，下面還將有一些重要的而且是Dave沒有提及的小竅門。
-
先校驗(yàn):在調(diào)試的時(shí)候，先由校驗(yàn)開始吧，HTML和CSS都要進(jìn)行校驗(yàn)。許多問題都是由不規(guī)范代碼引起的。
-
先在最先進(jìn)的瀏覽器中調(diào)試，然后才輪到其他的瀏覽器: 如果你剛開始就用對(duì)CSS支持不好的瀏覽器調(diào)試，那么你所編的CSS將會(huì)逐漸適應(yīng)這種錯(cuò)誤的處理。當(dāng)你繼續(xù)在更先進(jìn)的瀏覽器中測(cè)試，一些你所不希望的內(nèi)容就會(huì)出現(xiàn)了。最好還是首先在一個(gè)有很好標(biāo)準(zhǔn)兼容性的瀏覽器中運(yùn)行，然后再把代碼拿到老一點(diǎn)的瀏覽器中去測(cè)試。
-
理解CSS的盒模型:為了獲得一個(gè)元素的實(shí)際的寬度和高度，你需要用padding和border來增加它的 width或者height。在Internet Explorer 5.*/Win中, padding和border是被包括在已知的width和height。
假設(shè)你有如下的CSS代碼: div.box { width:300px; padding:20px; border:10px solid; }
所以這個(gè)div的總寬度是360px. 10px + 20px + 300px + 20px + 10px = 360px
在Internet Explorer 5.*/Win中，實(shí)際上總寬度為300px, 內(nèi)容的寬度為240px. 300px - 10px - 20px - 20px - 10px = 240px
為了繞過這個(gè)問題, 你同樣可以使用CSS hack來給不同的瀏覽器提供不同的值，或者你盡量避免在同一個(gè)元素中同時(shí)定義width 和 padding或者width和border。
想了解關(guān)于CSS盒模型的更詳細(xì)內(nèi)容，請(qǐng)參閱 Box model。
-
為非零的數(shù)值加上單位:CSS要求一些屬性值（如width、 height、font-size）必須要有單位。當(dāng)屬性值為0時(shí)是可以例外的。在那種情況下，沒有單位也是必須的，因?yàn)?就是0，什么單位也都無所謂了。
-
理解漂浮物:盡管漂浮物這個(gè)概念很難理解，但是它很重要，因?yàn)镃SS中會(huì)頻繁的使用它來布局。有一些關(guān)于漂浮物的好文章，如Containing Floats、Floatutorial和Float: The Theory。
-
“LoVe/HAte?” 按照如下順序?yàn)殒溄佣x偽類：Link, Visited, Hover, Active.
-
“TRouBLed?”當(dāng)使用簡(jiǎn)寫來定義margin、padding和border時(shí), 他們的順序是從上開始的順時(shí)針方向: 上、右、下、左。
-
以其功能給CLASS和ID命名，而不是它的表現(xiàn): 如果你有一個(gè)CLASS名為.smallblue, 過后你決定用它來定位文本，使其為大號(hào)、紅色，那么CLASS的名字就會(huì)被弄混淆的。最好能用名字來描述功能和結(jié)構(gòu)，如.copyright和.im portant。
-
CSS是個(gè)敏感的東西:當(dāng)HTML屬性中的 class和id與CSS一起使用時(shí)，那可就要小心了。 (參見CSS2 syntax and basic data types).
-
檢查你的ID:文檔中一個(gè)元素只能使用一個(gè)id，且id必須唯一，而class可以被多個(gè)元素所共享。
-
使用合法的字符為class和 id命名: Class和id的名字只能由數(shù)字、字母和連字符組成，數(shù)字和連字符是不可以開頭的。(參見 CSS2 syntax and basic data types).
-
正確的注釋:CSS的注釋是以/*開頭，以*/結(jié)尾的: /* This is a comment */ CSS布局
有很多例子和階梯教程指導(dǎo)您如何使用CSS布局。建議您從簡(jiǎn)單的例子開始，學(xué)習(xí)它的原理，然后再去學(xué)習(xí)復(fù)雜的布局。 相關(guān)文章:
出處：藍(lán)色理想
責(zé)任編輯：紅色黑客
上一頁 CSS [2] 下一頁 可訪問性
◎進(jìn)入論壇網(wǎng)頁制作、網(wǎng)站綜合版塊參加討論
|
第 1 頁 
第 9 頁 CSS [3]
