Markdown⾃定义CSS样式
前⾔
当我第⼀次接触到Markdown时，我就深深爱上了它。这简洁的界⾯，编程式的书写都令我爱不释⼿，最重要的是，还能够⽀持⾃定义html、css。
⾃定义CSS样式
说到Markdown，就不得不提及Typora这个软件，本例⼦即是在此软件的环境下完成。想要⾃定义CSS，⾸先得有⼀定的htm，css基础。
1.寻Typora的主题CSS⽂件
确认typora软件⽤的主题
⽂件 -> 外观 -> 打开主题⽂件 -> 到对应的css⽂件，因为我⽤的主题是Night，所以我应该night.css
2.新建主题名.user.css ⽂件
新建⼀个night.user.css⽂件，在⾥⾯编写⾃⼰的css，从上图中可看到我已经创建好了，记住，⽤的什么主题，就新建对应的css⽂件（主题名.user.css)。在编写⽂章时，主题名.user.css⽂件中的样式优先级会更⾼。
⽐如在⽂件中添加⼀⾏css：
效果如下：// 全局⽂字为绿⾊span { color : green ;}
div中的div居中1
2
3
4
图⽚居中且添加图注
当我们在Typora上插⼊图⽚，图⽚是⾃动居中的，这是Typora内置的设置，但如果查阅⽂章的源码，发现其实并没做处理，如果直接复制粘贴源代码到其他平台发布，图⽚是默认左对齐。
如何使图⽚居中？
Markdown⽀持内嵌html、css代码。只需要会⼀点这⽅⾯的知识，就能够实现居中，甚⾄可以充分⾃定义⽂章的样式。
在Markdown中插⼊图⽚的默认格式如下：
提取图⽚链接，放到以下代码中，将代码直接粘贴到编辑区，即可实现图⽚居中：
如果想添加图注，可以这样写：
⽐如你看上⾯的图⽚都是向左对齐（除了分辨率⾼占满全屏的图⽚），引⽤这个⽅式之后就居中了↓
我居中了！
如果还不满意，⾃定义这些css吧。
结合讨论
通过以上两个实验，可以知道能够精细化定义css样式，我们在⽂本中添加html代码，⾃定义类选择器或ID选择器，然后在全局css⽂件中编写选择器样式，即可像web⼀样做出很多优美的定制化样式。
1<div align ="center "> <img src ="图⽚链接"></div >
1
2
3<div align ="center "> <img src ="图⽚链接"> <p > 图注 </p ></div >
1
2
3
4
5
6
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论