css reset 重置樣式介紹
發(fā)布時間:2012-04-01 00:49:50 作者:佚名
我要評論

reset.css本意就是重置樣式,我始終建議把.clearfix放入layout.css,而把h1、h2之類的定義放進typography.css
這個css reset代碼是我自己在參考前人的基礎(chǔ)上,并根據(jù)個人在多個實際項目中實戰(zhàn)得出來的,在尊重標簽本身用途的同時,又給予一些基本的實際需求。本reset只涉及常見的基本元素,以修正兼容為原則
/* -------------------------------------------------
* reset css
* -------------------------------------------------
*/
html{
height:100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body{
margin:0;
padding:0;
font:12px/1.5 Helvetica, Arial, sans-serif;
background-color:#fff;
height:100%;
text-align:center;
color:#404040;
}
h1,h2,h3,h4,h5,h6,p,blockquote,form,fieldset{
margin:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
input, select, label {
vertical-align:middle;
}
img{
border: none;
}
a {
text-decoration:none;
}
p{
margin:0 0 9px 0;
}
/* hn */
h1,h2{
line-height:36px;
}
h3{
line-height:27px;
}
h4,h5,h6{
line-height:18px;
}
h1{
font-size:24px;
}
h2{
font-size:20px;
}
h3{
font-size:16px;
}
h4{
font-size:14px;
}
h5,h6{
font-size:12px;
}
/* ul ol dl */
ul,ol{
margin: 0 0 18px 0;
padding:0;
}
ul li,ol li{
margin-left:25px;
}
ul ul,
ul ol,
ol ol,
ol ul {
margin-bottom: 0;
}
ul.nostyle{
list-style: none outside none;
}
ul.nostyle li{
margin-left: 0;
}
ul.inline-style{
list-style: none outside none;
}
ul.inline-style li{
float:left;
display:inline;
margin-left:0;
}
dl{
margin-bottom: 18px;
}
dt{
font-weight: bold;
}
dd{
margin:0 0 0 9px;
padding:0;
}
/* html5 */
article, aside, dialog, figure, footer, header,
hgroup, nav, section {
display:block;
}
/* clearfix */
.clearfix:before, .clearfix:after {
content:"";
display:table;
}
.clearfix:after{
clear:both;
overflow:hidden;
}
.clearfix{
zoom:1;
}
復制代碼
代碼如下:/* -------------------------------------------------
* reset css
* -------------------------------------------------
*/
html{
height:100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body{
margin:0;
padding:0;
font:12px/1.5 Helvetica, Arial, sans-serif;
background-color:#fff;
height:100%;
text-align:center;
color:#404040;
}
h1,h2,h3,h4,h5,h6,p,blockquote,form,fieldset{
margin:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
input, select, label {
vertical-align:middle;
}
img{
border: none;
}
a {
text-decoration:none;
}
p{
margin:0 0 9px 0;
}
/* hn */
h1,h2{
line-height:36px;
}
h3{
line-height:27px;
}
h4,h5,h6{
line-height:18px;
}
h1{
font-size:24px;
}
h2{
font-size:20px;
}
h3{
font-size:16px;
}
h4{
font-size:14px;
}
h5,h6{
font-size:12px;
}
/* ul ol dl */
ul,ol{
margin: 0 0 18px 0;
padding:0;
}
ul li,ol li{
margin-left:25px;
}
ul ul,
ul ol,
ol ol,
ol ul {
margin-bottom: 0;
}
ul.nostyle{
list-style: none outside none;
}
ul.nostyle li{
margin-left: 0;
}
ul.inline-style{
list-style: none outside none;
}
ul.inline-style li{
float:left;
display:inline;
margin-left:0;
}
dl{
margin-bottom: 18px;
}
dt{
font-weight: bold;
}
dd{
margin:0 0 0 9px;
padding:0;
}
/* html5 */
article, aside, dialog, figure, footer, header,
hgroup, nav, section {
display:block;
}
/* clearfix */
.clearfix:before, .clearfix:after {
content:"";
display:table;
}
.clearfix:after{
clear:both;
overflow:hidden;
}
.clearfix{
zoom:1;
}
相關(guān)文章
- 每個瀏覽器都有一套CSS樣式表用于保證網(wǎng)頁正常顯示,為了精準寫出WEB頁面 通常一開始就重新定義標簽樣式,介紹兩個比較不錯的Reset.css 分別來自雅虎YUI和Eric Meyer2014-01-26
- 全局CSS想必大家并不陌生吧,主要就是一些基礎(chǔ)全局的樣式設(shè)置,提高書寫效率,本文整理了一些方便大家使用,感興趣的朋友可以了解下2013-09-12
- CSS樣式清除和重置是前端開發(fā)必需要做的事情,結(jié)合了前輩們的經(jīng)驗整理了一份CSS重置樣式代碼不敢獨享特此與大家分享下,感興趣的朋友可不要錯過了哈2013-05-20
CSS重置(CSS Reset) 讓網(wǎng)頁樣式在各瀏覽器中表現(xiàn)一致
CSS Reset是指重設(shè)瀏覽器的樣式,在各種瀏覽器中,都會對CSS的選擇器默認一些數(shù)值,譬如當h1沒有被設(shè)置數(shù)值時,顯示一定大小;有了CSS Reset,讓網(wǎng)頁的樣式在各瀏覽器中表現(xiàn)2012-12-21- 網(wǎng)頁制作Webjx文章簡介:Eric Meyer Reset和YUI Reset都是非常強大的,但是對于我而言,它們走的太遠了。我覺得你最終需要重置一切,然后重新定義所有元素的屬性。這就是為2009-04-02
- 網(wǎng)頁制作Webjx文章簡介:本文就是來介紹如何寫一個合適所有項目的通用的reset.css,以及介紹在設(shè)置玩reset.css之后需要針對不同項目要首先要設(shè)置的內(nèi)容。2009-04-02
- 這篇文章主要介紹了CSS樣式重置代碼,一般保存為reset.css修改了默認的css設(shè)置,方便布局與提高瀏覽器兼容性2014-06-11