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

时间:2020-03-06 14:24:42  来源:igfitidea点击:

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

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

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

解决方案

意思是:

* {
    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/

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

应用CSS样式的规则之一是"最终获胜"。这意味着如果CSS重置样式将元素设置为margin:0;; padding:0,然后可以通过为相同元素声明所需的值来覆盖这些规则。

我们可以在同一文件中执行此操作(我认为YUI提供了单线重置,所以有时我将其作为CSS文件的第一行包含在内),也可以在重置CSS<link />标签后出现的单独文件中。

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

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

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

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

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

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

查看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

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

WebKit h1的正常行为:

h1 {
    display: block;
    font-size: 2em;
    margin: .67__qem 0 .67em 0;
    font-weight: bold
}

壁虎h1的正常行为:

h1 {
    display: block;
    font-size: 2em;
    font-weight: bold;
    margin: .67em 0;
}

如果我们搜索文件,其余元素应该在那里。