CSS ドロップキャップで段落テキストを美しくする_Experience Exchange

Selector:first-letter {font-size:2.5em; font-family:"楷体_GB2312"; font-weight:bold; line-height:1.2em; float:left; padding:5px 2px 0 0; color:#c00;}

    如果你觉得还不是很清楚，那么这里就细细讲述一下：

    首先要在HTML中有一段自己的文本，是在

中的也好，在其它块标签中都可以。给他个ID也好，class也好，直接的标签也可以，先找到这个选择符，这里假设一段文字的id为article，那么给这段的CSS一开始就写成：

#article:first-letter {……}

    :first-letter 是个伪类，用途是设置对象内的第一个字符的样式表属性。该语法属CSS2范围。详细见《CSS2中文手册》

    这里再细说语句中的一个个属性，首先我们要让这个字大于正文中的字，那么给他的字体大小是正文内容的2.5倍。当然你也可以选择3倍，4倍，这个根据自己的需要来作修改。

#article:first-letter { font-size:2.5em }

    为什么要用em这个标签呢？因为有时候我们的读者们会需要通过浏览器缩放的功能改变文字的大小，如果设为一个具体的大小，那么自然就会比例失调。这个大家可以动手变动一下看看找找感觉。有了大小了，但是字体不对，那么这里应增加字体与字体加粗。

#article:first-letter { font-size:2.5em; font-family:"楷体_GB2312"; font-weight:bold;  }

さて、これまでのところ、最初の単語には沈む意図がないようなので、ここでの重要なポイントは float:left; はい、浮いたままになっています。オブジェクトが浮動属性に設定されている場合、元がブロック レベル要素であるかどうかに関係なく、オブジェクトはブロック レベル要素の特性を持つことになることを知っておく必要があります。設定されていない周囲のテキスト フロー側がこのオブジェクトを囲みます。テキスト内の画像の折り返しにもこの特性があります。

#article:first-letter { font-size:2.5em; font-family:"楷体_GB2312"; font-weight:bold; line-height: 1.2em; float:left; }

試してみてください。ドロップ キャップを見ましたか?もちろん、少し乱れているのがわかると思いますが、上部がもう少し突き出ているでしょうか。心配しないでください。パディングを使用して単語の上部にスペースを増やし、最初の単語が最初の行と同じ高さになるように設定します。

最後に、他に何を言えばいいでしょうか?一度、

...

の P にドロップ キャップを実装しようとしたのですが、結果は失敗し、結論は次のとおりでした。サブオブジェクトの最初の文字を制御するラベル。

もちろん、この疑似クラスに興味がある場合は、引き続き学習することをお勧めします。
セレクター: first-line { sRules }
Selector1 Selector2: first-child { sRules }