CSS重置 – 它到底做了什么?
我发现这个reset.css文件在一个jQuery图像滑块演示,但它从来没有被包括在主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; }
一开始没有关于样式如何工作的标准化,每个浏览器都实现了它认为是正确的。 您在IE浏览器中看到如此多的关于样式错误的问题的原因之一,是因为IE浏览器与其他浏览器在样式上的差异最大。 虽然IE已经改进,所以有其他浏览器,他们仍然应用自己的边界,填充和边距,缩放,字体元素给自己独特的感觉页面。 一个例子是,chrome给它自己的黄色边框文本框。 “重置”实际上“重置”所有这些样式为零/无,以便您看不到任何样式您没有应用在您的页面。
如果这些样式不是“重置”,您将看到不需要的样式/效果和事情中断。 它始终build议“重置”浏览器的样式。
看看这篇文章如果你重置你的CSS?
reset.css用于标准化浏览器的默认样式。
例:
看这里的答案似乎有一点混合之间的“重置”和“正常化”。 他们的目标稍有不同。
CSS重置是您在其他样式之前加载的一组样式,用于删除浏览器内置样式。 Eric Mayer的重置CSS是第一个也是最受欢迎的之一。
另一种select是协调浏览器内置的样式。 目前最stream行的工具是Normalize.css 。
浏览器具有不同的“内置”风格,它们适用于不同的html元素。 这些styledefinitions可能会在不同的浏览器中有所不同。 标准化的CSS文件是通过重置这些浏览器特定的styes来“规范化”跨浏览器的页面呈现。
您必须在自己的样式定义之前包含它。 否则,这些样式可能会覆盖(由于CSS的级联性质)你的声明,这是没有道理的;)
最stream行的风格重置可能是埃里克迈耶的一个小的背景资料。
每个浏览器都有自己的默认user agent
样式表,它用来使无格式的网站看起来更清晰。 例如,大多数浏览器默认为链接蓝色,访问链接为紫色,给表格一定数量的边框和填充,对H1
, H2
, H3
等应用可变的font-size
,以及几乎所有的填充。
有没有想过为什么提交button在每个浏览器看起来不同?
显然,这给CSS作者带来了一些令人头疼的问题,他们无法在每个浏览器中使他们的网站看起来一模一样。
使用CSS重置,CSS作者可以强制每个浏览器将其所有样式重置为null,从而尽可能避免跨浏览器的差异。
从通过重置设置的一致性基础,您可以继续重新设置文档的样式,因为浏览器的HTML默认呈现的差异无法触及您!
希望它有帮助,你可能想看看这篇文章, 我应该使用哪个CSS重置? 。
CSS重置(或“重置CSS”)是一个简短的,经常被压缩(缩小)的CSS规则集,它将所有HTML元素的样式重置为一致的基线。
如果你不知道,每个浏览器都有自己的默认“用户代理”样式表,它使用无风格的网站显得更清晰。 例如,大多数浏览器默认为链接蓝色,访问链接为紫色,给表格一定数量的边框和填充,对H1,H2,H3等应用可变的字体大小,以及几乎所有的填充。 有没有想过为什么提交button在每个浏览器看起来不同?
显然,这给CSS作者带来了一些令人头疼的问题,他们无法在每个浏览器中使他们的网站看起来一模一样。
使用CSS重置,CSS作者可以强制每个浏览器将其所有样式重置为空,从而尽可能避免跨浏览器差异
浏览器可以根据其本地渲染引擎渲染HTML和CSS。 如果你知道我的意思,不同的浏览器可能会使用不同的渲染方法(IE;),所以reset.css的意图是将所有的属性设置为常用的预定义值,这样开发人员/devise人员就可以忘记一些渲染引擎,从头开始。