css重设样式_清除浏览器的默认样式

时间: 2018-04-11阅读: 1847标签: 浏览器

由于不同的浏览器默认的样式也不同,所以在网页开发前设置一个公用样式,来清除各个浏览器的默认样式,已达到做的网页在各个浏览器中达到统一。

收集的默认样式的链接地址:

1.eric-meyer-reset-css
http://cssreset.com/scripts/eric-meyer-reset-css/
2.html-5-reset-stylesheet
http://html5doctor.com/html-5-reset-stylesheet/
3.yahoo-css-reset-yui-3
http://cssreset.com/scripts/yahoo-css-reset-yui-3/
4/universal-selector-css-reset
http://cssreset.com/scripts/universal-selector-css-reset/
5normalize-css
http://cssreset.com/scripts/normalize-css/


下面介绍几个主流的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并不是一成不变的,具体还需要根据项目的不同需求做适当的修改,以达到浏览器的兼容和操作上的便利性。  

 

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/623

关闭

js判断浏览器内核是否是safari浏览器

PC端只有Chrome有Safari字段吗?为什么不需要判断其他浏览器?其实360,QQ等浏览器的userAgent字段也会带有Safari字段,但是由于他们基于Chrome二次开发的,所有也会携带有Chrome字段。

浏览器内核分类

五大浏览器:IE、Firefox、Chrome、Safari和Opera。渲染引擎 它负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入 CSS 等),以及计算网页的显示方式,然后会输出至显示器或打印机

Js详细判断浏览器运行环境

看到标题,大家就能想起这个需求在很多项目上都能用到。我们部署在Web服务器上的前端应用,既可以用PC浏览器访问,也可以用手机浏览器访问,再加上现在智能设备的推广,我们甚至能在车载系统、穿戴设备和电视平台上访问

JavaScript判断浏览器内核,微信打开自动提示在浏览器打开

微信会屏蔽 URL 自定义的 scheme ,导致无法跳转手机中的浏览器。网上有一些工具类网站可以实现直接跳转浏览器,之后有机会我会整理一下。我们今天只讨论通过 JavaScript 判断是否在微信浏览器中打开,如果是则弹出提示,在浏览器中打开

浏览器内核有哪些?主流浏览器的所使用的内核介绍

一般说的浏览器内核是指浏览器最重要的核心部分,RenderingEngine,翻译成中文大概意思就是“解释引擎”,我们一般称为浏览器内核。由于不同的内核各自有一套自己的渲染网页和解释页面代码的机制,所以就会有一些问题存在。

「译」无处不在的微浏览器

你已经在各个地方见到了它 —— Tweet 里提及到的网站的小型缩略预览图,Slack 频道或者 Whatsapp 群聊里详细的网站描述。这些链接的预览图对大多数人来说司空见惯,因此我们很少留意网站设计对生成的预览的影响。然而

Chrome浏览器语音自动播放功能

Chrome浏览器为了屏蔽带声音的骚扰广告,从66版本后不再允许自动播放语音,我做的项目需要实时语音提示报警信息,网上搜索了好久都说不再支持自动播放,知道碰到一个大神提供建议设置Chrome浏览器允许声音自动播放:

JS检测CSS属性浏览器是否支持的多种方法

原生CSS.supports语法返回布尔值 true 或者 false ,用来检测是否支持某CSS属性。不考虑兼容性,对CSS的进行检测使用 CSS.supports() 方法,要检测IE浏览器使用赋值取值法。

浏览器访问一个网站所经历的步骤

浏览器访问网站的步骤:Chrome搜索自身的DNS缓存、读取本地HOST文件、浏览器发起一个DNS的一个系统调用、浏览器获得域名对应的IP地址后,发起HTTP三次握手、TCP/IP连接建立起来、服务器端接受到了这个请求、浏览器根据拿到的资源对页面进行渲染

Fiddler无法正常抓取谷歌等浏览器的请求_解决方案

fiddler会自动给浏览器设置一个代理127.0.0.1端口8888,并且记忆浏览器的代理设置,所有的请求先走fiddler代理,再走浏览器代理。解决方案:关闭SwitchyOmega代理,或者使用其代理中的系统代理选项。即可解决问题。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!