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

Gil*_*il' 13 firefox html google-chrome css

我想对 Web 浏览器中特定站点的外观进行特定更改。该站点使用 CSS,所以我认为我应该做的是编写用户 CSS 覆盖(如果有误,请纠正我)。

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

我要进行的具体更改是删除https://unix.stackexchange.com/ 的所有页面上的背景图案(暗点)。但更一般地说,请教我如何钓鱼:如何找出要更改的参数,以及如何在用户 css 中编写此更改?

Kee*_*een 15

我只能说熟悉 Firefox,因为那是我的主要浏览器。我会尽量保持这里的一般性,以满足您“教我钓鱼”的要求。为此,我将包含 2 个示例,一个是您的示例,另一个是其中包含更多现实世界课程的示例。首先,我们将获得一些工具来简化用户 CSS 的创建。

  1. 更新到最新的 Firefox。一些最近的版本已经扩展了网站检查器工具,所以你会想要这些。
  2. 可选:安装Firebug 扩展,它为您提供更强大的站点检查器工具。(就我个人而言,我不使用 Firebug 来制作用户 CSS,但为了完整起见,我在此提及)
  3. 安装时尚扩展。这是一个以用户 CSS 为中心的扩展,极大地简化了用户 CSS 的创建。

现在,要真正写点东西。在继续之前,您应该对 HTML 和 CSS 有基本的了解。W3Schools 有不错的教程可以让您熟悉HTMLCSS的基本结构和语法。为了这个答案,我将提供足够的信息,希望能帮助新手完成该示例。

  1. 导航到页面。(在你的情况下,https://unix.stackexchange.com/
  2. 右键单击您要操作的元素。(对于这种情况,页面上几乎任何地方,因为背景会影响整个页面)
  3. 从弹出菜单中选择“检查元素”。这使用了 Firefox 的集成检查工具,我不会在此处解决 Firebug,但它具有类似的窗格和功能。
  4. 这将打开 Firefox 窗口底部和侧面的面板。在底部,您会看到 HTML。在右侧,您会看到所选页面元素的 CSS 规则(这将是您右键单击的内容)。在底部,单击不同元素以进行导航。该页面被组织成一个元素树,您可以折叠或展开树中的每个节点。当您单击元素时,所选元素将在页面本身上突出显示。
  5. 通常,此时,您需要检查要操作的元素及其父元素(树中包含该元素的项目)。确定您实际必须操作的元素。例如,如果您弄乱了此页面上的答案,您最终会从包含答案文本的 <p> 元素开始,但您希望包含文本周围的所有内容,例如 up /down 投票箭头、海报的信息、共享/编辑/标志链接等。因此您向上导航几个级别到具有“answer-####”id 和类的<div> 标签“回答”,因为这是包含答案的所有装饰元素的元素。单击它,您将看到网页的该部分突出显示。(在这种情况下,页面的背景将靠近顶部,在 <body> 标记内。向上滚动到 HTML 的顶部,然后单击 <body> 标记。)
  6. 接下来,您需要确定要操作的此元素的 CSS 属性。查看右侧的 CSS,找到要更改的属性。就我个人而言,我对 CSS 还很陌生,所以在这一点上,我经常会在 google 上搜索 'css' + 一个属性名称,以了解有关该属性及其行为方式的更多信息。继续我查看 SE 答案的示例,假设我们要更改答案周围的边距。all.css 文件的边距属性设置为 0px,但显然这些元素周围有边距。一些谷歌搜索教会我寻找填充属性,因为这些属性也会影响项目周围的边距。果然,在答案上设置了两个与 padding 相关的属性,padding-bottom 和 padding-top. (对于您的特定问题,您正在寻找背景图片,因此请在 CSS 属性中查找“背景”。您将在顶部附近看到一个“背景”属性。它适用于该页面的正文元素。谷歌搜索“ css background 属性”以了解该属性的工作原理,向您展示它可以包含图像的颜色或 URL,以及各种修饰符。在导航一下以深入了解background-image属性的工作原理后,我们看到了一些有用的信息,默认值 'none'。我们想将背景图像恢复为其默认值,因此我们需要该信息。)
  7. 现在我们使用时尚。没有 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") {
    
    }
    
    Run Code Online (Sandbox Code Playgroud)

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

    @namespace url(http://www.w3.org/1999/xhtml);
    
    @-moz-document domain("superuser.com") {
        .answer {
            padding-bottom:0px;
            padding-top:0px;
        }
    }
    
    Run Code Online (Sandbox Code Playgroud)

    为了打破这种下来的人谁不知道CSS,我们首先选择(ERGO一个“”去的开端。如果我们被ID选择,我们希望把‘#’在那里。)答案(所以'回答')。然后我们打开一个带花括号的块来列出我们将要更改的所选项目的属性。首先,我们改变padding-bottom并将其设置为0 pixel。然后我们对padding-top做同样的事情。每个属性和值都以分号结尾。然后我们用花括号关闭块。(在您的 unix 示例中,您将执行以下操作:

    @namespace url(http://www.w3.org/1999/xhtml);
    
    @-moz-document domain("unix.stackexchange.com") {
        body {
            background:none;
        }
    }
    
    Run Code Online (Sandbox Code Playgroud)

    在这里,您正在处理 unix.stackexchange.com 域。We're selecting the "body" element (when selecting HTML element is also a CSS selector, no need for #s or .s here). 我们将背景设置为无。)

  8. 我提请您注意 Stylish 样式编辑窗口底部的按钮。“预览”将执行您输入的更改,因此您可以看到它们的实际效果。“保存”将保存更改。“取消”很明显。对于您正在执行的几乎所有用户 CSS 更改,您需要单击“预览”以查看更改是否按您希望的方式工作。在这两个示例中,您会看到它不起作用。这有一个重要的原因,我现在解决这个问题。
  9. 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;
        }
    }
    
    Run Code Online (Sandbox Code Playgroud)

    现在再次单击预览,您将看到您的用户 CSS 有效。单击保存并享受。

如果你使用 Chrome,它的内置检查器已经非常好。还有一个时尚的扩展名。您输入的 CSS 修改略有不同:选择“管理已安装的样式”,然后单击“编写新样式”,在代码框下方输入要应用帖子的站点或 URL 模式,然后在“代码”框,例如

body {
  background:none !important;
}
Run Code Online (Sandbox Code Playgroud)