实现 CSS 重置的最佳方法是什么

发布于 2024-12-01 03:05:55 字数 301 浏览 2 评论 0 原文

可能的重复:
最佳 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.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

温柔嚣张 2024-12-08 03:05:55

实现 CSS 重置的最佳方法是什么?

在回答你的问题之前,我认为了解 CSS 重置是什么不会对你做什么很重要。

CSS 重置的作用

CSS 重置的目的是覆盖浏览器使用的默认样式。就是这样。

您可能会在最流行的 CSS 重置之间找到一堆建议的样式,这些样式有助于标准化一些较少使用的元素。此外,还有一些必要的样式可以使某些浏览器正确呈现 HTML5 元素。

CSS 重置不会产生

魔法。说真的,它们不是万能药。您仍然需要编写更多 CSS 才能获得漂亮的网页。仅仅因为您的网站使用了 CSS 重置并不意味着您的网站比其他没有使用 CSS 重置的网站更好。许多非常有吸引力的网站不会为 CSS 重置而烦恼,因为他们知道无论如何他们都会覆盖一切作为该过程的一部分。

什么时候应该使用 CSS 重置?

当您不打算将元素的样式设置超出其默认值时,您应该使用 CSS 重置。它对于标准化块级文本元素(例如 h#pblockquote 的边距、填充和字体大小非常有帮助) >ulol

什么时候不应该使用 CSS 重置?

当您只是盲目链接其他人的 CSS 重置而不考虑它会对您的布局产生什么影响时,您不应该使用 CSS 重置。如果您不确切理解它对布局的作用,那么您一开始就不应该使用它。

我通常不建议人们重置纯 CSS,因为你经常会发现类似 * { margin: 0; 的样式。填充:0; }没有帮助。最好的情况是,您将强迫自己对其他选择器使用更高的特异性,而最坏的情况是,您将遇到各种样式继承问题。

不要使用简单的重置,而是使用重置模板,但填写您知道的元素的样式。不要总是这样:

p
{
  margin: 0;
  padding: 0;
}

您应该将其设置为默认段落样式(如果您正在使用其他人的设计,样式指南通常会指定属于重置样式表的大多数样式):

p
{
  border-bottom: 1px solid #000;
  margin: 0 0 1em;
  padding: 0 0 1em;
}

tl;博士。

不要盲目地使用别人的重置。相反,选择实际使用的有用样式,并指定有用的默认值。如果您只想覆盖默认样式表中的所有内容,那么重置 CSS 就没有意义。

我通常将我的“重置”样式表称为我的core.css,因为它包含我尝试生成的布局的所有核心样式

What's the best way to implement CSS reset?

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 and ol.

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:

p
{
  margin: 0;
  padding: 0;
}

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):

p
{
  border-bottom: 1px solid #000;
  margin: 0 0 1em;
  padding: 0 0 1em;
}

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

故事还在继续 2024-12-08 03:05:55

您可以使用 normalize.css

Normalize.css 是一个可自定义的 CSS 文件,使浏览器能够更一致地渲染所有元素并符合现代标准。我们研究了默认浏览器样式之间的差异,以便精确地仅定位需要规范化的样式。

不过,我不知道它对移动设备、平板电脑等的支持程度如何。

You could use normalize.css:

Normalize.css is a customisable CSS file that makes browsers render all elements more consistently and in line with modern standards. We researched the differences between default browser styles in order to precisely target only the styles that need normalizing.

I don't know how well it supports mobile, tablets, etc., however.

汹涌人海 2024-12-08 03:05:55

如果您使用 CSS 框架,例如 Blueprint960.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.

狼性发作 2024-12-08 03:05:55

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文