135編輯器專業(yè)排版教程——CSS排版法
135編輯器專業(yè)排版教程——CSS排版法
大家好,本期小楊來給大家講講有關(guān)CSS排版法的內(nèi)容。
CSS排版法是公眾號(hào)最主流的排版方式,我們經(jīng)常使用的135編輯器本質(zhì)上也是基于CSS的排版方式;雖然借助135編輯器的工具與模板可以很快的完成一篇精美的排版,但若要掌握更高階的排版技巧,學(xué)習(xí)一些CSS有關(guān)概念就顯得尤為必要。
沒有看過之前文章的同學(xué)可以點(diǎn)擊下方鏈接查看上期的內(nèi)容。
CSS即層疊樣式表(Cascading Style Sheets),本質(zhì)是網(wǎng)頁代碼;它可以修飾公眾號(hào)中的各種元素,比如給一段文字添加字體、字間距、字號(hào);或者給一個(gè)區(qū)塊添加背景圖片與邊框。
當(dāng)我們?cè)?35編輯器中給一個(gè)段落設(shè)置字號(hào)時(shí),它的本質(zhì)就是給網(wǎng)頁添加一段描述字號(hào)的代碼。
盒模型是公眾號(hào)中最基本的結(jié)構(gòu),我們可以把公眾號(hào)中的每一個(gè)元素都看作一個(gè)小盒子。
內(nèi)容放置在盒子中央,內(nèi)容與盒子邊緣的間距就是內(nèi)邊距(padding);盒子邊緣與其他盒子的距離就是外邊距(margin)。
CSS通過設(shè)置盒子的外邊距來確定盒子擺放的位置。
<section>是網(wǎng)頁代碼中節(jié)標(biāo)簽的意思;它就像一個(gè)容器,文字與圖片都放在<section>結(jié)構(gòu)中,構(gòu)成一個(gè)組合。當(dāng)你改變<section>的位置時(shí),<section>中的文字與圖片的位置都會(huì)相應(yīng)發(fā)生改變。
在并列結(jié)構(gòu)中,兩個(gè)并列的盒子互不影響;
在嵌套關(guān)系中,父元素的CSS參數(shù)可以繼承給子元素,但如果子元素設(shè)置了自己的CSS參數(shù),則以子元素的CSS參數(shù)為準(zhǔn)。
微信公眾號(hào)是流式頁面;流式頁面即組件與組件之間采用的相對(duì)定位方式,下層組件只能確定與上層組件的距離,而沒有一個(gè)絕對(duì)的位置;因此,當(dāng)你在兩段中插入一個(gè)新段落時(shí),后面的段落會(huì)自動(dòng)向下順延。
對(duì)于大多數(shù)人,這些概念僅需了解即可,135編輯器強(qiáng)大的工具可以幫助你完成絕大多數(shù)排版效果;如果你希望了解更專業(yè)的排版技術(shù),就要學(xué)習(xí)CSS代碼知識(shí)。
———— END ————
立即登錄
- 知乎熱議:微信公眾號(hào)如何快速漲粉?
- 0基礎(chǔ)運(yùn)營小白學(xué)習(xí)什么新媒體課程比較好?
- 新媒體,自媒體新人必學(xué)的課程有哪些?
- 不懂就問:新媒體運(yùn)營應(yīng)該怎樣學(xué)習(xí)?