本篇举例说明如何使用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; /*去掉自带文本样式*/
}
取消删除线，只更改颜色，当然，你也可以做出其它更改。
网友评论