学无止境 篇二：在我的指导下，小白也学会了使用markdown写出生动有趣的文章啦~

唠一唠

介于许多值友们其实并不是很懂开发，所以上手使用markdown进行文章排版布局，还是略显艰难一些。我有一个朋友同样有这样的困扰，网上自然是有很多资料的，只是他看了一些视频也看了好几篇文档，两天还是没搞明白这是咋弄呢。这时候，该我上场了吧，开了远程，一顿操作猛如虎~~~ 欧了，基本需求都搞定了

发文章首先肯定是需要我们自己的风格的，颜色差距不要太大，颜色搭配要相得益彰。当然，使用的颜色也不能太多，就像人穿衣服不要超过三种颜色一样，太多太乱了反而显得不够好看了。建议是三种颜色，主，次，辅呢。而排版个人认为，娱乐性的文案可以居中对齐，其他文案左右侧两边对齐就可以了，穿插一些主标题，副标题，简洁明了。

开整开整吧~

下面的示范咱有参考官方发的征稿活动文章哦(晒物赏金丨追觅洗地机，带你解锁全家立体清洁新姿势！)~

上图中的主标题咱用h1标签，也就是咱pc端写文顶部第一个H1(一级标题)

由此可见, h1和#只是写法不一样, 呈现出来的效果都是一样的哦~ 可以这么理解在Markdown的规则中, #就是h1, h1就是#, #则是markdown中h1的快捷写法， h2, h3, strong等标签亦如此，想要使用什么写法大家随意哈。

但我们想要一个靠左的小点儿的标题呢？？？

上面的css代码也可以理解成 当我们使用h1或者h2的时候，括号里面就是指定它要长成什么样子。

• font-size 就是指定它大小，px是像素单位，数值越大，它的字体越大

• font-weight 就是指定它字体的胖瘦，同样数值越大，字体越粗，最高值是700，咱可以用bold替代，也就是（font-weight: bold;）

• text-align 就是指定它里面的文本的一个水平对齐方式，它有三个规则，这里我们用到的是居中

  left 把文本排列到左边。（默认值） right 把文本排列到右边。 center 把文本排列到中间。

那么图中带颜色的文字，又是怎么实现的呢？？？

这里我们用一些标签示范一下，我们先认识一下它们（标签详细文档点这里）

• sapn标签 本身没有样式

• i标签 本身特质就是文字会倾斜显示

• b标签 本身特质就是文字加粗显示

可以明显看出来，当我们加颜色的时候，标签的本身特质都是存在的，而我们给他定义一个关于颜色的规则，就是给标签内的文字穿了件对应色的衣服罢了，color：后面的值，就是指定这个颜色值是什么，这里可以用颜色名称（比如red）,十六进制值的颜色（比如 #ff0000）, rgb 代码的颜色（比如 rgb(255,0,0), 当你不指定的时候，就是浏览器默认的黑色啦

但是我们有的时候又希望一整个段落，都是一个颜色，这时候我们用div标签

这里大家看出一点小问题了吗，span，b，i这三个标签都能塞进div里，就是由于span，b，i都是块标签，div则是行标签，如果不懂也没关系，咱自己多试试就知道了

• 行标签特点：不独占一行，每个行标签元素并排排列，直到遇到父级边界换行

• 块标签特点：独占一行，默认宽度占满父级，默认高度为零，子级内容撑开高度

既然我们已经讲到了颜色了，那么我们就继续扩展一下吧~

这里出现了两个新的样式

• background-color 也就是底色，背景色，和color一样：后跟着颜色值；

• padding 也就是指定标签边框与标签内容之间的空间，填充空间，填入4个值的时候分别是上右下左，记不住的话没关系，也可以简单直白一点写padding-left，padding-right，padding-top，padding-bottom，这样分别指定一个方向设置padding: 10px 0 10px 0；则可以写成padding-top：10px;padding-bottom: 10px;当我们设置了背景色的同时，设置的padding空间内也会被上色

既然我们讲到了padding，那么margin也必须好好的说道说道了~

这边可以看到我将两个标签的顺序调换一下，em有一个向左的距离，而这是标签内容对外的一个间距margin一个是外间距，一个是内间距。写法也是和padding一样的，可以合并成一个margin指定上下左右，也可以拆分单独方向设置，这里我就示范了一次指定左方向一个10px的间距

然后咱再继续介绍，有的时候看文章，也有看到标题带底下一条线的呢？？？

这就是border，它和margin，padding一样也是可以定义上下左右方向，但是定义的是边框的样子。

border：后有三个值 按顺序分别是

- 边框的宽度： 像素大小（px）;
- 边框的样式： dotted（点状） solid（实线） double（双线） dashed（虚线）;
- 边框的颜色： 颜色值（和color，background-color一样）

这里只演示实线哦，应用场景比较多一些，其他的边框样式大家自己可以试一试

或许早就有小伙伴好奇我图中的虚线是什么了，它就是hr标签！

其实就是一条分割水平线，有的文章中也有用到，下图中还能看出这个标签比较特殊，往中间插入文字内容是不会显示出来的哦~ 其他都是一样的，我们同样可以去定义这条线颜色呀，外间距呀，内间距呀等

贴心的贴上我写这篇文，用上的css代码~

pre, code { font-size: 14px; font-family: Roboto, 'Courier New', Consolas, Inconsolata, Courier, monospace; rgin: auto 5px; } code { white-space: pre-wrap; border-radius: 2px; display: inline; } pre { font-size: 15px; line-height: 1.4em; display: block !important; } pre code { white-space: pre; overflow: auto; border-radius: 3px; padding: 1px 1px; display: block !important; } h1, h2, h3, h4, h5, h6 { rgin: 12px 0; padding: 0; } h1 { font-size: 20px; font-weight: 700; text-align: center; } h2 { font-size: 18px; font-weight: 700; text-align: left; } h3 { font-size: 20px; font-weight: 700; text-align: left; color:green; } h4 { font-size: 20px; font-weight: 700; text-align: center; color: #fff; background-color: red; } h5 { font-size: 20px; font-weight: 700; text-align: center; color: #fff; background-color: red; padding: 10px 0 10px 0; } h6 { font-size: 20px; font-weight: 700; text-align: center; padding-bottom: 20px; border-bottom: 1px solid red; } strong { color: #fff; background-color: red; } span { color:red; } b { color:purple; } i { color:green; } div { color:pink; } em { color: #fff; background-color: green; rgin-left: 20px; }

如果和我一样的使用cmd markdown和markdown here的，这段最后样式的代码，请注意一定要复制到这两个编辑器的css设置中，样式才能同步，只用markdown here的可以不用管cmd markdown。使用markdown here的右键转换，选中全文，只要是使用了标签的，定义了样式的，转换后对应样式全部都会同步。

html内容很多，就不一一示范了。介绍的都是文章中比较基本的一些标签使用和样式定义，对我和小伙伴来说目前都是够用的，手已敲累~~~

小伙伴如果有别的想要知道的，欢迎留言，我定知无不言言无不尽，若能帮助到大家，我很荣幸。

最后
在下不才，文笔欠缺，非常感谢能够耐心看到这里。
恳请看这篇文的小哥哥小姐姐们，动动手指，多多点赞，多多评论一下，感谢你们的支持呀

作者声明本文无利益相关，欢迎值友理性交流，和谐讨论～