淺談CSS使用的技巧及縱橫向書寫的特點

下面由小編爲大家帶來CSS使用的9則技巧及縱向書寫與橫向書寫的特點,希望對大家有所幫助

淺談CSS使用的技巧及縱橫向書寫的特點

  1. 檢查HTML元素是否有拼寫錯誤、是否忘記結束標記

即使是老手也經常會弄錯div的嵌套關係。可以用dreamweaver的驗證功能檢查一下有無錯誤。

  2. 檢查CSS是否正確

檢查一下有無拼寫錯誤、是否忘記結尾的 } 等。可以利用CleanCSS來檢查 CSS的拼寫錯誤。CleanCSS本是爲CSS減肥的工具,但也能檢查出拼寫錯誤。

  3. 確定錯誤發生的位置

如果錯誤影響了整體佈局,則可以逐個刪除div塊,直到刪除某個div塊後顯示恢復正常,即可確定錯誤發生的位置。

  4. 利用border屬性確定出錯元素的佈局特性

使用float屬性佈局一不小心就會出錯。這時爲元素添加border屬性確定元素邊界,錯誤原因即水落石出。

  5. float元素的父元素不能指定clear屬性

MacIE下如果對float的元素的父元素使用clear屬性,周圍的float元素佈局就會混亂。這是MacIE的着名的bug,倘若不知道就會走彎路。

  6. float元素務必指定width屬性

很多瀏覽器在顯示未指定width的float元素時會有bug。所以不管float元素的內容如何,一定要爲其指定width屬性。

另外指定元素時儘量使用em而不是px做單位。

  7. float元素不能指定margin和padding等屬性

IE在顯示指定了margin和padding的t元素時有bug。因此不要對float元素指定margin和padding屬性(可以在float元素內部嵌套一個div來設置margin和padding)。也可以使用hack方法爲IE指定特別的值。

  8. float元素的寬度之和要小於100%

如果float元素的寬度之和正好是100%,某些古老的瀏覽器將不能正常顯示。因此請保證寬度之和小於99%。

  9. 是否重設了默認的樣式?

某些屬性如margin、padding等,不同瀏覽器會有不同的解釋。因此最好在開發前首先將全體的margin、padding設置爲0、列表樣式設置爲none等

  縱向書寫特點:

每個CSS屬性獨立一行,一般不會出現換行或橫向滾動條。

可以通過firebug等工具查找到模塊,在DW中ctrl+g行定位,修改方便。

屬性段落間有縮進,保證了代碼的整潔,層次清楚,符合編程語言代碼規範,修改更加直觀。

存在的問題:代碼冗餘(如空格符、tab符、換行符);文件大小增加;容易出現縱向滾動條。

  橫向書寫特點:

最大化的利用了空間,單屏內能顯示更多,減小了縱向滾動條出現的機率,能夠快速捕獲較多的信息。

減小了文件大小,省去了不必要的空格、換行等。

橫向書寫方便分塊以及註釋,便於查看CSS結構,選擇符一目瞭然。當今顯示器正朝着越來越大,越來越寬發展,基本上一行內可以顯示完全。

加快編寫CSS速度,不用每次敲換行和tab,並且減少拉動滾動條的次數。

如果是活動頁,不用作壓縮處理。使用CSS optimizers 來優化CSS是提倡的,但是使用橫向書寫,基本上不存在多餘的空格和換行,因此可以不用壓縮,這樣效率和能力都會得到提高。

便於閱讀和查找相關結構。代碼編輯器對同行數定位做的都比較好,因此我們要解決的是如何快速縱向定位目標。橫向書寫時選擇符縱向對齊,再加上

s_name_2 s_name_2_1 s_name_2_1_1的選擇符層次分明,因此很容易定位到目標。

在調試小Bug的時候就可以直接打開CSS更改,不用再打開firebug去找到模塊。

橫向書寫,是基於CSS選擇符的寫法,層次容易對比,更利於模塊化。對整體CSS規劃有好處,後期維護成本低。

便於不同版本的CSS代碼對比。

存在的問題:書寫過密,從而影響閱讀。這種弊端顯而易見,但只要優化做到家,這種狀況會很少。

儘管對於現如今的帶寬來說,網頁文件那僅以K爲單位的大小實在是微不足道,但如何將這以K來計算的網頁文件精簡到最小還是網頁設計師們應該考慮的問題之一。而橫向書寫省去了不必要的空格、換行等,大大減小了文件大小。我們不能說哪種書寫是對的,至於具體採用哪種寫法依個人選擇,當然改變習慣可能會影響一個人的工作效率,那我們提倡的是:提交的CSS樣式文件是經過代碼格式化的,而這個工作可以完全交給DW等工具,我們只要點擊一下,整個文件就會像我們想象的那樣呈現出來。這樣的代碼看起來很舒服,修改容易,團隊成員在後續交接也會變得更加順利。