如何阻止我的 CMS 的 CSS 影响我的内容？答案

【问题标题】：How can I stop my CMS’s CSS affecting my content?如何阻止我的 CMS 的 CSS 影响我的内容？
【发布时间】：2011-04-14 10:55:11
【问题描述】：

我使用的 CMS 配置很糟糕，CSS 配置很糟糕（例如 H1 约为 12 像素）。如何加载我的内容而不会被这种有病的 CSS 感染？

我正在考虑使用 iframe，但如果可能的话，我希望将其保留在 CMS 中。框架会起作用吗？

【问题讨论】：

您使用的是什么 CMS？你不能修改CSS吗？（或使用自定义 CSS 文件）
我可以，但它会破坏很多其他页面：S

标签： html css content-management-system

【解决方案1】：

如果您可以将内容保留在具有特定类或 id 的元素中（例如 <div class="content">，那么您可以调整重置样式表（如 Eric Meyer’s）以重置该类中的所有内容：

.content div, .content span, /* ...and so on */
{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

然后将所有样式也以该类作为前缀，例如

.content h1 {
    font-size: 3em;
}

如果您希望将所有内容重置为默认浏览器样式（而不是使用重置样式表获得的无样式设置），您可以以类似的方式调整 Firefox’s built-in html.css stylesheet（即在其所有选择器前面加上 class/id在包含所有内容的元素上）。

有点拖沓，但它可能比框架少。（我假设 CMS 会生成您的 HTML，因此使用框架来更改它比在您的 CSS 文件中解决它们的问题更难。）

您可能会考虑更改您的 CMS - 它们旨在减少您必须做的工作量，而不是增加它。

【讨论】：

我可以这样做...有没有办法将所有内容重置为默认值？
@Mark：取决于你所说的“默认”是什么意思。重置样式表尝试删除默认浏览器样式，让您明确构建所有您想要的样式。相反，如果您想恢复浏览器默认设置，您可以获取 Firefox’s internal html.css stylesheet，这是其特定的默认 HTML 样式的来源，然后使用我建议的方法将其应用于您的 HTML 内容。

【解决方案2】：

是否有可能加载您的自定义 css 类？您应该在 CMS 的 CSS 类之后加载您的 CSS 类并覆盖它们。

【讨论】：