你需要写一个CSS样式文件,后缀名称就是CSS,我这里正好写了一个CSS样式表,用于定义网站显示文字的格式,然后你复制这个代码将这个代码保存格式为:comman.css
/*------reset------*/body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,p,form{
margin:0
color: #000
font-size: 12px
font-family: "微软雅黑"
text-align: center
}
body,button,input,select,textarea{font:12px/1.5 tahoma,'\5b8b\4f53',sans-serifcolor:#6c6c6c}
body{padding-top:42px}
h1,h2,h3,h4,h5,h6{font-size:100%}
em,i,b{font-style:normal}
ul,ol{list-style:none}
a{color:#6c6c6ctext-decoration:none}
a:hover{
color:#330033
font-size: 12px
text-align: left
}
img{border:0}
button,input,select,textarea{font-size:100%outline:nonevertical-align:middle}
textarea{resize:none}
table{
border-collapse:collapse
border-spacing:0
text-align: center
}
td,th,ul,ol{
padding:0
color: #000
text-align: center
font-family: "微软雅黑"
font-size: 12px
}
/*------common------*/
.pr{position:relative}
.pa{position:absolute}
.fl{float:left}
.fr{float:right}
.fl,.fr{display:inline}
.bc{margin-left:automargin-right:auto}
.cb{clear:both}
.db{display:block}
.clearfix{*zoom:1}
.clearfix:after{content:'\20'display:blockheight:0line-height:0visibility:hiddenclear:both}
.tc{text-align:center}
.tr{text-align:right}
.fb{font-weight:bold}
.fn{font-weight:normal}
.f16{font-size:16px}
.f14{font-size:14px}
.f_yh{font-family:'\5FAE\8F6F\96C5\9ED1'}
.ell{text-overflow:ellipsiswhite-space:nowrapoverflow:hidden}
.none{display:none}
.hidden{visibility:hidden}
.ht{overflow:hiddentext-indent:-9999pxtext-decoration:none}
.unl{text-decoration:underline}
.bd1{border:1px solid #d8d8d8}
.bd1-t{border-top:1px solid #d8d8d8}
.bd1-b{border-bottom:1px solid #d8d8d8}
.bd3{border:3px solid #d8d8d8}
.hlh30{height:30pxline-height:30px}
.hlh24{height:24pxline-height:24px}
.lh22{line-height:22px}
.hlh20{height:20pxline-height:20px}
.c1{color:#5d5d5d}/*积齥*/
.c2{color:#8f8f8f}/*k*/
.c3{color:#e44cea}/*a?k*/
.c4{color:#f49bff}/*toplink*/
.c5{color:#ff0000}
.bc1{background:#f3f3f3}/*积sk*/
.bc2{background:#f8f8f8}/*齭k*/
.bc3{background:#ffffff}
.mt10{margin-top:10px}
.mb10{margin-bottom:10px}
.mr9{margin-right:9px}
.ml7{margin-left:7px}
.ml89{margin-left:89px}
.p20{padding:20px}
.p10{padding:10px}
.pt1{padding-top:1px}
.pr6{padding-right:6px}
.pl6{padding-left:6px}
.w230{width:230px}
.spr{background:url(http://ossweb-img.qq.com/images/ktv/web201206/spr.png) no-repeatoverflow:hidden}
.ico{width:8pxheight:8pxline-height:8pxmargin:10px 8px 0 8px}
/*--notice--*/
.game-notice{width:1000pxpadding:60px 0 30px 0}
.game-notice em{padding:0 4pxcolor:#6c6c6c}
/*--footer--*/
.footer{
background:#19001a
color: #FFF
}
.foot-con{width:915pxpadding:20px 0 30px 85px}
.foot-logo{width:216pxheight:45pxborder-right:1px solid #3a173b}
.game-logo{width:107pxheight:35pxbackground-position:0 -232px}
.kaige-logo{width:93pxheight:35pxbackground-position:-107px -232pxcursor:default}
.foot-list{padding-left:15pxcolor:#673768}
.foot-list a{color:#673768}
.foot-list a:hover{text-decoration:underline}
.foot-link{width:578px}
.foot-link span{padding:0 5pxcolor:#3A173B}
.copy{width:576px}/* |xGv00|8d5f9fb42d5dc8f4155bd7ed0d0073ae */
之前的文章介绍了[Markdown格式写作的优秀软件Ulysses],在定义排版样式时需要用到css文件,我自己参考了笑来老师公众号排版的css文件。
但对于不懂编程、不会代码的同学,依然不容易看懂里面的代码块究竟是什么含义。这篇文章会针对笑来老师的css文件内容中最重要的几个特征定义,逐行分析含义,另外,给出一些常用的css代码含义。
Css文件中的代码, {} 内的部分是定义规则, {} 外的部分是定义的规则所要施加的对象范围,所以,以上代码的含义是:
含义是:
含义是:
含义是:
含义:
含义是:
含义是:
含义:
含义:
含义:
含义:
以上为笑来老师所用css中的主要内容,也是常用样式css的主要内容,其中关于表格的部分没有写出来,是觉得通常公众号文章最重要的是几个级别的标题、强调、引用、分隔线这几部分。
定义css文件时,一定注意标点符号的格式,用英文格式。
每一级标题中都可以自定义其大小、颜色、位置、行距等等。
用Markdown格式书写文档时,每一段结束时要空一行,这样在公众号编辑器中最终呈现效果 才有段间距。
从Ulysses或其他编辑器中复制Markdown文档到公众号编辑器时,在粘贴之后,尽量先完成全部的后续编辑之后再渲染,后续编辑包括插图、定义超链接等等。
因为根据自己的体验,渲染过两次之后,字体会变成公众号编辑器默认的字号大小16px,以后的渲染,字体大小会失效。如果不是用这个字体的朋友,要注意下。
css样式分三种,内部样式,内联样式和外部样式。外部样式,顾名思义,也就是通过<link />引入的css样式文件,而内部样式呢,主要是放在<style></style>中的样式,而内联样式,就是直接嵌入标签的,充当标签的一个属性,使用style='这里写样式' 来实现。他们的优先级是内联样式的优先级最高,其次判断内部和外部样式的优先级得看它们在html中出现的位置,一般来说,越靠后的优先级也就越高。
css是英文Cascading Style Sheets的缩写。
它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
它包含3种类型,内部样式,行内样式和外部样式表三种
作用的效果是按顺序从下到上,相同样式下面的会覆盖原有样式,除特殊情况外,一般都是行内样式>内部样式>外部样式。
以div为例
行内样式写法:
在style里面写样式
<div style="height:30pxbackground:#f00"></div>
内部样式:
在head标签内加入style标签,在标签内写样式:
<style>
div{height:30pxbackground:#f00}
</style>
外部样式是建立一个新文件后缀名为.css
举个例子:
建立style.css文件放在项目根目录下:
在里面写入
div{height:30pxbackground:#f00}
然后保存,在html的head标签内调用样式
<link rel="stylesheet" type="text/css" href="style.css" />