CSS重置,常见元素的默认样式
应用CSS重置后,我想回到“正常”的行为的HTML元素,如:p,h1..h6,strong,ul和li。
现在,当我说正常,我的意思是,例如,p元素添加间距或回车,如使用时的结果,或h1标签的字体和粗体的大小,以及间距。
我意识到这是完全取决于我如何设置风格,但我想回到一些更常见的元素的正常行为(至less作为一个起点,我可以稍后调整)。
YUI提供了一个基本的CSS文件,可以在所有“A级”浏览器中提供一致的样式。 他们还提供了一个CSS重置文件,所以你可以使用它,但是你说你已经重置了CSS。 欲了解更多详情,请访问YUI网站 。 这是我一直在使用,它运作得非常好。
应用CSS样式的规则之一是“最后胜利”。 这意味着如果您的CSS重置样式将元素设置为margin:0; padding:0
margin:0; padding:0
你可以通过在之后声明相同元素的期望值来覆盖这些规则。
你可以在同一个文件中做这个(YUI提供了一个单行的重置,我想我有时会把它作为CSS文件中的第一行),或者在复位CSS <link/>
标记之后出现的单独文件中。
我认为通过正常的行为你的意思是“我最喜欢的浏览器的默认设置”。 您为这些元素构buildCSS规则是重置练习的一部分。
现在,您可能需要查看Blueprint CSS或其他网格框架。 这些网格框架几乎总是首先将样式重置为空,然后为通用元素构build排版,等等。这可以为您节省一些时间和精力。
你的意思是:
* { 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/
而不是使用总的CSS重置,请考虑使用像Normalize ,“保留有用的默认值”。
要找出您的浏览器认为是默认设置,请打开一个带有列表的纯 HTML文件,并使用像Firebug这样的CSSdebugging器查看列表,然后查看“ Computed
选项卡下的内容。
查看YUI(雅虎的开源用户界面惯例)。
他们有一个基本的样式表,撤消自己的复位CSS。 他们不主动推荐你在生产中使用它 – 因为它的反作用,但肯定可能是值得检查的文件,以获得相关的片段,你想要“撤消”。
我build议你看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
我个人是BlueprintCSS的忠实粉丝。 它重置浏览器的风格,并提供了一些非常方便的默认值(这是90%的时间)。 它还提供了一个布局网格,但是如果你不需要,你不必使用它。
如果你想看到Firefox的CSS默认值,在发行版中找一个名为'html.css'的文件(在同一个目录下应该有一些其他有用的css文件)。 你可以select你想要的规则,并在重置后应用它们。
此外,CSS2标准有一个样本样式表为html 4 。
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; }
如果您search文件,其余的元素应该在那里。
“应用CSS重置后,我想回到”正常“的HTML元素行为…”
如果您已经应用了重置,那么您必须添加规则,以确定您认为是正常行为 。 由于正常的行为因浏览器而异,所以这个问题不是一个简单的问题。 我喜欢@ da5id的答案 – 使用许多可用的重置之一,并调整它以适应您的需求。
一旦给一个元素的CSS属性赋了一个值,就没有办法取回它的“正常”值,假设“正常”的意思是“浏览器默认”,就像这里所说的那样。 所以有一个h1
元素的唯一方法是浏览器的默认font-size
是在CSS代码中根本不设置属性 。
因此,为了免除CSS重置的一些属性和元素,您需要使用更有限的CSS重置。 例如,你不能使用* { font-size: 100% }
而是通过一个select器列表来replace*
,比如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; }
(还有额外的上下文规则,例如嵌套h1
内的section
预计会影响设置。)
我没有默认重置所有的元素,因为默认的样式在某种程度上依赖于浏览器,所以它们因浏览器而异。 而不是使用像ul, ol { list-style: none; }
ul, ol { list-style: none; }
,我添加一个像r
或者reset
这样的CSS类,然后指定如果这个类是一个具有r
类的ul
类,请重置它,否则请保持原样。
顺便说一下,您需要将class="reset"
(例如)添加到所有这些元素中,这些元素是额外的工作和代码,但是您最终还是可以将所有的默认样式都保留下来!