Obsidian 学习笔记

Appearance

CSS 片段 ​

CSS 片段是轻量的样式补丁，可以在任何主题基础上叠加使用，实现局部样式微调而无需修改主题文件。

热门片段 ​

页面布局 ​

片段效果使用场景
宽内容区编辑区占满屏幕宽度大屏用户
紧凑侧边栏缩小文件列表行距文件多的用户
隐藏标题栏移除窗口标题栏追求极简
自定义滚动条美化滚动条样式外观控

文字排版 ​

片段效果使用场景
自定义字体使用系统或网络字体中文优化、等宽字体
行间距调整增大行高提升可读性长文阅读
标题样式自定义 h1-h6 样式层次分明
列表缩进调整嵌套列表缩进大纲笔记

视觉增强 ​

片段效果使用场景
彩虹文件夹不同层级文件夹着色文件夹多时快速识别
彩虹标签标签添加不同颜色标签多时区分
图片圆角图片自动圆角处理视觉美化
Callout 美化自定义 Callout 样式大量使用 Callout

实用功能 ​

片段效果使用场景
高亮当前行编辑时光标行高亮长文档编辑
任务完成样式已完成任务灰显划线任务管理
链接样式区分内部/外部链接不同样式频繁跳转
嵌入块美化嵌入内容添加边框大量嵌入

安装方式 ​

  1. 创建 CSS 文件（如 my-snippet.css）
  2. 放入 .obsidian/snippets/ 目录
  3. 打开 设置 → 外观 → CSS 代码片段
  4. 点击刷新按钮，启用对应片段

搭配 Style Settings

部分 CSS 片段支持 Style Settings 插件的可视化配置，安装后可以在设置中直接调整参数，无需手动改 CSS。

如何编写 CSS 片段 ​

基本模板 ​

css
/* 你的片段名称 */
/* 描述：片段功能说明 */

/* 作用于编辑模式 */
.markdown-source-view .your-selector {
  /* 你的样式 */
}

/* 作用于阅读模式 */
.markdown-rendered .your-selector {
  /* 你的样式 */
}

常用选择器 ​

css
/* 编辑器 */
.cm-line { }                    /* 行 */
.cm-active { }                  /* 当前行 */
.HyperMD-header { }             /* 标题 */

/* 阅读模式 */
.markdown-rendered h1 { }       /* 一级标题 */
.markdown-rendered h2 { }       /* 二级标题 */
.markdown-rendered a { }        /* 链接 */
.markdown-rendered code { }     /* 行内代码 */

/* 侧边栏 */
.nav-file-title { }             /* 文件项 */
.nav-folder-title { }           /* 文件夹项 */

/* 全局 */
.workspace { }                  /* 工作区 */
.mod-left-split { }             /* 左侧栏 */
.mod-right-split { }            /* 右侧栏 */

相关内容 ​

最后更新：2026年4月17日编辑此页反馈问题