Css Reset的作用
类别:Web前端 浏览量:3877
时间:2015-1-11 Css Reset的作用
Css Reset的作用一、为什么要重置它
当今流行的浏览器(如:Firefox、Opera、Internet Explorer、Chrome、Safari等等)中,有一些都是以自己的方式去理解CSS规范,这就会导致有的浏览器对CSS的解释与设计师的CSS定义初衷相冲突,使得网页的样子在某些浏览器下能正确按照设计师的想法显示,但有些浏览器却并没有按照设计师想要的样子显示出来,这就导致浏览器的兼容性问题。
所以,通过重置button标签的CSS属性,然后再将它统一定义,就可以产生相同的显示效果。
二、CSS Reset 的几种形式
1、最简化的CSS Reset
* {
outline: 0;
padding: 0;
margin: 0;
border: 0;
}
2、实用型CSS Reset
* {
vertical-align: baseline;
font-weight: inherit;
font-family: inherit;
font-style: inherit;
font-size: 100%;
outline: 0;
padding: 0;
margin: 0;
border: 0;
}
3、Yahoo(YUI) CSS Reset
body,li,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset,img {
border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-weight: normal;
font-style: normal;
}
ol,ul {
list-style: none;
}
caption,th {
text-align: left;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
font-size: 100%;
}
q:before,q:after {
content:”;
}
abbr,acronym {
border: 0;
}
4、Eric Meyer’s CSS Reset
html, body, li, span, applet, object, iframe, table, caption,
tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins,
kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
acronym, address, big, cite, code, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend {
vertical-align: baseline;
font-family: inherit;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
outline: 0;
padding: 0;
margin: 0;
border: 0;
}
:focus {
outline: 0;
}
body {
background: white;
line-height: 1;
color: black;
}
ol, ul {
list-style: none;
}
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
font-weight: normal;
text-align: left;
}
blockquote:before, blockquote:after, q:before, q:after {
content: “”;
}
blockquote, q {
quotes: “” “”;
}
5、Rudeworks Reset CSS
* {
margin: 0;
padding: 0;
border: none;
}
html {
font: 62.5% “Lucida Grande”, Lucida, Verdana, sans-serif;
text-shadow: #000 0px 0px 0px;
}
ul {
list-style: none;
list-style-type: none;
}
h1, h2, h3, h4, h5, h6, p, pre,
blockquote, ul, ol, dl, address {
font-weight: normal;
margin: 0 0 1em 0;
}
cite, em, dfn {
font-style: italic;
}
sup {
position: relative;
bottom: 0.3em;
vertical-align: baseline;
}
sub {
position: relative;
bottom: -0.2em;
vertical-align: baseline;
}
li, dd, blockquote {
margin-left: 1em;
}
code, kbd, samp, pre, tt, var, input[type='text'], textarea {
font-size: 100%;
font-family: monaco, “Lucida Console”, courier, mono-space;
}
del {
text-decoration: line-through;
}
ins, dfn {
border-bottom: 1px solid #ccc;
}
small, sup, sub {
font-size: 85%;
}
标签:css
您可能感兴趣
- html 设置canvas的背景图可缩放(浅析canvas元素的html尺寸和css尺寸对元素视觉的影响)
- css3伸缩布局教学(css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效)
- css盒子模型有什么用处(深入理解CSS中的盒子模型)
- css样式中实现3d效果(利用纯CSS实现动态的文字效果实例)
- css垂直居中16个方法(css实现元素垂直居中的常用方法总结)
- css3基础选择器有哪些(对CSS3选择器的研究详解)
- html5+css3动画效果图(纯DOM+CSS3实现简单的小风车动画)
- 纯css实现多级菜单(纯CSS实现可折叠树状菜单)
- 三种css选择符(浅谈css之属性及剩余的选择符)
- css浮动布局和盒子(css 盒模型 文档流 几种清除浮动的方法实例详解)
- css导航条怎么做(CSS实现导航条Tab切换的三种方法介绍)
- css3轮播案例(纯CSS3实现图片无间断轮播效果)
- CSS vertical-align的用法
- css的水滴效果(CSS制作各种样式的彩虹效果)
- css3按钮闪烁(纯CSS3代码实现switch滑动开关按钮效果)
- 简述css盒子模型的认识(CSS3弹性盒模型开发笔记一)
- 臭名昭著的731部队最高负责人 石井四郎(臭名昭著的731部队最高负责人)
- 王牌部队,你看的剧情我看的时尚(你看的剧情我看的时尚)
- 被鉴定的古董价值300万 当心,你可能遇到诈骗了(被鉴定的古董价值300万)
- 英语难学吗(初中英语难学吗)
- 如何追女孩子(如何追女孩子的技巧和方法)
- 是不是快乐全被你拿走了(而是你得到的)