markdown的css样式,这些是我自己配置的,感觉可以的话你可以添加下,不适合自己的话可以仿照第二种自己写个比较好的css样式。

第一种

/* RESET
=============================================================================*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
} /* 设置滚动条的样式 */
::-webkit-scrollbar {
width:12px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
-webkit-box-shadow:inset006pxrgba(0,0,0,0.3);
border-radius:10px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
border-radius:10px;
background:rgba(0,0,0,0.1);
-webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background:rgba(255,0,0,0.4);
} /* BODY
=============================================================================*/ body {
font-family: Helvetica, arial, freesans, clean, sans-serif;
font-size: 14px;
line-height: 1.6;
color: #333;
background-color: #FDF6E3;
padding: 20px;
max-width: 960px;
margin: 0 auto;
} body>*:first-child {
margin-top: 0 !important;
} body>*:last-child {
margin-bottom: 0 !important;
} /* BLOCKS
=============================================================================*/ p, blockquote, ul, ol, dl, table, pre {
margin: 15px 0;
} /* HEADERS
=============================================================================*/ h1, h2, h3, h4, h5, h6 {
margin: 20px 0 10px;
padding: 0;
font-weight: bold;
-webkit-font-smoothing: antialiased;
} h1 tt, h1 code, h2 tt, h2 code, h3 tt, h3 code, h4 tt, h4 code, h5 tt, h5 code, h6 tt, h6 code {
font-size: inherit;
}
h4,
h5,
h6 {
color: #859900;
}
h1 {
font-size: 2.8em;
color: #d33682;
}
h2 {
font-size: 2.4em;
color: #9B31EA; }
h3 {
font-size: 1.8em;
color: #338000;
}
h4 {
font-size: 1.4em;
}
h5 {
font-size: 1.3em;
}
h6 {
font-size: 1.15em;
} body>h2:first-child, body>h1:first-child, body>h1:first-child+h2, body>h3:first-child, body>h4:first-child, body>h5:first-child, body>h6:first-child {
margin-top: 0;
padding-top: 0;
} a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 {
margin-top: 0;
padding-top: 0;
} h1+p, h2+p, h3+p, h4+p, h5+p, h6+p {
margin-top: 10px;
} /* LINKS
=============================================================================*/ a {
color: #b58900;
text-decoration: none;
}
a:focus {
outline: thin dotted;
}
a:active,
a:hover {
outline: 0;
}
a:hover {
color: #cb4b16;
text-decoration: underline;
}
a:visited {
color: #cb4b16;
} /* LISTS
=============================================================================*/ ul, ol {
padding-left: 30px;
} ul li > :first-child,
ol li > :first-child,
ul li ul:first-of-type,
ol li ol:first-of-type,
ul li ol:first-of-type,
ol li ul:first-of-type {
margin-top: 0px;
} ul ul, ul ol, ol ol, ol ul {
margin-bottom: 0;
} dl {
padding: 0;
} dl dt {
font-size: 14px;
font-weight: bold;
font-style: italic;
padding: 0;
margin: 15px 0 5px;
} dl dt:first-child {
padding: 0;
} dl dt>:first-child {
margin-top: 0px;
} dl dt>:last-child {
margin-bottom: 0px;
} dl dd {
margin: 0 0 15px;
padding: 0 15px;
} dl dd>:first-child {
margin-top: 0px;
} dl dd>:last-child {
margin-bottom: 0px;
} /* CODE
=============================================================================*/ pre, code, tt {
font-size: 12px;
font-family: Consolas, "Liberation Mono", Courier, monospace;
} code, tt {
margin: 0 0px;
padding: 0px 0px;
white-space: nowrap;
border: 1px solid #eaeaea;
background-color: #f8f8f8;
border-radius: 3px;
} pre>code {
margin: 0;
padding: 0;
white-space: pre;
color: #338000;
border: none;
background: transparent; } pre {
background-color: #f8f8f8;
border: 1px solid #ccc;
font-size: 13px;
line-height: 19px;
overflow: auto;
padding: 6px 10px;
border-radius: 3px;
} pre code, pre tt {
background-color: transparent;
border: none;
}
/* QUOTES
=============================================================================*/ blockquote {
border-left: 4px solid #DDD;
padding: 0 15px;
color: #777;
} blockquote>:first-child {
margin-top: 0px;
} blockquote>:last-child {
margin-bottom: 0px;
} /* HORIZONTAL RULES
=============================================================================*/ hr {
clear: both;
margin: 15px 0;
height: 0px;
overflow: hidden;
border: none;
background: transparent;
border-bottom: 4px solid #ddd;
padding: 0;
} /* TABLES
=============================================================================*/
table{
margin: 0 auto;
}
table th {
font-weight: bold;
} table th, table td {
border: 1px solid #ccc;
padding: 6px 13px;
} table tr {
border-top: 1px solid #ccc;
background-color: #fff;
} table tr:nth-child(2n) {
background-color: #f8f8f8;
} /* IMAGES
=============================================================================*/ img {
max-width: 100%
}
/* P
=============================================================================*/
p{
font-size:1.2em;
} /*目录形成的范围*/
#outline-list {
height: 325px;
position: fixed;
overflow-y:scroll;
overflow-x:hidden;
bottom: 80px;
right: 15px;
width: 220px;
}

第二种


/* 主页面设置*/
*{
font-size: 16px;
font-family: 幼圆;
}
body{
background-color: #FDF6E3;
line-height: 1.5em;
max-width: 960px;
margin: 0 auto;
}
/* !important的作用是提高指定样式规则的应用优先权。*/
body>*:first-child {
margin-top: 0 !important;
} body>*:last-child {
margin-bottom: 0 !important;
}
/* <tt> 标签与 <code> 和 <kbd> 标签一样,<tt> 标签和必
需的 </tt> 结束标签告诉浏览器,要把其中包含的文本显示
为等宽字体。*/ /* 标题 h1~h2*/
/* ====================================================*/
h1 {
font-size: 2.8em;
color: #d33682;
margin: 0.75em;
}
h2 {
font-size: 2.4em;
color: #9B31EA;
margin: 0.75em; }
h3 {
font-size: 1.8em;
color: #338000;
margin: 0.75em;
}
h4 {
font-size: 1.4em;
margin: 0.75em;
} /* p,a,,hr,list,table*/ /* ==================================================*/
/*<blockquote> 标签定义摘自另一个源的块引用。浏览器
通常会对 <blockquote> 元素进行缩进。
*/
blockquote {
font-style: italic;
border-left: 5px solid;
margin-left: 2em;
padding-left: 1em;
} /* p*/
p {
margin-bottom: 1.5em;
}
/* hr */
hr {
clear: both;
margin: 15px 0;
height: 0px;
overflow: hidden;
border: none;
background: transparent;
border-bottom: 4px solid #ddd;
padding: 0;
}
/* link*/ a {
color: #b58900;
text-decoration: none;
}
a:focus {
outline: thin dotted;
}
a:active,a:hover {
outline: 0;
}
a:hover {
color: #cb4b16;
text-decoration: underline;
}
a:visited {
color: #cb4b16;
} /* list */ ul,
ol {
margin: 0 0 1.5em 1.5em;
}
ol li {
list-style-type: decimal;
list-style-position: outside;
}
ul li {
list-style-type: disc;
list-style-position: outside;
} /* tables */ table thead, table tr {
border-top-width: 1px;
border-top-style: solid;
border-top-color: rgb(235, 242, 224);
}
table {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: rgb(235, 242, 224);
}
thead,table td:nth-child(1){
font-weight:bold;
color: #7034ca;
}
/* Padding and font style */
table td, table th {
padding: 5px 10px;
font-size: 12px;
font-family: Verdana;
color: rgb(149, 170, 109);
} /* Alternating background colors */
table tr:nth-child(even) {
background: rgb(230, 238, 214)
}
table tr:nth-child(odd) {
background: #FFF
} /* code */
/* =======================================*/
pre{
border-radius: .5em;
border: .3em solid hsl(0, 0%, 33%);
box-shadow: 1px 1px 0.5em black inset;
margin: .5em 0;
overflow: auto;
padding: 1em;
background: hsl(0, 0%, 8%);
} pre, code, tt {
font-size: 12px;
font-family: Consolas, "Liberation Mono", Courier, monospace;
} code, tt {
margin: 0 0px;
padding: 0px 0px;
white-space: nowrap;
border: 1px solid #eaeaea;
background-color: #f8f8f8;
border-radius: 3px;
} pre>code {
margin: 0;
padding: 0;
white-space: pre;
color: rgba(203, 75, 22, 0.86);
font-size: 16px;
border: none;
background: transparent; } pre code, pre tt {
background-color: transparent;
border: none;
} /*目录形成的范围*/
#outline-list {
height: 325px;
position: fixed;
overflow-y:scroll;
overflow-x:hidden;
bottom: 80px;
right: 15px;
width: 220px;
}
/* 设置滚动条的样式 */
::-webkit-scrollbar {
width:12px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
-webkit-box-shadow:inset006pxrgba(0,0,0,0.3);
border-radius:10px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
border-radius:10px;
background:rgba(0,0,0,0.1);
-webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background:rgba(255,0,0,0.4);
}

第三种

  就是在第二中的基础上加代码的语法着色,代码在我的另一片博客中地址为http://www.cnblogs.com/yangliguo/p/7801116.html

或者http://blog.csdn.net/liveor_die/article/details/78472600

markdown的css样式(自己写的)的更多相关文章

  1. 嵌入式css样式,写在当前的文件中

    现在有一任务,把下面的“超酷的互联网”.“服务及时贴心”.“有趣易学”这三个短词文字字号修改为18px. 如果用内联式css样式的方法进行设置将是一件很头疼的事情(为每一个<span>标签 ...

  2. 【blog】Markdown的css样式推荐

    参考博客 分享一款Markdown的css样式:https://www.cnblogs.com/zhangjk1993/p/5442676.html 美化Markdown输出的HTML文档:http: ...

  3. 外部式css样式,写在单独的一个文件中

    外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在<head>内(不是在<style>标签内)使用<l ...

  4. 杨韬的Markdown自定义CSS样式

    效果 样例 杨韬的Python/Jupyter学习笔记 Markdown例子链接页面 代码 /*主标题*/ #cb_post_title_url{ font-size: 31px; } /*h1,h2 ...

  5. 分享一款Markdown的css样式

    使用 本样式在这个样式的基础上做了一些修改, 主要是对于表格和代码块以及一些细节的修改. 主要目的是用在chrome的扩展 Markdown Preview Plus中, 替换其内置的样式. 由于 M ...

  6. Markdown的css样式源码

    http://www.cnblogs.com/zhangjk1993/p/5442676.html https://github.com/zhangjikai/markdown-css https:/ ...

  7. 内联式css样式,直接写在现有的HTML标签中

    CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌入式和外部式三种.这一小节先来讲解内联式. 内联式css样式表就是把css代码直接写在现有的HTML标签中 ...

  8. 将markdown文档使用gulp转换为HTML【附带两套css样式】

    将markdown文档使用gulp转换为HTML[附带两套css样式] 今天遇到一个需求,即将Markdown文档转为为HTML在网页展示,身为一名程序员,能用代码解决的问题,手动打一遍无疑是可耻的. ...

  9. CSS样式写在JSP代码中的几种方法

    1.行内样式. 可以直接把css代码写在现有的HTML标签元素的开始标签里面,并且css样式代码要写在style=" "双引号中才可以, 如: <p style=" ...

随机推荐

  1. Python Django 配置QQ邮箱发送邮件

    一.实验环境 Python2.7 + Django1.10.0 二.获取QQ邮箱授权码 1.什么是授权码? 授权码是QQ邮箱推出的,用于登录第三方客户端的专用密码. 适用于登录以下服务:POP3/IM ...

  2. 11.14 redis

    2018-11-14 10:07:39 购物车有思路,用django中redis来做!!!具体思路参考下面笔记 回学校后,把笔记里面面试题都认真整理一下!!!!!! 越努力,越幸运!永远不要高估自己! ...

  3. Oracle数据库实例的启动及关闭

    要启动和关闭数据库,必须要以具有Oracle 管理员权限的用户登陆,通常也就是以具有SYSDBA权限的用户登陆.一般我们常用SYS用户以SYSDBA连接来启动和关闭数据库.下面介绍Oracle数据库几 ...

  4. 设置头像、商品、轮播图为背景图时需要的css

    background-repeat: no-repeat;background-size: cover;background-position: center center;

  5. MongoDB数据库去重

    查询: db.patents_texts.aggregate([ { $group:{_id:{Patent_num:'$Patent_num',Patent_name:'$Patent_name'} ...

  6. css 子盒子上下居中 文字溢出省略号

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. [Day15]常用API(Object类、String类)

    1.Java的API(API: Application(应用) Programming(程序) Interface(接口)) Java API是JDK中提供使用的类,类已经将底层代码进行封装 在JDK ...

  8. post方式接口测试(一)_新建测试用例

    第一种方式:拷贝别人的 第二种方式:自己创建 二.打开浏览器(此处chrome),F12打开开发模式,输入网址登录,此时可获取到登录的 Request URL 二.打开postman,进入自己的Col ...

  9. python 控制语句基础---->代码块:以为冒号作为开始,用缩进来划分作用域,代表一个整体,是一个代码块,一个文件(模块)也称为一个代码块 | 作用域:作用的范围

    # ### 代码块:以为冒号作为开始,用缩进来划分作用域,代表一个整体,是一个代码块,一个文件(模块)也称为一个代码块 # ### 作用域:作用的范围 print(11) print(12) prin ...

  10. 求职季全攻略:优秀的UX设计师作品集该如何准备?

    这是一篇关于如何制作杰出的UX设计师作品集,看了下文,我们在2019年冲冲冲~制作出自己的作品集! 转自墨刀公众号. Paul Rand 曾经说:“设计很简单,因而也复杂.” 也许你已经掌握了所有的U ...