温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

css中重置样式的方法有哪些

发布时间:2020-09-26 11:14:51 来源:亿速云 阅读:500 作者:小新 栏目:web开发

小编给大家分享一下css中重置样式的方法有哪些,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!

在网页设计开发时,让人最头疼的莫过于让页面兼容各大浏览器,准确些是兼容它们“默认”的CSS样式表。那么,“抹掉”这些css默认样式表成了首要问题,也就有了CSS默认样式表重置一说。为了让页面在各不同浏览器之间显示效果一致,清除和重置css默认样式就变成必需要做的事情了。

下面就给大家分享一些常用css默认样式重置代码,仅供大家参考。

1、css初始化标签在所有浏览器中的margin、padding值(内外边距)

body, h2, h3, h4, h5, h6, h7, 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重置样式标签的样式 **/
h2 { font-size: 18px; /* 18px / 12px = 1.5 */ }
h3 { font-size: 16px; }
h4 { font-size: 14px; }
h5, h6, h7 { 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中重置样式的方法有哪些有了一定的了解,想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css
AI