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. Spring Security默认的用户登录表单 页面源代码

    Spring Security默认的用户登录表单 页面源代码 <html><head><title>Login Page</title></hea ...

  2. java个人博客源码

    初入博客园,请各位多关照,来而不往非礼也. 如需要源码以及学习内容,qq:1397617269,我看到就回你们资源. 直接给链接: 链接:https://pan.baidu.com/s/1S_awtg ...

  3. react表单的一些小例子

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

  4. pandas读取文件报错

    path = 'D:/Postgraduate/Python/Machine Learning/小象学院机器学习/08.回归实践/8.Regression代码/8.Regression/8.Adver ...

  5. js中级小知识5

    元素的属性 div.attributes是所有标签属性构成的数据集合 div.classList是所有class名构成的数组集合 在classList的原型链上可以看到add()和remove() 1 ...

  6. 51nod图论题解(4级,5级算法题)

    51nod图论题解(4级,5级算法题) 1805 小树 基准时间限制:1.5 秒 空间限制:131072 KB 分值: 80 难度:5级算法题 她发现她的树的点上都有一个标号(从1到n),这些树都在空 ...

  7. The way to unwind the stack on Linux EABI

    I. probe the stack frame structure The original idea is to unwind the function call stack according ...

  8. ORACLE中关于使用between在MyBatis中取不同的区间值和取反

    最近在项目中使用between取不同的区间值问题,由于区间跨度大,而且区间多,又是前端传过来的参数,所以使用in和exists比较麻烦.然后就考虑使用between.现将使用方法记录一下. 假如表有个 ...

  9. 271A

    #include <stdio.h> #include <stdlib.h> #include <string.h> #include <stdbool.h& ...

  10. linux 进程间通信——内存共享映射mmap和munmap

    IPC三种通信机制是指:信号量.共享内存.消息队列,   信号量:通过操作系统中的PV操作来实现: 共享内存:申请一块内存,进程A往共享内存中写,其他的进程就可以通过读出共享内存中的内容来获取进程A所 ...