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

html-css014

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

之前的文章介绍了[Markdown格式写作的优秀软件Ulysses],在定义排版样式时需要用到css文件,我自己参考了笑来老师公众号排版的css文件。

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

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

含义是:

含义是:

含义是:

含义:

含义是:

含义是:

含义:

含义:

含义:

含义:

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

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

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

用Markdown格式书写文档时,每一段结束时要空一行,这样在公众号编辑器中最终呈现效果 才有段间距。

从Ulysses或其他编辑器中复制Markdown文档到公众号编辑器时,在粘贴之后,尽量先完成全部的后续编辑之后再渲染,后续编辑包括插图、定义超链接等等。

因为根据自己的体验,渲染过两次之后,字体会变成公众号编辑器默认的字号大小16px,以后的渲染,字体大小会失效。如果不是用这个字体的朋友,要注意下。

1、选中DIVb2,点击右侧CSS选项卡下的+号,添加CSS样式定义。

2、在新建CSS规则面板下选择#b2(对应DIV b2的ID),确定。

3、在CSS规则定义面板左侧分类下选择方框,右侧输入对应的数值。b2的DIV定义好了

4、下面定义DIV001,同样选中DIV001,点+号新建CSS。

5、在CSS规则定义下选择“背景”,选择好色彩,

6、选择“方框”,定义DIV001的宽,高,浮动float为left。

7、同DIV001一样,新建DIV002样式。

8、选择背景色

9、选择方框后,填写DIV002的样式属性值,注意,因为它是向右浮动的,所以这里的FLOAT要选择为right。

10、同DIV001一样,新建并设定DIV003的参数

11、定义DIV004的样式,因为DIV004和上面的DIV-B2是一样的宽度,所以这里设置为width:400px,Clear为both,防止有的浏览器兼容性问题而位移。

12、设置完毕,查看左侧的效果。