135编辑器专业排版教程——CSS排版法

135编辑器专业排版教程——CSS排版法


640?wx_fmt=jpeg


大家好,本期小杨来给大家讲讲有关CSS排版法的内容。


CSS排版法是公众号最主流的排版方式,我们经常使用的135编辑器本质上也是基于CSS的排版方式;虽然借助135编辑器的工具与模板可以很快的完成一篇精美的排版,但若要掌握更高阶的排版技巧,学习一些CSS有关概念就显得尤为必要。


没有看过之前文章的同学可以点击下方链接查看上期的内容。

grey.gif


CSS即层叠样式表(Cascading Style Sheets),本质是网页代码;它可以修饰公众号中的各种元素,比如给一段文字添加字体、字间距、字号;或者给一个区块添加背景图片与边框。


当我们在135编辑器中给一个段落设置字号时,它的本质就是给网页添加一段描述字号的代码。


grey.gif


盒模型是公众号中最基本的结构,我们可以把公众号中的每一个元素都看作一个小盒子。


内容放置在盒子中央,内容与盒子边缘的间距就是内边距(padding);盒子边缘与其他盒子的距离就是外边距(margin)。


CSS通过设置盒子的外边距来确定盒子摆放的位置。



grey.gif

grey.gif



grey.gif

grey.gif

grey.gif

grey.gif


<section>是网页代码中节标签的意思;它就像一个容器,文字与图片都放在<section>结构中,构成一个组合。当你改变<section>的位置时,<section>中的文字与图片的位置都会相应发生改变。


grey.gif

grey.gif

在并列结构中,两个并列的盒子互不影响;


在嵌套关系中,父元素的CSS参数可以继承给子元素,但如果子元素设置了自己的CSS参数,则以子元素的CSS参数为准。


grey.gif

grey.gif


微信公众号是流式页面;流式页面即组件与组件之间采用的相对定位方式,下层组件只能确定与上层组件的距离,而没有一个绝对的位置;因此,当你在两段中插入一个新段落时,后面的段落会自动向下顺延。


对于大多数人,这些概念仅需了解即可,135编辑器强大的工具可以帮助你完成绝大多数排版效果;如果你希望了解更专业的排版技术,就要学习CSS代码知识。




————  END  ————






grey.gif

grey.gif       

grey.gif

文章评价
登录后可以评论
立即登录