reset清除所有浏览器默认样式
温馨提示
reset 的目的不是清除浏览器的默认样式, 这仅是部分工作. 清除和重置是紧密不可分的.
reset 的目的不是让默认样式在所有浏览器下一致, 而是减少默认样式有可能带来的问题.
reset 期望提供一套普适通用的基础样式. 但没有影响, 推荐根据具体需求, 裁剪和修改后再使用.
一.设置及注释
- /** 清除内外边距 **/
- body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
- dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
- pre, /* text formatting elements 文本格式元素 */
- form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
- th, td /* table elements 表格元素 */ {
- margin: 0;
- padding: 0;
- }
- /** 设置默认字体 **/
- body,
- button, input, select, textarea /* for ie */ {
- font: 14px/1.5 tahoma, \5b8b\4f53, sans-serif;
- }
- h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal;}
- address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
- code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一<a href="https://www.baidu.com/s?wd=等宽字体&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YLPjcvPvmkPW9WPWRLPj-b0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3En16srjm1rjcL" target="_blank" class="baidu-highlight">等宽字体</a> */
- small { font-size: 12px; } /* 小于 12px 的中文很难阅读, 让 small 正常化 */
- /** 重置列表元素 **/
- 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; } /* for ie6 */
- fieldset, img { border: 0; } /* img 搭车:让链接里的 img 无边框 */
- button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
- /* 注:optgroup 无法扶正 */
- /** 重置表格元素 **/
- table { border-collapse: collapse; border-spacing: 0; }
- /* 重置 HTML5 元素 */
- article, aside, details, figcaption, figure, footer,header, hgroup, menu, nav, section,
- summary, time, mark, audio, video {
- display: block;
- margin: 0;
- padding: 0;
- }
- mark { background: #ff0; }
二.实际应用代码
建议做网站的时候,设置个reset.css样式表清除各个浏览器的默认样式,已达到做的网页在各个浏览器中达到统一,下面把YUI Reset CSS代码贴出
- 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;
- }
- table {
- border-collapse:collapse;
- border-spacing:0;
- }
- fieldset,img {
- border:0;
- }
- 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;
- }
更多专业前端知识,请上 【猿2048】www.mk2048.com
reset清除所有浏览器默认样式相关推荐
- 23.去除浏览器默认样式
文章目录 去除浏览器默认样式 1.枚举式 2.简单页面草率式 3.装杯专业式 去除浏览器默认样式 通常情况下,不同浏览器可能会为相同元素设置一些默认样式,因此就可能导致开发的页面在不同浏览器下打开效果 ...
- 浏览器默认样式有哪些,如何覆盖
1.user agent stylesheet是浏览器默认样式表,是浏览器默认样式. 2.不同浏览器的默认样式不同个,甚至同种浏览器不同版本的默认样式也可能不同.其中google中对body的默认样式 ...
- 去苹果浏览器默认样式
去苹果浏览器默认样式 input,textarea,button { -webkit-appearance: none; border-radius:0px; border:none;} 转载于:ht ...
- css知多少(4)——解读浏览器默认样式
原文:css知多少(4)--解读浏览器默认样式 上一节<css知多少(3)--样式来源与层叠规则>介绍了样式的五种来源,咱们再通过一张图回顾一下. 对于上面的三层,咱们大概都比较熟悉了.下 ...
- CSS公共清除浏览器默认样式
/*Vue隐藏*/ [v-cloak] {display: none; } /*清除样式*/body, ol, ul, dl, li, dt, dd, h1, h2, h3, h4, h5, h6, ...
- 屏蔽浏览器默认样式 user agent stylesheet
user agent stylesheet <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
- reset.css 重置浏览器的默认样式
@charset "utf-8"; /*!* @名称:base.css* @功能:1.重设浏览器默认样式* 2.设置通用原子类*/ /* 防止用户自定义背景颜色对网页的影响,添加让 ...
- 如何做默认样式重置?RESETTING 和 NORMALIZING 之间有什么区别?
这里是修真院前端小课堂,每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方面深度解析前端知识/技能,本篇分享的是: [如何做默认样式 ...
- HTML各个标签的默认样式,HTML的各个标签的默认样式
head{ display: none } body{ margin: 8px;line-height: 1.12 } button, textarea,input, object,select { ...
最新文章
- unity android模糊ios清晰,Unity NGUI UI 在iOS端的锯齿、模糊、颗粒感问题
- 从0到1搞一波dubbo
- Shiro——RememberMe
- python怎么切换中文键盘_python模拟键盘输入 切换键盘布局过程解析
- 19【推荐系统13】FNN——TensorFlow2实现
- postgresql-窗口函数使用
- 两个平面之间的关系—平行、垂直、相交
- 国内经典BI系统架构分析
- 基于51单片机的蜂鸣器及简谱的学习(编曲)
- 深入浅出 HTTP协议
- showwindow 窗口不弹出_C语言Windows程序设计 - 【第一个属于自己的窗口】!
- 炉石传说 疯狂爆破者空场炸死2个精灵龙的概率
- QQ的安全问题 (www.team509.com)
- (转)execute、executeQuery和executeUpdate之间的区别
- AndroidStudio导入/第一次新建项目gradle版本错误或者卡住解决方法
- unity 全息和xRay shader
- idea项目相关错误与常用操作教程
- 因果推断笔记——CV、机器人领域因果推断案例集锦(十)
- Spring Cloud NetFilx学习
- c和c++的一些训练题(4)(小学生比较国家面积)
热门文章
- 二元关系的复合、集合幂集的包含关系是格的证明、逻辑相等与划分
- 编码原则总结:面向对象设计的SOLID原则
- S.O.L.I.D 是面向对象设计(OOD)和面向对象编程(OOP)中的几个重要编码原则
- cesium实现动态立体墙效果
- 网页期末作业 基于HTML+CSS中国传统节日【清明节】带论文8000字
- springboot-grpc
- 缓存存在那些位置?缓存位置可分Service Worker、Memory Cache、Disk Cache、Push Cache四种
- 过年不让放炮,我用Python实现了1000响大地红的特效
- 中科院计算机博士论文致谢火了!网友:读完已是泪流满面……
- if语句——python