来谈谈：中文排版CSS心得

表现和结构分离，在团队开发中更容易分工合作而减少相互关联性
数月来进修web尺度，并遵守尺度计划和制造web页面。一向想写点甚么，收拾一下本人的心得体味。写这篇文章，次要是针对中文排版计划，英文排版由于很少做，以是不触及。

先先容怎样设定字体、色彩、巨细、段失白等对照复杂的使用，前面再先容下好比首字下沉、首行缩进。最初讲一些经常使用的web页面中文排版，好比中笔墨的截断、流动宽度词内折行（word-wrap和word-break）等等。由于只是写一些使用方面的心得，假如必要完全的CSS属性先容，请参考CSS手册。

1、怎样设定笔墨字体、色彩、巨细――利用font

font-style设定斜体，好比font-style:italic;
font-weight设定笔墨粗细，好比font-weight:bold;
font-size设定笔墨巨细，好比font-size:12px;（大概9pt，分歧单元显现成绩参考CSS手册）
line-height设定行距，好比line-height:150%;
color设定笔墨色彩（注重不是font-color），好比color:red;
font-family设定字体，好比font-family:"LucidaGrande",Verdana,Lucida,Arial,Helvetica,宋体,sans-serif;（这是通用的写法）

以上都能够写在一行font属性里（除color属性必要独自写）：
font:italicbold12px/150%"LucidaGrande",Verdana,Lucida,Arial,Helvetica,宋体,sans-serif;

2、怎样把持段落排版――利用margin，text-align

中文段落利用<p>标签，摆布（相称于缩进）、段前段后的空缺，都能够用margin。好比：
以下是援用片断：
p{
margin:18px6px6px18px;/*分离是上、右、下、左，十二点入手下手的顺时针偏向*/
}
笔墨的对齐体例用text-align，好比：
以下是援用片断：
p{
text-align:center;/*居中对齐*/
}
对齐体例另有left、right和justify（两头对齐）

PS.谈起margin，我习气于在写CSS的时分为一切的标签订义margin:0;由于时而呈现因为默许的margin值招致页面排版成绩，而本人找不到缘故原由（出格注重的是ul/ol/p/dt/dd等标签）

3、竖排笔墨――利用writing-mode

writing-mode属性有两个值lr-tb和tb-rl，前者是默许的左-右、上-下，后者是上-下、右-左。
好比：
以下是援用片断：
p{
writing-mode:tb-rl;
}
能够分离direction排版。

4、项目标记的成绩――利用list-style

在CSS里项目标记有disc（实心圆点）、circle（空心圆圈）、square（实心方块）、decimal（阿拉伯数字）、lower-roman（小写罗马数字）、upper-roman（年夜写罗马数字）、lower-alpha（小写英笔墨母）、upper-alpha（年夜写英笔墨母）、none（无）。好比设定一个列表（ul或ol）的项目标记为方块，如：
以下是援用片断：
li{
list-style:square;
}
别的list-style另有一些值，好比能够接纳一些小图片作为项目标记，在list-style下间接写url(“图片地点”)就能够了。注重假如一个项目列表的左外补钉（margin-left）设为零的时分，list-style-position:outside（默许是outside）的项目标记不会显现。惋惜的是上述的项目标记仿佛其实不能设定巨细，圆点和方块一直是那末点。而且不克不及设定垂直偏向上的对齐。

5、首字下沉――利用:first-letter

伪工具:first-letter共同font-size、float能够制造首字下沉效果。
好比：
以下是援用片断：
p:first-letter{
padding:6px;
font-size:32pt;
float:left;
}

6、首行缩进――利用text-indent

text-indent可使得容器内首行缩进必定单元。好比中文段落一样平常每段前空两个汉字。能够这么写：
p{
text-indent:2em;/*em是绝对单元，2em即如今一个字巨细的两倍*/
}
假如font-size是12px的话，那末text-indent:2em则缩进24px。

7、关于汉字注音――利用ruby标签和ruby-align属性

好比说<ruby>注音<rtstyle="font-size:11px;">zhuyin</rt></ruby>，能够使用ruby-align设置对齐体例。这是在CSS手册内里看到的，详细能够自行查阅ruby-align项。

8、流动宽度汉字截断――利用text-overflow

用背景言语能够对从数据库里的字段内容做截断处置，好比说截12个汉字（以后用省略号）。可是偶然还必要html标签的过滤等，而用CSS来把持则没有这个成绩。好比对列表使用以下款式：
以下是援用片断：
li{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
不外只能处置笔墨在一行上的截断，不克不及处置多行。

9、流动宽度汉字（词）折行――利用word-break

举个例子，好比说要在一个流动宽度容器内里显现良多地名（假定以空格分开），为了不地名两头断开（即一个字在下面而另外一个字折断到下一行往了）。则可使用word-break。好比：
以下是援用片断：
<divstyle="width:210px;height:200px;background:#ccc;word-break:keep-all">
南京上海上海上南上海上海南京上海上海上海南京上海上海南京上海上海南京上海南京上海南京上海南京上海南京上海南京上海上海南京上海上海
</div>值得注重的是内里的空格不克不及以取代（起码要有一个软空格）。</p>
Div全称division意为“区分”使用DIV的方法跟使用其他tag的方法一样。

Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。

Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。

这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

仓酷云

直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。

直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。

HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）

足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓。