CSS Landscaping Paragraph text of the first word sinking _ experience Exchange

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

If you don't think it's clear, here's a little bit of a story:

First, there is a paragraph of your own text in the HTML, which is

In the other block tags can be. Give him an ID or class, direct label also can, first find this selector, here assume that a paragraph of text ID is article, then to this section of the CSS is written in the beginning:

#article: first-letter {...}

: First-letter is a pseudo-class that uses a style sheet property that sets the first character within an object. This syntax belongs to the CSS2 range. See "CSS2 Chinese Handbook" in detail

Here again in the statement of the attributes, first we want to make this word larger than the text in the word, then give him the font size is 2.5 times times the content of the body. 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 for this label? Because sometimes our readers will need to change the size of the text through the browser zoom function, if set to a specific size, then the natural imbalance. We can make a change and look for the feeling. With the size, but the font is not correct, then you should increase the font and font bold.

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

Well, so far this first word seems to have no intention of sinking, then the key point here is float:left; The right thing is to float on the left. We need to know that when an object is set to a floating property, the attributes of the block-level element are available regardless of whether the original is a block-level element. The text flow side that is not set around is surrounded by this object. The wrapping of the picture in the text is also this attribute.

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

Try it out, have you seen the first word sinking? Of course, you may have seen it, a little less neat. Is there a little more? Don't worry, use padding to set up a bit more space at the top of the word so that the first line is flush.

What else can I say at the end? I thought about that one time I tried to get

......

The P can also achieve the drop cap, but the result fails, and the conclusion is that we cannot control the first character in the sub-object by a layer of labels.

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

