可能的重复:
最佳 CSS 重置
实施 CSS 重置的最佳方法是什么?
我的问题更多是关于实现跨浏览器、跨平台兼容的布局。
例如,布局在 ie、firefox 等桌面浏览器上、甚至在 iPad 上以及在某种程度上在 iPhone 上看起来应该相似。
请告诉我是否应该应用 CSS 重置来实现此目的。
Possible Duplicate:
Best css reset
What is the best way to implement CSS reset?
My question is more in context of implementing layouts which would be cross-browser, cross-platform compliant.
E.g. layout should look similar on desktop browsers like ie, firefox and even on iPad and to some extent on iPhone as well.
Please let me know if I should apply CSS reset to acheive this.
发布评论
评论(4)
在回答你的问题之前,我认为了解 CSS 重置是什么和不会对你做什么很重要。
CSS 重置的作用
CSS 重置的目的是覆盖浏览器使用的默认样式。就是这样。
您可能会在最流行的 CSS 重置之间找到一堆建议的样式,这些样式有助于标准化一些较少使用的元素。此外,还有一些必要的样式可以使某些浏览器正确呈现 HTML5 元素。
CSS 重置不会产生
魔法。说真的,它们不是万能药。您仍然需要编写更多 CSS 才能获得漂亮的网页。仅仅因为您的网站使用了 CSS 重置并不意味着您的网站比其他没有使用 CSS 重置的网站更好。许多非常有吸引力的网站不会为 CSS 重置而烦恼,因为他们知道无论如何他们都会覆盖一切作为该过程的一部分。
什么时候应该使用 CSS 重置?
当您不打算将元素的样式设置超出其默认值时,您应该使用 CSS 重置。它对于标准化块级文本元素(例如
h#
、p
、blockquote
、的边距、填充和字体大小非常有帮助) >ul
和ol
。什么时候不应该使用 CSS 重置?
当您只是盲目链接其他人的 CSS 重置而不考虑它会对您的布局产生什么影响时,您不应该使用 CSS 重置。如果您不确切理解它对布局的作用,那么您一开始就不应该使用它。
我通常不建议人们重置纯 CSS,因为你经常会发现类似
* { margin: 0; 的样式。填充:0; }
这没有帮助。最好的情况是,您将强迫自己对其他选择器使用更高的特异性,而最坏的情况是,您将遇到各种样式继承问题。不要使用简单的重置,而是使用重置模板,但填写您知道的元素的样式。不要总是这样:
您应该将其设置为默认段落样式(如果您正在使用其他人的设计,样式指南通常会指定属于重置样式表的大多数样式):
tl;博士。
不要盲目地使用别人的重置。相反,选择实际使用的有用样式,并指定有用的默认值。如果您只想覆盖默认样式表中的所有内容,那么重置 CSS 就没有意义。
我通常将我的“重置”样式表称为我的
core.css
,因为它包含我尝试生成的布局的所有核心样式Before answering your question, I think it's important to understand what a CSS reset is and is not going to do for you.
What CSS Resets Do
The purpose of a CSS reset is to override the default styles that browsers use. That's about it.
There are a bunch of suggested styles that you'll probably find between most popular CSS resets that help to normalize some of the lesser-used elements. Additionally, there are a few necessary styles to make some browsers render HTML5 elements correctly.
What CSS Resets Don't Do
Magic. Seriously, they're not a panacea. You'll still have to write a bunch more CSS to get a nice looking webpage. Just because your site uses a CSS reset doesn't mean that your site is better than another that doesn't. Many very attractive sites don't bother with a CSS reset, because they know they're going to override everything as part of the process anyway.
When should you use a CSS reset?
You should use a CSS reset when you're not planning on styling elements much beyond their defaults. It's really helpful for normalizing margins, padding and font-size on block-level text elements such as
h#
,p
,blockquote
,ul
andol
.When shouldn't you use a CSS reset?
You should not use a CSS reset when you're just blindly linking in someone elses CSS reset without any thought for what it's going to do to your layout. If you don't understand exactly what it's doing with your layout, you shouldn't be using it to begin with.
I usually don't recommend plain CSS resets to people because you often find style like
* { margin: 0; padding: 0; }
which are not helpful. At best you're going to force yourself to use higher specificity for other selectors down the road, and at worst, you're going to run into all sorts of style inheritance issues.Instead of using a plain-jane reset, use a reset template, but fill in the styles for the elements you know. Instead of always having:
you should set it to what the default paragraph style will be (if you're working with a design from someone else, style guides typically specify most of the styles that belong in a reset stylesheet):
tl; dr.
Don't just blindly use a reset from someone else. Instead, pick out the useful styles that will actually be used, and specify useful defaults. There's no point to a CSS reset if you're only going to override everything in your default stylesheet anyway.
I typically call my "reset" stylesheets my
core.css
because it contains all of my core styles to the layout that i'm trying to produce您可以使用 normalize.css:
不过,我不知道它对移动设备、平板电脑等的支持程度如何。
You could use normalize.css:
I don't know how well it supports mobile, tablets, etc., however.
如果您使用 CSS 框架,例如 Blueprint 和 960.gs 并下载他们的CSS包,你会发现我们在设计网站之前应该使用的
reset.css
和其他默认CSS。只需使用这些即可。If you go to CSS frameworks, such as Blueprint and 960.gs and download their CSS packages, you will find the
reset.css
and other default css that we should use before designing a site. Just use those.Meyerweb CSS Reset Stylesheet
这是最常推荐的,这就是我使用的,我认为这是最好的。
Meyerweb CSS Reset Stylesheet
This is what's recommended by most usually, it's what I use and I think it's the best out there.