Obsidian知识不完全手册_更改CSS样式

本篇举例说明如何使用Obsidian的CSS代码片段。

CSS的启用

CSS启用
点击图中位置可打开CSS文件位置，将样式文件放进去，记得启用文件。
我用的Visual Studio Code写的CSS文件，因为它免费且好用。另外，我是稍微自学了一些前端知识，代码中可能存在不合理不简洁不正确的地方，也实属合理，继续进步~

Class查找

评论区的小伙伴提示的查找样式的方法十分快捷，先写个笔记，按Shift+Ctrl+I，再按Shift+Ctrl+C，也可以点击Elements左边的箭头图标，此时鼠标就可以点击笔记来查看相应的样式信息。

笔记标题

可以看到标题的class为.inline-title
于是我对标题CSS做了如下设置

.inline-title {        /*笔记主标题*/
    color: #d6ecf0;    /*文本颜色*/
    text-align: center;    /*文本居中*/
    padding-bottom: 15px;    /*文本到底部距离*/
    margin-bottom: 30px;    /*标题栏到正文距离*/
    border-bottom-style: solid;    /*标题底线样式*/
    border-width: 1px;    /*标题底线粗细*/
    border-color: #4b4b4b;    /*标题底线颜色*/
}

文本颜色改为月白，居中显示，底部与正文距离拉大，加了个淡淡的底线。

设置CSS前 设置CSS后

举几个例子

1.正文

上面的笔记标题例子中，可以看到设置CSS后的截图正文部分行距和字间距也加大了，更方便阅读，因为我觉得默认正文文字太密集，不方便阅读，所以也做了如下修改。

p, .cm-content {           /*预览和编辑正文格式*/
    line-height: 1.7;    /*行距*/
    letter-spacing: 0.5px;    /*字距*/

行距加大为1.7倍，字间距0.5个像素。预览正文我直接用的P标签，因为如果使用Obsidian的预览class的话，会导致Flowchart框内长文本外溢，而用P标签就不会有这个问题，但是它只会影响正文段落，对诸如Flowchart、代码块等的行间距没有作用。

Flowchart框内文本外溢

2.文本高亮

原始文本高亮

于是我在CSS文档中加入下列代码

.markdown-rendered mark {              /*文本高亮*/
    background-color:#d6ecf0;    /*底色*/
    color: #161823;    /*文本颜色*/
    font-weight: 600;    /*文本粗细*/
    padding-left: 4px;    /*文本到左边框距离*/
    padding-right: 4px;    /*文本到右边框距离*/
}

因为我使用的软件多是用暗黑模式，所以亮底色更显眼些，另外加大了左右边距和文本粗细。

修改后文本高亮

3. 表格

表格修改前

如果觉得原始表格样式单一，可以增加标题与内容的对比，或者根据需求将某列单独修改。

.markdown-rendered thead tr > th {   /*表格标题*/
    text-align: center;    /*文本居中对齐*/
    font-size: 24px;    /*文本大小*/
    font-weight: 700;    /*文本粗细*/
}
.markdown-rendered tbody tr > td:first-child {   /*表格第一列*/
    color: #808080;    /*文本颜色*/
    text-align: justify;    /*文本左右对齐*/
}

增大了标题，第一列数字改为灰色以与内容区别开。

表格修改后

可是有些表格是不需要第一列区别对待的，我的解决方法是，把第一列空出来不放内容，空表格会被压缩空间，对表格整体并没有什么影响。

表格第一列空白.png

如果想做到隔列改变底色以更好的区别开相邻的表格呢？

.markdown-rendered tbody tr > td:nth-child(2n+2) {              /*表格隔列变底色*/
    background-color: #292929;
}
.markdown-rendered thead tr > th:nth-child(2n+2) {              /*表格标题隔列变底色*/
    background-color: #292929;
}

表格变底色

4. 小标题

Obsidian中原始标题是这样的，没有底色两个大小相邻的标题也不好明显区分，当内容较多时还会显得条理不清，于是我做了小修改。

原始标题

加入标题H3的CSS样式

h3 {
    background-color: #333333;    /*背景颜色*/
    padding-left: 8px;    /*文本到边框左部距离*/
    padding-top: 5px;    /*文本到边框上部距离*/
    padding-bottom: 3px;    /*文本到边框底部距离*/
    color: #d6ecf0;    /*文本颜色*/
}

加了个稍浅于软件底色的背景色，修改了文本颜色，调节了文本与背景边框的边距。

加背景标题

这样会增加内容的辨识度，让笔记更具条理。
另外，也可以设置好几个标题的样式，使用时单独引用。
比如：
CSS代码

.header_center {    /*标题居中*/
    border-radius: 4px;    /*边框圆角*/
    background-color: #333333;    /*底色*/
    font-size: 25px;    /*文本大小*/
    font-weight: 600;    /*文本粗细*/
    color: #d6ecf0;    /*文本颜色*/
    text-align: center;    /*文本居中*/
}
.header_left {    /*标题居左*/
    border-radius: 4px;    /*边框圆角*/
    background-color: #333333;    /*底色*/
    font-size: 22px;    /*文本大小*/
    font-weight: 600;    /*文本粗细*/
    color: #d6ecf0;    /*文本颜色*/
    display: inline-block;    /*根据内容区大小显示底色*/
    padding-top: 4px;    /*文本到边框上部距离*/
    padding-bottom: 4px;    /*文本到边框底部距离*/
    padding-left: 8px;    /*文本到边框左部距离*/
    padding-right: 8px;    /*文本到边框右部距离*/
}

笔记中单独引用

<p class=header_center>标题居中</p>
<p class=header_left>标题居左</p>

笔记中显示

标题居中及居左

5.更改已完成任务列表样式

原版的已完成任务列表会有一道删除线，个人不喜欢，于是做如下更改：

ul > li.task-list-item[data-task="x"], ul > li.task-list-item[data-task="X"] {       /*任务列表已完成项样式*/
    color: #b3b3b3;               /*设置已完成任务文字颜色*/
    text-decoration: none;        /*去掉自带文本样式*/
}

取消删除线，只更改颜色，当然，你也可以做出其它更改。