了解用于浏览器中用户样式的CSS

13

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

我的浏览器是Firefox（我认为我应该写一些东西chrome/userContent.css）和Chrome（User\ StyleSheets/Custom.css）。

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

— 吉尔斯
source

15

我只能熟悉Firefox，因为这是我的主浏览器。我会尽量保持一般性，以实现你的“教我钓鱼”的要求。为此，我将包括两个例子，你的和另一个有更多真实世界的课程。首先，我们将获得一些工具来简化用户CSS创建。

更新到最新的Firefox。一些最新版本已经扩展了网站检查工具，所以你会想要那些。
可选：安装Firebug扩展，为您提供更强大的站点检查工具。（就个人而言，我不使用Firebug来制作用户CSS，但为了完整起见我在这里提一下）
安装Stylish扩展。这是一个以用户CSS为中心的扩展，极大地简化了用户CSS的创建。

现在，实际上写一些东西。在继续之前，您应该基本熟悉HTML和CSS。W3Schools提供了不错的教程，可以熟悉HTML和CSS的基本结构和语法。为了这个答案，我将包含足够的信息，希望能帮助一个新手，以便完成这个例子。

导航到该页面。（在您的情况下，https：//unix.stackexchange.com/）
右键单击您要操作的元素。（对于这种情况，几乎在页面的任何地方，因为背景影响整个页面）
从弹出菜单中选择“检查元素”。这使用Firefox的集成检查工具，我不会在这里解决Firebug，但它有类似的窗格和功能。
这将打开Firefox窗口底部和侧面的面板。在底部，您会看到HTML。在右侧，您将看到所选页面元素的CSS规则（这将是您右键单击的内容）。在底部，单击不同的元素以浏览。页面被组织为元素树，您可以折叠或展开树中的每个节点。单击元素时，所选元素将在页面上突出显示。
通常，此时，您需要检查要查看的元素及其父元素（树中包含该元素的项）。确定您实际需要操作的元素。例如，如果你正在弄乱这个页面上的答案，你最终会从包含答案文本的<p>元素开始，但是你想要包含文本周围的所有内容，比如up / down投票箭头，海报的信息，分享/编辑/标志链接等等。所以你向上导航到几个级别的id为“answer - ####”的<div>标签和一个类“回答”，因为那是包含答案的所有装饰元素的元素。点击它，你会看到网页的那一部分突出显示。（在这种情况下，页面的背景将位于<body>标记内的顶部附近。向上滚动到HTML的顶部，然后单击<body>标记。）
接下来，您需要确定要操作的此元素的CSS属性。查看右侧的CSS，找到要更改的属性。就我个人而言，我对CSS很陌生，所以在这一点上，我会经常谷歌'css'+一个属性名称，以了解有关该属性及其行为的更多信息。继续我的例子，我们正在查看SE答案，假设我们想要改变答案的边缘。all.css文件的margin属性设置为0px，但显然这些元素周围有一个边距。一些谷歌搜索告诉我寻找填充属性，因为这些也会影响项目周围的边距。果然，有两个与填充相关的属性设置在答案，填充底部和填充顶部。（针对您的具体问题，您正在寻找背景图片，因此请在CSS属性中查找“背景”。您会在顶部附近看到“背景”属性。它适用于该页面的正文元素.Google搜索“ css background属性“了解该属性的工作原理，向您显示它可以包含图像的颜色或URL，以及各种修饰符。在导航了一下以深入了解background-image属性的工作原理之后，我们看到一些有用的信息，默认值为'none'。我们想将背景图像恢复为默认值，因此我们需要这些信息。）
现在我们使用Stylish。没有Stylish的替代方案是编辑您在答案中发布的文件。时尚使我们能够轻松管理许多网站的用户CSS。时尚为你的Firefox窗口添加一个小图标，点击它然后去“写一个新的风格” - >“为”（这个网站）.com“。给你的风格一个名称和一些标签。你就可以了将此样式区分为适用于Superuser.com或Stackexchange.com等的样式。此窗口为我们提供了一个模板，允许我们仅针对此域更改CSS。如果需要更改特定URL的CSS，则如果您想编写适用于所有网站的CSS，只需从时尚菜单中选择适当的条目，就可以做到这一点，或者你也可以得到一个空白样式。对于我的答案修改示例，你'
```
@namespace url(http://www.w3.org/1999/xhtml);

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

}
```
放入@ -moz文档块的任何内容都只适用于括号中的域。请参阅上面的粗体项目。要更改答案的填充，请将文本框更新为：
```
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("superuser.com") {
    .answer {
        padding-bottom:0px;
        padding-top:0px;
    }
}
```
为了让那些不懂CSS的人解决这个问题，我们首先选择了这个课程（一开始就是“。”。如果我们按ID选择，我们会在那里放一个“＃”。）回答（所以'回答'）。然后我们打开一个带有花括号的块来列出我们将要改变的所选项的属性。首先，我们改变padding-bottom并将其设置为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）。我们将背景设置为无。）
我提请您注意时尚风格编辑窗口底部的按钮。“预览”将制定您输入的更改，以便您可以查看它们的实际效果。“保存”将保存更改。“取消”非常明显。几乎任何用户改变你正在做的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;
}

— 敏锐
source

2

安装firebug以识别相关的CSS属性，然后编写一个greasemonkey脚本来覆盖它。

— 本杰明班尼尔
source

2

使用greasemonkey来获取css属性就像使用锤子来驱动螺丝一样。它有效，但它不优雅，你更有可能在途中打破一些东西。

— 迦勒

2

如果你正在使用网站，你会做你会做的事情

foo.bar { background-pattern:none; }

然后加

!important

之前}。以下是非用户使用css 的一些细节，仍然可以解释它供您使用。

— tobylane
source