答案是通过启用开发者模式并创建自定义CSS主题可打造专属HTML学习笔记环境。具体步骤包括开启开发者模式、启用CSS主题、在指定路径创建style.css文件，并通过设置字体、高亮代码块、优化标题层级和使用Callout提示框等样式提升笔记可读性与结构清晰度，结合Obsidian原生功能实现高效HTML学习记录。
想在 Windows 上用 Obsidian 打造专属的 HTML 学习笔记主题？通过自定义 CSS 可以轻松实现。Obsidian 支持通过社区主题和开发者模式加载自定义样式，让你的笔记界面更贴合学习场景，比如突出代码块、优化标题层级、增强可读性等。
启用开发者模式与CSS自定义
Obsidian 默认不开启 CSS 自定义功能，需要先手动开启：
- 打开 Obsidian 设置 → 核心插件 → 开启“开发者模式”
- 回到设置主界面 → 外观 → 启用“CSS 主题”
- 在资源库根目录下创建 .obsidian/themes/ 文件夹
- 新建一个文件夹如 HTML-Notes，并在其中创建 style.css
保存后，在外观设置中即可切换到你创建的主题。
针对 HTML 学习优化的 CSS 示例
以下是一些实用的 CSS 规则，专为记录 HTML 学习笔记设计，提升结构清晰度和阅读体验：
立即学习“前端免费学习笔记（深入）”；
/* 设置整体字体与行高 */
body {
font-family: "Segoe UI", Arial, sans-serif;
line-height: 1.7;
}
/ 突出 HTML 标签样式 /
code {
background-color: #f0f4f8;
color: #d63384;
padding: 2px 5px;
border-radius: 4px;
font-size: 0.95em;
}
/ 高亮属性名与值 /
.markdown-preview-view span[style*="color:"] {
font-weight: 500;
}
/ 自定义标题层级颜色 /
h1 { color: #2c5aa0; border-bottom: 2px solid #e0e6ed; padding-bottom: 8px; }
h2 { color: #3a7ca5; margin-top: 1.5em; }
h3 { color: #488fc2; }
/ 优化代码块显示 /
.highlighted,
pre {
border-left: 4px solid #4a9eff;
background-color: #f8f9fa !important;
}
/ 添加“示例”提示框 /
.callout[data-callout="example"] {
background-color: #eef5ff;
border-color: #4a9eff;
}
你可以将上面的样式复制进 style.css 中，保存后刷新主题即可生效。
结合 Callout 实现语义化笔记结构
Obsidian 支持使用 > [!example] 创建提示块，在学习 HTML 时可以这样组织内容：
- [!example] 示例：展示 HTML 代码片段
- [!tip] 提示：说明标签用途或注意事项
- [!warning] 警告：标注易错点，如闭合标签遗漏
配合 CSS 进一步美化这些区块，让笔记更具教学感和条理性。
维护与调试你的主题
修改 CSS 后如果没反应，尝试以下操作：
- 重启 Obsidian 应用
- 在设置中切换其他主题再切回来
- 检查控制台（Ctrl+Shift+I）是否有报错
- 确保文件路径正确：.obsidian/themes/HTML-Notes/style.css
建议使用代码编辑器编写 CSS，便于格式化和高亮查看。
基本上就这些。通过简单的 CSS 定制，你就能拥有一个专注 HTML 学习的清爽笔记环境。不需要复杂工具，也不依赖插件，纯样式改动就能大幅提升写作和复习体验。不复杂但容易忽略。
