1. 前言
VNote支持自定义CSS，而且不仅支持自定义渲染后的样式，编辑模式下的样式也支持自定义。虽然很多Markdown编辑器默认的CSS已经非常漂亮了，但是对于个别喜欢折腾的朋友而言，可能还是希望可以自定义一套自己的CSS，至少能够根据自己的需要修改默认的CSS。
下图是我自定义的编辑模式下的样式：
编辑模式下的样式.png
下图是我自定义的渲染输出后的样式：
渲染输出的样式一
渲染后输出样式二
在《Markdown快速上手指南》中，我也曾提到过CSS。当时说CSS之于Markdown，就像样式集之于Word。但是CSS的设置需要采用编程的方法，不像Word里设置样式那样直观易懂。
我是一个编程小白，今天就在此献丑，跟大家讲讲我设置CSS的思路，和大家一起探讨如何自定义VNote的CSS。有不足之处还请大家多多指教！！！
2. 设置三要素
不管是在Word里设置样式，还是设置Markdown的CSS，我们都需要明白三个基本要素，即给谁设置样式，设置什么样式，设置成什么样。在CSS里按规范的说法就是：选择器、属性、值。
给Markdown渲染的CSS是一个独立的后缀为.css的文件，因此我们不必像给HTML设置CSS那样考虑CSS的引用方式等问题。打开VNote，单击【Markdown】选项卡，选择【渲染样式】-【添加样式】即可打开VNote存放CSS样式的文件夹。我们可以用Atom打开已有CSS文件进行修改，也可以在Atom里直接新建CSS文件，然后保存到该文件夹下，在【Markdown】选项卡下单击【渲染样式】，选择新建的样式后重新打开笔记即可。
如果CSS对背景色进行了设置，要确保该设置能够有效，【Markdown】选项卡下【渲染背景】需要设置为“默认”。
3. CSS基本知识
掌握了CSS设置的基本三要素，看CSS的代码就清楚多了。如图所示。
CSS基本三要素
h1、h2、h3、h4：选择器；
font-weight、margin-bottom：属性；
bold、24px：值。
选择器这个部分可以只写一个，也可以同时写多个，用逗号隔开，后面用大括号括起来。
属性和值合起来叫声明，大括号中可以有多个声明，每个声明之间用分号隔起来。
为了规范、简明、直观，建议每一行写一个声明。
4. 设置思路
4.1 先整体，后局部
编排Word的时候，正确的方法应该是：【页面设置】-【主题设置】-【样式设置】，其基本思路可概括为“先整体，后局部”。设置CSS时候，也可以按照这个思路进行设置。
CSS里整体设置可在body中进行。
首先，页面设置。Word里页面设置主要设置页边距、页眉页脚，CSS里则主要设置margin、padding。margin表示外边距，padding表示内边距。
其次，主题设置。Word里设置主题，主要是主题字体、主题色、段落间距。主题字体规定了默认的字体，主题色规定了默认的颜色，段落间距则规定了默认的段前、段后和行间距。同理，在CSS里我们也可以先规定主题字体、主题色和行间距。相关属性分别为font-family、color和line-height。
再次，设置背景和边框。Word的【设计】选项卡-【页面背景】组有页面颜色和页面边框两个设置。CSS里设置页面背景就是background-color。
举个例子：
body{
marging: 0 auto;
padding: 30px;
font-family: "Microsoft YaHei", "微软雅黑";
color: #404040;
line-height: 1.5em;
background-color: #FFFFFF;
}
px/em是大小单位，px是绝对大小单位，em是相对大小单位。
#404040是16进制色值，也可以使用RGB或RGBA色值，其中A表示不透明度，值域为0~1。
4.2 先文字，后段落
首先，文字设置有字体、字型、字号、字色。
字体：font-family。由于整体已经设置了字体，如果不单独设置，那默认就是body中设置的字体；
字型：font-weight: bold（加粗）、font-style:italic（倾斜）；
字号 : font-size: 16px；
字色：color: #404040。
其次，段落设置有缩进、段前、段后、行间距。
缩进：margin、padding；
段后：margin-buttom： 24px；
行间距：line-height：1.5em。
在设置的过程中，有的内容是整体设置过了，所以可以忽略不再设置。有的设置的内容是相同的，可以统一进行设置。比如：
h1{
font-weight: bold;
margin-bottom: 24px;
font-size: 25px;
}
h2{
font-weight: bold;
margin-bottom: 24px;
font-size: 22px;
}
可以设置为：
h1, h2{
font-weight: bold;
margin-bottom:24px;
}
h1{
font-size:25px;
}
h2{
font-size:22px;
}
5. 我的分享
写了这么多，其实还远远不足以说清楚CSS的设置。在折腾VNote的CSS的时候，我深刻体会到小白与其从零开始一行一行的写出一个完整的CSS代码，不如在大神们写的CSS代码基础上根据自己的需求进行修改。
我是一个编码小白，白得已经不能再白的那种。在折腾CSS的过程中，幸亏得到了VNote作者的指导。现将我自定义的样式分享给大家，希望大家能够喜欢。
下载方式：
- 云盘下载链接:链接：http://pan.baidu.com/s/1boYOZIv 密码：s0rq
- QQ交流群（487756074）群文件
在使用VNote的过程中如果有问题或者对VNote有任何意见和建议，可以加VNote的QQ交流群（487756074）。
VNote交流群
网友评论