web标准知识——美化段落文本Ⅰ

上四篇的内容是把常用的XHTML标签拿出来介绍了一下，不是很详细。不过没关系，重点是要能先知道用他们，以后深入了再去细细研究更为详细的特性以及使用方法就容易多了。上篇已经说了在第五篇会开始讲CSS，刚开始讲不能讲得复杂，我们还是由浅入深，一步步来。还是那句话：先用起来，然后再去研究。即然我们第一篇讲的是段落，那我们这篇初讲CSS当然也还是要从段落开始，让我们的段落先漂亮起来。

即然段距是段落区分的第一要素，那么我们就先来解决这个段距的的样式问题。即然是一段一段的那么我们每一段都是由一组<p></p>组合而成的，而我们的CSS只要通过对这个段落标签的描述就可以实现我们所需要的效果了。那么基本形式是：

我们注意到了，在CSS中这个段落标签是不需要加尖括号的，只需要一个"p"即可以了。所有的标签都是如此处理。那么我们需要给每个段落设个段距，这里我们有两个描述属性，一个是padding，另一个是margin，这两个表现的效果看起来有点像，但是却有着本质上的区别，如果我们把段落表示成盒子，在这个盒子里装着一些东西，padding就是这些东西与盒子内侧边的距离，而margin则是盒子与盒子之间的距离。这里很显然，我们里应该是使用 margin。写法是：margin:1em 0;这是一种简写的方法，如果写全了应该是：margin-top:1em; margin-right:0; margin-bottom:1em; margin-left:0; 这很明显太冗余了，所以一般我们通常是写成：margin:1em 0 1em 0; 这里的顺序是上右下左，由于上下的数值是一样的，左右的数值是一样的，那么就可以再缩写成：margin:1em 0; 这里的em是指相对长度单位，相对于当前对象内文本的字体尺寸。有关于单位的知识请查阅沈苏小雨编制的《CSS2.0中文手册》。那为什么要用em而不用 px或是pt呢，这是因为我们现在的流览器大多都有字体放大的功能，这也是方便读者的能看得更清楚文字内容，那么如果我们用px来设定段距那么当字体放大时段距却不会变动，那么当放大到一定数值时这个段距的特性也就不存在了。所以我们使用em这个单位，也就是希望当字体变大时段距也跟着相应变大，方便识别。 

 

这里值得注意的是，当我们使用margin的时候两个段落之间的margin会有重叠，那么看上图中右侧的图我们可以发现在两段之间的margin是被重叠了原本应该是两个高度相加的结果还是一个高度，但是上图中间的示意padding却没有重叠他们的高度是相加的，这点大家要注意到，这不是什么BUG，而是一种特性。那么我们就写一句CSS来设定我们的段落：

说了段距自然就会说到行距，有看过《网页设计技巧》系列之浅谈文本排版 的朋友就会明白行距的重要性，那么你是否有给自己的页面设置行距呢，是如何设置的？设置行距有一个专门的属性：line-height，这个应该称之为行高。因为我们要设定的是一行的高度，而不是行与行之间的距离。这也就是为什么我们总发现Photoshop里设置行距的数据与做网页设置的数值不一样的原因了。但是行距依然是可以通过我们设定的行高最终产生，所以方法不同，但是目标是一致的。一般我们的行高一定是要超过字体高度的，否则行与行之间就会重叠，当然我们不排除使用这种式做一些特别的效果，但是至少在阅读文本上我们需要行行清楚。行距不宜太大，太大了阅读效率不高，如果太小了又容易读错行。所以一般行高不应超过两个字的高度。振之最常用的是1.6em~1.8em之间，如果宽度很大，我们就需要加大行距不然我们很容易读错行，如果宽度小的时候行距过大则失去了阅读的效率。那么我们把刚才的段落的CSS做一下增加，标注一下我们的行距：

这样对于一个基本的段落设置就已经完成了，如果需要给这个段落加个首行缩进，还可以为这个段落设置一下字体，字大小，字样式，色彩等等：

这里关于字体的属性也是个缩写形式，顺序是：“font : font-style || font-variant || font-weight || font-size || line-height || font-family ”，这些知识在沈苏小雨的CSS2.0中文手册中都有讲述。我这里就不重复了。这里的color是文字的色彩，#后面的数值应该是6位，可以直接复制 Photoshop拾色板里的数值。但是我们也常常会缩写。缩写方式是，奇数位与偶数位的值相同时即可合并为3位的色值。比如：#4488cc，可以缩写为#48c，如果需要首突出，那么不光需要把text-indent的值设为负值，还需要修改padding的数值，因为突出去的也就是超出了内容区那么如果padding区没有空间那么这两个突出去的字就无法显示。那我们再给出一个首行突出两字的CSS

有关美化段落文本的内容先讲到这里，下一篇讲解首字下沉的做法以及注意事项！

评论 (0) All

登陆 还没注册？