如何使用CSS重置

在这篇文章中,我们看看这个CSS属性,最好是使用这个属性,并给出一些使用CSS的示例。

如何使用CSS重置

代码中的重置提供了一组简短的规则,可将所有元素的样式重置为一致的基准。这是需要的,因为样式在浏览器中不一致。你不希望像前样式那样的东西,比如表格元素,在你打开的时候就会惹你。

实践

当我开始使用CSS时,它告诉我,一开始你应该总是写:

*{

margin:0;

padding:0;

}

这是基本的CSS重置。

一些在不同浏览器中风格不同的最常见元素是超链接(

浏览器之间结账按钮的不同样式示例:

如何使用CSS重置

不同元素(标题,链接,跨度,代码,blockquote)的不同样式的示例:

如何使用CSS重置

每个浏览器都有默认的HTML格式,您可以在检查模式下的“用户代理样式表”下看到它。如果为特定元素添加了样式,则其默认浏览器格式将被覆盖。

如何使用CSS重置

重置脚本

我最喜欢的CSS重置脚本是http://html5doctor.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 colors to suit your needs */

ins {

background-color:#ff9;

color:#000;

text-decoration:none;

}

/* change colors 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 color 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;

}

一些定义的样式非常标准(用于

一些开发人员不使用CSS重置,而是使用CSS正常化(有些开发人员称它为 “新重置”)。虽然重置用于清除所有内容并使您的项目成为“tabula rasa”,但规范化会保持良好的实践,同时消除跨浏览器风格的不一致性。我将在未来写关于CSS正常化的内容。

结论

不需要重置您的CSS,但它需要了解浏览器的预设置和CSS重置的存在。


分享到:


相關文章: