Css 如何排版

html-css018

Css 如何排版,第1张

你需要写一个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}/*积sk*/

.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" />