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 的创建。
现在,要真正写点东西。在继续之前,您应该对 HTML 和 CSS 有基本的了解。W3Schools 有不错的教程可以让您熟悉HTML和CSS的基本结构和语法。为了这个答案,我将提供足够的信息,希望能帮助新手完成该示例。
现在我们使用时尚。没有 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). 我们将背景设置为无。)
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)
归档时间: |
|
查看次数: |
1349 次 |
最近记录: |