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

html-css07

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

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

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

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

含义是：

含义是：

含义是：

含义：

含义是：

含义是：

含义：

含义：

含义：

含义：

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

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

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

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

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

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

纯文字，不考虑用图片之类的其他元素做装饰，css排版的话基本上你只能做下面一些设置：

字体、行距、间距、字距、首字缩进、首字下沉、颜色、标题大小、粗体、斜体、下划线...

以上css基础知识请自行百度；css font

程序的问题，我觉得你概念上错了，假设有一篇新闻是这样的：

标题：小明上学的故事

内容：我是小明，今年7岁，明天我就要开始上学了，多么期待啊！

那么这个新闻保存到数据库，数据库对应的表里面就必须有 标题 和 内容 两个字段，我还假设了一些其他字段：

newstitle(字段)：存放标题

------------------------------

newstxt(字段)：存放内容

------------------------------

name(字段)：存放作者名字

------------------------------

time(字段)：存放新闻发布日期

------------------------------

然后你的web程序应该是这样的：

------------------------------

<h1>XXX程序代码：读取数据库newstitle标题字段XXX</h1>

<h3>作者：XXX程序代码：读取数据库name作者名字XXX</h3>

<p>XXX程序代码：读取数据库newstxt文章内容XXX</p>

<p class="time">XXX程序代码：读取数据库time发布日期XXX</p>

然后由此程序产生的html到客户端就是下面这样：

------------------------------

<h1>小明上学的故事</h1>

<h3>作者：小明</h3>

<p>我是小明，今年7岁，明天我就要开始上学了，多么期待啊！</p>

<p class="time">2012-04-01</p>

然后，你就可以写样式表来控制h1、h3、p或网页里面的其他元素的样子了，比如：

h1{color:redfont-size:18px}

h3{font-size:10px}

p{font-size:12pxline-height:1.8}

.time{font-size:10pxcolor:#333}