First look at the code on an instance. Apply the word you want to sink.
Example 1
The code is as follows: |
Copy code |
. First { Font-size: 320%;/* increase the font percentage */ Float: left;/* left floating */ } |
Analysis:
1. Increase the font size.
2. Float left, and then the next line is mentioned
Example 2
The code is as follows: |
Copy code |
. Menglong,. menglong2,. menglong3 { Width: 300px; Border: 1px solid # ddd; Padding: 5px; Font-size: 12px; Margin: 5px 0; } . Menglong: first-line { Color: red; } . Menglong: first-letter { Font-size: 350%; Font-weight: bold; Color: #000; Float: left; } . Menglong2: first-line { Letter-spacing:-2px; } . Menglong3 { Text-indent: 2em; } |
Html code:
The code is as follows: |
Copy code |
<! Doctype html> <Html dir = "ltr" lang = "zh-CN"> <Head> <Meta charset = "utf-8"> <Title> CSS first word sinking </title> </Head> <Body> <Div class = "menglong"> 2 some sinking and discoloration2 some sinking and discoloration2 some sinking and discoloration2 some sinking and discoloration </div> <Div class = "menglong"> The first word sink and the first line changes color. The first line changes color. </ div> <Div class = "menglong2"> The first line is indented, which is closer to the first line. first line indent, closer first line indent, closer </div> <Div class = "menglong3"> The first line of a paragraph contains two spaces. The first line of a paragraph has two spaces. The first line of a paragraph has two spaces. The first line of a paragraph has two spaces. The first line of a paragraph has two spaces. The first line of a paragraph has two spaces. The first line of a paragraph has two spaces. </Div> </Body> </Html> |