CSS RESET —— 浏览器样式重置
来源:互联网 发布:工厂花季少女走红网络 编辑:程序博客网 时间:2024/04/29 17:04
CSS Reset
1. CSS Reset为什么存在?
只要您的客户存在使用不同浏览器(ie,firefox,chrome等)的可能,那你就不得不从完美的理想状态回到现实,因为不同核心的浏览器对CSS的解析效果呈现各异,导致您所期望的效果跟浏览器的“理解”效果有偏差,今天提到的css reset就是用来重置(复位)元素在不同核心浏览器下的默认值,尽量保证元素在不同浏览器下的同一“起跑线”。
——引用自关于CSS Reset
2. CSS Reset该怎么写?
CSS reset(css重置)基本上是不需要的,至少可以说80%的的CSS reset都是没有必要的,反而增加了页面CSS
的重写,尤其像*{margin:0;}的做法更是要不得(反而破坏了很多UI的兼容性,比如说单复选框等)。我不是一概鄙弃CSS
reset,有些常用标签我也是会简单重置一下的,而且会避免overwrite(样式重写),以保证样式最精简,渲染最高效
——摘录自张鑫旭的这篇文章我是如何对网站CSS进行架构的
个人理解:
对于不同的项目的CSS Reset也会有变化。CSS Reset应当是个人积累的经验的总结,重置一些经常使用的,在不断学习中修改。
那作为初学者该如何写呢? 首先可以参考一些网站的CSS RESET(参考第三点),切不可复制过来直接用。应当像砌墙一样,一块砖一块砖的积累。当你觉得你每次都要写这个重置样式,那就加进你的CSS Reset表吧。
3. CSS Reset 示例
3.1 tmall,淘宝商城
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,\5b8b\4f53;}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;}fieldset,img{border:0;}button,input,select,textarea{font-size:100%;}table{border-collapse:collapse;border-spacing:0;}
3.2 tudou,土豆网
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,\5b8b\4f53,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 0}a{color:#14647d;text-decoration:none;font-family:tahoma,arial,\5b8b\4f53,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,\5b8b\4f53,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}textarea{border-color:#9f9f9f #dcdcdc #dcdcdc #9f9f9f;border-style:solid;border-width:1px;padding:1px;resize:none}
3.3 sohu,搜狐网
/* 全局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;}
- CSS RESET —— 浏览器样式重置
- CSS Reset样式重置
- 重置样式 reset.css
- Reset.css 样式重置
- css reset 样式重置
- 样式重置 css reset
- 用reset.css重置浏览器默认样式的重要性
- 关于reset.css的疑问:为什么一定要重置浏览器样式?
- reset.css 重置浏览器标签的样式表(源码)
- 关于样式重置reset.css
- css reset 重置样式 html5
- css reset(重置样式)
- CSS Reset(样式重置)
- css重置样式表reset.css
- 各种浏览器样式重置 css
- CSS reset的重新审视 – 避免样式重置
- CSS Reset方法 (教你如何重置样式)
- CSS reset的重新审视 – 避免样式重置
- 文件转Base64格式
- HTML5 - 让老浏览器支持新语义元素的几种方法
- 内存溢出与内存泄漏
- 用GDB调试程序(一)
- 无人机--三维重建
- CSS RESET —— 浏览器样式重置
- smtp协议解析分析(源代码)
- Android Studio卡很久(loading很久)的问题
- 获取当前星期
- SQL Server全量上线,腾讯云数据库又添新成员!
- C++ 构造函数
- Kafka 开发简单示例
- 通过attr获取元素的属性值
- 转载_At a Glance on Mac OS architecture