10 tips for CSS webpage text/Text Mixing

1. indent the first line
You know, from elementary school, the teacher taught us that the beginning of the paragraph should be blank. When you use word, you can also indent the first line, but in HTML, your space key does not seem to work. Of course, you can use & nbsp; to replace a space, but this is not an ideal method. Use CSS, which is simple and effective:

<P style = "text-indent: 2em;"> your content </P>

In this case, the section "style =" text-indent: 2em; "will display two characters of indentation. More indentation? Modify 2em. 2 indicates 2 characters. You can increase or decrease the number accordingly. The following is an example of Li Bai's poem:

Zige connects to the final south, and the blue and the dark colors. Hope for Xianyang by Cliff, and the North Pole of gongque Luo. Wan Jing was surprised to draw, 9 yuan such as the string straight. The Galaxy in Weishui is clear, and the sky is endless. He weiyun, the clothing champion. Ma was scattered, and Jun rongwei refused the domain. Yi Yun Yuanhua and Wei Huo lost his power. Song zhongle is not finished yet, and Rong is still forced to go old. The circle is full and the sun is moving. The East China Sea gold is not scattered, He zhengxi Feiyu. No sorrow, tears.

2. Text Mixing
In word, we can use wrap to display the text around the image, while in CSS, we can use float to make the text remain unchanged, it is displayed in a blank space other than the image. As follows:

When the water of the Yellow River reaches the sea, the sky will not go back.
The gentleman does not see the high hall bright mirror sad white hair, toward the blue silk twilight into the snow.
If you are proud of your life, do not make the money empty for the month.
By nature, our products will be useful, and the vast amount of money will be restored.
It is fun to slaughter a goat and eat three hundred cups.
CEN Fuzi, Dan qiusheng, will enter the wine, cup does not stop.
...

In the following code, set float to left, the image is displayed on the left, and right is displayed on the right, however, margin-right needs to be written to prevent text and images from being pasted together. If you set float: Right, you should change margin-Right to margin-left:

3. Set the background color
Let's take a look at an example. If you have content to be referenced but you have not set it in the topic or want to customize the background color, you may choose the following display method:

Moonlight in front of bed, suspected to be frost on the ground;
Look up at the moon and look down at your hometown;
No bath in spring, mosquitoes bite everywhere;
Take out the enemy's fear, where the mosquitoes run.

The Code is as follows. If you do not know how the color is defined, you can check the security of web216 and change it to the corresponding color code. For example, # faf7e8 indicates the light yellow color:

<P style = "Background: # faf7e8; border-top: 1px dotted # a3a3a3; border-bottom: 1px dotted # a3a3a3; text-align: center;">

4. Center the text
In the preceding example, if text-align: center is added to the Code, the article can be horizontally centered within the width of the container. Oh, easy ?!

5. display a border
Border we will use border to add a border, as long as we add style = "border: 1px dotted #080;" 1px code border size, while dotted is the border style, there are three commonly used styles: solid (Solid Edge) dashed (dotted line) dotted (dotted line ). just like in the border of the above instance, I use the dotted edge.

Detailed source reference: http://www.jb51.net/css/20184.html