CSS重置,将所有内容设置为默认值

时间:2013-10-23 13:14:44

标签: css

我正在开发一个浏览器扩展程序,将其UI添加到页面DOM中。在某些页面上我遇到问题,某些样式会影响我的UI。为了解决这个问题,我将UI放在一个公共根目录下,将大多数样式重置为默认值。

有时候我错过了导致UI出现视觉故障的事情。 (即页面CSS文件设置form { width: 80%; }所以我需要将form { width: auto; }添加到我的重置样式。

是否有一组样式会将每个CSS属性重置为每个元素标准声明为默认值的值?

6 个答案:

答案 0 :(得分:3)

  
      
  1. Eric Meyer’s “Reset CSS” 2.0   
    (原始的)

  2.   
  3. HTML5 Doctor CSS Reset   
    (扩展Eric Meyer的一个以改进HTML5标签重置)

  4.   
  5. Yahoo! (YUI 3) Reset CSS   
    (基于Normalize.css)

  6.   
  7. 通用选择器‘*’重置

  8.   
  9. Normalize.css 1.0 2.1.3   
    (“......用于 Twitter Bootstrap HTML5 Boilerplate YUI 3 ,Pure,TweetDeck,Soundcloud,Medium ,NASA,GOV.UK,Guardian,Rdio,Favstar,iA等等。“)

  10.   

还有其他人,但这是(现在仍然是)2012’s most popular CSS Reset scripts

答案 1 :(得分:2)

我遇到了同样的问题。其他答案列出的常规CSS规范化器无法回答问题,因为这样做是为了消除浏览器默认样式之间的差异。

在扩展程序中,我需要取消随机网站上可能存在的每种特定样式。

我遇到过这种解决方案(我不确定7年前提出这个问题时是否有可能)。

.your-container-class,
.your-container-class *,
.your-container-class *::before,
.your-container-class *::after {
    all: initial;
}

到目前为止,通过消除各个网站之间的差异似乎可以达到目标。缺点是,它甚至会重置一些默认样式(例如olulli的行为不像列表一样)。

答案 2 :(得分:0)

我建议使用快速Google搜索来查找类似的内容:http://meyerweb.com/eric/tools/css/reset/

您可以按原样实施重置,如果出现任何问题,只需根据需要添加即可。

请注意,一些预先制作的CSS重置需要大声使用它们。

答案 3 :(得分:0)

是的,绝对。

这有两种思想流派。一个是归零样式重置表,它基本上从css中删除所有边距,填充和其他此类设置。一个很好的例子是Eric Meyer's Reset CSS

另一种方法是将所有内容设置为您理解的预期,为段落和标题设置合理的边距,缩进列表等。这方面的一个很好的例子是Normalize.css

某些浏览器还支持initial值,该值将属性的值设置回原来的值。它没有被广泛支持,足以在生产中使用,IMO。

答案 4 :(得分:-1)

Html5样板有一个normalize.css,它将很多css样式设置为默认值。 http://html5boilerplate.com/

答案 5 :(得分:-1)

当您将样式应用于具有不同独特样式的不同页面时,很难说如果通过一些CSS重置从所有页面中删除所有样式,您是否会获得成功。

但也许这些可以帮助:

Normalize.css(由许多CSS框架使用)

CSS Reset by Meyer