CSS重置 - 它到底是做什么的？

Question

我在jquery图像滑块演示中找到了这个reset.css文件,但它从未包含在主index.html文件中.什么是假设,更重要的是,你把它放在哪里？你把它之前任何引用的样式表()？

这是reset.css中的代码

/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0;
    padding:0;
}
html,body {
    margin:0;
    padding:0;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
fieldset,img { 
    border:0;
}
input{
    border:1px solid #b0b0b0;
    padding:3px 5px 4px;
    color:#979797;
    width:190px;
}
address,caption,cite,code,dfn,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;
}

Answer 1

在开始时,没有关于样式如何工作的标准化,每个浏览器都实现了它认为正确的.您在IE中看到如此多关于样式错误的问题的原因之一是因为IE在样式方面与其他浏览器最不相似.虽然IE已经改进,但是其他浏览器也有所改进,他们仍然将自己的边框,填充和边距,缩放,字体应用于元素,以给予页面自己独特的感觉.一个例子是,chrome为文本框提供了自己的黄色边框."重置"实际上将所有这些样式"重置"为零/无,这样您就不会在页面中看到任何未应用的样式.

如果这些样式没有"重置",您将看到不需要的样式/效果和破坏的东西.它总是建议"重置"浏览器的样式.

看看这篇文章你应该重置你的CSS吗？

Answer 2

reset.css用于规范化浏览器的默认样式.

例:

Answer 3

看看这里的答案,"重置"和"正常化"之间似乎有点混淆.他们的目标略有不同.

CSS重置是您在其他样式之前加载的一组样式,用于删除浏览器内置样式.最受欢迎的是Eric Mayer的重置CSS.

另一种选择是协调浏览器内置样式.目前最流行的工具是Normalize.css.

Answer 4

浏览器具有不同的"内置"样式,它们适用于不同的html元素.这些样式定义可能因不同浏览器而异.规范化css文件旨在通过重置这些特定于浏览器的styes来"规范化"跨浏览器的页面呈现.

您必须在自己的样式定义之前包含它.否则这些样式可能会覆盖(由于css的级联性质)你的声明,这没有多大意义;)

最流行的款式重置可能是Eric Meyer的,附带一些背景信息.

Answer 5

\n

CSS 重置（或 \xe2\x80\x9cReset CSS\xe2\x80\x9d）是一组简短且经常压缩（缩小）的 CSS 规则，它将所有 HTML 元素的样式重置为一致的基线。

\n\n

如果您不知道\xe2\x80\x99，每个浏览器都有自己的默认\xe2\x80\x98user\n agent\xe2\x80\x99 样式表，它用于使无样式的网站显得更清晰\n。例如，大多数浏览器默认将链接设置为蓝色，访问的链接设置为紫色，为表格提供一定量的边框和填充，将可变字体大小应用于 H1、H2、H3 等，并设置一定量的填充几乎所有事情。有没有想过为什么“提交\n”按钮在每个浏览器中看起来都不同？

\n\n

显然，这给 CSS 作者带来了一定的麻烦，\n 他们无法\xe2\x80\x99 找出如何让他们的网站在每个浏览器中\n 看起来都一样。

\n\n

使用 CSS Reset，CSS 作者可以强制每个浏览器将其所有样式重置为 null，从而尽可能避免跨浏览器差异

\n

\n\n

请参阅http://www.cssreset.com/what-is-a-css-reset/

\n