CSS beautification paragraph text first word sink

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 ;}

If you don't think it is clear, let's take a closer look:

First, you must have a piece of text in HTML, either in <p> </P> or in other block tags. You can also give him an ID or a class or a direct tag. First, find this selector. Here, if the ID of a text is article, write the CSS for this paragraph as follows:

# Article: first-letter {......}

: First-letter is a pseudo class used to set the style table attribute of the first character in the object. This syntax is within the range of css2. For details, see css2 Chinese manual.

Here we will elaborate on the attributes in the statement. First, we need to make this word bigger than the text in the text, so the font size given to it is 2.5 times the size of the text. Of course, you can also choose 3 times or 4 times, which can be modified based on your own needs.

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

Why use the EM label? Sometimes our readers will need to use the browser zoom function to change the text size. If it is set to a specific size, it will naturally be out of proportion. You can change it to see how it feels. If the font is not correct, the font and font should be bold.

# Article: first-letter {font-size: 2.5em; font-family: "_ gb2312"; font-weight: bold ;}

Well, the first word seems to have no intention of sinking, so the key point here is float: Left; right, that is, left floating. We need to know that when an object is set as a floating attribute, whether it is a block-level element or not, it will have the features of block-level elements. This object is surrounded by unspecified text streams. This attribute is also used to enclose images in text.

# Article: first-letter {font-size: 2.5em; font-family: "_ gb2312"; font-weight: bold; line-Height: 1.2em; float: Left ;}

Try it out. Have you seen the first word sink? Of course, you may see that it is a little less neat, isn't it a little more? Don't worry. Use padding to set the top point of the word to make it more space, so that the first line is equal to the first line.

What else can I say? Once I tried to make <Div id = "acticle"> <p> ...... </P> </div> P can also sink the first character, but the result fails. The conclusion is that we cannot control the first character in the sub-object through a layer of labels.

Of course, if you are interested in this pseudo class, we recommend that you study it again:
Selector: first-line {srules}
Selector1 selector2: First-child {srules}