如何为任意网站添加自定义 CSS —— 新手指南
想改变网站的外观 —— 隐藏一个烦人的元素、修正一种难以阅读的字体,或拓宽一个局促的布局?这份对新手友好的指南将向你展示如何为任意网站添加自定义 CSS,如实介绍每种方法的优缺点,并以一个你今天就能照着做的实用演示结尾。
「自定义 CSS」究竟是什么意思
每一个网页都用 CSS —— 层叠样式表 —— 来设置样式,这些规则控制着颜色、字体、间距和布局。「自定义 CSS」意味着你自己的额外 CSS,叠加在网站本身的 CSS 之上,只在你的浏览器中生效。网站对其他任何人都不会改变。你并没有在攻击任何东西;你只是在调整页面呈现给你的方式,这很像阅读模式或广告拦截器。
方法 1 —— DevTools(临时的,非常适合测试)
每个现代浏览器都内置了开发者工具。按 F12(或右键点击一个元素并选择「检查」)。在 Styles 面板中,你可以实时编辑 CSS 并即刻看到结果。
问题在于:它是临时的。只要你重新加载页面,一切都会重置。DevTools 非常适合弄清楚你想要什么 CSS,但它不是保留一项更改的方式。
方法 2 —— 浏览器的内置工具
有些浏览器允许你保存一份自定义样式表,而阅读模式会把页面精简为纯文本。这些在狭窄的场景下还可以,但它们有局限性:阅读模式是全有或全无的,而一份全局的自定义样式表无法轻松地对一个网站采取与另一个不同的处理。
方法 3 —— 用户样式或扩展(永久的)
要让一项更改在重新加载后依然存在,并自动应用到选定的网站,你需要一个能为你注入 CSS 的扩展。对大多数人来说,这是实际的答案。纯 CSS 工具是存在的(在我们的 Stylish 替代品指南中有介绍),也有能同时处理 CSS 和 JavaScript 的工具。我们将演示后一类中的一个 —— JustZix,因为它免费且不需要账户。
首先 —— 找到正确的选择器
在你能给某个东西设置样式之前,你必须在 CSS 中给它命名 —— 那就是选择器。右键点击你想更改的元素并选择「检查」。在高亮显示的 HTML 中,查看该元素的 class 或 id:
<div class="newsletter-popup" id="signup-modal">
... popup content ...
</div>class 用一个点来书写 —— .newsletter-popup。id 用一个井号来书写 —— #signup-modal。这些就是你的选择器。
演示 —— 用 JustZix 添加自定义 CSS
- 从下载页面安装扩展(大约需要两分钟;无需账户)。
- 打开你想设置样式的网站。
- 点击 JustZix 图标并选择新建规则。
- 设置一个 URL 模式,让规则只在你想要的地方运行:
https://example.com/*—— 整个网站https://example.com/blog/*—— 只有博客部分*—— 每一个网站(请节制使用)
- 打开 CSS 面板并粘贴你的 CSS。
- 保存。规则会立即应用,并在你每次重新访问匹配页面时生效。
示例 1 —— 隐藏一个元素
最常见的需求:让某个东西消失。订阅弹窗、吸顶页眉、侧边栏:
/* Hide a newsletter pop-up and its dark overlay */
.newsletter-popup,
#signup-modal,
.modal-backdrop {
display: none !important;
}
/* Some pop-ups freeze scrolling — restore it */
html, body {
overflow: auto !important;
}!important 关键字告诉浏览器你的规则胜过网站自己的 CSS。在覆盖现有设计时,你会经常需要它。
示例 2 —— 为可读性重新设置样式
让一篇文章读起来舒适 —— 更大的文字、更宽的行距、更窄的栏宽:
/* Comfortable reading column */
article, .post-content {
max-width: 720px !important;
margin: 0 auto !important;
font-size: 19px !important;
line-height: 1.75 !important;
}示例 3 —— 一个快速的深色调整
为一个刺眼的纯白页面设置一个简单的深色背景:
/* Minimal dark tweak */
html, body {
background: #1a1a1a !important;
color: #e0e0e0 !important;
}
a { color: #6db3f2 !important; }完整的深色主题会更复杂 —— 有许多元素需要重新着色 —— 但这已足以缓和一个明亮页面的刺眼程度。
让 CSS 不出问题的小贴士
- 优先隐藏而非删除。
display: none是可逆的 —— 只需禁用规则即可。 - 限定你的规则范围。一个具体的 URL 模式胜过
*—— 它能避免在无关网站上出现意外。 - 先实时测试。在保存之前,用标签页内的 CSS 面板或 DevTools 来确认一个选择器。
- 避免过于宽泛的属性选择器,比如
[class*="box"]—— 它们可能匹配到远超你预期的内容。
JustZix 的标签页内 CSS 面板在这里很方便:你编辑时,页面会随你的输入而更新,当它看起来正确时,你就把它保存为一条规则。其余的工具集请见功能页面。
另请参阅
准备好让你的自定义 CSS 留存下来了吗?JustZix 是免费的,几分钟即可安装完成 —— 从下载页面获取它,今天就创建你的第一条规则。
为这篇文章评分
暂无评分 — 成为第一个。