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

Question

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

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

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

Answer 1

YUI提供了一个基本CSS文件,可以在所有"A级"浏览器中提供一致的样式.它们还提供了CSS重置文件,因此你也可以使用它,但是你说你已经重置了CSS.有关详细信息,请访问YUI网站.这是我一直在使用的,它的效果非常好.

Answer 2

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

您可以在同一个文件中执行此操作(YUI提供单行重置,我认为因此有时将其包含在我的CSS文件中的第一行)或重置CSS后出现的单独文件中 <link/>标记.

我认为通过正常行为,你的意思是"我最喜欢的浏览器的默认值".您为这些元素构建CSS规则是重置练习的一部分.

现在您可能想要查看Blueprint CSS或其他网格框架.这些网格框架几乎总是首先将样式重置为空,然后为常见元素构建排版等.这可以节省您一些时间和精力.

Answer 3

你的意思是:

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

Answer 4

而不是使用完全CSS重置,考虑使用像Normalize这样的"保留有用的默认值".

要找出您的浏览器默认的内容,请打开包含列表的纯 HTML文件,并使用像Firebug这样的CSS调试器查看列表,然后查看Computed选项卡.

Answer 5

查看YUI(雅虎的开源用户界面约定).

他们有一个基本样式表,撤消他们自己的重置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;
}

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

雅虎重置css | 雅虎基地(撤消)重置css