Javascript / CSS:规范化页面上的所有元素样式?

时间:2013-12-24 21:31:45

标签: javascript css normalize

我需要的是一种规范化应用于页面元素的所有样式的方法。例如,所有字体应该完全相同,锚点应该被删除,只有文本剩余(或href),字体颜色应该是黑色,字体类型应该完全相同。

不应该改变的是元素的相对位置,以保留原始结构,但不保留带有字体,颜色,样式等的装饰样式。

原因是为了减少噪音。基本上我正在尝试做的是生成网络的“灰度”版本,其中许多不同的网站没有“颜色”或装饰特征或元素中文本内容的显示方式的变化,除了元素的定位。 / p>

我在网上发现了一个规范化或重置的css文件,并通过注入它来执行它,但它似乎没有按照我的预期执行(我实际上不确定css文件实际规范化了什么)。 / p>

var link = document.createElement("link");
link.href = "http://necolas.github.io/normalize.css/2.1.3/normalize.css";
link.type = "text/css";
link.rel = "stylesheet";
document.getElementsByTagName("head")[0].appendChild(link);

2 个答案:

答案 0 :(得分:2)

CSS规范化程序,如normalize.css,可以跨浏览器“规范化”样式,使浏览器的默认样式或多或少相同。例如,如果Firefox中的默认样式<a>为绿色,但Chrome为红色,则标准化会将其设置为一种颜色,例如蓝色。这样,两个浏览器都以蓝色开头。

CSS重置,例如Meyer's CSS reset,另一方面从元素中剥离大部分(如果不是全部)样式。例如,<a>通常为蓝色且有下划线。重置将剥离下划线并将链接着色为黑色。 <h1> - <h6>通常有一个大小的层次结构。重置将使它们大小相同,让您提供它们的大小。


我建议你使用normalize.css,然后添加你自己的样式,以进一步删除需要删除的样式。

您也可以通过其他方式执行此操作并使用重置然后设置需要样式的样式,但这比以前的方法更多CSS。这就是为什么首先进行标准化。


@charlietfl中所述the comment,您可能会在其中执行类似“读者模式”的脚本。标准化和重置样式表将不再对您有所帮助。使用非常特定的样式滚动自己的样式表将是一种更好的方法。

答案 1 :(得分:1)

尝试使用Eric Meyer的重置样式表(阅读更多内容:http://meyerweb.com/eric/tools/css/reset/) 它超越了normalize.css,通过实际重置所有字体大小,字体系列,填充,边距......