HTML段落テキストの美化Ⅰ_体験交流

上篇已经说了在第五篇会开始讲CSS，刚开始讲不能讲得复杂，我们还是由浅入深，一步步来。还是那句话：先用起来，然后再去研究。即然我们第一篇讲的是段落，那我们这篇初讲CSS当然也还是要从段落开始，让我们的段落先漂亮起来。

在没有讲CSS之前我们先去想一下什么样的段落才看起来才是最舒服的？如果大家一时还没有什么想法或是还不清楚如何去分析这个问题不妨先看一下《网页设计技巧系列之一 浅谈文本排版》。不论如何至少我们的小学老师告诉我们每一段的第一行应该空两个字。这可能是我们接受到的第一个关于如何划分段落的方法。并且可能更多人已经产生了思维定式，认为段落必需要首行空两格。而我则认为区分段落的首要素同段距，其次才能是段落首行的处理。而首行的处理是否只有缩进两字呢？我个人认为不是，因为我们还可以用“首字下沉”、“首行突出两字”等来表现。有人会说：“首字下沉我就见过，比如作者的博客就用了这个效果，但是首行突出两字似乎有点奇怪。”然而事实上首行突出两字必不是作者发明的，在中国古代的奏本上就常采用这种格式，不同的是因为他们常需要在行首写上一些颂语，而要表达这种颂语就需要抬高其地位，比如“君”“圣上”等字眼，所以才会突出两字，久之则形成了一种特别的排版形式，这种形式现在的文体是用得少了，不过大家可以多多了解一下，方便以后表达不同的文体时可以用得着。

即然段距是段落区分的第一要素，那么我们就先来解决这个段距的的样式问题。即然是一段一段的那么我们每一段都是由一组

p {这里是样式描述内容}

我们注意到了，在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来设定我们的段落：

p {margin:1em 0;}

段落間隔について話すときは、当然行間隔についても話します。「Web デザイン スキル シリーズ 1: テキスト レイアウトに関する簡単な話」 を読んだ友人なら、その重要性が理解できるでしょう。ページの行間を設定しましたか?どのように設定しますか?行間隔を設定するための特別な属性があります: line-height、これは行の高さと呼ばれます。設定したいのは行間の距離ではなく、行の高さであるためです。 Photoshop で行間を設定するためのデータが Web ページに設定されている値と異なることが常に見つかるのはこのためです。ただし、行間は設定した行の高さによって生成できるため、方法は異なりますが、目的は同じです。一般に、行の高さはフォントの高さを超える必要があります。そうしないと、行が重なってしまいます。もちろん、特殊効果を作成するためにこの方法を使用することも除外しませんが、少なくともテキストを読むときは、行がはっきりしている必要があります。行間は広すぎず、広すぎると読み取り効率が悪く、狭すぎると誤読しやすくなります。したがって、一般的な行の高さは 2 文字の高さを超えてはなりません。最も一般的に使用される振子は 1.6em から 1.8em の間です。幅が広い場合は、行間を広げる必要があります。そうしないと、間違った行を読みやすくなります。幅が小さいときに行間が広すぎると、読み取りが困難になります。効率が失われます。次に、先ほどの段落に CSS を追加して、行間隔をマークしましょう:

p {margin:1em 0; line-height:1.6em; }

これで基本的な段落の設定が完了しました。この段落に最初の行のインデントを追加する必要がある場合は、この段落のフォント、フォント サイズ、フォント スタイル、色などを設定することもできます。

p {margin:1em 0; text-indent:2em; font:normalnormal 12px/1.6em "宋体"; color:#000; }

ここのフォント属性も省略形であり、順序は次のとおりです: "font : font-style || font-variant || font-weight || font-size || line-height || font-family ",これらの知識は、Shen Su Xiaoyu の CSS2.0 中国語マニュアルに記載されています。ここでは繰り返しません。ここの色はテキストの色です。# の後の値は 6 桁である必要があります。値は Photoshop カラー ピッカーで直接コピーできます。しかし、省略することもよくあります。この略語は、奇数ビットと偶数ビットの値が同じ場合、それらを 3 桁の色の値に組み合わせることができることを意味します。例: #4488cc (これは #48c に短縮できます) 最初のテキストを強調表示する必要がある場合は、text-indent の値を負の値に設定するだけでなく、padding の値も変更する必要があります。はみ出しがコンテンツ領域を超えているため、パディング領域内にスペースがない場合、強調表示された 2 つの単語を表示できません。次に、最初の行の 2 つの単語を強調表示する別の CSS を与えてみましょう

p {margin:1em 0; padding:0 0 0 2em; text-indent:-2em; font:normalnormal 12px/1.6em "宋体"; color:#000; }スパン>

段落テキストの美化に関する内容はここで、次の記事ではドロップキャップの作り方と注意点について解説していきます！