CSS Beautify Paragraph Text with Drop Cap_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;  }

Okay, so far, the first word seems to have no intention of sinking, so the key point here is float:left; yes, it is left floating. We need to know that when an object is set to a floating attribute, it will have the characteristics of a block-level element regardless of whether it is originally a block-level element. The surrounding text flow side that is not set will surround this object. The wrapping of images in text also has this property.

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

Give it a try, have you seen the drop cap? Of course, maybe you can see that it's a little bit untidy. Is there a little bit more sticking out on top? Don't worry, use padding to set it up so that there is more space at the top of the word, so that the first word is flush with the first line.

Finally, what else can I say? I thought about it, once I tried to make the P in

...

also implement the drop cap, but the result failed, and the conclusion was: we cannot separate A layer of labels to control the first character in the sub-object.

Of course, if you are interested in this pseudo-class, it is recommended that you continue to study:
Selector: first-line { sRules }
Selector1 Selector2: first-child { sRules }