君语贤
时光静好,与君语;细水流年,与君同;繁华落尽,与君老...

前端设计>css>正文

CSS清除默认样式

2019-01-24 12:03 君语贤清除默认样式

CSS清除默认样式

方案一:

/* 清除内外边距 */
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,/* structural elements 结构元素 */
dl,dt,dd,ul,ol,li,/* list elements 列表元素 */
pre,/* text formatting elements 文本格式元素 */
fieldset,lengend,button,input,textarea,/* form elements 表单元素 */
th,td { /* table elements 表格元素 */
margin: 0;
padding: 0;
}
/* 设置默认字体 */
body,
button,select,textarea { /* for ie */
/*font: 12px/1 Tahoma,Helvetica,Arial,"宋体",sans-serif;*/
font: 12px/1 Tahoma,"5b8b4f53",sans-serif; /* 用 ascii 字符表示,使得在任何编码下都无问题 */
}
h1 { font-size: 18px; /* 18px / 12px = 1.5 */ }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
h4,h6 { font-size: 100%; }
address,cite,dfn,em,var { font-style: normal; } /* 将斜体扶正 */
code,kbd,pre,samp,tt { font-family: "Courier New",Courier,monospace; } /* 统一等宽字体 */
small { font-size: 12px; } /* 小于 12px 的中文很难阅读,让 small 正常化 */
/* 重置列表元素 */
ul,ol { list-style: none; }
/* 重置文本格式元素 */
a { text-decoration: none; }
a:hover { text-decoration: underline; }
abbr[title],acronym[title] { /* 注:1.ie6 不支持 abbr; 2.这里用了属性选择符,ie6 下无效果 */
border-bottom: 1px dotted;
cursor: help;
}
q:before,q:after { content: ''; }
/* 重置表单元素 */
legend { color: #000; } /* for ie6 */
fieldset,img { border: none; } /* img 搭车:让链接里的 img 无边框 */
/* 注:optgroup 无法扶正 */
button,textarea {
font-size: 100%; /* 使得表单元素在 ie 下能继承字体大小 */
}
/* 重置表格元素 */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* 重置 hr */
hr {
border: none;
height: 1px;
}

方案二:

html,body,div,span,applet,object,iframe,
h1,
a,abbr,acronym,address,big,code,
del,img,ins,q,s,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
dl,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,embed,
figure,figcaption,footer,header,hgroup,
menu,nav,output,ruby,section,summary,
time,mark,audio,video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}
html {
line-height: 1;
}
ol,ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption,td {
text-align: left;
font-weight: normal;
vertical-align: middle;
}
q,blockquote {
quotes: none;
}
q:before,q:after,blockquote:before,blockquote:after {
content: "";
content: none;
}
a img {
border: none;
}
article,figure,main,menu,summary {
display: block;
}

方案三

/** 清除内外边距 **/
body,/* text formatting elements 文本格式元素 */
form,fieldset,td /* table elements 表格元素 */ {
margin: 0;
padding: 0;
}
/** 设置默认字体 **/
body,textarea /* for ie */ {
font: 14px/1.5 tahoma,5b8b4f53,sans-serif;
}
h1,h6 { font-size: 100%; font-weight: normal;}
address,samp { font-family: courier new,courier,monospace; } /* 统一等宽字体 */
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,textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
/* 注:optgroup 无法扶正 */
/** 重置表格元素 **/
table { border-collapse: collapse; border-spacing: 0; }
/* 重置 HTML5 元素 */
article,
summary,time,video {
display: block;
margin: 0;
padding: 0;
}
mark { background: #ff0; }


本文链接:https://www.weguiding.com/css/215.html