CSS Reset

瀏覽器本身均內建了預設的CSS樣式,例如以下的配置:

<body>
    <div style="width:100px;height:100px;background-color:#d3d3d3;"></div>
</body>

以Chrome為例,呈現的結果畫面如下:



由於瀏覽器的預設margin樣式並非為0,因此其中的 div 方塊左邊、上方與瀏覽器邊界會出現特定的寬度距離。每一款瀏覽器的預設樣式不盡相同,這經常導致相同的CSS設計呈現出不同的結果,除了上述的margin,其它還有padding、字型等等,均有類似的困擾。為了避免這一類的問題,因此有所謂的CSS Reset技巧,就是建立一份預設CSS樣式,消除瀏覽器的預設樣式,以下即是典型的 CSS Reset 樣式。

html, body, div {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

CSS Reset 沒有一定的規則,必須根據製作的網站需求進行設計,不過針對一般性的網頁設計而言,大致上有共用的準則可以遵守,這些準則可以直接從網路上找到,www.cssreset.com 這個網站,將數個最受歡迎的通用CSS Reset檔最新版本集中在一個網頁提供下載,進入網站畫面如下:



找到自己想要的CSS Reset 檔案,按一下右邊的 Get The Code 出現檔案內容畫面:



選擇右下角的Minified 或是 Full 按鈕,按一下將其下載配置於專案中即可。

CSS Reset 亦是採用 SMACSS 架構設計第一步必須完成的基礎設定,今年第一場課程活動《RWD 跨裝置現代網頁開發》,針對相關的內容,我們將有完整的實作示範說明,歡迎踴躍報名參加。 :)



沒有留言: