8個簡單實用的CSS秘訣

2021-05-23 16:01:03 字數 660 閱讀 7707

下面列出了一些可以幫助你改善css樣式表的簡單實用的方法,如果你剛剛開始使用css,這篇日誌可以幫助你更好的理解css。

#1. 結構

保持css結構清晰,不僅有助於保持css檔案的簡單,也利於日後的檢查、更改。

#2. 保持簡潔

保持**簡潔,可以大幅減小css檔案的大小。

#3. padding vs. margin

對於瀏覽器來說,margin是相容性最差的乙個屬性。因此,只要條件允許,應該盡可能的使用padding屬性。

#4. 整合

在下面的例子中定義了乙個公共的class,來代替不同的地方都要用到的相同的**:color:grey

#5. 注釋

在適當的位置加入一條簡單的注釋,不僅有助於你了解**,其他人也可以很好的理解你的**。

#6. 驗證

最好對已經建立好的css檔案進行驗證,這樣可以幫助你找到檔案中存在的錯誤。w3c css 驗證服務

#7. 避免在xhtml中使用樣式

不要在xhtml**中使用樣式,這樣不僅會增加網頁檔案的大小,而且也會使**混亂,變複雜。

#8. 命名

使用標準的可以從字面上正確理解的id和class名稱,而不僅僅是代號。

簡單實用的css邊框屬性border

本文主要講述利用border屬性做出不同的幾何形狀從而適用於比較好看的視覺樣式。預備知識border相關屬性 案例舉例為了更加通俗易懂,demo用的是最簡單的dom元素和css屬性 商品介紹 商品評價 border border left border icon border right 上面的cs...

11個實用的CSS學習工具

通過3d轉換效果產生的互動的幻燈片。按向左或向右箭頭鍵切換,全屏 會有更好的效果。通過乙個簡單的小遊戲讓你學習css selector,輸入正確的selector來完成每一關。你也可以通過選單來選關。這是乙個簡單視覺化css選擇器。選擇左邊選單中的選擇器,選擇的條目就會出現在右邊。css 屬性有大小...

10個實用的CSS屬性小結

1.outline 在除錯css問題的時候,我常常在指定元素上新增border來精確的檢視該元素會發生什麼並幫助確定問題的 這常常是有效的,因為它可以在布 局上給我更加具體的可視性。但是如果是塊級元素,這可能會發生某些錯誤 在任何塊級元素上新增1px的邊框很可能會影響到布局,它會讓這個元素的寬度額 ...