reset.css是一种用于重置浏览器默认样式并保持一致性的CSS样式表。reset.css通常用于清理网页上的一些默认样式,使得网页更加简洁和美观。
reset.css的主要目的是:
- 重置浏览器默认字体和字号
- 重置浏览器默认margin和padding
- 重置浏览器默认line-height
- 重置浏览器默认列表样式
- 重置浏览器默认 hr 样式
- 重置浏览器默认元素大小
- 重置浏览器默认边框
- 重置浏览器默认背景
- 重置浏览器默认文本效果
- 重置浏览器默认链接样式
- 重置浏览器默认表单样式
下面是一个简单的reset.css封装示例:
/* Reset default styles */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,Ï
b, u, i, center,
dl, dt, dd, ol, ul, li,
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-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
/* Reset HTML5 elements */
body {
margin: 0;
font-family: Arial, sans-serif;
}
/* Reset default text styles */
p, h1, h2, h3, h4, h5, h6, em, strong, kbd, code, var {
font-style: normal;
font-weight: normal;
text-decoration: none;
}
/* Reset default list styles */
ul, ol {
list-style: none;
}
/* Reset default table styles */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* Reset default hr styles */
hr {
height: 1px;
border: none;
margin: 0;
padding: 0;
}
/* Reset default link styles */
a {
text-decoration: none;
}
/* Reset default form styles */
input[type="text"], input[type="password"], input[type="email"],
input[type="tel"], input[type="number"], textarea,
select {
border: 1px solid #ccc;
padding: 0.5em;
margin: 0.5em 0;
font-size: 1em;
color: #333;
}
/* Reset default button styles */
button {
border: 1px solid #ccc;
padding: 0.5em;
margin: 0.5em 0;
font-size: 1em;
color: #333;
}
/* Reset default image styles */
img {
border: 0;
vertical-align: middle;
}
/* Reset default background styles */
/*div[data-background] {
background-image: url(/path/to/image.jpg);
background-size: cover;
background-position: center;
}*/
/* Reset default text effect styles */
mark {
font-weight: bold;
}
/* Reset default list item styles */
li {
margin-left: 1em;
}