中文排版CSS的心得.doc

中文排版CSS的心得 数月来学习web标准并遵循标准设计和制作web页面一直想写点什么整理一下自己的心得体会写这篇文章主要是针对中文排版设计英文排版因为很少做所以不涉及 先介绍如何设定字体、颜色、大小、段落空白等比较简单的应用后面再介绍下比如首字下沉、首行缩进最后讲一些常用的web页面中文排版比如中文字的截断、固定宽度词内折行（wordwrap和wordbreak）等等因为只是写一些应用方面的心得如果需要完整的CSS属性介绍请参考CSS手册 1、如何设定文字字体、颜色、大小使用font fontstyle设定斜体比如fontstyle:italic; fontweight设定文字粗细比如fontweight:bold; fontsize设定文字大小比如fontsize:12px;（或者9pt不同单位显示问题参考CSS手册） lineheight设定行距比如lineheight:150%; color设定文字颜色（注意不是fontcolor）比如color:red; fontfamily设定字体比如fontfamily:LucidaGrande,Verdana,Lucida,Arial,Helvetica,宋体,sansserif;（这是通用的写法） 以上都可以写在一行font属性里（除了color属性需要单独写）： font:italicbold12px/150%LucidaGrande,Verdana,Lucida,Arial,Helvetica,宋体,sansserif; 2、如何控制段落排版使用margintextalign 中文段落使用 标签左右（相当于缩进）、段前段后的空白都可以用margin比如： p margin:18px6px6px18px;/*分别是上、右、下、左十二点开始的顺时针方向*/ 文字的对齐方式用textalign比如： p textalign:center;/*居中对齐*/ 对齐方式还有left、right和justify（两端对齐） PS.谈起margin我习惯于在写CSS的时候为所有的标签定义margin:0;因为时而出现由于默认的margin值导致页面排版问题而自己找不到原因（特别注意的是ul/ol/p/dt/dd等标签） 3、竖排文字使用writingmode writingmode属性有两个值lrtb和tbrl前者是默认的左右、上下后者是上下、右左 比如： p writingmode:tbrl; 可以结合direction排版 4、项目符号的问题使用liststyle 在CSS里项目符号有disc（实心圆点）、circle（空心圆圈）、square（实心方块）、decimal（阿拉伯数字）、lowerroman（小写罗马数字）、upperroman（大写罗马数字）、loweralpha（小写英文字母）、upperalpha（大写英文字母）、none（无）比如设定一个列表（ul或ol）的项目符号为方块如： li liststyle:square; 另外liststyle还有一些值比如可以采用一些小图片作为项目符号在liststyle下直接写url(“图片地址”)就可以了注意如果一个项目列表的左外补丁（marginleft）设为零的时候liststyleposition:outside（默认是outside）的项目符号不会显示可惜的是上述的项目符号似乎并不能设定大小圆点和方块始终是那么点并且不能设定垂直方向上的对齐 5、首字下沉使用:firstletter 伪对象:firstletter配合fontsize、float可以制作首字下沉效果 比如： p:firstletter padding:6px; fontsize:32pt; float:left; 6、首行缩进使用textindent textindent可以使得容器内首行缩进一定单位比如中文段落一般每段前空两个汉字可以这么写： p textindent:2em;/*em是相对单位2em即现在一个字大小的两倍*/ 如果fontsize是12px的话那么textindent:2em则缩进24px 7、关于汉字注音使用ruby标签和rubyalign属性 比如说注音zhuyin可以利用rubyalign设置对齐方式这是在CSS手册里面看到的具体可以自行查阅rubyalign项 8、固定宽度汉字截断使用textoverflow 用后台语言可以对从数据库里的字段内容做截断处理比如说截12个汉字（之后用省略号）但是有时还需要html标签的过滤等而用CSS来控制则没有这个问题比如对列表应用以下样式： li overflow:hidden; textoverflow:ellipsis; whitespace:nowrap; 不过只能处理文字在一行上的截断不能处理多行 9、固定宽度汉字（词）折行使用wordbreak 举个例子比如说要在一个固定宽度容器里面显示很多地名（假设以空格分隔）为了避免地名中间断开（即一个字在上面而另一个字折断到下一行去了）