CSS combat: Beautify paragraph text of the first word sinking

Today to talk about how to achieve the "first word sinking", the first word is very large red italics, stuck in a paragraph of the first text. This practice is common in magazines, but not so common in Web pages. So how to achieve it? In fact, it is very simple, only a CSS can be.

selector:first-letter {font-size:2.5em; font-family: "Italics _gb2312"; font-weight:bold; line-height:1.2em; float:left; padding:5px 2px 0 0; Color: #c00;}

If you think it's not clear, then here's a little bit of detail:

The first thing to do in HTML is to have a paragraph of your own text, in the middle, or in other block tags. Give him an ID or class, direct tag can also, first find this selector, here assume a paragraph of text ID for article, then to this section of the CSS from the beginning to write:

#article: first-letter {...}

: First-letter is a pseudo class that is used to set the style sheet property of the first character within an object. The grammar belongs to the CSS2 range. See "CSS2 Chinese Manual" in detail

Here again in the statement of a property, first we want to make this word is larger than the text, then give him the font size is 2.5 times times the content of the text. Of course you can also choose 3 times times, 4 times times, this according to their own needs to make changes.

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

Why do you use EM as a label? Because sometimes our readers will need to zoom through the browser function to change the size of the text, if set to a specific size, then naturally imbalance. You can make a change to see how you feel. With the size, but the font is not correct, then this should increase the font and font bold.

#article: first-letter {font-size:2.5em font-family: "Italics _gb2312"; font-weight:bold;}

Well, by now the first word seems to have no intention of sinking, then the key point here is float:left; Right, that's the left float. We need to know that when an object is set to a floating attribute, the block-level element is capable of being a chunk element regardless of whether it was originally a block level. This object is surrounded by text streams that are not set around them. The picture's wrapping in the text is also this property.

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

Try it, have you seen the first word sinking? Of course, maybe you can see it, a little less neat. Is it a little more? Don't worry, use padding to set up a bit more space at the top of the word, and let this first word and the first line flush.

What else can I say in the end? I thought, once I tried to get

......

P can also achieve a drop cap, but the result is a failure, and the conclusion is that we can't control the first character in the child object through a layer of labels.

Of course, if you are interested in this pseudo class, then also recommend you to study:

Selector:first-line {Srules}

Selector1 Selector2:first-child {Srules}