🎨 用 CSS 文件自定义 Obsidian

什么是 CSS 文件？为什么在 Obsidian 里需要它？

CSS

——是一种用来设置界面样式的语言。在 Obsidian 里，它能带来极大的灵活性：你可以改变任何界面元素的外观——从链接到标注块、表格，甚至编辑器。

和插件不同，CSS 不会拖慢系统，也不需要更新，还能让你掌控环境中的每一个像素。它就像一个你亲手为自己创建的“隐藏设置”。

📁 在哪里启用 CSS 文件？

进入 设置 → 外观 → CSS 代码片段
点击 “打开代码片段文件夹”
把一个 .css 文件放进去（例如 elton-style.css）
1. 要创建这样的文件，可以在该文件夹里新建一个普通的记事本文件
2. 然后选择“另存为”> 在文件名末尾加上 .css
重启 Obsidian，或者直接在列表中用开关启用它

🔥 我的自定义 CSS 文件示例

.callout[data-callout="health"] {
    --callout-color: 255, 199, 234;
    --callout-icon: activity;
}

▶️ What this rule does:

health is the name of the callout block. In Obsidian you write: >[!health], and this block gets a special style.
--callout-color — sets a soft pink background (the colour is taken from here)
--callout-icon: activity; — adds a “pulse” icon (taken from Lucide Icons)

.cm-s-obsidian .cm-link:hover {
  color: #ffd700;
  text-shadow: 0 0 5px #ffd700;
  transition: all 0.3s ease;
}

▶️ What this rule does:

Changes the colour of links on hover to gold #ffd700
Adds a soft glow (text-shadow) for emphasis
transition — makes the effect smooth

.callout[data-callout="motivation"] {
  --callout-color: 255, 183, 0;
  --callout-icon: "zap";
  border-radius: 10px;
  font-style: italic;
}

▶️ 这条规则的作用：

motivation ——标注块的名称。你可以写 >[!motivation]，它就会被高亮显示。
颜色——明亮的黄色，像荧光笔一样
⚡ zap 图标为它增添活力
border-radius: 10px ——让边角变圆润
font-style: italic ——让样式显得“有灵感”，就像手写体

✨ 用 CSS 文件还能做什么？

再来看几个很酷的点子：

为不同的标签设置不同的样式——例如把 #🧠 高亮成蓝色，把 #🔥 高亮成红色
给所有表格加上边框、阴影或斑马纹
更改语法高亮样式——例如给 Dataview 代码设置你自己的颜色
给某些标注块添加背景图片
更改编辑器中特定元素的样式——例如隐藏行号或高亮当前行

应用场景:

应用或面板的背景。 用 CSS 可以设置任意背景图片或颜色。例如,要给主窗口设置背景图片,可以使用 .horizontal-main-container 选择器,代码片段如下:
```
.horizontal-main-container {
  /* A background image across the whole working screen */
  background: url(https://images.unsplash.com/photo-1454496522488-7a8e488e8606?…);
  background-size: cover;
}
```
这里的 background-size: cover 会把图片拉伸铺满整个区域。另外建议把笔记背景设为透明,比如通过 --background-primary: transparent;,这样后面的背景就能透出来。这样的设置可以让你把背景打造得很漂亮。
字体大小和字体类型。 字体可以通过主题的 CSS 变量设置,也可以直接用 font-size。想整体调整基础字号,用变量(例如 --font-size-base)会很方便,也可以针对不同设备使用媒体查询。下面是 Obsidian 论坛里的一个例子,为电脑和手机设置不同的字号:
```
@media (min-width: 768px) {
  .cm-line { font-size: 14px; }   /* Desktop */
}
@media (max-width: 480px) {
  .cm-line { font-size: 16px; }   /* Mobile */
}
@media (min-width: 480px) and (max-width: 768px) {
  .cm-line { font-size: 17px; }   /* Tablet */
}
```
这段代码会根据屏幕宽度的不同,改变编辑器中的文字大小。
链接和高亮颜色。 你可以通过覆盖变量或选择器来改变内部链接的颜色。例如,要修改“死链”(未解析的链接)的颜色,可以用这样的 CSS 片段:
```
.markdown-rendered .internal-link.is-unresolved {
  /* The colour of an unresolved link */
  --link-unresolved-color: #6272a4;
  font-size: var(--font-ui-small);
}
```
这是论坛讨论 [27] 中的一个例子,为未解析的链接设置了另一种色调。至于一般的颜色设置(链接的背景色和装饰色),可以使用主题的 CSS 变量,例如 --link-unresolved-color、--link-unresolved-decoration-color。同样,在搜索时也可以配置命中文本的颜色:下面这个例子把背景设为透明,并把命中片段的颜色改成主题的强调色:
```
.workspace-leaf-content[data-type="search"] .search-result-file-matched-text {
  background: none;
  color: var(--text-accent);
}
```
这条规则会去掉黄色高亮,让找到的词使用主文本颜色。

列表样式。 你可以为不同嵌套层级的列表设置不同的标记。例如,GitHub 上的一个片段改变了无序列表圆点的形状:第一级是实心圆,第二级是空心圆,第三级是方块,第四级是三角形,依此类推。简化后的例子如下:

/* Level 1: filled circle */
.markdown-reading-view .markdown-preview-section ul li > .list-bullet:after {
  height: 7px; width: 7px; border-radius: 50%;
}
/* Level 3: square */
.markdown-reading-view .markdown-preview-section ul li ul li ul li > .list-bullet:after {
  height: 7px; width: 7px; border-radius: 0%;
}
/* Level 4: triangle */
/* (a triangle is created using border styles) */

完整代码和详细说明见片段 25,它为 5 个列表层级提供了不同的标记形状。

面板和图标。 用 CSS 可以隐藏或修改界面元素。例如,想隐藏侧边栏(功能区)上不需要的插件图标,可以通过 aria-label 定位这些元素,并设置 display: none:
```
.clickable-icon[aria-label='Templater'],
.clickable-icon[aria-label='Toggle custom sorting'] {
  display: none;
}
```
这段代码会把 Templater 和 Custom Sort 插件的按钮从功能区菜单中移除。用同样的方法,你还可以隐藏其他图标,或者调整按钮的顺序。你也可以设置功能区自动隐藏:有个用 body:has(.is-sidedock-collapsed) 的方案,会在左侧边栏折叠时隐藏功能区(见讨论 [32])。
关系图谱。 图谱区域是一个 <canvas>,你可以用底层的渐变或图片来美化它。例如,设计师建议把图谱背景做成星空效果:为 canvas 设置 CSS,叠加一层渐变和一张带星星的 SVG。从讨论中还可以得知,你可以在 .workspace-leaf-content[data-type="graph"] .view-content 或它的伪元素 ::after 上叠加背景图片。比如下面这个例子,做出了模糊背景(图片铺满整个图谱背景)并将其调暗:
```
.workspace-leaf-content[data-type="graph"] .view-content {
  z-index: 0; position: absolute;
  background-image: url(https://picsum.photos/200);
  background-size: cover;
  filter: blur(4px) brightness(50%) saturate(50%);
  left:0; top:0; right:0; bottom:0;
}
```
这会在图谱上叠加一个带模糊和变暗滤镜的背景。还有一个使用 ::after 的改进版本,可以让图谱保持在前景:
```
.workspace-leaf-content[data-type="graph"] .view-content::after {
  z-index: -1; content:""; position:absolute;
  background-image: url(https://picsum.photos/200);
  filter: blur(4px) brightness(50%) saturate(50%);
  left:0; top:0; right:0; bottom:0;
}
```
这样的样式会明显改变关系图谱的外观,让背景更有氛围(代码片段取自讨论 [40])。
图片和视频的交互。 为了让阅读更舒适,你可以给嵌入的媒体添加“智能”缩放。在一个图片片段中,鼠标悬停时光标会变化,点击后图片会展开为全屏:
```
.view-content img { max-width:100%; cursor:zoom-in; }
.view-content img:active { cursor:zoom-out; }
/* and rules for .image-embed:active to fix and centre it */
```
对于视频,你可以指定别名,并相应地缩小播放器。这是来自一个 Telegram 群聊的做法:当你给视频对象添加别名 vid-20 时,下面这条规则
```
[alt~="vid-20"] video { width: 20%; }
```
就会生效,视频会立刻缩小到屏幕宽度的 20%。也就是说,在笔记里写上 ![[video.mp4|vid-20]],就能得到缩小后的视频。这个小技巧能在处理大体积媒体文件时改善使用体验(例子取自用户的聊天记录)。
适配移动设备。 用媒体查询可以针对手机屏幕调整界面。除了上面的字号例子,人们还经常调整面板的宽度或其他尺寸。例如,你可以改变侧边文件树中文件夹和条目的大小:
```
@media (max-width: 480px) {
  .tree-item-children, .nav-folder-title {
    font-size: 17px;
  }
}
```
(这个片段来自同一个讨论,他们在其中为手机配置了字体和导航面板元素。)这样的适配能让应用在小屏幕上用起来更方便。

继续阅读?

🧠 Callout manager——无需 CSS 和复杂操作,轻松创建标注

⬅️ 返回首页

Elton Labs

🎨 用 CSS 文件自定义 Obsidian

什么是 CSS 文件？为什么在 Obsidian 里需要它？

📁 在哪里启用 CSS 文件？

🔥 我的自定义 CSS 文件示例

✨ 用 CSS 文件还能做什么？

应用场景: