☰

理解 CSS 如何在浏览器中帮助用户设置样式

tag-icon • tag-icon firefox google-chrome html css
理解 CSS 如何在浏览器中帮助用户设置样式

我想在我的 Web 浏览器中对特定网站的外观进行特定更改。此网站使用 CSS，因此我认为我应该编写一个用户 CSS 覆盖（如果这是错误的，请纠正我）。

我的浏览器是 Firefox（我想我应该在其中写些东西chrome/userContent.css）和 Chrome（User\ StyleSheets/Custom.css）。

我想要做的具体改变是删除所有页面上的背景图案（暗点）https://unix.stackexchange.com/。但更一般地说，请教我如何钓鱼：如何找出要更改的参数，以及如何在用户 css 中写入此更改？

答案1

我只能说我熟悉 Firefox，因为它是我的主要浏览器。我会尽量在这里讲得通俗易懂，以满足您的“教我钓鱼”要求。为此，我将提供 2 个示例，一个是您的示例，另一个包含更多实际教训的示例。首先，我们将获得一些工具，使用户更轻松地创建 CSS。

  1. 更新到最新的 Firefox。一些最新版本已经扩展了网站检查工具，因此您会需要这些工具。
  2. 可选：安装Firebug 扩展它为您提供了更强大的站点检查器工具。（就我个人而言，我不使用 Firebug 来制作用户 CSS，但为了完整性我在这里提到了一下）
  3. 安装时尚延伸。这是一个以用户 CSS 为中心的扩展，大大简化了用户 CSS 的创建。

现在，开始实际编写内容。在继续之前，您应该对 HTML 和 CSS 有基本的了解。W3Schools 提供了不错的教程，可帮助您熟悉 HTML 和 CSS 的基本结构和语法HTML和CSS为了回答这个问题，我将提供足够的信息，希望能够帮助新手完成这个示例。

  1. 导航到该页面。（就你的情况而言，https://unix.stackexchange.com/）
  2. 右键单击您要操作的元素。（在这种情况下，几乎可以在页面上的任何位置，因为背景会影响整个页面）
  3. 从弹出菜单中选择“检查元素”。这将使用 Firefox 的集成检查工具，我不会在这里介绍 Firebug，但它具有类似的窗格和功能。
  4. 这将打开 Firefox 窗口底部和侧面的面板。在底部，您会看到 HTML。在右侧，您会看到所选页面元素（即您右键单击的内容）的 CSS 规则。在底部，单击不同的元素即可浏览。页面组织成元素树，您可以折叠或展开树中的每个节点。当您单击元素时，所选元素将在页面本身上突出显示。
  5. 一般来说，此时，您需要检查要操作的元素及其父元素（树中包含该元素的项目）。确定您实际需要操作的元素。例如，如果您正在弄乱此页面上的答案，您最终会从包含答案文本的 <p> 元素开始，但您希望包含文本周围的所有内容，例如赞成/反对投票箭头、发帖人的信息、共享/编辑/标记链接等。因此，您向上导航到包含以下内容的 <div> 标签：id 为“answer-####”，类为“answer”，因为这是包含答案的所有装饰元素的元素。单击它，您将看到网页的该部分突出显示。（在本例中，页面的背景将位于顶部附近，在 <body> 标签内。向上滚动到 HTML 顶部，然后单击 <body> 标签。）
  6. 接下来，您需要确定要操作的此元素的 CSS 属性。查看右侧的 CSS，找到要更改的属性。就我个人而言，我对 CSS 还很陌生，因此此时，我经常会谷歌“css”+ 属性名称，以了解有关该属性及其行为的更多信息。继续我的例子，我们正在查看 SE 答案，假设我们想要更改答案周围的边距。all.css 文件的边距属性设置为 0px，但显然这些元素周围有边距。一些谷歌搜索教我寻找填充属性，因为这些属性也会影响项目周围的边距。果然，在答案上设置了两个与填充相关的属性，padding-bottom 和 padding-top。（对于您的具体问题，您正在寻找背景图像，因此在 CSS 属性中查找“背景”。您将看到‘背景’ 属性靠近顶部。它适用于该页面的主体元素。谷歌搜索“css 背景属性”了解该属性的工作原理，向您展示了它可以包含颜色或图像的 URL，以及各种修饰符。在浏览了一点之后，深入了解了背景图物业工作，我们看到一些有用的信息，默认值为“none”。我们想将背景图像恢复为其默认值，所以我们需要该信息。）

  7. 现在我们使用 Stylish。不使用 Stylish 的替代方案是编辑您在答案中发布的文件。Stylish 使我们能够轻松管理许多网站的用户 CSS。Stylish 会在您的 Firefox 窗口中添加一个小图标，单击它，然后转到“编写新样式”->“对于“（此网站）.com”。为样式命名并可选地添加一些标签。然后，您将能够区分此样式是适用于 Superuser.com 或 Stackexchange.com 等的样式。此窗口为我们提供了一个模板，让我们可以仅针对此域更改 CSS。如果您需要更改特定 URL 的 CSS，您可以这样做，或者您也可以只获得一个空白样式，如果您想编写适用于所有网站的 CSS，只需从 Stylish 菜单中选择相应的条目即可。对于我的答案修改示例，您将获得一个包含以下内容的文本框：

    @namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("superuser.com") {

}

    任何放入 @-moz-document 块的内容都将适用仅有的到括号中的域。参见上面的粗体项目。要更改答案的填充，请将文本框更新为如下所示：

    @namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("superuser.com") {
    .answer {
        padding-bottom:0px;
        padding-top:0px;
    }
}

    为了让不懂 CSS 的人理解，我们首先选择班上（因此在开头有一个“。”。如果我们通过 ID 选择，我们会在那里放置一个“#”。）回答（所以是“答案”）。然后我们用花括号打开一个块，列出我们将要更改的选定项目的属性。首先我们要改变内边距底部并将其设置为0 像素.然后我们对顶部填充。每个属性和值都以分号结尾。然后我们用花括号关闭该块。（在您的 unix 示例中，您可以这样做：

    @namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("unix.stackexchange.com") {
    body {
        background:none;
    }
}

    现在，您正在处理 unix.stackexchange.com 域。我们正在选择“body”元素（选择 HTML 元素时也是 CSS 选择器，这里不需要 #s 或 .s）。我们将背景设置为无。）

  8. 我提请您注意 Stylish 样式编辑窗口底部的按钮。“预览”将实施您输入的更改，以便您可以看到它们的实际效果。“保存”将保存更改。“取消”非常明显。对于您正在执行的几乎任何用户 CSS 更改，您都需要单击“预览”以查看更改是否按您希望的方式工作。在这两个示例中，您都会看到它没有起作用。这有一个重要的原因，我现在将对此进行讨论。

  9. CSS 具有特定的优先级层次结构，用于确定如何处理用户 CSS、作者 CSS 和浏览器 CSS。通常，页面的 CSS 由页面作者编写，其中包含该页面上许多元素的规则。如果规则不是由作者定义的，而是在您的用户 CSS 中，则您的浏览器将使用该规则。如果两者都没有为该元素定义 CSS，则浏览器将在该元素上使用自己的默认 CSS 规则。因此，这里有一个权重层次结构，作者 > 用户 > 浏览器。如果这三个都定义了某个内容，则权重较高的 CSS 将胜出并使其 CSS 生效。有一种方法可以让权重较低的 CSS 覆盖权重较高的 CSS，那就是将它们指定为重要。您可以通过在每个 CSS 声明中包含“!important”来实现这一点，如下所示：

    @namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("unix.stackexchange.com") {
    body {
        background:none !important;
    }
}

    现在再次单击“预览”，您将看到您的用户 CSS 已生效。单击“保存”并享受。

如果你使用 Chrome，它的内置检查器已经非常好用了。还有一个时尚延伸。输入 CSS 修改的方式略有不同：选择“管理已安装的样式”，然后单击“编写新样式”，在代码框下方输入要应用帖子的站点或 URL 模式，并在“代码”框中仅输入特定于域的 CSS，例如

body {
  background:none !important;
}

答案2

安装萤火虫识别相关的 CSS 属性，然后编写油脂猴脚本来覆盖它。

答案3

如果你将以下内容放在网站上，那么你会这样做：

foo.bar { background-pattern:none; }

然后添加

!important

之前}。这是小细节对于非用户 CSS 使用，仍可解释其用途。

相关内容