这篇文章是Markdown语法对应的HTML标签实现的延续,一些格式排版除了用HTML标签实现外,也可以使用CSS实现。
CSS的三种写法
内联式
当特殊的样式需要应用到个别元素时,就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
1 | <p style="color: red; margin-left: 20px">This is a paragraph</p> |
内部式
当单个文件需要特别样式时,就可以使用内部样式表。可以在 head 部分通过 <style>
标签定义内部样式表。
1 | <head> |
外部式
当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。
1 | <head> |
内联式CSS实现markdown语法
斜体 Italic
1 | <span style="font-style:italic">这是斜体3</span> |
这是斜体3
这是斜体4
1 | *这是斜体1* |
这是斜体1
这是斜体2
粗体 Bold
1 | <span style="font-weight:bold">这是粗体</span> |
这是粗体
1 | **这是粗体1** |
这是粗体1
这是粗体2
删除线 Strikethrough
1 | <span style="text-decoration:line-through">我带删除线</span> |
我带删除线
1 | ~~This is strikethrough,only for GFM.~~ |
This is strikethrough,only for GFM.
下划线 Underline
1 | <span style="text-decoration:underline">我带下划线</span> |
我带下划线
上划线 Overline
1 | <span style="text-decoration:overline">我带上划线</span> |
我带上划线
字体 Font
1 | <span style="font-style:italic;font-variant:small-caps;font-weight:bold;font-size:16px;line-height:100%;font-family:'Microsoft YaHei'">Hello,微软雅黑体</span> |
Hello,微软雅黑体
Hello,宋体
Hello,楷体
Hello,黑体
<span style=”font: 12px “宋体”,”Arial Narrow”,HELVETICA;”>Hello,腾讯字体格式。
Hello,淘宝字体格式。
<span style=”font-family: “Arial”,”Microsoft YaHei”,”黑体”,”宋体”,sans-serif;”>Hello,小米字体格式。
文字阴影
CSS3才支持的特性
1 | <span style="text-shadow: 5px 5px 5px #00FF00;">文字阴影</span> |
文字阴影
Reference: