样式一
/* * NOTE: * - The use of browser-specific styles (-moz-, -webkit-) should be avoided. * If used, they may not render correctly for people reading the email in * a different browser than the one from which the email was sent. * - The use of state-dependent styles (like a:hover) don't work because they * don't match at the time the styles are made explicit. (In email, styles * must be explicitly applied to all elements -- stylesheets get stripped.) */ /* This is the overall wrapper, it should be treated as the `body` section. */ .markdown-here-wrapper { } /* To add site specific rules, you can use the `data-md-url` attribute that we add to the wrapper element. Note that rules like this are used depending on the URL you're *sending* from, not the URL where the recipient views it. */ /* .markdown-here-wrapper[data-md-url*="mail.yahoo."] ul { color: red; } */ pre, code { font-size: 0.85em; font-family: Consolas, Inconsolata, Courier, monospace; } code { margin: 0 0.15em; padding: 0 0.3em; white-space: pre-wrap; border: 1px solid #EAEAEA; background-color: #F8F8F8; border-radius: 3px; display: inline; /* added to fix Yahoo block display of inline code */ } pre { font-size: 1em; line-height: 1.2em; } pre code { white-space: pre; overflow: auto; /* fixes issue #70: Firefox/Thunderbird: Code blocks with horizontal scroll would have bad background colour */ border-radius: 3px; border: 1px solid #CCC; padding: 0.5em 0.7em; display: block !important; /* added to counteract the Yahoo-specific `code` rule; without this, code blocks in Blogger are broken */ } /* In edit mode, Wordpress uses a `* { font: ...;} rule+style that makes highlighted code look non-monospace. This rule will override it. */ .markdown-here-wrapper[data-md-url*="wordpress."] code span { font: inherit; } /* Wordpress adds a grey background to `pre` elements that doesn't go well with our syntax highlighting. */ .markdown-here-wrapper[data-md-url*="wordpress."] pre { background-color: transparent; } /* This spacing has been tweaked to closely match Gmail+Chrome "paragraph" (two line breaks) spacing. Note that we only use a top margin and not a bottom margin -- this prevents the "blank line" look at the top of the email (issue #243). */ p { /* !important is needed here because Hotmail/Outlook.com uses !important to kill the margin in <p>. We need this to win. */ margin: 0 0 1.2em 0 !important; } table, pre, dl, blockquote, q, ul, ol { margin: 1.2em 0; } ul, ol { padding-left: 2em; } li { margin: 0.5em 0; font-size: 16px; } /* Space paragraphs in a list the same as the list itself. */ li p { /* Needs !important to override rule above. */ margin: 0.5em 0 !important; } /* Smaller spacing for sub-lists */ ul ul, ul ol, ol ul, ol ol { margin: 0; padding-left: 1em; } /* Use letters for unordered-lists. (Like Github.) */ ul ul, ul, ul { list-style-type: square; font-size: 16px; } /* Use letters for sub-ordered-lists. (Like Github.) */ ol ol, ul ol { list-style-type: lower-roman; } /* Use Roman numerals for sub-sub-ordered lists. (Like Github.) */ ul ul ol, ul ol ol, ol ul ol, ol ol ol { list-style-type: lower-alpha; } dl { padding: 0; } dl dt { font-size: 1em; font-weight: bold; font-style: italic; } dl dd { margin: 0 0 1em; padding: 0 1em; } blockquote, q { border-left: 4px solid #DDD; padding: 0 1em; color: #777; quotes: none; } blockquote::before, blockquote::after, q::before, q::after { content: none; } h1, h2, h3, h4, h5, h6{margin:20px 0 10px; padding:0; font-weight: bold; color:#009688;} h1{font-size:24px; border-bottom:1px solid #ddd;} h2{font-size:22px; border-bottom:1px solid #eee;} h3{font-size:20px;} h4{font-size:18px;} h5{font-size:16px;} h6{font-size:16px; color:#777;} table { padding: 0; border-collapse: collapse; border-spacing: 0; font-size: 1em; font: inherit; border: 0; } tbody { margin: 0; padding: 0; border: 0; } table tr { border: 0; border-top: 1px solid #CCC; background-color: white; margin: 0; padding: 0; } table tr:nth-child(2n) { background-color: #F8F8F8; } table tr th, table tr td { font-size: 1em; border: 1px solid #CCC; margin: 0; padding: 0.5em 1em; } table tr th { font-weight: bold; background-color: #F0F0F0; } p { font-size: 16px; line-height: 1.75em; padding-right: 0.5em; padding-left: 0.5em; } strong, b{color:#BF360C;}
预览
样式二
/*----------配置主体、标题、段落、列表等元素的样式-------------*/ body { font-family: "Avenir Next", Helvetica, Arial, sans-serif; padding:1em; margin:auto; max-width:42em; background:#fefefe; } h1, h2, h3, h4, h5, h6 { font-weight: bold; } h1 { color: #000000; font-size: 28pt; border-bottom: 1px solid #CCCCCC; } h2 { color: #000000; font-size: 24px; } h3 { font-size: 18px; } h4 { font-size: 16px; } h5 { font-size: 14px; } h6 { color: #777777; background-color: inherit; font-size: 14px; } hr { height: 0.2em; border: 0; color: #DC143C; background-color: #DC143C; } p, blockquote, ul, ol, dl, li, table, pre { margin: 15px 0; } /*----------配置主体、标题、段落、列表、引用等元素的样式-------------*/ /*--------------body,h1~h6,p,oluldlli ableplockquote-----*/ /*-------a标签配置链接属性----------*/ a, a:visited { color: #4183C4; background-color: inherit; text-decoration: none; } /**------#号标记id，作为id选择器来配置属性------**/ #message { border-radius: 6px; border: 1px solid #ccc; display:block; width:100%; height:60px; margin:6px 0px; } button, #ws { font-size: 10pt; padding: 4px 6px; border-radius: 5px; border: 1px solid #bbb; background-color: #eee; } code, pre, #ws, #message { font-family: Consolas; /*代码字体样式*/ font-size: 12pt; } code { border: 1px solid #EAEAEA; margin: 0 2px; padding: 0 5px; } pre { border: 1px solid #CCCCCC; overflow: auto; padding: 2px 2px; } pre > code { /*子选择器*/ border: 0; margin: 0; padding: 0; } #ws { background-color: #DC143C; } /*类选择器设置*/ .send { color:#77bb77; } .server { color:#7799bb; } .error { color:#AA0000; } table tr:nth-child(2n) {/*包含选择器，：为伪类*/ background-color: #DC143C; } /* Monokai style - ported by Luigi Maselli - http://grigio.org */ /*____________highlight.js 的属性配置，主要用于代码高亮___________________*/ .hljs { display: block; overflow-x: auto; padding: 0.5em; background: #272822; color: #ddd; } .hljs-tag, .hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-strong, .hljs-name { color: #f92672; } .hljs-code { color: #66d9ef; } .hljs-class .hljs-title { color: white; } .hljs-attribute, .hljs-symbol, .hljs-regexp, .hljs-link { color: #bf79db; } .hljs-string, .hljs-bullet, .hljs-subst, .hljs-title, .hljs-section, .hljs-emphasis, .hljs-type, .hljs-built_in, .hljs-builtin-name, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-addition, .hljs-variable, .hljs-template-tag, .hljs-template-variable { color: #a6e22e; } .hljs-comment, .hljs-quote, .hljs-deletion, .hljs-meta { color: #75715e; } .hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-doctag, .hljs-title, .hljs-section, .hljs-type, .hljs-selector-id { font-weight: bold; }
预览
样式三
.markdown-here-wrapper {/*markdown here 的全局配置*/ font-size: 16px; line-height: 1.8em; /*em指的是相对单位，当前对象内字体的尺寸，默认浏览器16px*/ /*http://www.w3school.com.cn/cssref/css_units.asp*/ letter-spacing: 0.1em; } pre, code { /*,逗号连接是并集选择器*/ font-size: 14px; font-family: Roboto, 'Courier New', Consolas, Inconsolata, Courier, monospace; margin: auto 5px; } /*设置pre 和code的整体属性，pre可以把div中的/r/n保存下来显示，而code则用浏览器的方式渲染*/ code { white-space: pre-wrap; border-radius: 2px; display: inline; } /*display 的属性为指定元素框的类型*/ /*margin： 0为默认值，auto为浏览器自动计算的外边距，外边距属性*/ /*border-radius: div元素的圆角框*/ /*write-space:如何处理元素内空白行，回车or忽略,nowrap不换行，pre-wrap换行*/ /*http://www.w3school.com.cn/cssref/pr_text_white-space.asp*/ pre { /*pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。*/ font-size: 15px; line-height: 1.4em; display: block; !important; /*在ie6以上的浏览器中，设置优先级，覆盖预先设置的属性 !important*/ } pre code { /*空格连接是后代选择器，外层在前内层在后； >连接是子元素选择器*/ white-space: pre; overflow: auto; /*内容益处元素框时候的行为*/ border-radius: 3px; padding: 1px 1px; display: block !important; } /*各种选择器：https://blog.csdn.net/m0_38070602/article/details/69950795*/ /*pre code 的解释：http://www.cnblogs.com/lizonghui/archive/2012/09/18/2692355.html*/ strong, b{ /*strong表示强调，用<b>粗体显示，也可以自定义自己的强调方式*/ color: #BF360C; } em, i { /*em表示强调，用<i>标签斜体显示，也可以自定义自己的强调方式*/ color: #009688; } hr { /*水平线分割---*/ border: 1px solid #BF360C; margin: 1.5em auto; } p { /*段落选择器*/ margin: 1.5em 5px !important; /*颜色*/ color:#d6a841; /*字体*/ font-family:'微软雅黑'; /*字号*/ font-size:15px; /*行间距，可用百分比，数值倍数，像素设置，还包括text-indent缩进、letter-spacing字间距、*/ line-height:100% 2 100px; /*段间距，一般用margin属性调整*/ margin-bottom:20px; /*页边距用padding属性调整*/ } /*表格和*/ table, pre, dl, blockquote, q, ul, ol { margin: 10px 5px; /*并集选择器：表格、预格式化、定义列表、块引用、短引用、无序列表、有序列表*/ } ul, ol { /*无序、有序列表*/ padding-left: 15px; } li { /* 定义列表中的项目*/ margin: 10px; } li p { /*li列表元素中的后代选择器，包含选择器，应用于li中的p*/ margin: 10px 0 !important; } ul ul, ul ol, ol ul, ol ol { /*各个后代选择器一起添加属性*/ margin: 0; padding-left: 10px; } ul { list-style-type: circle; } /*无序列表的前缀，circle,square,好多种,同样有序列表ol也可以设置不同的标记*/ /*http://www.w3school.com.cn/cssref/pr_list-style-type.asp*/ dl { padding: 0; } dl dt { font-size: 1em; font-weight: bold; /*加粗 意大利斜体*/ font-style: italic; } dl dd { margin: 0 0 10px; padding: 0 10px; } /*各种表格的包含选择器定义，用空格连接*/ blockquote, q { border-left: 2px solid #009688; padding: 0 10px; /*上右下左的排序，可输入四个值*/ color: #777; quotes: none; margin-left: 1em; } /*块引用和短引用的样式*/ blockquote::before, blockquote::after, q::before, q::after { content: none; } /*before 和after属于css伪元素，:before在元素之前插入相应。：after在之后插入*/ /*伪元素用::，伪类用：参考ref。。https://blog.csdn.net/qq_25292481/article/details/52577320*/ /*--------同时设置六级标题的属性，其中！important用于指定优先级>ie6--------------*/ h1, h2, h3, h4, h5, h6 { margin: 20px 0 10px; padding: 0; font-style: bold !important; color: #009688 !important; text-align: center !important; margin: 1.5em 5px !important; padding: 0.5em 1em !important; } h1 { font-size: 24px !important; border-bottom: 1px solid #ddd !important; } h2 { font-size: 20px !important; border-bottom: 1px solid #eee !important; } h3 { font-size: 18px; } h4 { font-size: 16px; /*可以针对自己的标题做出个性化设置*/ color:#d6a841 /*16进制颜色*/ font-style: bold /*加粗？倾斜*/ /*---------各种居中方式---------*/ margin: 0, auto; /*块级元素居中*/ text-align: center; /*行内居中*/ justify-content: center; /*对齐*/ vertical-align: middle; /*垂直居中*/ /*ref: https://www.jianshu.com/p/61c431fd924a*/ } /*-------------表格元素的设置-----------------*/ table { padding: 0; border-collapse: collapse; /*合并边框属性*/ border-spacing: 0; font-size: 1em; font: inherit; border: 0; margin: 0 auto; } tbody { margin: 0; padding: 0; border: 0; } table tr { border: 0; border-top: 1px solid #CCC; background-color: white; margin: 0; padding: 0; } table tr:nth-child(2n) { background-color: #F8F8F8; } table tr th, table tr td { font-size: 16px; border: 1px solid #CCC; margin: 0; padding: 5px 10px; } table tr th { /*表格。tableraw，tableheader*/ font-weight: bold; color: #eee; border: 1px solid #009688; background-color: #009688; } ---------- 可根据markdown的实现自己的**个性化**标记 @strong-char: "**"; /*可以将着重符号替换为自己的个性化符号*/ strong:before, strong:after { content: @strong-char; display: inline; } @em-char: "*"; em:before, em:after { content: @em-char; display: inline; } /*https://github.com/mrcoles/markdown-css/blob/master/markdown.less*/ /*http://www.jb51.net/css/357685.html*/ /*<span>行内封装，<div>块级封装*/ /*copy from jianshu*/ /*source code:https://www.jianshu.com/p/7bda360950ce*/
预览
