CSS Reset浏览器样式重置10bet

来源:http://www.chinese-glasses.com 作者:Web前端 人气:172 发布时间:2020-03-14
摘要:CSS reset(css重置)基本上是不需要的,至少可以说80%的的CSSreset都是没有必要的,反而增加了页面CSS的重写,尤其像*{margin:0;}的做法更是要不得(反而破坏了很多UI的兼容性,比如说单复选

CSS reset(css重置)基本上是不需要的,至少可以说80%的的CSS reset都是没有必要的,反而增加了页面CSS的重写,尤其像*{margin:0;}的做法更是要不得(反而破坏了很多UI的兼容性,比如说单复选框等)。我不是一概鄙弃CSS reset,有些常用标签我也是会简单重置一下的,而且会避免overwrite(样式重写),以保证样式最精简,渲染最高效——摘录自张鑫旭的这篇文章我是如何对网站CSS进行架构的

举例:

3.1 tmall,淘宝商城

ppt链接:PPT

3.3 sohu,搜狐网

1.背景介绍

2. CSS Reset该怎么写?

Normalize.css 只是一个很小的CSS文件,但它在默认的HTML元素样式上 提供了跨浏览器的高度一致性。相比于传统的CSS reset,Normalize.css 是一种现代的、为HTML5准备的优质替代方案。Normalize.css现在已经被 用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及许许多多其他框架、工具和网站上。

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0}body{color:#000;background:#fff;font-size:12px;line- height:1.25;font-family:tahoma,arial,5b8b4f53,sans-serif}th,td{text-align:left;vertical-align:top}h1,h2,h3,h4,h5,h6{font-size:1em;font-weight:normal}p{margin:0 0 1em 0}blockquote{margin:0 0 1em 0a{color:#14647d;text-decoration:none;font-family:tahoma,arial,5b8b4f53,sans-serif;_font-family:arial,sans-serif}a:hover{text-decoration:underline}img{display:block;border:0}li{list-style:none}ol{padding:0 0 0 2em}input,label,select,option,textarea,button,fieldset,legend{font-size:1em;font-family:tahoma,arial,5b8b4f53,sans-serif;_font-family:Arial,sans-serif}input[type=text],textarea{-webkit-appearance:none;-webkit-border-radius:0;outline:none}input.text{color:#444;border-color:#9f9f9f #dcdcdc #dcdcdc #9f9f9f;border-style:solid;border-width:1px;padding:3px 2px;height:14px}input.radio,input.checkbox{margin-right:2px;vertical-align:-2px}input.radio,input.checkbox{margin-left:-2px}label.radio,label.checkbox{margin-right:5px}

讨论【②】:关于张鑫旭提到的“少即是多”,你怎么看?

/* 全局CSS定义 */body{font-family:’宋体';text-align:center;margin:0 auto;padding:0;background:#FFF;font-size:12px;color:#333;}body  div{text-align:center;margin-right:auto;margin-left:auto;div,form,ul,ol,li,span,p{margin:0;padding:0;border:0;}img,a img{border:0;margin:0;padding:0;}h1,h2,h3,h4,h5,h6{margin:0;padding:0;font-size:12px;font-weight:normal;ul,ol,li{list-style:none}table,td,input{font-size:12px;padding:0}/* 默认链接颜色 */a{outline-style:none;color:#333;text-decoration:none}a:hover{color:#c00;text-decoration:underline;}
  1. Normalize.css 保护了有价值的默认值

3. CSS Reset 示例

CSS Reset的一些方法,可以参考我下面贴出的几个链接地址:

3.2 tudou,土豆网

7.参考文献

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {margin:0;padding:0;}body,button,input,select,textarea{font:12px/1.5 tahoma,arial,5b8b4f53;}h1,h2,h3,h4,h5,h6{font-size:100%;}address,cite,dfn,em,var{font-style:normal;}code,kbd,pre,samp{font-family:courier new,courier,monospace;}small{font-size:12px;ul,ol{list-style:none;}a{text-decoration:none;}a:hover{text-decoration:underline;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}legend{color:#000;}et,img{border:0;}button,input,select,textarea{font-size:100%;}table{border-collapse:collapse;border-spacing:0;}

2.知识剖析

只要您的客户存在使用不同浏览器(ie,firefox,chrome等)的可能,那你就不得不从完美的理想状态回到现实,因为不同核心的浏览器对CSS的解析效果呈现各异,导致您所期望的效果跟浏览器的“理解”效果有偏差,今天提到的css reset就是用来重置(复位)元素在不同核心浏览器下的默认值,尽量保证元素在不同浏览器下的同一“起跑线”。——引用自关于CSS Reset

什么是CSS RESET?

时间: 2019-11-21阅读: 97标签: Reset1. CSS Reset为什么存在?

默认样式重置出现的原因:

10bet,这个项目已经被拆分为多个相关却又独立的部分, 这使得你能够很容易也很清楚地知道哪些元素被设置了特定的值。 因此这能让你自己选择性地移除掉某些永远不会用到部分(比如表单的一般化)。

在HTML标签在浏览器里有默认的样式,例如 p 标签有上下边距,strong标签有字体加粗样式,em标签有字体倾斜样式。不同浏览器的默认样式之间也会有差别,例如ul默认带有缩进的样式,在IE下,它的缩进是通过margin实现的,而Firefox下,它的缩进是由padding实现的。在切换页面的时候,浏览器的默认样式往往会给我们带来麻烦,影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉,更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。最最简单的说法就是把浏览器提供的默认样式覆盖掉!这就是CSS reset。

3.如果选择不用,可以根据自己需要的再去设置改变,或者写一段适合自己的修改默认样式的代码。

参考一: 张鑫旭-《CSS reset的重新审视 – 避免样式重置》

讨论【①】:应该如何做到最优的样式重置呢?

总得来说,CSS Reset 是革命党 ,CSS Reset 里最激进那一派提倡不管你有用没用, 通通给我脱了衣服,于是 *{margin:0;} 等等运动,把人家全拍了。看似是众生平等了, 实则是浪费了资源又占不到便宜,有求于人家的时候还得给加回去,实在需要人家的默认 样式了怎么办?自己看着办吧。

鸣谢

  1. Normalize.css 修复了浏览器的bug

大家好,我是IT修真院深圳分院第02期学员孙剑立,一枚正直善良的web程序员。

使用Reset最让人困扰的地方莫过于在浏览器调试工具中大段大段的继承链, 如下图所示。在Normalize.css中就不会有这样的问题,因为在我们的准则中 对多选择器的使用时非常谨慎的,我们仅会有目的地对目标元素设置样式。

10bet 1

4.解决方案

6.扩展思考

  1. Normalize.css 是模块化的

css重置样式表

  1. Normalize.css 拥有详细的文档

保护有用的浏览器默认样式而不是完全去掉它们

讨论【③】:移动端的页面样式重置和PC端的一样吗?

1.如果要使用reset。则尽量不要去直接拷贝CSS reset的代码, 自己网站上没用到的不用重置,且无意义的重置不要 (比如div本不需要{margin:0;padding:0}), 尽量保证用到的重置是高效简洁的;

今天的分享就到这里啦,欢迎大家点赞、转发、留言、拍砖~

什么是NORMALIZE?

它修复了常见的桌面端和移动端浏览器的bug。 这往往超出了Reset所能做到的范畴。关于这一点, Normalize.css修复的问题包含了HTML5元素的显示设置、 预格式化文字的font-size问题、在IE9中SVG的溢出、许多 出现在各浏览器和操作系统中的与表单相关的bug。

到底该不该用 CSS reset?

参考三:Normalize.css 与传统的 CSS Reset 有哪些区别?

本文由10bet发布于Web前端,转载请注明出处:CSS Reset浏览器样式重置10bet

关键词:

最火资讯