css 字体间距_公众号专业排版教程——CSS排版法

30d3005f3c531ae7c70307bd0509a6bf.png

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

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

d82b910b4b99ee12742fb468c516beda.png

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

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

0d898519df0773f22caa27eb2389cabf.png

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

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

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

b75f45520f82193d6f03047d48f9d943.gif

9a33524b9d896e6ee8d06cb60685a15d.png

ad73f275cc8053506d4bfede74031427.gif

998f6fad05339a1c7070b09b69d572b2.png

54a1eee5354c920cf5b4f4e58a4b5eea.png

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

2fee78f56dc8e14baec88edf18953d6d.png

094900bd9b7ff527790378d58967e73e.png

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

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

2190f3c3b00ddecd2f368e88e19b2d3b.png

b4b4d50d32fee670ae2157727ba81812.gif

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

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

————  END  ————

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值