网页文字排版处理的技巧
海南中立科技 | 2011-12-02 00:03:32 | 阅读:15878
1、段落首行自动缩进每个段落的首行要缩进两个汉字大小是众人皆知的常识,我们通常在每个段落首行加上多个“”标签来实现缩进,这样虽然能够达到目的,但是却过于麻烦。其实我们只要运用一些简单的CSS语法就可以一劳永逸地在一个页面中实现首行缩进。<styletype="text/css">p{text-indent:2em}</style>通过上面的样式,页面中每段包含在标签<p>和</p>之间的段落都会自动缩进两个汉字字符大小。2、段落首字下沉我们阅读传统媒体时,经常看到如图1的效果,通过使用样式,我们也可以很轻松地实现类似效果。图1很常见的段落首字下沉效果<style>#chr:first-letter{font-size:24pt;left:0px;float:left;position:absolute}</style>上面这段代码定义了一个首字大小为24pt的缩进,使用时我们只要在某个段落的标签中添上一个“id=chr”就可以了,例如下面的段落:<pid=chr>柳永(987?-1053?)字耆卿,福建崇安人。……</p>3、文字竖排效果如下面的一段诗文,在网页上显示时文字呈竖直排布,非常适合诗词的文字编排。<divstyle="line-height:18px;text-align:center;writing-mode:tb-rl"><pre>长恨歌(片段)<br>白居易<br>汉皇重色思倾国,御宇多年求不得。杨家有女初长成,养在深闺人未识。天生丽质难自弃,一朝选在君王侧。……</pre></div>代码标签中的样式规定了文字的竖直排布,并且每行的间距为18像素,文字为中间对齐。网页读取时都会自动将空格去除后才显示,在诗文内容开始和结束部分分别加上标签<per>和</per>,可以使诗文内容按照自己的意愿精确显示,其效果如图2。图2文字竖排效果4、文字从右读起古文的文字编排也通常用到从右读起的效果,下面的代码就可以实现这个效果(如图3):图3文字从右读起<divstyle="width:260px;direction:rtl;unicode-bidi:bidi-override">长恨歌(片段)<br>白居易<br>汉皇重色思倾国,御宇多年求不得。杨家有女初长成,养在深闺人未识。天生丽质难自弃,一朝选在君王侧。……</div><div>标签中的样式规定了一块260像素宽的区域,其中的文字从右边开始。样式中宽度的设置非常重要,必须设置刚好的宽度来容纳内容,否则诗文的显示效果可能就不是一行一段了。5、文字强制对齐我们来比较一下图4和图5两种文字编排方式,图4是使用了文字强制对齐的效果,图5只是普通的编排。图4的文字首尾很整齐,而图5的文字行落则参差不齐,有长有段。显然,图4的效果更加美观,特别是对于英文的段落。通过如下的代码,我们就可以轻松实现文字的强制对齐:图4使用文字强制对齐的效果图5普通的编排显得参差不齐<divstyle="font-size:12px;width:300;text-align:justify">TheUnitedStatesisanindustrialcountry……</div>代码标签中的样式规定了一个300像素宽的区域,“text-align:justify”规定了其中的文字行落强制对齐。通过以上的一些技巧,我们就可以很灵活的根据需要进行网页文字的编排!