Css 如何排版

html-css015

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,以后的渲染,字体大小会失效。如果不是用这个字体的朋友,要注意下。

(1)使用Embed(嵌入样式单)排版样式:

即将CSS代码直接插入每个页面的HTML的<head>区,就象上一节看到的。使用<style>...</style>标签。例如:

<style type="text/css">

<!--

h2 { font-family: "宋体"font-size: 12ptfont-style: italiccolor: #FF0033background-color: #FFCCCC}

h1 { font-family: "Arial"font-size: 12ptcolor: #66FF66}

-->

</style>

(2)使用“link(外部样式单)排版样式”:

即你可以将多个页面的排版风格都用一个样式单文件控制。这个外部的样式单文件(一个扩展名是css的文本文件)将设定你所有网页的规则。如果你改变样式单文件中的某行,所有页面风格用这个css文件定义的页面都会随之改变。如果你的站点文件非常多,则这项功能就非常方便了。

在<HEAD>区内使用<LINK>标签(注意:不再是<style>标签了):

<HTML>

<HEAD>

<LINK REL=stylesheet HREF="http://yoursute.com/my.css"TYPE="text/css">

</HEAD>

<body>

<h2>你好!朋友,欢迎光临Java2000的教学区。</h2>

<h1>Hello,everybody,welcome in java2000 !</h1>

</body>

</html>

★☆★说明:css文件的路径用绝对路径http://...)表示或者用相对路径(例如:../csscode/my.css)表示都可以。

然后再单独生成一个css文件,叫做my.css (随便起名)。文件内容如下:

h2 { font-family: "宋体"font-size: 12ptfont-style: italiccolor: #FF0033background-color: #FFCCCC}

h1 { font-family: "Arial"font-size: 12ptcolor: #66FF66}

只要将这个CSS文件上传到服务器指定的目录即可。

(3)使用"inline(行内样式单)排版样式":

inline样式单采用HTML标签的“style”属性,它的特点是“定义某一个标签的式样单风格”,只对所定义的标签起作用,并非对整个页面起作用。例如:

<p style="font-size: 14pt color: #99ff99 font-family: 宋体">层叠式样单</p>

看到的效果:

层叠式样单

使用行内样式单,你必须为每行指定样式规则,否则下一行时浏览器将使用页面的缺省设置。 但是:有时候这种方式却非常有效。

(4)使用“import(输入的外部式样单)”--适用于IE浏览器。

<html>

<head>

<style type="text/css">

<!--

@import url(my.css)

-->

</style>

</head>

<body>

<h3>输入的外部式样单</h3>

</body>

</html>