html元素的默认样式,CSS重置，常见元素的默认样式

CSS重置，常见元素的默认样式

应用CSS重置后，我想恢复html元素的“正常”行为，例如：p，h1..h6，strong，ul和li。

现在，当我说正常时，我的意思是 p元素会增加间距或使用时返回的回车符(如结果)，或者h1标签的字体大小和粗体以及间距。

我意识到如何设置样式完全取决于我，但是我想恢复一些较常见元素的正常行为(至少作为我以后可以进行调整的起点)。

public static asked 2020-01-29T04:51:04Z

11个解决方案

36 votes

YUI提供了一个基本的CSS文件，该文件将在所有“ A级”浏览器中提供一致的样式。 他们还提供了CSS重置文件，因此您也可以使用它，但是您说您已经重置了CSS。 有关更多详细信息，请访问YUI网站。 这就是我一直在使用的，并且效果很好。

Steven Oxley answered 2020-01-29T04:51:13Z

10 votes

应用CSS样式的规则之一是“最终获胜”。 这意味着，如果您的CSS重置样式将元素设置为，则可以在以后声明相同元素的所需值来覆盖这些规则。

您可以在同一文件中执行此操作(我认为YUI提供了单线重置，所以有时我将其作为CSS文件的第一行包含在内)，也可以在重置CSS 标记之后显示的单独文件中进行。

我认为按照正常行为，您的意思是“我最喜欢的浏览器的默认设置”。 您为这些元素建立CSS规则是重置练习的一部分。

现在，您可能需要研究Blueprint CSS或其他网格框架。 这些网格框架几乎总是首先将样式重置为空，然后为常用元素建立版式，等等。这可以节省您的时间和精力。

Carl Camera answered 2020-01-29T04:51:47Z

8 votes

您的意思是：

* {

padding: 0;

margin: 0;

}

h1, h2, h3, h4, h5, h6, p, blockquote, form, label, ul, ol, dl, fieldset, address {

margin-bottom: 1em;

}

？

其实，很抱歉，我误读了您的问题，您是在寻求类似Eric Meyer的全部重置@ @ [http://meyerweb.com/eric/tools/css/reset/]

da5id answered 2020-01-29T04:52:16Z

6 votes

与其使用CSS重置，不如考虑使用Normalize之类的东西，它“保留有用的默认值”。

要了解浏览器的默认设置，请打开一个带有列表的纯HTML文件，并使用Firebug之类的CSS调试器查看列表，然后在Computed标签下查看。

Jake Rayson answered 2020-01-29T04:52:41Z

5 votes

查看YUI(Yahoo的开源用户界面约定)。

他们有一个基本样式表，可以撤消自己的重置CSS。他们不建议您在生产中使用它-因为它适得其反，但绝对值得检查该文件以获取要“撤销”的内容的摘要。

我建议您观看40分钟的谈话以加快速度。

这是他们的base.css文件的一小段：

ol li {

/*giving OL's LIs generated numbers*/

list-style: decimal outside;

}

ul li {

/*giving UL's LIs generated disc markers*/

list-style: disc outside;

}

dl dd {

/*giving UL's LIs generated numbers*/

margin-left:1em;

}

th,td {

/*borders and padding to make the table readable*/

border:1px solid #000;

padding:.5em;

}

th {

/*distinguishing table headers from data cells*/

font-weight:bold;

text-align:center;

}

下载下面的完整样式表或阅读完整的文档。

Yahoo重设CSS | Yahoo Base(撤消)重置CSS

Simon_Weaver answered 2020-01-29T04:53:23Z

3 votes

我个人是BlueprintCSS的忠实拥护者。 它会在浏览器中重置样式，并提供一些非常方便的默认值(90％的时间就是您想要的)。 它还提供了布局网格，但是如果不需要它，则不必使用它。

zenazn answered 2020-01-29T04:53:43Z

2 votes

如果要查看firefox的css默认值，请在发行版中查找一个名为“ html.css”的文件(同一目录中应该有一些其他有用的css文件)。 您可以选择所需的规则，并在重置后应用它们。

另外，CSS2标准还有一个针对html 4的示例样式表。

Daniel James answered 2020-01-29T04:54:08Z

2 votes

WebKit h1的正常行为：

h1 {

display: block;

font-size: 2em;

margin: .67__qem 0 .67em 0;

font-weight: bold

}

Gecko h1的正常行为：

h1 {

display: block;

font-size: 2em;

font-weight: bold;

margin: .67em 0;

}

如果您搜索文件，其余元素应该在那里。

robertc answered 2020-01-29T04:54:36Z

1 votes

“在应用CSS重置后，我想恢复html元素的'正常'行为...”

如果您应用了重置，则必须为您认为正常的行为添加规则。 由于不同浏览器的正常行为各不相同，因此这个问题是毫无根据的。 我喜欢@ da5id的答案-使用许多可用的重置之一并进行调整以满足您的需求。

Traingamer answered 2020-01-29T04:55:01Z

0 votes

一旦为元素的CSS属性分配了一个值，就无法取回它的“正常”值，假设“正常”意味着“浏览器默认值”，这在这里似乎意味着。 因此，使h1元素具有浏览器默认值section的唯一方法是完全不在CSS代码中设置该属性。

因此，要使某些属性和元素免于CSS重置，您需要使用更为有限的CSS重置。 例如，您不得使用h1，而应将section替换为选择器列表，例如input, textarea { font-size: 100% }(该列表可能会很长，但是例如font-size的浏览器默认值与100％的区别仅在于少数几个元素)。

当然，可以将属性设置为您期望的浏览器默认值。 无法保证这将对当前和将来的所有浏览器产生理想的效果。 但是对于某些属性和元素，这可能是相对安全的，因为默认值往往相似。

特别是，您可以使用HTML5 CR中的“渲染”部分。 它描述了“预期的呈现”，而不是一个要求，尽管浏览器供应商可以根据需要决定声明符合要求，并且通常这可能会使实现在这方面保持相似。 例如，对于h1，期望的设置是(这里收集到一个规则中-在HTML5 CR中它们分散在周围)：

h1 {

unicode-bidi: isolate;

display: block;

margin-top: 0.67em;

margin-bottom: 0.67em;

font-size: 2.00em;

font-weight: bold;

}

(还有其他上下文规则。例如，在section内嵌套h1可能会影响设置。)

Jukka K. Korpela answered 2020-01-29T04:55:42Z

-1 votes

我不会默认重置所有元素，因为默认样式取决于浏览器，因此它们随浏览器的不同而不同。 我没有使用class="reset"之类的东西，而是添加了一个r或reset之类的CSS类，然后我指定如果它是具有r类的ul，请重置它，否则请保持不变。

顺便说一下，您需要向所有这些元素中添加class="reset"(例如)，这是额外的工作和代码，但是作为回报，您最终将保留所有默认样式！

Mahdi answered 2020-01-29T04:56:07Z