1、INFO-EC-INFO-08242009百洋軟件研究實驗室學習資料文檔-70個專家的CSS編碼經驗談一：CSS編碼的(準備工作)流程4(翻譯)CSS編碼的(準備工作)流程(翻譯)70個專家的CSS編碼經驗談一：CSS編碼的(準備工作)流程2009年8月24日Jackson.Wang一、 CSS編碼的(準備工作)流程關鍵詞(Keyword)：CSS,工作流程,CSS經驗原文為： 70 Expert Ideas For Better CSS Coding CSS并不是一直都那么容易處理的。CSS完全依賴于你的使用技巧和經驗，尤其是當你無法確定哪些樣式選擇器已經應用到你的文檔元素時，CSS編碼就會

2、變成一個噩夢。其實，一種降低代碼復雜性的簡單方法，就是使用不太常用的CSS屬性來創建適用性比較強且語義正確的標記。我們將在以下內容中列出，專家已經使用過的最有用的CSS技巧、小提示、觀點、方法、技術和解決方案。這里還將包括一些你在日常的項目開發中經常用到的，但是你需要的時候又比較難以找到的一些基本技巧。這里所列出來的是超過70個專家在CSS方面的觀點，可以改善你的CSS編碼效率。如果你愿意，可以(點擊)查閱每段結尾提到的參考資料或相關文章列表。英文原文感謝的言辭這里省略，Jackson在這里還是非常感謝這些共享經驗的專家們。1.1 工作流程：起步階段當你迎來了一個設計, 應該從一個空白內容頁開

3、始。 “（這個空白內容頁應該）包括你的頁頭、導航條、內容示例和頁腳。然后開始添加你的HTML標記, 最后添加你的CSS樣式,這樣工作起來會更好更合理。” CSSing Jackson的ps:：這是開始頁面建立的初始流程，就不用多解釋了。使用一個主樣式表。“我看到一個非常常見的錯誤在于，很多初學者和中級學者在使用CSS樣式表的時候, 沒有將瀏覽器默認的樣式去掉。這將導致你的設計在不同的瀏覽器中會出現不一致的效果。并最終導致設計師們埋怨瀏覽器（的兼容性）。這是個錯誤的埋怨。因此，當你對一個網站做任何編輯工作之前，你應該重置（主）樣式表。”（你可以到以下作者博客查看重設方法） Master Styl

4、esheet: The Most Useful CSS Technique(主樣式表: 最有用的CSS技術), Ryan Parr 代碼示例片段如圖1CSS主樣式表技巧示例。Jackson的ps：這個技巧很多朋友肯定會忘記設置，你會發現當你沒有做重設，會致使你的CSS代碼特別是需要精確到像素的屬性值在各個瀏覽器中失效，然后出現位置不精確的問題。我們真得多多注意！而且在原文中Ryan Parr還提到我們需要將一些排版的規則整理成全局的類樣式，這樣就可以重復使用而不需要到處定義，還是看看原文吧。-圖1CSS主樣式表技巧示例務必重置你的CSS樣式你可以通過設置某個屬性的默認值來忽略該屬性需要指定的屬

5、性值。有些人喜歡通過 Global white space reset全局（樣式）重設，在樣式表的開頭將所有（頁面標簽）元素的margin和padding屬性值都清零。（你可以到以下作者博客查看重設方法）Roger JohanssonJackson的ps：如果你想布局DIV的可以緊貼住瀏覽器呈現出來，這條技巧非常有用。保存（收藏）一些有用的CSS類庫這非常有利于(頁面樣式的)調試，但是應該避免在發布版本中使用(區分開標簽和語義描述)。你現在能夠使用多個類名了(就象這樣 .)，因此你可以利用它們來調試你的(頁面)標簽。（你可以到以下作者博客查看相關內容出處）Richard K. Miller 圖

6、2CSS類庫表示例。 Jackson的ps：這條技巧的意思是，我們可以使用一些有布局語義的類名獨立命名每一個屬性，當你調用的時候可以將這些有語義的類名重復使用。圖2CSS類庫表示例(以下為更多的參考文章)Eric Meyers Global Reset(Eric Meyer寫的全局重置), Christian Montoyas initial CSS file(Christian Montoya寫的初始化CSS文件), Mike Rundles initial CSS file(Mike Rundle寫的初始化CSS文件), Ping Mags initial CSS file(Ping Mag寫的初始化CSS文件). Jackson盡量翻譯得與原來意思一致，基本上我都會從專家原文去揣摩一些原文的意思，再結合原文的代碼和自己的經驗翻譯出來的。肯定會有錯漏的地方，希望各位朋友指正，讓大家共同進步，謝謝！下次將介紹，70個專家的CSS編碼經驗談二：(如何)組織好你的CSS代碼。提供該翻譯文檔的機構為 百洋軟件研究實驗室 ，更多的博客文章可以到 百洋軟件研究實驗室博客 查看。該文檔附件歡迎各位轉載，但是在沒有獲得文章作