10 tips for CSS style sheet design

css| Skills | design | style sheet

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:

<p class= "text side" >...</p> by using two classes at the same time (using spaces instead of commas), this 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 edge 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 (http://www.webjx.com/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

CSS box model hack is used to solve the IE6 browser before the problem, IE6.0 version will be a certain yuan to click 蛑 Island Swallow zhen eggs  exaggeration rocky rong? Instead of adding to 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 it 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 The Block element

Suppose your site uses a fixed-width layout, all content is placed 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

, the item will automatically get an equal left and right boundary value to ensure a centered 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, and 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 the object anywhere in the document, and you can also position the object within a container. You only need to add a CSS rule for the container:

#container

{

position:relative;

}

The positioning of any element within the container is relative to the container. Suppose you use the following HTML structure:

　　

...

If you want to position the navigation within the container 30 pixels from the left edge and 5 pixels from the top, you can use the following CSS statement:

#navigation

{

Position:absolute;

left:30px;

top:5px;

}

10. The background color that extends to the bottom of the screen

One of the drawbacks of CSS is the lack of vertical control, which results in a table layout problem that is not encountered. Let's say you set up a list of navigation on the left side of the page to place the site. The page is a white background, but you want the navigation to be listed as a blue background, use the following CSS:

#navigation

{

Background:blue;

width:150px;

}

The problem is that the navigation item does not extend all the time to the bottom of the page, and naturally its background color does not extend to the bottom. So the left column of the blue background on the page is truncated halfway, wasting your design. What do we do? Unfortunately, we can only use deception, the background of the body is designated as the same color with left column picture, CSS is as follows:

Body

{

Background:url (/blue-image.gif) 0 0 repeat-y;

}

The background image should be a blue picture with a width of 150 pixels. The disadvantage of this approach is that it is impossible to use EM to specify the width of the left column, and the width of the background color will not change when the user changes the size of the text, causing the width of the content to expand.

This is the only solution to this type of problem until you write this article, so you can only use pixel values for the left column to get a different background color that can be automatically extended.