上一期讲了主题设置，装了主题之后 Obsidian 好看多了。但很多人换完主题之后，还是觉得哪里不太对劲——字体太小、行距太窄、笔记区域太窄……这些细节主题管不到，这期就讲怎么用 CSS Snippet 来微调。

本期内容四件事：

CSS 是什么，不懂代码也能理解
有了主题为什么还要 CSS
让 AI 帮你写 CSS，复制粘贴就能用
写好的 CSS 放哪里，怎么让它生效

CSS 是什么

CSS 全称 Cascading Style Sheets，中文叫"层叠样式表"。听起来很技术，但核心逻辑很简单：CSS 是一套控制"东西长什么样"的规则。

比如：

这段文字用什么字体？多大？什么颜色？
这个区域有多宽？边距是多少？
鼠标悬停的时候背景色变成什么？

网页上所有你看到的视觉效果，基本都是 CSS 控制的。Obsidian 的界面也是基于网页技术（Electron）做的，所以同样可以用 CSS 来控制外观。

你装的主题，本质上就是别人写好的一大包 CSS。而 CSS Snippet（代码片段） 是你自己加进去的小块 CSS，专门用来微调主题改不到的地方。

主题是整体风格，Snippet 是局部微调。两者并不冲突，可以叠加使用。

有了主题，为什么还要 CSS？

主题解决的是"整体风格"的问题，但很多个人习惯的细节，主题管不到，也不应该管——因为每个人的偏好不同。

几个常见的"主题解决不了"的场景：

笔记区域太窄：很多主题默认会限制笔记的最大宽度，在宽屏上看，两边留着大片空白，内容挤在中间。有人喜欢这种版式，有人觉得浪费屏幕。

行距太紧/太松：默认的行距可能对你来说不够舒服，但主题的设置里没有这个选项。

标题颜色不对：主题整体很喜欢，但一级标题的颜色稍微亮了一点，想调暗一些。

某个界面元素碍眼：比如某个你从来不用的按钮，想让它消失。

这些需求都很具体、很个人化。CSS Snippet 就是专门解决这类"最后一公里"问题的工具。

不需要自己写，让 AI 帮你写

这是这期最重要的一点：你完全不需要学 CSS，让 AI 帮你写就行。

操作方式非常简单，直接跟 AI 说你想改什么：

“帮我写一个 Obsidian CSS Snippet，把笔记内容区域的最大宽度改成 900px”

“帮我写一个 Obsidian CSS Snippet，把正文行距改成 1.8”

“帮我写一个 Obsidian CSS Snippet，把一级标题的颜色改成深蓝色”

AI 会给你一段完整的 CSS 代码，直接复制就能用。

几个提示让 AI 给出更好的结果：

说清楚是 Obsidian 的 CSS Snippet，不然 AI 可能给你普通的网页 CSS，变量命名方式不对
让 AI 加注释，告诉 AI “请在每个属性旁边加注释说明它的作用”，方便以后看懂自己的文件
一次改一件事，一个 Snippet 文件只干一件事，出了问题好排查，也方便单独关闭

示例对话：

我：帮我写一个 Obsidian CSS Snippet，把笔记内容区域的最大宽度改成 900px，请加注释

AI：
.markdown-source-view, .markdown-reading-view {
  /* 限制笔记内容区域的最大宽度 */
  --file-line-width: 900px;
}

就这么简单。不需要懂 CSS 语法，不需要查文档，描述需求，拿代码，粘贴，完事。

写好的 CSS 放哪里？怎么生效

CSS Snippet 有固定的存放位置，按步骤操作就好。

第一步：找到 snippets 文件夹

路径：你的 Vault 根目录 → .obsidian 文件夹 → snippets 文件夹

.obsidian 是隐藏文件夹，Mac 上按 Command + Shift + . 可以显示隐藏文件。snippets 文件夹如果不存在，手动新建一个就行。

当然，你也可以直接从设置里面进去

第二步：创建 .css 文件

在 snippets 文件夹里新建一个文本文件，把后缀名改成 .css，文件名随便取，建议取个能看出功能的名字，比如 note-width.css、line-height.css。

把 AI 给你的代码粘贴进去，保存。

或者你直接先打开这个文件夹，让AI直接在里面写CSS文件——还记得我的AI教程么？

第三步：在 Obsidian 里启用

路径：设置 → 外观 → CSS 代码片段

滚到页面最下面，你会看到一个"CSS 代码片段"区域，点右边的刷新图标，刚才创建的文件就会出现在列表里。

点击文件名旁边的开关，开关变色，Snippet 就生效了。

界面会立刻变化，不需要重启。如果效果不对，关掉开关，回去检查代码。

我自己是怎么用 CSS 的

说几个我实际在用的 Snippet，供参考。

调宽笔记区域

这是我最常用的，把笔记内容区域的最大宽度设置得更宽一点，在大屏上不会有那么多留白。

调整行距

默认行距对我来说略紧，用 CSS 把行距调大了一点点，读起来更舒服。

隐藏不用的元素

Obsidian 界面里有一些我从来不用的按钮和图标，用 CSS 把它们设置成 display: none 直接隐藏掉，界面更干净。

Callout 样式微调

Callout 块的配色我不太喜欢某个主题的默认色，用 CSS 改成了更柔和的颜色。

这四个 Snippet 分别存在四个 .css 文件里，每个都可以单独开关。用了一段时间觉得哪个不合适，直接关掉就行，互不干扰。

总结

今天学到了什么：

CSS 是控制界面外观的规则，Obsidian 用 CSS Snippet 做局部微调
主题是整体风格，Snippet 是细节调整，两者叠加使用
不需要自己写 CSS，告诉 AI 你想改什么，复制它给的代码就行
Snippet 存放路径：Vault 根目录 → .obsidian/snippets/ → .css 文件
在设置 → 外观 → CSS 代码片段里启用，点开关即生效

核心要点：

描述需求让 AI 写 CSS，比自己学 CSS 语法高效得多
一个 Snippet 只干一件事，方便管理和调试
开关随时可以关掉，安全可逆，不用担心搞坏界面

下期预告

下期讲换字体——Obsidian 默认字体对中文来说不算好看，换一套自己喜欢的字体，整个阅读体验会提升一大截。字体替换同样是 CSS 来做，结合这期学到的知识，操作起来很简单。

如果觉得有帮助，记得关注这个系列！

教程视频版本已发 B 站和抖音。