您现在的位置是:网站首页> 编程资料编程资料
CSS重置(CSS Reset) 让网页样式在各浏览器中表现一致css reset样式重置介绍 重置css样式工具分享全局CSS的设置(基础样式重置)CSS样式重置和清除(让不同浏览器显示效果一致)css reset 重置样式介绍让样式表CSS代码更加专业规范编写适合所有项目的通用的reset.cssCSS样式重置代码
2021-09-07
1288人已围观
简介 CSS Reset是指重设浏览器的样式,在各种浏览器中,都会对CSS的选择器默认一些数值,譬如当h1没有被设置数值时,显示一定大小;有了CSS Reset,让网页的样式在各浏览器中表现一致,需要的朋友可以了解下
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 Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局,左侧固定宽,右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题
- css之六个为什么为您解答 性能与习惯的结合
- 纯CSS图片预加载实例 摆脱Javascript预载的束缚30种CSS3炫酷页面预加载loading动画特效源码炫酷纯CSS3预加载动画特效源码 3种CSS3 预加载Loading动画特效源码CSS控制前端图片HTTP请求的各种情况示例CSS 实现网页图片的预加载 纯CSS实现预加载动画效果
- Web页面中八种创建多列等高(等高列布局)的实现技术css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果
- 使用CSS3的appearance属性改变任何元素的浏览器默认风格css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果
- css背景图片的背景裁切、背景透明度、背景变换等效果运用详解CSS3的opacity属性设置透明效果的用法CSS3中文字镂空、透明值、阴影效果设置示例小结css3实现的半透明遮罩lightbox效果源码纯CSS实现多级半透明效果菜单代码css+filter实现简单的图片透明效果CSS定义的PNG透明效果兼容各浏览器背景半透明效果CSS链接样式代码用CSS实现的图片透明度链接效果代码 CSS实现背景图片透明而文字不透明效果的两种方法
- 表单button的outline在firefox浏览器下的问题css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果
- input 按钮在IE下显现不一致的兼容问题input 按钮显示差异的解决方法CSS让网页提交input按钮与众不同类型File的Input按钮功能研究关于如何去掉submit按钮背景阴影的解决方法input 背景图片移出 bug解决适合绝大多数电脑用户的老牌实用软件 驱动精灵 2011V5.5.513.2020 绿色input 按钮背景在IE6 IE7中不显示的解决方法
- button在IE6/7下的黑边去除方案css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果
- 移动Web—CSS为Retina屏幕替换更高质量的图片css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果