手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >CSS重置(CSS Reset) 让网页样式在各浏览器中表现一致
CSS重置(CSS Reset) 让网页样式在各浏览器中表现一致
摘要:CSSReset是指重设浏览器的样式。在各种浏览器中,都会对CSS的选择器默认一些数值,譬如当h1没有被设置数值时,显示一定大小。但并不是所...

CSS Reset是指重设浏览器的样式。在各种浏览器中,都会对CSS的选择器默认一些数值,譬如当h1没有被设置数值时,显示一定大小。但并不是所有的浏览器都使用一样的数值,所以有了CSS Reset,以让网页的样式在各浏览器中表现一致。

下面介绍几个主流的CSS Reset代码:

1、Eric Meyer

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

display: block;

}

body {

line-height: 1;

}

ol, ul {

list-style: none;

}

blockquote, q {

quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

content: '';

content: none;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

2、YUI

/*

YUI 3.4.1 (build 4118)

Copyright 2011 Yahoo! Inc. All rights reserved.

Licensed under the BSD License.

http://yuilibrary.com/license/

*/

/*

TODO will need to remove settings on HTML since we can't namespace it.

TODO with the prefix,should I group by selector or property for weight savings?

*/

html {

color:#000;

background:#FFF;

}

/*

TODO remove settings on BODY since we can't namespace it.

*/

/*

TODO test putting a class on HEAD.

- Fails on FF.

*/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td {

margin:0;

padding:0;

}

table {

border-collapse:collapse;

border-spacing:0;

}

fieldset,img {

border:0;

}

/*

TODO think about hanlding inheritence differently,maybe letting IE6 fail a bit...

*/

address,caption,cite,code,dfn,em,strong,th,var {

font-style:normal;

font-weight:normal;

}

ol,ul {

list-style:none;

}

caption,th {

text-align:left;

}

h1,h2,h3,h4,h5,h6 {

font-size:100%;

font-weight:normal;

}

q:before,q:after {

content:'';

}

abbr,acronym {

border:0;

font-variant:normal;

}

/* to preserve line-height and selector appearance */

sup {

vertical-align:text-top;

}

sub {

vertical-align:text-bottom;

}

input,textarea,select {

font-family:inherit;

font-size:inherit;

font-weight:inherit;

}

/*to enable resizing for IE*/

input,textarea,select {

*font-size:100%;

}

/*because legend doesn't inherit in IE */

legend {

color:#000;

}

3、csslab

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, dialog, figure, header, footer, hgroup, menu, nav, section, time, mark, audio, video {

margin: 0;

padding: 0;

border: 0;

outline: 0;

font-weight: inherit;

font-style: inherit;

font-size: 100%;

}

article, aside, nav, section, dialog, figure, header, footer, hgroup {

display:block;

}

legend {

display:none;

}

:focus {

outline: 0;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

caption, th, td {

text-align: left;

font-weight: normal;

}

a img, iframe {

border: none;

}

ul {

list-style: none;

}

input, textarea, select, button {

font-size: 100%;

font-family: inherit;

}

input, select {

vertical-align:middle;

}

select {

margin: inherit;

}

button {

border: 0;

padding: 0;

background: transparent;

cursor: pointer;

}

/* Fixes incorrect placement of numbers in ol's in IE6/7 */

ol { margin-left:2em; }

/* ========================================= clearfix == */

.clearfix:after {

content: ".";

display: block;

height: 0;

clear: both;

visibility: hidden;

}

.clearfix {display: inline-block;}

* html .clearfix {height: 1%;}

.clearfix {display: block;}

需要说明的是CSS Reset并不是一成不变的,具体还需要根据项目的不同需求做适当的修改,以达到浏览器的兼容和操作上的便利性。

【CSS重置(CSS Reset) 让网页样式在各浏览器中表现一致】相关文章:

如何在网页中插入CSS样式表

CSS中a标签样式原则

CSS:CSS样式如何实现Logo立体盒子效果

CSS设计符合Web标准的网页表单的几个技巧

CSS样式表一席谈之CSS快速入门

CSS样式表详解

CSS网页布局的意义与副作用

用CSS样式描述表格Table边框

CSS 网页背景渐变实现代码

css返回顶部图标固定在浏览器右下角且兼容ie6

精品推荐
分类导航