CSS重置文檔/reset.css

前言

reset.css文檔就是一個普通的層疊樣式表文檔，就是css文檔，一個網站通常會用三種css文檔來設定網站的樣式。重置樣式(reset.css)(重置默認的css樣式)；公共樣式 (common.css)(一系列頁面共用共享的樣式，如：頭部底部樣式)；獨立樣式(每一個頁面單獨使用的樣式，如index.css)。
在這裏具體講得就是重置樣式，其餘兩種樣式就是因項目而定的沒有太多的規定設定可講。

目錄

• 爲何要用reset.css
• 怎麼用
• reset.css內容說明
• 總結

爲何要用reset.css

由於在不一樣的瀏覽器中，HTML標籤會有一些默認的屬性值，可是各個瀏覽器會渲染出各不同的效果，例如邊距不一致、字體顏色大小行高不同等等。爲了防止出現這種狀況，其實主要是爲了減小代碼的重複定義，提升代碼複用率，提升開發效率，重設各個瀏覽器的默認樣式，還能夠解決其引發的耦合問題。
總結就是高複用，低耦合，文件小。

怎麼用

獨立新建一個css文檔來儲存重置樣式，就是reset.css裏面只存放重置樣式，其餘樣式能夠根據前言分類分開存放css屬性。這裏有一個是本人蔘考了各大網站的reset.css整理寫的reset.css，文檔沒有絕對標準性的，不少都是根據項目的具體需求寫，我總結的只是一些很是經常使用的重置樣式，能夠適用大部分項目，固然最好是理解了，每次本身根據項目需求對reset.css進行編寫。

reset.css說明

@charset 'utf-8';
/*這些元素都建議從新初始化*/
body,div,dl,dt,dd,ul,ol,li,tr,td,th,
h1,h2,h3,h4,h5,h6,hr,br,img,table,
input,form,a,p,textarea{
    padding:0;
    margin:0;
    font-family:Arial,'Microsoft YaHei','宋體';
}
/*去掉列表默認排列*/
ul,ol,li{
    list-style:none;
}
/*去掉底部橫線*/
/*把a元素更改設置成塊級元素，這個根據實際狀況決定要不要*/
a{
    text-decoration:none;
    display:block;
}
/*img標籤要清除border。*/
/*display設爲block設置爲塊級元素，默認爲display:inline; 存在下邊線多出4px情況,因此通常設爲block*/
img{
    border:0;
    display:block;
}
/*清除浮動破壞帶來的塌陷問題*/
/*清除浮動的兼容IE*/
.clearfloat {
	zoom: 1;
}
.clearfloat:after {
	display:block;
	clear:both;
	content:"";
	visibility:hidden;
	height:0;
}
複製代碼

總結

爲了更規範，爲了更好的與人合做，就有了reset.css文檔。這個文檔最好最好在項目的開始就要先寫好。若是問這個文檔是否是必須的，我能夠說不是，你本身在一個樣式表內看到哪一個屬性就寫哪一個屬性先也行，可是寫了這個文檔能夠幫助你節省時間，可讓你的代碼更優秀。謝謝！

• 回到頂部