css怎么重置样式?网页中8种css默认样式重置代码汇总
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了css怎么重置样式?网页中8种css默认样式重置代码汇总,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含3411字,纯文字阅读大概需要5分钟。
内容图文
![css怎么重置样式?网页中8种css默认样式重置代码汇总](/upload/InfoBanner/zyjiaocheng/417/942b122c408442a7a607305b8be10fb2.jpg)
在网页设计开发时,让人最头疼的莫过于让页面兼容各大浏览器,准确些是兼容它们“默认”的CSS样式表。那么,“抹掉”这些css默认样式表成了首要问题,也就有了CSS默认样式表重置一说。为了让页面在各不同浏览器之间显示效果一致,清除和重置css默认样式就变成必需要做的事情了。
下面就给大家分享一些常用css默认样式重置代码,仅供大家参考。
1、css初始化标签在所有浏览器中的margin、padding值(内外边距)
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; }
2、css重置页面元素样式
body {background:#fff} /* 重置body 页面背景为白色 */ body,th,td,input,select,textarea,button { /* 重置页面文字属性 */ font-size:12px;line-height:1 ;font-family:"微软雅黑", "黑体","宋体";color:#666; } /** css重置样式标签的样式 **/ h1 { font-size: 18px; /* 18px / 12px = 1.5 */ } h2 { font-size: 16px; } h3 { font-size: 14px; } h4, h5, h6 { font-size: 100%; } address,caption,cite,code,dfn,em,var {font-style:normal;font-weight:normal} /* 将斜体扶正*/ code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */ small { font-size: 12px; } /* 小于 12px 的中文很难阅读,让 small 正常化 */
3、css重置列表元素样式
dl,ul,ol,menu,li {list-style:none} /* 重置类表前导符号为onne,menu在HTML5中有效 */
4、 css重置文本格式元素样式(鼠标效果)
/** 重置链接a标签 **/ a {color:#666;text-decoration:none} /* 重置链接a标签样式*/ a:active, a:hover {text-decoration:none} /* 重置链接a标签的鼠标滑动效果 */ /* 取消a标签点击后的虚线框 */ a {outline: none;} a:active {star:expression(this.onFocus=this.blur());} /** 设置页面文字等在拖动鼠标选中情况下的背景色与文字颜色 **/ /* ::selection {color: #fff;background-color: #4C6E78;} ::-moz-selection {color: #fff;background-color: #4C6E78;} */
5、css重置表单元素样式
legend { color: #000; } /* for ie6 */ fieldset,img {border:0 none} /* 重置fieldset(表单分组)、图片的边框为0*/ button, input, select, textarea { font-size: 100%; /* 使得表单元素在ie下能继承字体大小, */ vertical-align:middle; /* 重置表单控件垂直居中*/ } /* 注:optgroup 无法扶正 */ /* 重置表单button按钮效果 */ button {border:0 none;background-color:transparent;cursor:pointer} img{vertical-align:top} /* 图片在当前行内的垂直位置 */
6、css重置表格元素样式
caption {display:none;} /* 重置表格标题为隐藏 */ table {width:100%;border-collapse:collapse;border-spacing:0;table-layout:fixed;} /* 重置table属性 */
7、清除浮动
/*清除浮动*/ .clear{clear: both;} /*清除浮动--推荐使用*/ .clearfix:before,.clearfix:after{content: '';display: table;} .clearfix:after{clear: both;}
8、css重置嵌套引用
blockquote, q {quotes: none} /* 重置嵌套引用的引号类型 */ blockquote:before, blockquote:after,q:before, q:after {content:'';content:none} /* 重置嵌套引用*/
总结:以上就是本篇文章所总结的常用css重置默认样式的全部代码, 大家可以自己动手尝试,加深理解。希望能对大家的学习有所帮助,更多相关教程请访问: CSS基础视频教程, HTML视频教程,bootstrap视频教程!
以上就是css怎么重置样式?网页中8种css默认样式重置代码汇总的详细内容。
内容总结
以上是互联网集市为您收集整理的css怎么重置样式?网页中8种css默认样式重置代码汇总全部内容,希望文章能够帮你解决css怎么重置样式?网页中8种css默认样式重置代码汇总所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。