reset.css

2023-11-14  本文已影响0人  我没叫阿

reset.css是一种用于重置浏览器默认样式并保持一致性的CSS样式表。reset.css通常用于清理网页上的一些默认样式,使得网页更加简洁和美观。

reset.css的主要目的是:

  1. 重置浏览器默认字体和字号
  2. 重置浏览器默认margin和padding
  3. 重置浏览器默认line-height
  4. 重置浏览器默认列表样式
  5. 重置浏览器默认 hr 样式
  6. 重置浏览器默认元素大小
  7. 重置浏览器默认边框
  8. 重置浏览器默认背景
  9. 重置浏览器默认文本效果
  10. 重置浏览器默认链接样式
  11. 重置浏览器默认表单样式
    下面是一个简单的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;
}
上一篇下一篇

猜你喜欢

热点阅读