Obsidian 学习笔记

Appearance

CSS Snippets 速查表 ​

🎨 CSS 片段让你可以自定义 Obsidian 的外观，无需深入了解主题开发。

快速开始 ​

如何使用 CSS 片段 ​

  1. 打开设置 → 外观 → CSS 代码片段
  2. 点击「打开片段文件夹」
  3. 在文件夹中创建 .css 文件
  4. 返回设置，点击刷新，启用片段

片段文件命名建议 ​

my-snippets/
├── font-beautify.css      # 字体美化
├── card-style.css         # 卡片样式
├── animation.css          # 动画效果
├── dark-theme.css         # 暗色主题定制
└── editor-enhance.css     # 编辑器增强

📝 字体美化 ​

修改编辑器字体 ​

css
/* 编辑器字体 */
.cm-s-obsidian .cm-line,
.markdown-source-view {
  font-family: 'LXGW WenKai', 'JetBrains Mono', sans-serif !important;
  font-size: 16px;
  line-height: 1.8;
}

/* 预览模式字体 */
.markdown-preview-view {
  font-family: 'LXGW WenKai', 'Noto Serif SC', serif !important;
  font-size: 16px;
  line-height: 1.8;
}

标题字体样式 ​

css
/* 标题字体渐变 */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  letter-spacing: 0.02em;
}

h1 {
  font-size: 2em;
  background: linear-gradient(120deg, #7c3aed, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

h2 {
  font-size: 1.5em;
  border-bottom: 2px solid var(--background-modifier-border);
  padding-bottom: 0.3em;
}

代码字体 ​

css
/* 代码块字体 */
code, pre {
  font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
}

/* 行内代码样式 */
code {
  background: var(--background-modifier-border);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
}

🃏 卡片样式 ​

链接卡片效果 ​

css
/* 外部链接卡片 */
a.external-link {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white !important;
  padding: 4px 12px;
  border-radius: 6px;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}

a.external-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

文件浏览器卡片化 ​

css
/* 文件列表卡片 */
.nav-file-title {
  border-radius: 8px;
  margin: 4px 8px;
  padding: 8px 12px;
  transition: all 0.2s ease;
}

.nav-file-title:hover {
  background: var(--background-modifier-hover);
  transform: translateX(4px);
}

.nav-folder-title {
  border-radius: 8px;
  margin: 4px 8px;
  padding: 8px 12px;
}

笔记卡片布局 ​

css
/* 预览模式段落卡片 */
.markdown-preview-view > p {
  background: var(--background-secondary);
  border-radius: 8px;
  padding: 16px;
  margin: 12px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

✨ 动画效果 ​

平滑过渡 ​

css
/* 全局平滑过渡 */
* {
  transition: background-color 0.2s ease,
              color 0.2s ease,
              border-color 0.2s ease;
}

按钮悬停动画 ​

css
/* 按钮悬停效果 */
button {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

链接下划线动画 ​

css
/* 链接下划线动画 */
a.internal-link {
  position: relative;
  text-decoration: none;
}

a.internal-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--text-accent);
  transition: width 0.3s ease;
}

a.internal-link:hover::after {
  width: 100%;
}

滚动动画 ​

css
/* 列表项入场动画 */
.markdown-preview-view ul li,
.markdown-preview-view ol li {
  animation: fadeInUp 0.3s ease forwards;
  opacity: 0;
}

.markdown-preview-view ul li:nth-child(1) { animation-delay: 0.1s; }
.markdown-preview-view ul li:nth-child(2) { animation-delay: 0.15s; }
.markdown-preview-view ul li:nth-child(3) { animation-delay: 0.2s; }
.markdown-preview-view ul li:nth-child(4) { animation-delay: 0.25s; }
.markdown-preview-view ul li:nth-child(5) { animation-delay: 0.3s; }

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

🌙 暗色主题定制 ​

背景渐变 ​

css
/* 暗色模式背景渐变 */
.theme-dark {
  --background-primary: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  --background-secondary: #0f0f23;
}

/* 跟随系统深色背景 */
.theme-dark .workspace {
  background: linear-gradient(180deg, #1e1e2e 0%, #181825 100%);
}

高对比度模式 ​

css
/* 高对比度 */
.theme-dark.high-contrast {
  --text-normal: #e4e4e7;
  --text-muted: #a1a1aa;
  --background-primary: #09090b;
  --background-secondary: #18181b;
}

侧边栏样式 ​

css
/* 暗色侧边栏 */
.theme-dark .workspace-ribbon,
.theme-dark .nav-files-container {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
}

📊 编辑器增强 ​

当前行高亮 ​

css
/* 高亮当前行 */
.cm-active {
  background: var(--background-modifier-border) !important;
  border-left: 3px solid var(--text-accent);
  padding-left: 8px;
}

缩进指示线 ​

css
/* 缩进指示线 */
.cm-indent::before {
  border-right: 1px solid var(--background-modifier-border);
  opacity: 0.5;
}

.cm-active .cm-indent::before {
  border-right-color: var(--text-accent);
  opacity: 1;
}

焦点模式 ​

css
/* 焦点模式：淡出非当前段落 */
.cm-s-obsidian .cm-line:not(.cm-active) {
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.cm-s-obsidian .cm-line:not(.cm-active):hover {
  opacity: 0.8;
}

代码块增强 ​

css
/* 代码块样式增强 */
pre[class*="language-"] {
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* 代码块标题 */
pre[class*="language-"]::before {
  content: attr(data-lang);
  display: block;
  font-size: 0.75em;
  color: var(--text-muted);
  margin-bottom: 8px;
  text-transform: uppercase;
}

🏷️ 标签样式 ​

css
/* 标签美化 */
a.tag {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: white !important;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.85em;
  font-weight: 500;
  border: none;
  transition: transform 0.2s, box-shadow 0.2s;
}

a.tag:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

/* 不同颜色的标签 */
a.tag[href="#important"] {
  background: linear-gradient(135deg, #ef4444, #f97316);
}

a.tag[href="#todo"] {
  background: linear-gradient(135deg, #f59e0b, #eab308);
}

a.tag[href="#done"] {
  background: linear-gradient(135deg, #10b981, #22c55e);
}

a.tag[href="#idea"] {
  background: linear-gradient(135deg, #3b82f6, #6366f1);
}

📋 Callout 自定义 ​

自定义 Callout 类型 ​

css
/* 自定义 Callout 颜色 */
.callout[data-callout="definition"] {
  --callout-color: 139, 92, 246;
  --callout-icon: lucide-book-open;
}

.callout[data-callout="theorem"] {
  --callout-color: 59, 130, 246;
  --callout-icon: lucide-lightbulb;
}

.callout[data-callout="example"] {
  --callout-color: 16, 185, 129;
  --callout-icon: lucide-code;
}

.callout[data-callout="warning"] {
  --callout-color: 245, 158, 11;
  --callout-icon: lucide-alert-triangle;
}

使用方法 ​

markdown
> [!definition] 定义
> 这是一个自定义的定义 Callout。

> [!theorem] 定理
> 这是一个自定义的定理 Callout。

🖼️ 图片样式 ​

css
/* 图片圆角和阴影 */
img {
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

/* 图片悬停放大 */
img:hover {
  transform: scale(1.02);
}

/* 图片居中 */
img[alt*="center"] {
  display: block;
  margin: 0 auto;
}

/* 图片宽度控制 */
img[alt*="small"] {
  width: 200px;
}

img[alt*="medium"] {
  width: 400px;
}

img[alt*="large"] {
  width: 600px;
}

🔧 实用工具片段 ​

打印优化 ​

css
/* 打印样式 */
@media print {
  .workspace-ribbon,
  .nav-files-container,
  .status-bar {
    display: none !important;
  }
  
  .markdown-preview-view {
    padding: 0;
  }
  
  body {
    background: white !important;
  }
}

移动端适配 ​

css
/* 移动端优化 */
.is-mobile {
  --font-text: 16px;
}

.is-mobile .markdown-preview-view {
  padding: 16px;
}

/* 隐藏移动端元素 */
.is-mobile .workspace-ribbon {
  display: none;
}

宽屏布局 ​

css
/* 宽屏优化 */
@media (min-width: 1200px) {
  .markdown-preview-view {
    max-width: 900px;
    margin: 0 auto;
  }
  
  .workspace-split.mod-root {
    justify-content: center;
  }
}

📚 变量参考 ​

常用颜色变量 ​

css
:root {
  /* 主要颜色 */
  --text-normal: #dcddde;
  --text-muted: #72767d;
  --text-accent: #7289da;
  
  /* 背景色 */
  --background-primary: #36393f;
  --background-secondary: #2f3136;
  --background-modifier-hover: rgba(79, 84, 92, 0.16);
  
  /* 边框色 */
  --background-modifier-border: #1e2024;
  
  /* 交互色 */
  --interactive-accent: #7289da;
  --interactive-accent-hover: #677bc4;
}

/* 暗色主题 */
.theme-dark {
  --text-normal: #e4e4e7;
  --text-muted: #a1a1aa;
  --background-primary: #18181b;
}

/* 亮色主题 */
.theme-light {
  --text-normal: #18181b;
  --text-muted: #71717a;
  --background-primary: #ffffff;
}

🔗 相关资源 ​

相关阅读 ​

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