玲子的部落格

隨著網絡技術的不斷發展，網頁設計結合css成為了當下流行的趨勢。對於有一定css基礎的人來說，我說的這下面技巧就不難，但是對於初學者來說就應該看看了，希望幫助大家更好的進行網頁設計。


1、請記住“TRouBLED”(麻煩的)邊框


邊框(border)、邊距(margin)和補白(padding)的簡寫次序為:順時針方向從上開始，即Top, Right, Bottom, Left。比如margin: 0 1px 3px 5px;表示上邊距為零，右邊距為1px，依此類推。


2、非零值要指明單位


在用CSS指定字體、邊距或大小時，必須指明所用的單位(唯一的例外是line-height，很奇怪，它不需要單位)。某些瀏覽器對未指明單位的處理方法不足為憑。零就是零，不管是 px 還是 em。其他的非零值都要明確指定單位。例如: padding: 0 2px 0 1em;


3、測試不同的字體大小


像Mozilla 和Opera 這樣的高級瀏覽器都允許你改變字體大小，不管你用什麼字體單位。某些用戶的默認字體大小肯定和你的不同，盡最大努力去滿足他們。


4、測試時用嵌入式樣式，發佈時再改為外部輸入


將樣式表嵌入在你的HTML 源代碼中，在測試時可以消除許多緩存引起的錯誤，尤其是某些Mac 下的瀏覽器。但在發布前，一定要記住將樣式表移到外部文件，用@import 或引入。


5、加上明顯的邊框有助於佈局調試


像div {border: solid 1px #f00;} 之類的全局規則可以暫時為你查出佈局問題。為特定的元素加上邊框可幫您找到難以發覺的重疊或空白問題。


6、圖片路徑不要用單引號


當設置背景圖片時，要堅持用雙引號。儘管看起來好像多此一舉，但是如果不這麼做，IE5/Mac 會噎住。


7、不要為將來的樣式表(比如手持式設備或打印用樣式表)“佔位子”


Mac IE5 對空的樣式表比較感冒，會增加頁面的裝入時間。建議樣式表中至少應該有一條規則(哪怕是註釋也好)，免得MacIE噎住。


還有一些建議雖然不針對某些功能，但是在開發過程中值得注意：


8、好好組織您的CSS文件


恰當地成塊註釋CSS，將相似的CSS選擇符編為一組，養成一致的命名習慣和空白格式(為跨平台考慮，建議用空白字符而不是tab。)以及適當的次序。


9、以功能(而不是外觀)為類和ID命名


假如您創建了一個.smallblue 類，後來打算將文字改大，顏色變為紅色，這個類名就不再有任何意義了。相反，您可以用更有描述性的名字如.copyright 和.pullquote。


10、組合選擇符


保持CSS短小對減少下載時間非常重要。請盡量為選擇符分組、 利用繼承(inheritance)以及使用簡寫(shorthand)來減少冗餘。


11、使用圖片替換技術時要考慮親和力


已經發現傳統的FIR在屏幕閱讀器，以及關閉圖片顯示[的瀏覽器]中會出問題。對此有其他解決辦法，要根據具體情況，慎重使用。


以上只是個人看法，僅供參考~~~~