Markdown语法对应的CSS实现


林二汶-只怕不够时间看你白头

这篇文章是Markdown语法对应的HTML标签实现的延续,一些格式排版除了用HTML标签实现外,也可以使用CSS实现。

CSS的三种写法

内联式

当特殊的样式需要应用到个别元素时,就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

inline css
1
<p style="color: red; margin-left: 20px">This is a paragraph</p>

内部式

当单个文件需要特别样式时,就可以使用内部样式表。可以在 head 部分通过 <style> 标签定义内部样式表。

internal css
1
2
3
4
5
6
<head>
<style type="text/css">
body {color: red}
p {margin-left: 20px}
</style>
</head>

外部式

当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。

external css
1
2
3
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

内联式CSS实现markdown语法

斜体 Italic

css
1
2
<span style="font-style:italic">这是斜体3</span>
<span style="font-style:oblique">这是斜体4</span>

这是斜体3
这是斜体4

markdown
1
2
*这是斜体1*
_这是斜体2_

这是斜体1
这是斜体2

粗体 Bold

css
1
<span style="font-weight:bold">这是粗体</span>

这是粗体

markdown
1
2
**这是粗体1**
__这是粗体2__

这是粗体1
这是粗体2

删除线 Strikethrough

css
1
<span style="text-decoration:line-through">我带删除线</span>

我带删除线

GFM
1
~~This is strikethrough,only for GFM.~~

This is strikethrough,only for GFM.

下划线 Underline

css
1
<span style="text-decoration:underline">我带下划线</span>

我带下划线

上划线 Overline

css
1
<span style="text-decoration:overline">我带上划线</span>

我带上划线

字体 Font

css
1
2
3
4
5
6
7
<span style="font-style:italic;font-variant:small-caps;font-weight:bold;font-size:16px;line-height:100%;font-family:'Microsoft YaHei'">Hello,微软雅黑体</span>
<span style="font-size:1em;font-family:SimSun">Hello,宋体</span>
<span style="font-size:16px;font-family:KaiTi">Hello,楷体</span>
<span style="font-size:2em;font-family:SimHei">Hello,黑体</span>
<span style="font: 12px "宋体","Arial Narrow",HELVETICA;">Hello,腾讯字体格式。</span>
<span style="font: 12px/1.5 tahoma,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif;">Hello,淘宝字体格式。</span>
<span style="font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;">Hello,小米字体格式。</span>

Hello,微软雅黑体
Hello,宋体
Hello,楷体
Hello,黑体
Hello,腾讯字体格式。
Hello,淘宝字体格式。
Hello,小米字体格式。

文字阴影

CSS3才支持的特性

css
1
<span style="text-shadow: 5px 5px 5px #00FF00;">文字阴影</span>

文字阴影

Reference:

  1. w3scholl HTML CSS
  2. 常用CSS缩写语法总结
  3. CSS,font-family,好看常用的中文字体
  4. 中文字体属性值转换Unicode