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

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

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: ;
padding: ;
border: ;
font-size: %;
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: ;
}
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: ;
}

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:#;
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:;
padding:;
}
table {
border-collapse:collapse;
border-spacing:;
}
fieldset,img {
border:;
}
/*
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:%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym {
border:;
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:%;
}
/*because legend doesn't inherit in IE */
legend {
color:#;
}

资源网站搜索大全https://55wd.com

 

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: ;
padding: ;
border: ;
outline: ;
font-weight: inherit;
font-style: inherit;
font-size: %;
}
article, aside, nav, section, dialog, figure, header, footer, hgroup {
display:block;
}
legend {
display:none;
}
:focus {
outline: ;
}
table {
border-collapse: collapse;
border-spacing: ;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
a img, iframe {
border: none;
}
ul {
list-style: none;
}
input, textarea, select, button {
font-size: %;
font-family: inherit;
}
input, select {
vertical-align:middle;
}
select {
margin: inherit;
}
button {
border: ;
padding: ;
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: ;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
* html .clearfix {height: %;}
.clearfix {display: block;}

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

css重设样式_清除浏览器的默认样式的更多相关文章

  1. 【转】}目前比较全的CSS重设(reset)方法总结

    在当今网页设计/开发实践中,使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键.在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则,并且呈现相同的视 ...

  2. 目前比较全的CSS重设(reset)方法总结

    在当今网页设计/开发实践中,使用CSS来为语义化的(X)HTML标记添加样式风格是 重要的关键.在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则,并且呈现相同的 ...

  3. CSS重设(reset)

    在当今网页设计/开发实践中,使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键.在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则,并且呈现相同的视 ...

  4. (转)目前比较全的CSS重设(reset)方法总结

    在当今网页设计/开发实践中,使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键.在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则,并且呈现相同的视 ...

  5. 目前比较全的CSS重设(reset)方法总结(转)

    原文地址 在当今网页设计/开发实践中,使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键.在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则,并且呈 ...

  6. 重置浏览器的默认样式(css reset)

    (1)定义:首先css reset指的是重置浏览器的默认样式 (2)作用:因为现在的浏览器很多,并且每个浏览器都有自己的默认样式,这样就会导致一个页面在多个浏览器下展示产生差异,所以我们需要做一些处理 ...

  7. 比较全的css重设

    一.最简化的CSS Reset(重设) : * { padding:; margin:; } 这是最普遍最简单的CSS重设,将所有元素的padding和margin值都设为0,可以避免一些浏览器在理解 ...

  8. CSS 重设文章

    CSS 重设 http://blog.bingo929.com/css-reset-collection.html

  9. 整理base.css,重设浏览器样式

    有的时候,可以把自己经常写的代码整理一下,分文别类,用的时候,拿过来直接用就可以了,可以节约很多时间,提高工作效率.所以,每个人都要有自己的代码库.点击下载 /* * @Author: liubeim ...

随机推荐

  1. Java实现LeetCode #986 - Interval List Intersections

    class Solution { public: vector<Interval> intervalIntersection(vector<Interval>& A, ...

  2. 类似-Xms、-Xmn这些参数的含义:

    类似-Xms.-Xmn这些参数的含义: 答: 堆内存分配: JVM初始分配的内存由-Xms指定,默认是物理内存的1/64 JVM最大分配的内存由-Xmx指定,默认是物理内存的1/4 默认空余堆内存小于 ...

  3. java实现第四届蓝桥杯好好学习

    好好学习 汤姆跟爷爷来中国旅游.一天,他帮助中国的小朋友贴标语.他负责贴的标语是分别写在四块红纸上的四个大字:"好.好.学.习".但是汤姆不认识汉字,他就想胡乱地贴成一行. 请你替 ...

  4. 彻底搞懂 etcd 系列文章(二):etcd 的多种安装姿势

    0 专辑概述 etcd 是云原生架构中重要的基础组件,由 CNCF 孵化托管.etcd 在微服务和 Kubernates 集群中不仅可以作为服务注册与发现,还可以作为 key-value 存储的中间件 ...

  5. 秒懂系列,超详细Java枚举教程!!!

    所有知识体系文章,GitHub已收录,欢迎Star!再次感谢,愿你早日进入大厂! GitHub地址: https://github.com/Ziphtracks/JavaLearningmanual ...

  6. Dedecms升级php版本{dede:field.body/}不解析,文章内容不显示

    Dedecms升级php7后发布文章后,发现前端显示的文章内容都是空白,只能显示标题.关键词.描述等. 第一种方法: 把{dede:field.body /}删除,使用 下面的sql 标签代码替换: ...

  7. TensorFlow笔记——关于MNIST数据的一个简单的例子

    这个程序参考自极客学院. from tensorflow.examples.tutorials.mnist import input_data import tensorflow as tf # MN ...

  8. CSS基础之简单介绍

    网页诞生初期,没有描述样式的语言,创建了很多用于描述样式的标签.但这些标签破坏了html作为一门结构语言的表现. 于是,W3C在1995年开始起草CSS,提出将结构和样式分离的解决方案. 元素 元素是 ...

  9. python基础003----标准数据类型

    一.标准数据类型 在python中,只要定义了一个变量,而且它有数据,那么它的类型就已经确定了,不需要开发者主动去说明它的类型,系统会自动识别.可以用type(变量名)来查看变量的类型.常见的变量类型 ...

  10. Java容器面试总结

    1.List,Set,Map三者的区别? List:用于存储一个有序元素的集合. Set:用于存储一组不重复的元素. Map:使用键值对存储.Map会维护与Key有关联的值.两个Key可以引用相同的对 ...