10 little-known CSS usage tips

10 little-known CSS usage tips

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 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:

<p class= "text side" >...</p>
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 rules overlap, the latter will be given practical priority.

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. Picture Replacement Skills

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:

<h1><img src= "Widget-image.gif" alt= "Buy Widgets"/></h1>
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><span>buy widgets</ Span></h1>, what about your pretty fonts? The following CSS can be helpful:

H1
{
Background:url (widget-image.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.

Another choice of 6.css box model hack

The CSS box model hack is used to solve IE6 browser display problems before the IE6.0 version will include the border values and padding values of an element within the width (rather than the width value). For example, you might use the following CSS to specify the size of a container:

#box
{
width:100px;
border:5px;
padding:20px;
}
Then apply in HTML: <div id= "box" >...</div>

The total width of the box is 150 pixels in almost all browsers (100 pixel width + two 5 pixel border + two 20 pixel padding), the only IE6 version of the browser is still 100 pixels (border values and padding values are included in the width value), the box model of the hack is to solve this problem, But it can also cause trouble. The simpler approach is as follows:
css:

#box
{
width:150px;
}

#box div{
border:5px;
padding:20px;
}
html:

<div id= "box" ><div>...</div></div>
The total width of the box in any browser will be 150 pixels.

7. Center Block elements

Suppose your site uses a fixed-width layout with all the content in the center of the screen, and you can use the following CSS:

#content
{
width:700px;
margin:0 Auto;
}
You can place any item within the body of HTML into <div id= "content" ></div>, which automatically obtains the same left and right values to ensure the center display. However, this is still problematic in previous versions of IE6 browsers and will not be centered, so you must modify the following:

Body
{
Text-align:center;
}

#content
{
Text-align:left;
width:700px;
margin:0 Auto;
}
The body of the setting will cause the main content center, but even all the text is centered, which I am afraid is not the effect you want, for this #content div also specify a value: Text-align:left

8. Use CSS to achieve vertical center

The vertical center is a piece of cake for the table, just specify the cell as Vertical-align:middle, but it doesn't work in the CSS layout. Let's say you set the height of a navigation menu to 2EM, and then specify the vertical alignment in the CSS, the text will be lined up at the top of the box, no difference at all.

To solve this problem, simply set the row height of the box to the same height as the box, in this case, the box height of 2em, then just add one in the CSS: Line-height:2em can be achieved vertically center!

9. CSS positioning within the container

One of the great advantages of CSS is that you can position objects anywhere in the document, and you can also position objects within a container. You only need to add a CSS rule for the container:

#container
{
position:relative;