笑来老师公众号文章排版样式css关键内容详解

上一篇文章介绍了

[Markdown格式写作的优秀软件Ulysses]

，在定义排版样式时需要用到css文件，我自己参考了笑来老师公众号排版的css文件。

但对于不懂编程、不会代码的同学，依然不容易看懂里面的代码块究竟是什么含义。这篇文章会针对笑来老师的css文件内容中最重要的几个特征定义，逐行分析含义，另外，给出一些常用的css代码含义。

整体配置

.markdown-here-wrapper {

font-size: 16px;

line-height: 0.8em;

letter-spacing: 0.1em;

}

Css文件中的代码，内的部分是定义规则，外的部分是定义的规则所要施加的对象范围，所以，以上代码的含义是：

对Markdown here的整体配置

字体大小：16px；

行高：0.8倍的字体大小，em指的是相对单位，当前对象内字体的尺寸

字间距：0.1倍的字体大小

强调

strong, b{

color: #BF360C;

}

含义是：

强调，用粗体显示；

颜色：#BF360C;

em, i {

color: #009688;

}

含义是：

强调：用斜体显示

颜色：#009688;

水平分割线

hr

border: 1px solid #BF360C;

margin: 1.5em auto;

}

含义是：

水平分割线

边界：1px 实线 #BF360C;

外边距：上下外边距1.5倍字体大小 左右外边距自动

段落

p {

margin: 1.5em 5px !important;

line-height: 1.8em;

letter-spacing: 2px;

padding: 0em 0.1em;

}

含义：

段落

外边距：下上外边距都是1.5倍字体大小 左右外边距都是5px

行高：1.8倍的字体大小；

字间距：2px；

内边距：上下为0 左右内边距为0.1倍的字体大小；

引用

blockquote, q {

border-left: 4px solid #009688;

margin: 1.5em 10px;

padding: 0 20px;

color: #777;

quotes: none;

margin-left: 0.2em;

padding:0.2em;

}

含义是：

引用块

左边框：4px 实线 #009688;

外边距：上下外边距都是1.5倍字体大小 左右外边距都是10px

内边距：上下内边距都是0 左右内边距都是20px；

颜色：#777;

引号类型：无引号；

外边距：左外边距是0.2倍的字体大小（可理解为左边框竖线在整个页面的相对位置）

内边距：上下左右的内边距都是0.2em（其中，左内边距可理解为引用的文字范围左边界距离左边框竖线的距离）如下图所示意。

标题

h1, h2, h3, h4, h5, h6 {

margin: 20px 0 10px;

padding: 0;

font-style: bold !important;

color: #009688 !important;

text-align: center !important;

margin: 1.5em 5px !important;

padding: 0.5em 1em !important;

}

含义是：

一级标题到六级标题的通用属性设置

外边距：上外边距为20px 右外边距为0 下外边距为10px 做外边距为0；

内边距：上右下左内边距都为0！优先；

字体：粗体！优先；

颜色：#009688 !优先；

文本对齐：居中！优先；

外边距：上下外边距都为1.5倍的字号大小 左右外边距都为5px！优先；

内边距：上下内边距都为0.5倍的字号大小 左右内边距都为1倍字号大小！优先；

一级标题

h1 {

font-size: 24px !important;

border-bottom: 1px solid #ddd !important;

}

含义：

一级标题

字体大小：24px！优先；

底部边框：1px 实体 #ddd颜色！优先；

二级标题

h2 {

font-size: 20px !important;

border-bottom: 1px solid #eee !important;

}

含义：

二级标题

字体大小：20px！优先；

底部边框：1px 实体 #eee颜色！优先；

三级标题

h3 {

font-size: 18px;

}

含义：

三级标题

字号：18px；

四级标题

h4 {

font-size: 16px;

}

含义：

四级标题

字号：16px；

以上为笑来老师所用css中的主要内容，也是常用样式css的主要内容，其中关于表格的部分没有写出来，是觉得通常公众号文章最重要的是几个级别的标题、强调、引用、分隔线这几部分。

注意细节

定义css文件时，一定注意标点符号的格式，用英文格式。

每一级标题中都可以自定义其大小、颜色、位置、行距等等。