『PC搞机的快乐』 篇二十四：张大妈排版神技~吐血分享—再谈Markdown here CSS 渲染及全套分享，伸手党福音~

创作立场声明：**创作立场声明：本文首发于什么值得买。使用经验分享，希望能对你有所帮助。

啰嗦几句

很多朋友一直在询问是如何排版的，当时刚开始写文章的时候也以为是首席生活家的特权，经过询问后，发现是用Markdown here做的CSS渲染。既然大妈允许这么做，这么好的工具当然要用起来，使用到今天已经算是比较成熟了，今天呢和大家一起分享一下，一方面让大家的文章更加丰富多彩。

本文重点解释Markdown和Markdown here的CSS渲染，并把最近一段时间调教过的渲染代码做个分享，作为美化篇。

typora的使用配置及如何实现图片上传，提高码文效率的放在下一篇，涉及到图床配置、导入张大妈富文本编辑器，二次排版等方法。

如果点赞是读者给与的最高的评价，那么一个好的排版是对读者最大的尊敬，对此我深信不疑。 此处疯狂暗示一波，今天借着这篇文章一起学习下，虽然不能说精通markdown和CSS渲染，但是应对文章的排版呢还是绰绰有余的。随文附上呕心沥血调教的全部CSS渲染效果。

一、Markdown语言篇

1.标题设置

一级标题、二级标题、三级标题，分别用# ，## ,###，就可以完成三级标题的设置，简单的说就是在标题前面加上一#然后点下空格就完成了。

2.加粗文本

加粗呢，这里就是强调作用，一般我们在富文本编辑下， 直接用ctrl+B 快捷键可以实现。

3.斜体、下划线、删除线、分隔线、引用

上面这些也是用的比较多，在markdown中也可以通过符号语言简单的实现，还是挺好记得，因为语言也不是很难，基本上就是用，-，等的组合，比如三个或者三个-，就是下划线，在文字的两端各打一个就是斜体，各打*就是强调，到时候渲染的时候会自动识别格式。

4.有序列表&无序列表

在描述或者引用的时候，经常会用到列表，列表分为有序列表和无序列表，这两种列表也是非常容易实现，用下面的代码就可以完成。

5.超链接和插入图片

超链接的插入语言和图片插入语言差不多得，中括号内是名称，圆弧括号内是地址，因为张大妈发文的时候要求要将网址变成超链接。所以这个在发文中经常遇到，拿出来说以下。

• 插入超链接： [链接名称]（链接地址）

• 插入图片：

具体代码可以参考印象笔记 Markdown 入门指南点击访问

6.值得买平台可以识别的效果

加粗效果可以识别

下划线效果可以识别

斜体效果被识别成了带颜色的效果

删除线效果

1. 有序列表

• 无序列表

引用

纵笔浮生测试专用，纵笔浮生测试专用，纵笔浮生测试专用，纵笔浮生测试专用，纵笔浮生测试专用，纵笔浮生测试专用，纵笔浮生测试专用，纵笔浮生测试专用，纵笔浮生测试专用，纵笔浮生测试专用，纵笔浮生测试专用，纵笔浮生测试专用。

二级标题、三级标题是直接可以被识别的，二级标题在张大妈富文本编辑器里转换后会被识别为一级标题，并自动生成目录。效果像下面一样。

表格也是可以识别的：

富文本编辑框下，是一般是无法添加表格的，利用markdown语言可以实现表格的效果，尤其是写作清单类的文章，需要添加链接，加入表格可以使文章可读性更高。

二、Markdown here插件安装使用

Markdown here是一款可以渲染Markdown语言的插件，可以将代码转换成富文本格式。关于浏览器插件的安装，前面写过一期文章，现在Edge、chrome、firefox、其他 Chromium 内核浏览器都可以安装插件。

如果浏览器插件不会安装可以参考这篇文章：

『干货集结号』 篇十二：让你『放飞自我』的浏览器拓展分享——如何打造『高效的』冲浪神器~大家好，我是纵笔浮生，今天又来啦！！本文初衷是带新人入门，如果是大神请绕道，或者有更好的经验分享我们评论区讨论~~前段时间呢分享了不少别具特色的网站，有关于搜索引擎，有关于图片，也有关于电影的，其中有不少操作呢可能涉及到一些浏览器的调教，拥有一款好用的浏览器可以让我们网上冲浪更happy~~今天借着纵笔浮生| 赞92 评论47 收藏964查看详情

安装完成后，右击插件图标选择选项，进入Markdown here的后台设置。

把代码粘贴在在基本渲染CSS里面就可以啦~~

下面有预览，就是渲染后的大致效果。

插件安装好，代码复制进去就可以使用了，很多小伙伴可能一头雾水，使用很简单：

三、渲染过程

①部分渲染

先讲一个比较简单的书写和渲染的方法，大概也是很多朋友在用的，还是按照原来的方法写作，只是在需要转换格式的地方输入特殊代码，比如标题，加粗部分进行转换。

下面是我们正常码文的状态，只是在想转换的地方加上了代码，如购买需求加标题，第一句话加粗，第二段加个引用。

然后选中要转换的地方，右击，选择Markdown转换。一定注意，不选中文本，右击渲染的话是整篇转换。一定要先选中要转换的部分，然后选择Markdown转换。

可以看到选中的这部分已经被渲染成设定的格式了。

下面的部分并没有发生变化，这样就相当于，每次我们写完文章后，可以通过几部分的设定，进行一个二次排版，像斜体、标题、下划线，加粗、引用、分割线等效果都可以实现效果。

上面这种方法可以通过一点一点的美化来实现整篇文章的排版， 但是还是要一张一张的插入图片，在富文本编辑下码文。因为在写的过程中，要上传图片，一张一张的上传图片是比较痛苦的，一张张修完还要一张张上传。

后面在第二篇Tyora篇再讲一下如何可视化Markdown here和文章自动拉取功能。

②整体转换

将一篇用Tyora书写好的Markdown语言的文章复制到张大妈富文本编辑器里面：

右击选择markdown转换：

转换后的效果，如果再转换一次又变成了markdown语言。

大妈无法拉取图床的图片到平台库，用外部图片不安全，万一有一点图床倒闭，文章中的图片就挂了。

三、Markdown here CSS 代码调试

Markdown here CSS代码是需要懂一点CSS语言的， 对于非专业出身的小伙伴可能会有点难度，。好在我们修改模板用得不是很多，知道一些常用的例子就可以了，如果你不想懂，这部分可以直接跳过到模板代码分享部分。

如果深入学习CSS呢，这里也推荐一个网站，基本的语言都有，本文也是参照此网站，对代码进行的修改。

本着方便快速使用的精神，我们简单研究下代码，并且研究的过程中呢，对代码进行了标注。代码很长，但是都不用记，只是我们再修改CSS语言的时候，知道修改这个参数会发生什么变化就可以了，常用的也就是修改颜色、标题居中还是居左，字体对齐方式。

首先来熟悉一些CSS代码中用到的格式限定，拿过一个CSS代码稍微调整一下格式，复制粘贴到Markdown here的后台就可以使用了。

根据上面的代码，我们分成两类来说，一类是比如标题，下划线，强调等效果，第二类比如颜色、阴影、对齐方式、字体等效果的改动。

1.码文用到的修改

上面我们提到过，修改格式，一般就是颜色、加粗、下划线、分割线等，首先要在CSS渲染中找到这些主体的部分，然后，再修改里面的控制条件。

大括号前面这些表示的是这部分代码的起生效的部分，括号里面是格式，比如我们想要调整斜体、加粗、删除线等的格式，就要先找到这些地方，通过修改括号里面的内容来修改渲染后的格式。

• em, i {/斜体强调—-/ }

• hr { /水平线分割—-/}

• img{/图片设置/}

• del { /删除线/}

• a:link { / 未被访问的链接 /}

• a:visited {/ 已被访问的链接 /}

• a:hover {/ 鼠标指针移动到链接上 /}

• p { /段落设置/}

2.格式限定

• font-size: 14px; /字号em默认是相对16px的大小，也可直接用px作单位/

• line-height:1.8em; /行高，行间距，可用百分比，数值倍数，像素设置/

• word-spacing: 0; /字间距/

• font-family:/字间距/

• font-style: bold !important; /字重/

• letter-spacing: 0.1em; /字母间距/

• color:#CB0606 !important; /颜色/

• !important用来提高本行代码的优先级，如果前面已经设置了格式，这里加入!important，优先采用此格式。

3.边界限定

margin决定了元素的外边界， padding决定是内边界。元素各有四个边界，按照上、右、下、左的顺时针方式定义，

例如

margin:12px 10px 14px 0; 的四个属性分别是上、右、下、左

即分别是

•  margin-top:12px;

• margin-right:10px;

• margin-bottom:14px;

• margin-left:0;

当属性后只有三个值时：

• 第一个值是 padding-top 

• 第二个值是 padding-right 和 padding-left 的值（因为左右的值相同，所以可以写到一起）

• 第三个值是 padding-bottom 的值

只有两个值

• 第一个值是 padding-top 和 padding-bottom 的值

• 第二个值是 padding-right 和 padding-left 的值

只有一个值 ：那就是上下左右的值都相同。

4.全局设置

这一部分是全局设置，主要设置的是字号，行高，和字间距。

.markdown-here-wrapper { /Markdown Here 的全局配置，没有默认值/

font-size: 14px; /字号em默认是相对16px的大小，也可直接用px作单位/

line-height:28px; /行间距，可用百分比，数值倍数，像素设置，还包括text-indent缩进、letter-spacing字间距/

word-spacing: 1px; /字间距/

letter-spacing: 1px; /字母间距/

margin: 0 3px 14px 3px;

}

pre, code {/pre和code用于代码显示，code通常以元素框即代码块显示，pre则只保留代码中的空格与换行符/

font-size: 14px; /代码字体/

font-family: Avenir, “PingFangSC-Light”;

margin: auto 5px;

}

code { /标签通常只是把文本变成 等宽字体/

white-space:nowrap; /如何处理元素内空白行，回车or忽略,nowrap不换行，pre-wrap换行/

border: 1px solid #EAEAEA; /边框，用于设置边框属性，1px为边线尺寸，solid意为实线，#EAEAEA为边框颜色/

border-radius: 2px; /给 div 元素添加圆角的边框/

display: inline;/inline 表示按照内联模式显示，它会和周围的元素在一行。如果是 display:block, 它会和周围的元素不在一行，自己单独一行。/

}

pre { /严格限制为等宽字体格式/

font-size: 18px;

line-height: 1.4em; /行高/

display: block !important;

}

pre code {

white-space: pre;

overflow: auto;

border-radius: 3px;

padding: 1px 1px;

display: block !important;

}

5.加粗、斜体、水平分割线

这一部分呢主要是加粗、斜体的颜色设置，为了统一风格，和文章整体色调搭配，我们需要对斜体、删除线、等进行颜色调整，颜色代码采用的十六进制 (hex) 表示法进行定义，关于颜色代码我们放到后面说。推荐两个网站，常见的配色基本上都有了。在整理的过程中，将一些常见的颜色注释在了代码里面，基本上满足需求了。

①加粗

strong, b{ /strong 加粗，用粗体显示，也可以自定义自己的强调方式 /

color:#BB0206 !important;

font-size:15px !important;

}

这段的意思是加粗，颜色是 color:#BB0206， !important;是优先级的意思，加上这个强制优先生效。字号15px。

②斜体

斜体是通过这段代码来实现的，下面的代码中可以看到，只是规定了颜色，当然在实际中可以对斜体进行字号、对齐方式、缩进等设置。

em, i { /斜体/

color: #BB0206 !important;

}

③水平分割线

下面这些部分就是分割线的渲染代码，通过调整里面参数可以设置颜色、线型等效果。

hr { /分割线/

border: 0px dotted#BB0206; /双根分割线 粗细，solid颜色 #a5a5a5 /

border-top:1px dotted#BB0206 !important;/上分割线 粗细，颜色#ddd跟随主设定，solid类型-不写是跟随标题主色，替换了显示新颜色 /

border-bottom:0px dotted#BB0206 !important ; / 下分割线，粗细solid类型-不写是空心，颜色 /

margin:10px 0 10px 0 !important; /外边距/

}

重点说一下水平分割线的这段代码，我们看到里面是用border来定义的，如果用border是上下两根线，我们在border后面输入一个1PX，分割线其实显示的2px的效果，会有点粗，所以下面将border-top和border-bottom也放进来了，用哪个做分割都可以，选中一个后，把其他的数字改成0就可以了。

6.引用模块

border-left这个是引用的左边框，2个像素款，solid后面是竖线的颜色，如果想要改颜色把颜色代码替换掉。 padding内边距，根据上面说的，有两个值的时候，第一个值代表的意思是上下，第二个值是左右，也就效果是，上下内边距为0 ，左右空出10Px。

blockquote, q { /引用块设置/

border-left: 2px solid #BB0206;

padding: 0 10px;

color: #777;

quotes: none;

margin-left: 1em;

}

引用效果

引用

引用示例，什么值得买引用示例，什么值得买引用示例，什么值得买引用示例，什么值得买引用示例，什么值得买引用示例，什么值得买引用示例，什么值得买引用示例，什么值得买引用示例，什么值得买引用示例，什么值得买

7.段落设定

上面在整体设定的时候已经对行高、字间距做了定义，这里只是强制设定下字体，是否首行缩进，和段落的边距，如果你觉得过宽或者过窄可以从这里设定。

text-align:center !important; /标题位置,center,right,left/

letter-spacing: 3px !important;

• p {

  font-family: Avenir, “PingFangSC-Light” !important;

  padding: 0 0 !important;

  text-align: justify !important;

  font-size: 15px !important;

  text-indent: 0; /首行缩进/

  }

8.标题格式定义

标题设定这块是用的比较多的，我们把代码摘出来看，一共分成了h1, h2, h3, h4, h5, h6 ，常用的也就前三级标题，后面的标题呢，我们可以给他们赋予颜色或者特别的格式，用来当做多用法的强调，不过整篇文章的颜色不宜过多，颜色过多，会显得比较乱。

在注释这里我将几款常用的颜色也备注上了，可以根据需求设置，其中有几款是李笑来老师代码中的颜色

• /各级标题统一设置/

  h1, h2, h3, h4, h5, h6 {

  margin: 7px 0 7px 0; /段前后、左右缩进值/

  padding:5px 0 5px 0;/内边距,控制和黑线的距离第一个数控制和上划线的距离.上右下左,留白距离、缩进值/

  font-style: bold !important;

  color: #BB0206 !important;

  }

关于Markdown here CSS渲染的经验分享——让你的文章排版更优美，可读性更高

整体设置里面，对边界、字体、颜色、还有标题对齐方式，用的最多的就是颜色和标题对齐方式，从备注中可以看出，有三种对齐方式，做对齐，右对齐和居中，用的较多的就是居中和左对齐，我们这里可以调整所有标题的对齐方式，还有 记住这段代码text-align:left !important; /标题位置,center,right,left/，后面设置每个标题的对齐方式会用到。

9.标题独立设置

上面设置了所有标题的统一格式，这里来到每个标题的独立设置。

关于Markdown here CSS渲染的经验分享——让你的文章排版更优美，可读性更高

从代码上看，一级标题设置的比较多，设置了字体大小，颜色，和对齐方式，这段代码在这里又出现了，虽然上面我们了所有代码的对齐方式，一级标题我们再使用的时候有时候会居中对齐，有时候会左对齐在这里设置。下面border开头的三行，是标题带的分割线的设置。

• h1 {

  font-size:16px !important;

  color:#BB0206 !important;/颜色/

  text-align:center !important; /标题位置,center,right,left/

  font-weight:bolder !important; /字重bold加粗 、 normal正常、bolder更粗/

  letter-spacing: 3px !important;

  border:2px solid #BB0206 !important; / 边框样式 /

  }

  h2 {

  font-size:16px !important;

  margin-top:3px 0 !important;

  padding: 3px 15px !important;

  text-align:center !important; /标题位置,center,right,left/

  background-color: #BB0206 !important;

  color: white !important; /颜色/

  font-weight:bolder !important; /字重bold加粗 、 normal正常、bolder更粗/

  letter-spacing: 3px !important;

  font-variant: normal !important;/normal 、small-caps/

  border-top:0 solid#BB0206 !important;/ 粗细，颜色#ddd跟随主设定，solid类型-不写是跟随标题主色，替换了显示新颜色 /

  border-bottom:0 solid#BB0206 !important ; / 粗细solid类型-不写是空心，颜色 /

  }

  h3 {

  font-size:15px !important;

  color:#BB0206 !important;

  padding: 5px 0 !important;

  text-align:left !important; /标题位置,center,right,left/

  width:auto !important;

  padding:0 auto !important;

  }

为了方便写作，这里我们对一级标题做了个带分割线的效果。其实用的是元素的上下边框功能。第一句是上边框，意思就是横线会在文字的上方出现。

border-top:1px solid#BF360C !important;/* 粗细，颜色#ddd跟随主设定，solid类型-不写是跟随标题主色，替换了显示新颜色 */

关于Markdown here CSS渲染的经验分享——让你的文章排版更优美，可读性更高

第二句是下边框，我们可以看到这里数字是0，也就是下边框是关掉的，如果改成1px，则标题的上下都会有横线出现。这个值同时决定了横线的粗细。

第三句呢是用来控制标题文字到横线的距离，这里为了方便修改写出了四个值，上面说到边距的定义方式是从上面开始顺时针，分别是上边距、右边距、下边距和左边距，现在是用上横线的状态，padding：20PX，说面文字到上横线，即上边框的距离是20px，但是如果我们要是用下横线了，就需要把第一个值改为0，第三个值改成某个数值。

• border-bottom:0 solid#BF360C !important ; / 粗细solid类型-不写是空心，颜色 /

• padding:20px 0 0 0 !important;/内边距,控制标题和间隔线的距离第一个数，控制上划线的距离。上右下左，留白距离、缩进值/

同样的二级标题和三级标题也是同理修改，如果不需要带横线直接删掉就可以了。

10.颜色代码

在这些模块里面，我们将这些代码比如，紫色#510E79、笑来绿色#009688、黑色#545454、亮红#FA5151、暗红#CB0606、金色#f79646、笑来金色#BF360C 、深蓝#2e6e9e、灰色BDBDBD、备注灰色#a5a5a5进行替换，渲染后颜色就会变化

推荐两个网址：第一个是w3school可点击访问,这个是专业的CSS代码网站，很多语言定义是从这里查的，颜色部分这里都有，可以直接到这里复制。

关于Markdown here CSS渲染的经验分享——让你的文章排版更优美，可读性更高

第二个是一个配色网站，这里输入某个颜色，会出现相应的配色，这样的话可以很快完成相应颜色的调整。

关于Markdown here CSS渲染的经验分享——让你的文章排版更优美，可读性更高

整个代码编辑完了之后呢，我们复制粘贴到Markdown here后台。插件会自动保存并同步已做好的代码设置。

关于Markdown here CSS渲染的经验分享——让你的文章排版更优美，可读性更高

也可以进行效果预览，如果效果不理想，在上面再进行微调。

关于Markdown here CSS渲染的经验分享——让你的文章排版更优美，可读性更高

11.字体属性

font-style:bolder !important; /字体风格normal正常,italic斜体,oblique文本倾斜/

font-size:16px !important;/字体大小/

font-weight:bolder !important; /字重,bold加粗,normal正常,bolder更粗/

font-variant: normal !important;/normal正常,ismall-caps小写锁定即不显示小写/

12.超链接设置

超链接部分在这段代码进行设置，可以设置渲染后超链接的颜色，字体等格式，只要在{}内添加条件格式，渲染后就会有相应的效果。

a:link { / 未被访问的链接 /

color:#009688 !important; /颜色/

font-style:normal !important; /字重/

}

12.背景色效果

①背景色：

这个是给模块或者元素添加背景色，比如本文中用到的，字体颜色就是用的白色，背景色用的红色。

背景色效果，纵笔浮生测试纵笔浮生测试纵笔浮生测试纵笔浮生测试纵笔浮生测试纵笔浮生测试纵笔浮生测试纵笔浮生测试纵笔浮生测试纵笔浮生测试纵笔浮生测试纵笔浮生测试纵笔浮生测试纵笔浮生测试纵笔浮生测试纵笔浮生测试

background-color: #BB0206 !important;/背景色/

13.有序列表、无序列表设置

对于一写文章，需要写产品特点，或者参数，可以用到有序列表、无序列表，这样可以使文章看起来更有层次感，很多人使用引用效果，但是感觉列表效果更好一些。

有序列表

1. 有序列表演示

2. 有序列表演示

3. 有序列表演示

4. 有序列表演示

无序列表

• 无序列表演示

• 无序列表演示

• 无序列表演示

  下面是相关代码：

  列表的格式设置，只需要修改标注出来的这几个部分就可以了。

table, pre, dl, blockquote, q, ul, ol { /表格、预格式化、定义列表、块引用、短引用、无序列表、有序列表统一设置/

margin: 10px 5px;

}

ul, ol { /无序、有序列表通用设置/

padding-left: 15px;

font-family: Avenir, “PingFangSC-Light” !important;

text-align: justify !important;

font-size: 14px !important;

}

li { /列表中项目的设置/

margin: 10px;

}

li p { /列表中项目的段落的设置/

margin: 10px 0 !important;

}

ul ul, ul ol, ol ul, ol ol {/有序列表、无序列表的统一设置/

margin: 0;

padding-left: 10px;

}

ul { /无序列表的前缀，circle,square,好多种,同样有序列表ol也可以设置不同的标记/

list-style-type: circle;

}

dl { /自定义列表的设置/

padding: 0;

}

dl dt { /自定义列表项的设置/

font-size: 14px;

font-weight: bold; /字重/

font-style: italic; /字形/

}

dl dd {

margin: 0 0 10px;

padding: 0 10px;

}

14.border边框效果

元素各有四个边界，按照上、右、下、左的顺时针方式定义，

例如，border:12px 10px 14px 0; 的四个属性分别是上、右、下、左，即分别是 ：

border-top:12px;

border-right:10px;

border-bottom:14px;

border-left:0;

当属性后只有三个值时：

• 第一个值是 border-top 

• 第二个值是 border-right 和 padding-left 的值（因为左右的值相同，所以可以写到一起）

• 第三个值是border-bottom 的值

只有两个值

• 第一个值是border-top 和border-bottom 的值

• 第二个值是 border-right 和border-left 的值

border控制的是边框的格式，常用的有dotted点状边框、solid实线、double定义双线。其他类型可以根据下面border原始表定义。

举例说明

四周边框

border:2px solid #BB0206 !important; / 边框样式四条边框粗细2px,solid实线颜色#BB0206 /

边框效果演示

边框效果演示

上下边框

border:2px 0 2px 0 solid #BB0206 !important; / 边框样式 /

左右边框

border:0 2px 0 2px solid #BB0206 !important; / 边框样式 /

左边框

只显示做边框，会在标题前留一道竖线，不少做自媒体的喜欢这样排版，配合文字左对齐，还是比较好看的。

border:0 0 0 2px solid #BB0206 !important; / 边框样式 /

下边框（下划线）

很多朋友喜欢在标题使用下划线的效果，可以通过显示下边框，隐藏其他边框来实现。

border:0 0 2px 0 solid #BB0206 !important; / 边框样式 /

可以通过外边距margin和内边距padding控制，四个数值分别也是控制的上、右、下、左四个方向的距离。margin决定的是外部，也就是边框最大的距离。 padding可以在margin决定的范围内进行距离控制。

padding:0 0 8px 0 !important;/内边距,控制标题和间隔线的距离第一个数，控制上划线的距离。上右下左，留白距离、缩进值/

margin: 15px auto !important;/段前、缩进值/

上边框（分割线）

可以使用上边框来代替分隔线，比如在标题上加入上边框，这样渲染之后标题上面会带有一条线，这样每个标题前面都会带一条分隔线。

border-top:1px solid#BF360C !important;

border-bottom:0 solid#BF360C !important;

padding:20px 0 0 0 !important;/通过内边距的上边距来控制和字体元素的距离/

border 可能的值

15.文本效果

①letter-spacing字符间距(设置元素的字母间距)

letter-spacing:2px

②word-spacing单词间距（单词之间或者汉字之间的距离）

word-spacing:2px; /控制字间距，单词之间或者汉字之间的距离/

③行高

line-height:1.8em; /行间距，可用百分比，数值倍数，像素设置/

④水平对齐方式

text-align:center /center居中,left左对齐,right右对齐，justify两端文字对齐/

如果是两端对齐，容易把标点符号，挤到下一行，这样的话就需要再加一条限制：

text-align:justify;

text-justify:auto;

⑤首行缩进

对于喜欢开头空两格的，可以设置缩进值，比如某一部分模块的的字体是18px，可以设置缩进两个18px或者缩进三个，比如缩进36或者缩进54，达到首行缩进的效果。

text-indent:36px;

⑥text-shadow字体阴影

下面这个语法是给字体添加阴影效果的，可以在标题、段落、引用等位置插入这条代码。

text-shadow:1px 1px opacity #545454 !important; / 字体阴影 /

16.表格设置

表格设置最好是使用默认的设置，只需要调换一下背景色，表头背景色就可以了，默认的效果调整的已经

table { /表格元素的设置/

padding: 0;

border-collapse: collapse;

border-spacing: 0;

font-size: 1em;

font: inherit;

border: 0;

margin: 0 auto;

}

tbody { /表格主题的设置/

margin: 0;

padding: 0;

border: 0;

}

table tr {

border: 0;

border-top: 1px solid #CCC;

background-color: white;

margin: 0;

padding: 0;

}

table tr:nth-child(2n) {

background-color: #F8F8F8; /背景色/

}

table tr th, table tr td { /tr为行标签、th为表头单元格标签、td为普通单元格标签/

font-size: 16px;

border: 1px solid #CCC;

margin: 0;

padding: 5px 10px;

}

table tr th {

font-weight: bold;

color: #eee;

border: 1px solid #BB0206; /表头边框色/

background-color: #BB0206; /表头背景色/

}

总结

好了今天的分享到这里吧，非码农、非专业人士，硬着脑袋，只为了摆平排版问题，又重新捋了一次。果然这东西写多了容易秃头,如果有问题请指正讨论，感谢支持，希望大家的排版能力都有个质的飞越~~

如果喜欢记得点赞哦，下一篇详细科普typora的图床配置和主题代码的经验分享，如果喜欢我的东西，点个关注啦。