CSS ten secret skills to know

Core tips: CSS Top ten Cheats

1.CSS Font Shorthand rules

You might do this when you use CSS to define fonts:
Font-size:1em;
Line-height:1.5em;
Font-weight:bold;
Font-style:italic;
Font-variant:small-caps;
Font-family:verdana,serif;
In fact, you can abbreviate these attributes:
Font:1em/1.5em Bold Italic Small-caps Verdana,serif
It's much better now, but one thing to note: Using this shorthand you should at least specify the font-size and font-family attributes, and other properties (such as Font-weight, Font-style,font-varient) will automatically use the default values if unspecified.

2. Use two class at the same time

Usually we just specify a class for the attribute, but that doesn't mean you can only specify one, in fact, you can specify how much you want to specify, for example:

...

By using two classes at the same time (using a space instead of a comma), the paragraph applies the rules set out in the two class. If any of the two rules overlap, the latter will have a practical priority application.

3.css border (border) default value

When you write a border rule, you usually specify the color, width, and style (in any order). For example: border:3px solid #000 (3 pixel wide black solid border), in fact, the only value that needs to be specified in this example is the style. If you specify that the style is solid (solid), the remaining values will use the default value: The default width is medium (equivalent to 3 to 4 pixels), and the default color is the text color in the border. If this is the effect you want, you can definitely not specify it in CSS.

4.!important will be ignored by IE

In CSS, the rule that is usually last specified is given precedence. However, for browsers other than IE, any subsequent statements marked with!important will receive absolute precedence, for example:
Margin-top:3.5em!important; Margin-top:2em
The top border of all browsers except IE is 3.5em, and IE is 2em, which is sometimes useful, especially when using relative boundary values (like this example) to show the nuances of IE and other browsers.
(Many people may also notice that the CSS selector is also ignored by IE)

5. Technique of picture replacement

It is often wiser to use standard HTML instead of a picture to display text, except to speed up the download and get better usability. But if you are determined to use a font that may not be available in the visitor's machine, you can only select pictures.
For example, you want to use the title "Buy Widgets" at the top of each page, but you also hope that it can be found by the search engines, for the sake of aesthetics you use a rare font so you have to use a picture to show:
That's certainly true, but there's evidence that search engines value real text far more than ALT text (because there are already too many sites using alt text as keywords), so we have to use another method: H1
{
Background:url (/uploadfile/200806/17/96162027360.gif) no-repeat;
}

H1 span
{
Position:absolute;
left:-2000px;
}
Now that you have both beautiful pictures and good hidden text--with CSS, the text is located on the left side of the screen-2000 pixels.

1 2 Next page > full text reading tips: Try "←→" button, turn the page more convenient Oh!

[1] [2] Next page