专栏首页前端说吧markdown样式代码保存

markdown样式代码保存

/*此样式是没任何效果的,留给你填写的 你可以随意修改,组合你想要的css样式 没有最好的,只有最合适的, 看看后面的示例,你就会懂得写个你最爱的样式,并保存了的! 建议先复制某一你喜欢的css模板样式到此样式下,再在此基础上自定义自己的css样式。 来试试吧! ^_^*/

h1,h2,h3,h4,h5,h6 { color: #3e3e3e; } h1 span,h2 span,h3 span,h4 span{ border-left: 5px solid #ff5722; padding-left: 10px; } h1{ border-bottom:2px solid #ff5722; line-height: 38px; } h1 span{ color: white; background: #ff5722; border-left: 0; padding: 0 10px; border-top-left-radius: 8px; border-top-right-radius: 8px; } /* 一级标题 */ h1 { border-bottom:2px solid #ff5722; font-size:1.3em; }

/* 一级标题内容 */ h1 span { display:inline-block; font-weight:normal; background:#ff5722; color:#ffffff; padding:3px 10px 1px; border-top-right-radius:3px; border-top-left-radius:3px; margin-right:3px; }

/* 一级标题修饰 请参考有实例的主题 */ h1:after { }

/* 二级标题 */ h2 { text-align:left; margin:20px 10px 0px 0px; }

/* 二级标题内容 */ h2 span { font-family:STHeitiSC-Light; font-size:18px; font-weight:bolder; display:inline-block; padding-left:10px; border-left:5px solid #ff5722; }

/* 二级标题修饰 请参考有实例的主题 */ h2:after { }

/* 三级标题 */ h3 { }

/* 三级标题内容 */ h3 span { font-size:14px; color:#ff5722; }

/* 三级标题修饰 请参考有实例的主题 */ h3:after { }

/* 无序列表整体样式

  • list-style-type: square|circle|disc; */ ul { font-size: 14px; }

/* 无序列表整体样式

  • list-style-type: upper-roman|lower-greek|lower-alpha; */ ol { font-size: 14px; }

/* 列表内容,不要设置li */ li section { font-size:13px; }

/* 引用

  • 左边缘颜色 border-left-color:black;
  • 背景色 background:gray; */ blockquote { font-style:normal; border-left:none; padding:10px; position:relative; line-height:1.8; border-radius:0px 0px 10px 10px; color: #333; background: #f5f5f5; box-shadow: #eaeaea 0px 10px 15px; } blockquote:before { content:"“"; display:inline; color:#cecece; font-size:3em; float: left; line-height: 1em; font-weight:500; }

/* 引用文字 */ blockquote p { color:#333; font-size:13px; display:inline; } blockquote:after { content:"”"; float:right; display:inline; color:#cecece; font-size:3em; line-height:1em; font-weight:500; }

/* 链接

  • border-bottom: 1px solid #009688; */ a { color:#ff5722; border-bottom: 1px solid #ff3502; font-family:STHeitiSC-Light; }

/* 加粗 */ strong { font-weight:border; color:#ff5722; }

/* 斜体 */ em { color:#ff5722; letter-spacing:0.3em; }

/* 加粗斜体 */ strong em { color:#ff5722; letter-spacing:0.3em; }

/* 删除线 */ del { }

/* 分隔线

  • 粗细、样式和颜色
  • border-top:1px solid #3e3e3e; */ hr { height:1px; padding:0; border:none; border-top:medium solidid #333; text-align:center; background-image:linear-gradient(to right,rgba(248,57,41,0),rgba(248,57,41,0.75),rgba(248,57,41,0)); }

/* 图片

  • 宽度 width:80%;
  • 居中 margin:0 auto;
  • 居左 margin:0 0; */ img { border-radius:0px 0px 5px 5px; display:block; margin:20px auto; width:85%; height:100%; object-fit:contain; box-shadow:#84A1A8 0px 10px 15px; }

/* 图片描述文字 */ figcaption { display:block; font-size:12px; font-family:PingFangSC-Light; }

/* 行内代码 */ p code,li code { color:rgb(271,93,108); }

/* 非微信代码块

  • 代码块不换行 display:-webkit-box !important;
  • 代码块换行 display:block; */ pre code { border-radius: 8px; }

/*

  • 表格内的单元格
  • 字体大小 font-size: 16px;
  • 边框 border: 1px solid #ccc;
  • 内边距 padding: 5px 10px; */ table tr th, table tr td { font-size: 14px; }

/* 脚注文字 */ .footnote-word { color:#ff5722; }

/* 脚注上标 */ .footnote-ref { color:#ff5722; }

/脚注链接样式/ .footnote-item em { color:#6E1E51; font-size:12px; }

/* "参考资料"四个字

  • 内容 content: "参考资料"; */ .footnotes-sep:before { }

/* 参考资料编号 */ .footnote-num { }

/* 参考资料文字 */ .footnote-item p { }

/* 参考资料解释 */ .footnote-item p em { }

/* 行间公式

  • 最大宽度 max-width: 300% !important; */ .block-equation svg { }

/* 行内公式 */ .inline-equation svg { }

pre{ margin-top: 10px; }

/第二种/

/可任意修改样式,或恢复预设值,保存后生效 相对“默认样式”而作的修改会用 红色 标注/

.output_wrapper/此属性为全局/ { font-size: 16px; color: #3e3e3e; line-height: 1.6; word-spacing:0px; letter-spacing:0px; font-family: "Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif; } .output_wrapper * { font-size: inherit ; color: inherit; line-height: inherit; margin:0px; padding:0px; }

p {/段落/ margin: 1.5em 0px; } h1,h2,h3,h4,h5,h6 { margin: 1.5em 0px; font-weight:bold; } h1 { font-size: 1.6em ;

} h2 { font-size: 1.4em; } h3 { font-size: 1.3em; } h4 { font-size: 1.2em; } h5 { font-size: 1em; } h6 { font-size: 1em; } h1,h2{/增加对h3标题的修改/ border-bottom:2px solid #ff5722; } h1 span, h2 span{/增加对h3标题字体的修改/ display:inline-block; font-weight:normal; background: #ff5722; color:#ffffff; padding:3px 10px 0px; border-top-right-radius: 6px; border-top-left-radius: 6px; margin-right:3px; } h1:after{/增加对h3标题后面的修饰/ display: inline-block; content:" "; vertical-align: bottom; border-bottom: 36px solid #ffdfd5; border-right: 20px solid transparent; } h2 span{ background: white; font-weight:bold; padding-left: 0 } h2 span, h3 span{ color: #ff5722; } ul, ol { padding-left: 32px; } ul{ /无序列表/ list-style-type: disc; } ol { /有序列表/ list-style-type: decimal; } li * { /* color: #3e3e3e;*/ }

li{ /在公众号下,改变不了li符号的属性(如颜色),并会影响其子元素的属性;而在其它博客平台中,则能正常使用/ margin-bottom: 0.5em; /* color:#159957; / } .code_size_default /代码块默认size/ { line-height: 18px; font-size: 14px; font-weight:normal; word-spacing:0px; letter-spacing:0px; } .code_size_tight /代码块紧凑size/ { line-height: 15px; font-size: 11px; font-weight:normal; word-spacing:-3px; letter-spacing:0px; } pre code /代码块/ { font-family: Consolas, Inconsolata, Courier, monospace; border-radius: 0px; } blockquote { /引用块*/ display: block; padding: 15px 1rem; font-size: 0.9em; padding-right: 15px; margin: 1em 0; color: #819198; border-left: 6px solid #dce6f0; background: #f2f7fb; overflow: auto; overflow-scrolling: touch; word-wrap: normal; word-break: normal; } blockquote p { margin: 0px; }

a { /超链接/ text-decoration: none; color: #1e6bb8; word-wrap:break-word; }

strong /强调/ { font-weight: bold; } em /斜体/ { font-style:italic; } del /删除线/ { font-style:italic; } strong em/强调的斜体/ { font-weight: bold; }

hr { /分隔线/ height: 1px; margin: 1.5rem 0px; border: none; border-top: 1px dashed #A5A5A5; }

code /行内代码/ { word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin:0 2px; color:#e96900; background:#f8f8f8; } img { display: block; margin:0 auto; /图片水平居中/ /* margin:0 0; / /图片水平居左,如需要请打开/ max-width:100%; } figcaption/图片描述文字/ { margin-top:10px; text-align:center; / text-align:left; / /当图片水平居左时,请打开*/ color:#999; font-size: 0.7em; }

/================表格开始================/ table { display:table; width: 100% ; text-align: left; } tbody { border: 0; }

table tr { border: 0; border-top: 1px solid #CCC; background-color: white;

}

/隔行改变行的背景色,如需要请打开/ / table tr:nth-child(2n) { background-color: #F8F8F8; } /

table tr th, table tr td { font-size: 1em; border: 1px solid #CCC; padding: 0.5em 1em; text-align: left; } /表头的属性/ table tr th { font-weight: bold; background-color: #F0F0F0; } /================表格结束================/

/================数学公式开始================/ .katex-display {/块公式/ font-size:1.22em; } .katex {/行内公式/ padding:8px 3px; } .katex-display > .katex {/块公式/ display:inline-block; text-align:center; padding:3px; } .katex img {/行内公式对应的图片/ display:inline-block; vertical-align:middle; } /================数学公式结束================/

a[href^="#"] sup {/注脚/ vertical-align:super; margin:0 2px; padding:1px 3px; color: #ffffff; background:#666666; font-size:0.7em; }

/================任务列表开始================/ .task-list-list { list-style-type: none; } .task-list-list.checked {/已完成/ color: #3e3e3e; }

.task-list-list.uncheck {/未完成/ color: #bfc1bf; } .task-list-list .icon_uncheck, .task-list-list .icon_check { display: inline-block; vertical-align: middle; margin-right: 10px; } .task-list-list .icon_check:before {/已完成/ content: "√"; border: 2px solid #3e3e3e; color:red; } .task-list-list .icon_uncheck:before {/未完成/ content: "x"; border: 2px solid #bfc1bf; color: #bfc1bf; } .task-list-list .icon_check:before, .task-list-list .icon_uncheck:before {/标志框/ padding:2px; padding-left: 5px; padding-right: 8px; border-radius:5px; } /================任务列表结束================/

.toc {/总目录/ margin-left:25px; } .toc_item {/每条目录/ display:block;

} .toc_left {/每级目录的缩进/ margin-left:25px; }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • css笔记 - 张鑫旭css课程笔记之 border 篇

    double可以利用来配合border-style:solid制作三条杠小icon

    xing.org1^
  • CSS-论css如何纯代码实现内凹圆角

    xing.org1^
  • JS:“分享到”之类的悬浮框的运动原理(代码)

    xing.org1^
  • css3之LESS简单入门

    一个淡定的打工菜鸟
  • 为你的WordPress 博客文章页面增加多彩排版条

    不知这个上面这个题目会不会让人产生误解,再说明一下,所谓排版条即是如下面的一个绿色的彩条(当然颜色可以自己设定)。有了这个排版条,能更加容易区分内容文字及总结文...

    Jeff
  • 小程序实践(八):验证码倒计时功能

    听着music睡
  • CSS3 基础知识[转载minsong的博客]

    CSS3 基础知识 1.边框     1.1 圆角  border-radius:5px 0 0 5px;     1.2 阴影  box-shadow:2px...

    用户3055976
  • 纯CSS实现小三角提示信息

    lzugis
  • 纯CSS3绘制的逼真,呆萌,超酷的CSS3动画纯CSS3人物行走动画 逼真炫酷CSS3动画纯CSS3绘制的小猫笑脸动画 超呆萌纯CSS3绘制可爱小男孩动画 超酷面部表情

    wblearn
  • CSS3圆角 border-radius

    HTML5学堂:圆角是用一段与角的两边相切的圆弧替换原来的直角。在原有网页当中,如果需要实现圆角效果,可以使用背景图的实现,但是这样会造成背景图大小和数量的增加...

    HTML5学堂

扫码关注云+社区

领取腾讯云代金券