JavaScript/CSS : normalize all element stylings on a page?

Question

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

不应该改变的是元素的相对位置，以便保留原始结构，而不是字体、颜色、样式等装饰样式。

这样做的原因是为了减少噪声量。本质上，我想做的是制作一个“灰度”版本的网络，其中许多不同的网站没有“颜色”或装饰性特征，也没有元素中文本内容显示方式的变化，除了元素的定位。

我在网上找到了一个规范化或重置 css 文件并通过注入(inject)它来执行它，但它似乎没有按照我上面的预期进行(我实际上不确定 css 文件实际上规范化了什么)。

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);

Answer 1

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

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

---

我建议你使用 normalize.css，然后在它后面添加你自己的样式，进一步剥离需要剥离的样式。

你也可以用另一种方法来做，使用重置，然后设置需要样式的样式，但这比以前的方法需要更多的 CSS。这就是首先进行规范化的原因。

---

作为@charlietfl在 the comment 中说明，您可以在那里执行类似“阅读器模式”脚本的操作。规范化和重置样式表将不再对您有帮助。使用非常具体的样式滚动您自己的样式表将是更好的方法。