Markdown.css样式简介

2023-12-14css教程
273

Markdown.css 是一套基于 CSS 样式的,用于美化 Markdown 统一输出样式的工具。下面,我将为你详细讲解 Markdown.css 样式的使用。

一、如何引入 Markdown.css 样式

欲使用 Markdown.css 样式,需先进行引入。可以到 GitHub 下载或使用 CDN 引入样式表:

<link href="https://cdn.jsdelivr.net/npm/markdown-css/markdown.min.css" rel="stylesheet">

二、Markdown.css 的样式效果

Markdown.css 样式提供了多种不同的样式效果,包括标题、字体、颜色、列表、链接等。下面具体介绍其中的几种样式效果:

1. 标题样式

Markdown.css 样式提供了 6 级标题,从 h1h6,分别使用 .h1.h6 样式来控制。

# h1
## h2
### h3
#### h4
##### h5
###### h6

对应的样式效果如下:

h1

h2

h3

h4

h5
h6

2. 列表样式

Markdown.css 样式提供了多种列表样式。如无序列表使用 .ul 样式,有序列表使用 .ol 样式,带复选框的列表使用 .task-list 样式。

- 无序列表1
- 无序列表2

1. 有序列表1
2. 有序列表2

- [x] 复选框1
- [ ] 复选框2

对应的样式效果如下:

  • 无序列表1
  • 无序列表2

  • 有序列表1

  • 有序列表2

  • [x] 复选框1

  • [ ] 复选框2

3. 链接样式

Markdown.css 样式提供了链接样式,使用 .link 样式控制链接的颜色。

这是一个 [超链接](https://www.baidu.com)。

对应的样式效果如下:

这是一个 超链接。

总结

以上就是 Markdown.css 样式的简单介绍,通过以上示例,你能大致了解怎么使用 Markdown.css 样式控制 Markdown 文件的样式。如果想详细了解 Markdown.css 样式的其他特性,可以去 GitHub 查看官方文档哦!

The End

相关推荐

背景图片自适应浏览器分辨率大小并自动拉伸全屏代码
下面是“背景图片自适应浏览器分辨率大小并自动拉伸全屏”的完整攻略。...
2023-12-15 css教程
367

简单但很实用的5个css属性
下面是详细讲解“简单但很实用的5个CSS属性”的完整攻略:...
2023-12-15 css教程
34

我的css框架——base.css(重设浏览器默认样式)
第一步:创建项目文件夹...
2023-12-15 css教程
195

兼做美工之导航条制作过程分享
以下是兼做美工之导航条制作过程分享的完整攻略:...
2023-12-15 css教程
15

JS 控制CSS样式表
JS 控制 CSS 样式表的方式主要有两种:通过修改样式属性来修改元素样式,以及通过切换 CSS 类名来切换元素样式。下面分别给出具体的步骤和示例说明。...
2023-12-15 css教程
25

Html5实现首页动态视频背景的示例代码
实现首页动态视频背景,可以使用HTML5的video标签,下面是具体的示例代码和操作步骤:...
2023-12-15 css教程
397