中文排版CSS的心得

《中文排版CSS的心得》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、中文排版CSS的心得　　　　数月来学习web标准并遵循标准设计和制作web页面一直想写点什么整理一下自己的心得体会写这篇文章主要是针对中文排版设计英文排版因为很少做所以不涉及　　　　先介绍如何设定字体、颜色、大小、段落空白等比较简单的应用后面再介绍下比如首字下沉、首行缩进最后讲一些常用的web页面中文排版比如中文字的截断、固定宽度词内折行（wordwrap和wordbreak）等等因为只是写一些应用方面的心得如果需要完整的CSS属性介绍请参考CSS手册　　　　1、如何设定文字字体、颜色、大小——使用font　　　　fontstyle设定斜体比如fontstyle:italic;　　　　fon

2、tweight设定文字粗细比如fontweight:bold;　　　　fontsize设定文字大小比如fontsize:12px;（或者9pt不同单位显示问题参考CSS手册）　　　　lineheight设定行距比如lineheight:150%;　　　　color设定文字颜色（注意不是fontcolor）比如color:red;　　　　fontfamily设定字体比如fontfamily:LucidaGrande,Verdana,Lucida,Arial,Helvetica,宋体,sansserif;（这是通用的写法）　　　　以上都可以写在一行font属性里（除了color属性需要单独写）：

3、　　　　font:italicbold12px/150%LucidaGrande,Verdana,Lucida,Arial,Helvetica,宋体,sansserif;　　　　2、如何控制段落排版——使用margintextalign　　　　中文段落使用　　　　标签左右（相当于缩进）、段前段后的空白都可以用margin比如：　　　　p{　　　　margin:18px6px6px18px;/*分别是上、右、下、左十二点开始的顺时针方向*/　　　　}　　　　文字的对齐方式用textalign比如：　　　　p{　　　　textalign:center;/*居中对齐*/　　　　}　　　　对齐方式还

4、有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里项目符号有

5、disc（实心圆点）、circle（空心圆圈）、square（实心方块）、decimal（阿拉伯数字）、lowerroman（小写罗马数字）、upperroman（大写罗马数字）、loweralpha（小写英文字母）、upperalpha（大写英文字母）、none（无）比如设定一个列表（ul或ol）的项目符号为方块如：　　　　li{　　　　liststyle:square;　　　　}　　　　另外liststyle还有一些值比如可以采用一些小图片作为项目符号在liststyle下直接写url(“图片地址”)就可以了注意如果一个项目列表的左外补丁（marginleft）设为零的时候liststy

6、leposition:outside（默认是outside）的项目符号不会显示可惜的是上述的项目符号似乎并不能设定大小圆点和方块始终是那么点并且不能设定垂直方向上的对齐　　　　5、首字下沉——使用:firstletter　　　　伪对象:firstletter配合fontsize、float可以制作首字下沉效果　　　　比如：　　　　p:firstletter{　　　　padding:6px;　　　　fontsize:32pt;　　　　float:left;　　　　}　　　　6、首行缩进——使用textindent　　　　textindent可以使得容器内首行缩进一定单位比如中文段落一般每段前空

7、两个汉字可以这么写：　　　　p{　　　　textindent:2em;/*em是相对单位2em即现在一个字大小的两倍*/　　　　}　　　　如果fontsize是12px的话那么textindent:2em则缩进24px　　　　7、关于汉字注音——使用ruby标签和rubyalign属性　　　　比如说注音zhuyin可以利用rubyalign设置对齐方式这是在CSS手册里面看到的具体可以自行查阅rubyalig