~推薦~

目前分類:css (2)

瀏覽方式: 標題列表 簡短摘要
文章日怎麼對齊右邊?
Firefox和IE呈現結果不一樣?

csp92 發表在 痞客邦 PIXNET 留言(0) 人氣()

#1 CSS的優化與技巧 (下)

十三.清除浮動
一個非常常見的CSS問題,定位使用浮動的時候,下面的層被浮動的層所覆蓋,或者層裏嵌套的子層超出了外層的範圍。
通常的解決辦法是在浮動層後面添加一個額外元素,例如一個div或者一個br,並且定義它的樣式為clear: both。這個辦法有一點牽強,幸運的是還有一個好辦法可以解決,參看這篇文章《How To Clear Floats Without Structural Markup》(注:本站將儘快翻譯此文)。

上面2種方法可以很好解決浮動超出的問題,但是如果當你真的需要對層或者層裏的物件進行clear的時候怎麼辦?一種簡單的方法就是用overflow屬性,這個方法最初的發表在《Simple Clearing of Floats》,又在《Clearance》和《Super simple clearing floats》中被廣泛討論。

上面那一種clear方法更適合你,要看具體的情況,這裏不再展開論述。另外關於float的應用,一些優秀的文章已經說得很清楚,推薦你閱讀:《Floatutorial》、《Containing Floats》和《Float Layouts》

十四.橫向居中(centering)
這是一個簡單的技巧,但是值得再說一遍,因為我看見太多的新手問題都是問這個:CSS如何橫向居中?你需要定義元素的寬,並且定義橫向的margin,如果你的佈局包含在一個層(容器)中,就象這樣:

你可以這樣定義使它橫向居中:
#wrap {
width:760px; /* 修改為你的層的寬度 */
margin:0 auto;
}
但是IE5/Win不能正確顯示這個定義,我們採用一個非常有用的技巧來解決:用text-align屬性。就象這樣:
body {
text-align:center;
}
#wrap {
width:760px; /* 修改為你的層的寬度 */
margin:0 auto;
text-align:left;
}

第一個body的text-align:center; 規則定義IE5/Win中body的所有元素居中(其他流覽器只是將文字居中) ,第二個text-align:left;是將#warp中的文字居左。

十五.導入(Import)和隱藏CSS
因為老版本流覽器不支援CSS,一個通常的做法是使用@import技巧來把CSS隱藏起來。例如:
@import url(main.css);
然而,這個方法對IE4不起作用,這讓我很是頭疼了一陣子。後來我用這樣的寫法:
@import main.css;
這樣就可以在IE4中也隱藏CSS了,呵呵,還節省了5個位元組呢。想瞭解@import語法的詳細說明,可以看這裏《centricle’s css filter chart》

十六.針對IE的優化
有些時候,你需要對IE流覽器的bug定義一些特別的規則,這裏有太多的CSS技巧(hacks),我只使用其中的兩種方法,不管微軟在即將發佈的IE7 beta版裏是否更好的支持CSS,這兩種方法都是最安全的。
1.注釋的方法

(a)在IE中隱藏一個CSS定義,你可以使用子選擇器(child selector):
html>body p {
/* 定義內容 */
}

(b)下面這個寫法只有IE流覽器可以理解(對其他流覽器都隱藏)
* html p {
/* declarations */
}

©還有些時候,你希望IE/Win有效而IE/Mac隱藏,你可以使用反斜線技巧:
/* */
* html p {
declarations
}
/* */
2.條件注釋(conditional comments)的方法

另外一種方法,我認為比CSS Hacks更加經得起考驗就是採用微軟的私有屬性條件注釋(conditional comments)。用這個方法你可以給IE單獨定義一些樣式,而不影響主樣式表的定義。就象這樣:


十七.調試技巧:層有多大?
當調試CSS發生錯誤,你就要象排版工人,逐行分析CSS代碼。我通常在出問題的層上定義一個背景顏色,這樣就能很明顯看到層佔據多大空間。有些人建議用border,一般情況也是可以的,但問題是,有時候border 會增加元素的尺寸,border-top和boeder-bottom會破壞縱向margin的值,所以使用background更加安全些。
另外一個經常出問題的屬性是outline。outline看起來象boeder,但不會影響元素的尺寸或者位置。只有少數流覽器支援outline屬性,我所知道的只有Safari、OmniWeb、和Opera。

十八.CSS代碼書寫樣式
在寫CSS代碼的時候,對於縮進、斷行、空格,每個人有每個人的書寫習慣。在經過不斷實踐後,我決定採用下麵這樣的書寫樣式:
selector1,
selector2 {
property:value;
}

當使用聯合定義時,我通常將每個選擇器單獨寫一行,這樣方便在CSS檔中找到它們。在最後一個選擇器和大括弧{之間加一個空格,每個定義也單獨寫一行,分號直接在屬性值後,不要加空格。
我習慣在每個屬性值後面都加分號,雖然規則上允許最後一個屬性值後面可以不寫分號,但是如果你要加新樣式時容易忘記補上分號而產生錯誤,所以還是都加比較好。
最後,關閉的大括弧}單獨寫一行。
空格和換行有助與閱讀。




分享,是進步的原動力~
瑞宇網頁設計 http://www.rus.net.tw
~By Sunming

csp92 發表在 痞客邦 PIXNET 留言(0) 人氣()

找更多相關文章與討論