CSS Reset--重置默认样式

最新推荐文章于 2024-06-21 15:26:11 发布

雾里看花叹朦胧

最新推荐文章于 2024-06-21 15:26:11 发布

阅读量2k

点赞数 1

分类专栏： css3 文章标签： css reset YUI 标准 Eric Meyer

本文链接：https://blog.csdn.net/hsl0530hsl/article/details/82959960

版权

css3 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

CSS Reset，意为重置默认样式。HTML中绝大部分标签元素在网页显示中都有一个默认属性值，通常为了避免重复定义元素样式，需要进行重置默认样式（CSS Reset）。

实现方式有很多，根据自己的项目需要，更多的是自己编写适合自己项目的CSS Reset，下面给一些其他大型项目的例子，作为参考。
1、 - 以下是CSS Reset 2.0标准：

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

如下是一些常用的自定义的共通样式：

/* 自定义的共通样式 */
/* custom */
a {
    color: #7e8c8d;
    text-decoration: none;
    -webkit-backface-visibility: hidden;
}

li {
    list-style: none;
}

html, body {
    width: 100%;
}

body {
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

如下是CSS Reset 2.0官网：
https://meyerweb.com/eric/tools/css/reset/

2、HTML5 Doctor CSS Reset

/**
 * html5doctor.com 
Reset Stylesheet v1.6.1 
 * Richard Clark 
 * http://cssreset.com
 */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
body {
    line-height:1;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display:block;
}
nav ul {
    list-style:none;
}
blockquote, q {
    quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}
a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}
/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}
del {
    text-decoration: line-through;
}
abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}
input, select {
    vertical-align:middle;
}

3、Yahoo! (YUI 3) Reset CSS

/** * YUI 3.5.0 - reset.css (http://developer.yahoo.com/yui/3/cssreset/) * https://cssreset.com/ * Copyright 2012 Yahoo! Inc. All rights reserved. * http://yuilibrary.com/license/ *//*	TODO will need to remove settings on HTML since we can't namespace it.	TODO with the prefix, should I group by selector or property for weight savings?*/
html {
    color: #000;
    background: #FFF;
}

/*	TODO remove settings on BODY since we can't namespace it.*//*	TODO test putting a class on HEAD.		- Fails on FF.*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

fieldset, img {
    border: 0;
}

/*	TODO think about hanlding inheritence differently, maybe letting IE6 fail a bit...*/
address, caption, cite, code, dfn, em, strong, th, var {
    font-style: normal;
    font-weight: normal;
}

 ol, ul {
    list-style: none;
}

 caption, th {
    text-align: left;
}

h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
}

q:before, q:after {
    content: '';
}

abbr, acronym {
    border: 0;
    font-variant: normal;
}

/* to preserve line-height and selector appearance */
sup {
    vertical-align: text-top;
}

sub {
    vertical-align: text-bottom;
}

input, textarea, select {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
}

/*to enable resizing for IE*/
input, textarea, select {
    *font-size: 100%;
}

/*because legend doesn't inherit in IE */
legend {
    color: #000;
}

/* YUI CSS Detection Stamp */
#yui3-css-stamp.cssreset {
    display: none;
}

4、淘宝（CSS Reset）

html {
    overflow-x: auto;
    overflow-y: scroll;
}

body, dl, dt, dd, ul, ol, li, pre, form, fieldset, input, p, blockquote, th, td {
    font-weight: 400;
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h4, h5 {
    margin: 0;
    padding: 0;
}

body {
    background-color: #FFFFFF;
    color: #666666;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    padding: 0 10px;
    text-align: left;
}

select {
    font-size: 12px;
}

table {
    border-collapse: collapse;
}

fieldset, img {
    border: 0 none;
}

fieldset {
    margin: 0;
    padding: 0;
}

fieldset p {
    margin: 0;
    padding: 0 0 0 8px;
}

legend {
    display: none;
}

address, caption, em, strong, th, i {
    font-style: normal;
    font-weight: 400;
}

table caption {
    margin-left: -1px;
}

hr {
    border-bottom: 1px solid #FFFFFF;
    border-top: 1px solid #E4E4E4;
    border-width: 1px 0;
    clear: both;
    height: 2px;
    margin: 5px 0;
    overflow: hidden;
}

ol, ul {
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
}

caption, th {
    text-align: left;
}

q:before, q:after, blockquote:before, blockquote:after {
    content: "";
}

5、百度（CSS Reset）

body {
    font-family: arial, helvetica, sans-serif;
    font-size: 13px;
    font-size-adjust: none;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1.4;
    text-align: center;
}

body, ul, ol, dl, dd, h1, h2, h3, h4, h5, h6, p, form, fieldset, legend, input, textarea, select, button, th, td {
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
}

table {
    font-size: inherit;
}

input, select {
    font-family: arial, helvetica, clean, sans-serif;
    font-size: 100%;
    font-size-adjust: none;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: normal;
}

button {
    overflow: visible;
}

th, em, strong, b, address, cite {
    font-style: normal;
    font-weight: normal;
}

li {
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
}

img, fieldset {
    border: 0 none;
}

ins {
    text-decoration: none;
}

6、Eric Meyer（CSS Reset）

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, font, 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 {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
    content: ”;
    content: none;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}

del {
    text-decoration: line-through;
}

/* tables still need ‘cellspacing=”0″‘ in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

雾里看花叹朦胧

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS Reset--重置默认样式

CSS Reset，意为重置默认样式。HTML中绝大部分标签元素在网页显示中都有一个默认属性值，通常为了避免重复定义元素样式，需要进行重置默认样式（CSS Reset）。实现方式有很多，根据自己的项目需要，更多的是自己编写适合自己项目的CSS Reset，下面给一些其他大型项目的例子，作为参考。1、 - 以下是CSS Reset 2.0标准：/* http://meyerweb.com/er...
复制链接

扫一扫

专栏目录