美化html段落文字ⅰ

如前一篇文章所述，CSS将在第五次会议开始时讨论。开头不要说得太复杂，要由浅入深，循序渐进。再次：先用，再研究。也就是说，我们的第一篇文章是关于段落的，所以当然要先从段落开始，让我们的段落变美。在谈CSS之前，我们先想想什么样的段落看起来最舒服。如果你一时没什么想法或者不知道怎么分析这个问题，不妨先看看《网页设计技巧系列之一 浅谈文本排版》。反正至少我们小学老师告诉我们，每段第一行要空两个字。这可能是我们接受的第一种如何划分段落的方法。也许更多的人已经产生了第一行段落必须是空的心态。在我看来，将段落的第一个元素与相同的段落距离区分开来，然后处理段落的第一行。第一行只有缩进吗？我个人不这么认为，因为我们还可以用“第一个字下沉”、“第一行突出两个字”等等。有人会说：“我见过第一个字下沉。比如，作者的博客就采用了这种效果，但在第一行突出两个字似乎有点奇怪。”但实际上，第一行突出两个字一定不是作者发明的，这种格式在中国古代文字中经常使用。不同的是，他们往往需要在行首写一些讴歌，而要表达这样的讴歌，就需要抬高自己的地位，比如“君”和“圣”这两个字，所以会突出两个字。久而久之，他们形成了一种特殊的排版形式，现在用的样式少了，但你可以多了解一下。

也就是段落间距是段落区分的第一要素，那么我们先来解决这个段落间距的样式问题。也就是每一段都由一组p/p组成，我们的CSS只需要描述这段的标签就可以达到想要的效果。然后基本形式是：p {这里是样式描述内容}我们注意到在CSS中，这个段落标签不需要尖括号，只需要一个‘p’就够了。所有标签都是这样处理的。然后我们需要为每个段落设置一个段落间距。这里我们有两个描述性属性，一个是填充，另一个是边距。这两种表达的效果看起来有点相似，但本质上是不同的。如果我们把一个段落表示成一个盒子，这个盒子里有一些东西，填充是这些东西和盒子内侧的距离，而边距是盒子之间的距离。显然，我们应该在这里使用保证金。写于：margin 3 33601 em 0；这是一种速记方法。如果写得完整，应该是：margin-top :1 em；右边距：0；边距-底部：1 em；左边距：0；这显然太多余了，所以我们通常把它写成margin:1em 0 1em 0这里的顺序是从上到下从右到左。由于上下值相同，左右值相同，可以缩写为：margin 3 33601 em 0；Em这里指的是相对长度单位，相对于当前对象中文本的字体大小。关于该单位的信息，请参考苏神小雨编制的《CSS2.0中文手册》。为什么用em代替px或pt？这是因为我们现在的浏览器大多都有字体放大的功能，方便读者更清晰地看到文字。如果我们用px来设置音高，那么当字体放大的时候音高不会改变，那么当它放大到一定值的时候，这个音高的特性就不存在了。所以我们用单位em，就是希望字体变大的时候，间隔也相应变大，方便识别。

这里值得注意的是，当我们使用边距时，两段之间会有重叠，所以如果我们看一下图右侧的图，可以发现两段之间的边距是重叠的，这应该是两个高度或一个高度相加的结果，但是上面图中间指示的填充并没有重叠，它们的高度是相加的，我们应该注意的不是BUG，而是一个特性。然后我们会写一个CSS来设置我们的段落：p { margin 3 33601 em 0；}谈到段落间距，自然会谈到行距。一些看过《网页设计技巧系列之一 浅谈文本排版》的朋友会明白行距的重要性。那么，你有没有为自己的页面设置行距，怎么设置？设置行距有一个特殊的属性：行高，应该叫行高。因为我们要设置一行的高度，而不是行与行之间的距离。这就是为什么我们总是发现Photoshop中设置行距的数据和设置网页的数据不一样。但是行距还是可以由我们设置的行高产生，所以方法不同，但是目标是一样的。一般我们的行高一定要超过字体高度，否则线条会相互重叠。当然，我们也不排除利用这种风格来制作一些特效，但至少我们在阅读文字的时候需要明确。行距不应太大。如果太大，阅读效率不高。如果太小，很容易读错行。所以一般行高不要超过两个字的高度。最常用的振动在1.6 em到1.8 em之间。如果宽度大，我们需要增加行距，否则很容易读错行。如果宽度小，行距太大，会损失阅读效率。然后我们给刚才的段落加上CSS，标记我们的行距：p { margin :1 em 0；线高：1.6 em；}这样就完成了一个基本段落的设置。如果需要缩进这一段的第一行，还可以设置字体、字号、字形、颜色等。对于本段：p { margin 33601 em 0；text-indent :2 em；font : normal 12px/1.6 em ''；color: # 000}这里字体的属性也是一个缩写，顺序是：“font : font-style | | font-variant | | font-weight | | font-size | | line-height | | font-family”，这在苏神小雨的CSS2.0中文手册中有描述。我在这里不再重复。这里的颜色是文本的颜色，#之后的值应该是6位数字，可以直接在Photoshop拾色器中复制值。但是我们经常缩写它。缩写表示当奇数位和偶数位的值相同时，可以组合成3位颜色值。例如，#4488cc可以缩写为#48c。如果需要先突出显示，不仅需要将text-缩进的值设置为负值，还需要修改padding的值，因为突出显示的内容超出了内容区域，所以如果padding区域没有空间，这两个突出显示的单词就无法显示。然后我们给出一个CSSp {margin:1em 0，第一行突出显示两个字；划水：0 02em；text-indent :-2em；font : normal 12px/1.6 em ''；color: # 000}先在这里说说美化段落文字，下一篇文章会讲解沉首字母的做法和注意事项！