Obsidian 样式：调整基础课 -CSS 入门科普

Obsidian 样式：调整基础课 -CSS 入门科普

本文将详细介绍如何在Obsidian中调整样式的基础知识，包括如何确定要修改的目标、调整样式的方法、常用属性以及进阶技巧等。

在各个地方都会经常会看到一些很基础的样式调整提问：

• 怎么修改标题/高亮/行内代码的背景色？
• 总是显示图片的宽度？
• 怎么隐藏特定元素？

今天就科普一下 Obsidian 内调整样式的基础知识。别紧张，并不复杂，跟着做一遍你就能掌握。

如果你已经有了 CSS 片段，只想知道怎么让它生效，可以查看[[Obsidian的CSS代码片段]]

如何确定要修改的目标 🎯

概念

• 你可以把 Obsidian 理解成为一个浏览器
• 浏览器的网页内容中，所有东西都被称为这个网页的“元素”
  定位了你的目标元素，才能对其进行响应的修改。

先定位元素

先按Ctrl+Shfit+I打开开发者工具，在左上角找到一个箭头图标：

比如说我们想要修改标题的背景色，先点击箭头图标（也可以用快捷键Ctrl+Shfit+C）然后点击一个标题：

然后就会自动打开「元素」选项卡：

这个界面很复杂，但是我们要关注的地方（目前还）不多。

小试牛刀

点击样式左上角的element.style：

会出现编辑光标：

然后输入background-color:

这里我们为了测试效果，颜色先输入red：

可以看到，刚才选中的对象已经变成红色背景了：

不过这时候要是点一下别的地方，修改会消失，这很正常。

因为这里只是临时修改，不会保留，现在我们只是体验一下小小的成功喜悦。

下一步，我们要让修改真正对标题生效。

确定对象的类

回到元素选项，可以看到：

这样一行被高亮了：

锁定目标 🎯

这里面的class就是我们要关注的重点，它表示这个标题的类是：

cm-header cm-header-2。

类别其实可以当成是“班级”（毕竟英文 class 确实也有班级的含义）。

你如果喊“高二三班的所有同学到这里来，穿上红色衣服！”，他们就知道喊的是自己，并且穿上红色衣服。

class提供的就是这么一个让你能指定对象的作用。

剧透一下，这里这个标题就有两个类：

• cm-header代表编辑状态的标题，所有的标题都属于这个类
• cm-header-2代表编辑状态的二级标题

这里我们想要修改所有标题的背景色，所以选择喊：

cm-header的所有同学，过来穿红色衣服！

header就是标题没啥问题，如果你好奇cm是什么意思的话——它是CodeMirror的缩写。详情见搜索引擎。

另外，如果你注意到了，上面写的是编辑状态的标题，没错，编辑状态和阅读状态下的标题是不同的。对于阅读模式，标题是h1、h2等等，你可以自行验证。

调整样式 🎨

知道了要操作的目标之后，下一步是真正修改它的样式。

你需要这样一段代码：

.cm-header {
    background-color: red;
}

把这段 CSS 代码应用到你的 OB——如果不知道怎么应用，参考：如何在OB内应用CSS修改。

应用后重复第一步里的流程：随便点击一个标题，查看它的样式：

可以在下方找到刚才写的这个background-color: red代码。

点击左边的勾勾可以临时禁用效果；

点击右边的