自定义CSS

TIP

NoteToMP插件从1.2.0版本开始，使用仓库内笔记作为自定义CSS文件，弃用了之前的custom.css。使用笔记更方便管理样式，直接在Obsidian内即可调整更新。

新建一篇笔记，例如自定义样式，直接将如下内容粘贴进笔记：

```CSS
.note-to-mp {
    font-family: Optima, Optima-regular, "Microsoft YaHei", PingFangSC-regular, serif;
    padding: 0;
    background-color: #FFFFFF;
} 
```

然后打开NoteToMP插件设置，将自定义样式（即包含自定义CSS内容的笔记名称），粘贴到自定义CSS笔记中即可。如果不使用自定义CSS，留空即可。

CSS类名

关于自定义CSS的写法可以参考下面的代码：

/* 全局属性  
 * 这里可以设置字体，字体大小，边距，背景颜色等
 */  
.note-to-mp {  
    /* 注：请在大括号内改写！！！ */  
}  
 
/* 段落 */  
.note-to-mp p {  
    /* 注：请在大括号内改写！！！ */  
}  
 
/* 一级标题 */  
.note-to-mp h1 {  
    /* 注：请在大括号内改写！！！ */  
}
 
/* 二级标题 */  
.note-to-mp h2 {  
    /* 注：请在大括号内改写！！！ */  
}
 
/* 三级标题 */  
.note-to-mp h3 {  
    /* 注：请在大括号内改写！！！ */  
}
  
/* 无序列表整体样式  
 * list-style-type: square|circle|disc;  
 */  
.note-to-mp ul {  
    /* 注：请在大括号内改写！！！ */  
} 
 
/* 加粗 */  
.note-to-mp strong {  
    /* 注：请在大括号内改写！！！ */  
}  
  
/* 斜体 */  
.note-to-mp em {  
    /* 注：请在大括号内改写！！！ */  
}  
  
/* 加粗斜体 */  
.note-to-mp em strong {  
    /* 注：请在大括号内改写！！！ */  
}  
  
/* 删除线 */  
.note-to-mp del {  
    /* 注：请在大括号内改写！！！ */  
}  
  
/* 分隔线  
 */  
.note-to-mp hr {  
    /* 注：请在大括号内改写！！！ */  
}
/* 图片
 */  
.note-to-mp img {  
    /* 注：请在大括号内改写！！！ */  
}
/* 
 * 文件嵌入引用
 */
.note-embed-file {
	/* 注：请在大括号内改写！！！ */  
}
/* 
 * 高亮颜色
 */
.note-highlight {
  /* background-color: rgba(255,208,0, 0.4); */
}
 
/* 
 * Callout
 * 可以调整各种类型Callout的文字颜色和背景颜色
 * color: rgb(158, 158, 158);
 * background-color: rgba(158, 158, 158, 0.1);
 */
.note-callout-note { 
}
/* abstract tip hint */
.note-callout-abstract {
}
.note-callout-success {
}
/* question  help, faq, warning, caution, attention */
.note-callout-question {
}
/* failure, fail, missing, danger, error, bug */
.note-callout-failure {
}
.note-callout-example {
}
.note-callout-quote {
}

例如这篇文章几个让公众号排版更精致的小技巧，手机上也可以！👈️使用的自定义样式如下：

.note-to-mp {
    font-family: Optima-regular, Optima, "Microsoft YaHei", PingFangSC-regular, serif;
}
 
.note-to-mp h2 strong {
    display: inline-block;
    background: rgb(90, 185, 131);
    color: rgb(255, 255, 255);
    padding: 2px 16px;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    margin-right: 10px;
    visibility: visible;
}
 
.note-to-mp h2 {
  border-bottom: rgb(90, 185, 131) 2px solid;
  color: rgb(90, 185, 131);
}
 
section .note-callout-example {
    color: rgb(90, 185, 131);
    background-color: rgba(90, 185, 131, 0.1);
}

上面的例子，通过.note-to-mp指定了文章的字体，通过h2 strong单独定义了h2标题下strong的样式，这样可以在标题中通过使用粗体增加了一个边框样式。通过h2定义了h2标题的底部线条的宽度和文本颜色。这样配合Olive Dunk主题就形成了自己的风格。

快速设置标题、加粗、分割线颜色

一般来说我们可以通过简单的设置标题、加粗、分割线颜色等的颜色来制作自己的样式，如下所示：

```CSS
.note-to-mp h1,
.note-to-mp h2,
.note-to-mp h3,
.note-to-mp h4,
.note-to-mp h5,
.note-to-mp h6 {
    color: #33357D;
}
.note-to-mp strong {
    color: #33357D;
}
.note-to-mp em {
    color: #33357D;
}
.note-to-mp hr {
    border-top: 1px solid #33357D;
}
```

上面的自定义CSS，将标题、加粗、分割线颜色设置为#33357D，你可以将其改为自己喜欢的颜色。