CSS tips: five very important CSS skills

Today I will introduce you to the other five very importantCSS skills, There may be duplicates. It is beneficial for you to fully understand this knowledge.

1. Image replacement text

 

# Header h1 {
Display: block;
Text-indent:-9999em;
Background :( images/logo.png) no-repeat 0 0;
Height: 87px;
Width: 250px;
Overflow: hidden;
}

Can you understand this? I have seen that many of them only use images instead of links. In other words, you only need a simpler method to use an image to replace text, display the LOGO, and have links. The display: block Function of each value. The default status of a is inline. You need to change it to block to define the height and width to adapt to the LOGO width and height. Another function is to enable the link to be clicked in the original area after text-indent.
Text-indent:-9999em;-do you want to delete the text in the logo? This should be your final choice. Because this does not conform to the semantic tag, it is also unfriendly to search engines. This value is to indent your font to a point you cannot see. So that you do not need to delete text.
Don't talk about anything else...

2. display: inline-block;

 

When writing sofished daily CSS, the display: inline-block is used in the top-standing date space. As the name suggests, it is also a block in the inline condition, and the height and width can be set. In GR, I saw a share article about how to display the display: inline-block across browsers:

. Element-class {
Display:-moz-inline-stack; // Firefox only code
Display: inline-block; // some standard browsers
Zoom: 1; // IE only
* Display: inline; // Only IE know this code (CSS Hack)
}

What are the benefits? The advantage is that you do not need to use float to display elements with a Set width or height in a row. However, the cross-browser mentioned above seems that I can still display it under IE. Is it the problem of IE tester?

3. Vertical center using line-height text

 

You may know that text-align is used for horizontal text play. However, you cannot find a more direct way to vertically place elements. Here, you may use line-height. For example, if you want to center the text in the navigation, you may think of using padding and margin. However, at this time, annoying IE may cause problems for you, use line-height. This is a simpler method:
The navigation height of the image above is 28px. You can set this value for a: # navigation a {font-size: 14px; line-height: 28px, this reduces the trouble of Using padding and margin.

4. center layout

 

You will find that the layout of many websites is in the play. The reason is that it is convenient to browse and is better for users? CSS beginners may not know how to do it. It's easy. Let's just say that the div shell of your layout is # wrapper:
Div # wrapper {margin: 0 auto ;}
That is to say, Let there is no margin above, and automatically adapt to the left and right, select the same width. In this way, we can better demonstrate in various browsers.

5. CSS abbreviations

CSS abbreviation, why? In simple terms, there are two advantages. 1. It makes code writing more efficient because it is short. 2. It is easy to modify, and no one wants to stay in front of a pile of messy code. It seems that many people have written this, but here, let's repeat it. I don't want to write it all directly, so the article seems to be very long. I will show you some links and you will understand.