之前的文章介紹了[Markdown格式寫作的優(yōu)秀軟件Ulysses]，在定義排版樣式時(shí)需要用到css文件，我自己參考了笑來(lái)老師公眾號(hào)排版的css文件。
但對(duì)于不懂編程、不會(huì)代碼的同學(xué)，依然不容易看懂里面的代碼塊究竟是什么含義。這篇文章會(huì)針對(duì)笑來(lái)老師的css文件內(nèi)容中最重要的幾個(gè)特征定義，逐行分析含義，另外，給出一些常用的css代碼含義。
整體配置
.markdown-here-wrapper {
font-size: 16px;
line-height: 0.8em;
letter-spacing: 0.1em;
}
Css文件中的代碼，{}內(nèi)的部分是定義規(guī)則，{}外的部分是定義的規(guī)則所要施加的對(duì)象范圍，所以，以上代碼的含義是：
對(duì)Markdown here的整體配置
字體大小：16px；
行高：0.8倍的字體大小，em指的是相對(duì)單位，當(dāng)前對(duì)象內(nèi)字體的尺寸
字間距：0.1倍的字體大小
強(qiáng)調(diào)
strong, b{
color: #BF360C;
}
含義是：
強(qiáng)調(diào)，用粗體顯示；
顏色：#BF360C;
em, i {
color: #009688;
}
含義是：
強(qiáng)調(diào)：用斜體顯示
顏色：#009688;
水平分割線
hr {
border: 1px solid #BF360C;
margin: 1.5em auto;
}
含義是：
水平分割線
邊界：1px 實(shí)線 #BF360C;
外邊距：上下外邊距1.5倍字體大小 左右外邊距自動(dòng)
段落
p {
margin: 1.5em 5px !important;
line-height: 1.8em;
letter-spacing: 2px;
padding: 0em 0.1em;
}
含義：
段落
外邊距：下上外邊距都是1.5倍字體大小 左右外邊距都是5px
行高：1.8倍的字體大??；
字間距：2px；
內(nèi)邊距：上下為0 左右內(nèi)邊距為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 實(shí)線 #009688;
外邊距：上下外邊距都是1.5倍字體大小 左右外邊距都是10px
內(nèi)邊距：上下內(nèi)邊距都是0 左右內(nèi)邊距都是20px；
顏色：#777;
引號(hào)類型：無(wú)引號(hào)；
外邊距：左外邊距是0.2倍的字體大小（可理解為左邊框豎線在整個(gè)頁(yè)面的相對(duì)位置）
內(nèi)邊距：上下左右的內(nèi)邊距都是0.2em（其中，左內(nèi)邊距可理解為引用的文字范圍左邊界距離左邊框豎線的距離）如下圖所示意。
標(biāo)題
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;
}
含義是：
一級(jí)標(biāo)題到六級(jí)標(biāo)題的通用屬性設(shè)置
外邊距：上外邊距為20px 右外邊距為0 下外邊距為10px 做外邊距為0；
內(nèi)邊距：上右下左內(nèi)邊距都為0！優(yōu)先；
字體：粗體！優(yōu)先；
顏色：#009688 !優(yōu)先；
文本對(duì)齊：居中！優(yōu)先；
外邊距：上下外邊距都為1.5倍的字號(hào)大小 左右外邊距都為5px！優(yōu)先；
內(nèi)邊距：上下內(nèi)邊距都為0.5倍的字號(hào)大小 左右內(nèi)邊距都為1倍字號(hào)大?。?yōu)先；
一級(jí)標(biāo)題
h1 {
font-size: 24px !important;
border-bottom: 1px solid #ddd !important;
}
含義：
一級(jí)標(biāo)題
字體大小：24px！優(yōu)先；
底部邊框：1px 實(shí)體 #ddd顏色！優(yōu)先；
二級(jí)標(biāo)題
h2 {
font-size: 20px !important;
border-bottom: 1px solid #eee !important;
}
含義：
二級(jí)標(biāo)題
字體大小：20px！優(yōu)先；
底部邊框：1px 實(shí)體 #eee顏色！優(yōu)先；
三級(jí)標(biāo)題
h3 {
font-size: 18px;
}
含義：
三級(jí)標(biāo)題
字號(hào)：18px；
四級(jí)標(biāo)題
h4 {
font-size: 16px;
}
含義：
四級(jí)標(biāo)題
字號(hào)：16px；
以上為笑來(lái)老師所用css中的主要內(nèi)容，也是常用樣式css的主要內(nèi)容，其中關(guān)于表格的部分沒(méi)有寫出來(lái)，是覺(jué)得通常公眾號(hào)文章最重要的是幾個(gè)級(jí)別的標(biāo)題、強(qiáng)調(diào)、引用、分隔線這幾部分。
注意細(xì)節(jié)
定義css文件時(shí)，一定注意標(biāo)點(diǎn)符號(hào)的格式，用英文格式。
每一級(jí)標(biāo)題中都可以自定義其大小、顏色、位置、行距等等。
用Markdown格式書寫文檔時(shí)，每一段結(jié)束時(shí)要空一行，這樣在公眾號(hào)編輯器中最終呈現(xiàn)效果 才有段間距。
從Ulysses或其他編輯器中復(fù)制Markdown文檔到公眾號(hào)編輯器時(shí)，在粘貼之后，盡量先完成全部的后續(xù)編輯之后再渲染，后續(xù)編輯包括插圖、定義超鏈接等等。
因?yàn)楦鶕?jù)自己的體驗(yàn)，渲染過(guò)兩次之后，字體會(huì)變成公眾號(hào)編輯器默認(rèn)的字號(hào)大小16px，以后的渲染，字體大小會(huì)失效。如果不是用這個(gè)字體的朋友，要注意下。
