Ten Tips for CSS Style Sheet Design

1. CSS font abbreviation rules

When defining fonts using css you might do this:

In fact you can abbreviate these properties:

font: 1em/1.5em bold italic small-caps verdana,serif

It's much better now, but there is one thing to note: to use this shorthand method, you must at least specify the font-size and font-family attributes. If other attributes (such as font-weight, font-style, font-varient) are not specified, they will The default value is automatically used.

2. Use two classes at the same time

Usually we only specify one class for the attribute, but this does not mean that you can only specify one. In fact, you can specify as many as you want, for example:

<p class="text side">...</p>By using two classes at the same time (separated by spaces instead of commas), this paragraph will apply the rules specified in both classes. If any of the rules overlap, the latter one will take precedence.

3. Default value of border in css

When writing a border rule, you usually specify the color, width, and style (in any order). For example: border: 3px solid #000 (3 pixels wide black solid border). In fact, the only value that needs to be specified in this example is the style. If you specify the style as solid, then the default values ​​will be used for the rest of the values: the default width is medium (equivalent to 3 to 4 pixels); the default color is the color of the text in the border. If this is exactly what you want, you don't have to specify it in css.

4. !important will be ignored by IE

In CSS, usually the last rule specified takes precedence. However, for browsers other than IE, any statement marked with !important will get absolute priority, for example: margin-top: 3.5em !important; margin-top: 2em in all browsers except IE The top margin is always 3.5em, while IE is 2em. Sometimes this is useful, especially when using relative margin values ​​(like this example), to show the subtle differences between IE and other browsers. (Many people may also notice that CSS sub-selectors are also ignored by IE)

5. Picture replacement skills

It's often wiser to use standard html instead of images to display text, in addition to speeding up downloads and resulting in better usability. But if you're determined to use a font that may not be available on your visitor's machine, you can only choose images.

For example, you want to use the title "Buy widgets" at the top of each page, but you also want it to be discovered by search engines. If you use a rare font for aesthetics, then you have to use an image to display it. Got:

<h1><img src="/widget-image.gif" alt="Buy widgets" /></h1>

This is certainly true, but there is evidence that search engines value real text much more than alt text (because too many websites already use alt text as keywords), so we have to use another method: <h1><span >Buy widgets</span></h1>, what about your beautiful fonts? The following css can help:

Now you have both a beautiful image and a good hiding of the real text - with the help of CSS, the text is positioned -2000 pixels from the left side of the screen.

6. Another option for css box model hack

The css box model hack was used to solve browser display problems before IE6. Versions before IE6.0 would include the border value and padding value of an element within the width (rather than adding it to the width value). For example, you might use the following css to specify the dimensions of a container:

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 borders + two 20 pixel padding), except in browsers before IE6 it is still 100 pixels (border value and the padding value is included in the width value), the box model hack is designed to solve this problem, but it will also cause trouble. A simpler way is as follows:

This will result in the total width of the box being 150 pixels in any browser.

7. Center the block element

Assuming your website uses a fixed-width layout, with all content placed in the center of the screen, you can use

The following css:

You can place any item within the body of the HTML, and the item will automatically obtain equal left and right boundary values ​​to ensure centered display. However, this is still a problem in browsers before IE6 and will not be centered, so it must be modified as follows:

Setting the body will cause the main content to be centered, but even all the text will be centered. This is probably not the effect you want. For this reason, the div of #content must also specify a value: text-align: left

8. Use css to achieve vertical centering

Vertically centering is a piece of cake for tables, just specify the cell as vertical-align: middle, but this doesn't work in CSS layout. Suppose you set the height of a navigation menu to 2em, and then specify the vertical alignment rules in CSS, the text will still be arranged to the top of the box, there is no difference at all.

To solve this problem, just set the line height of the box to be the same as the height of the box. In this example, the box height is 2em, then just add another line-height: 2em to the css. Achieved vertical centering!

9. CSS positioning within the container

One of the biggest advantages of CSS is that objects can be positioned anywhere in the document, and objects can also be positioned within a container. Just add a css rule to the container:

Then any element within the container is positioned relative to the container. Assume 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:

10. Background color extending to the bottom of the screen

One of the disadvantages of CSS is the lack of vertical control, which causes problems that a table layout does not encounter. Suppose you set up a column on the left side of the page to place the navigation of your website. The page has a white background, but you want the navigation column to have a blue background. Just use the following css:

The problem is that the navigation item doesn't extend all the way to the bottom of the page, and naturally its background color doesn't extend to the bottom either. So the blue background of the left column is cut off halfway on the page, wasting your design. What should we do? Unfortunately, we can only use deception, that is, specify the background of the body as an image of the same color and width as the left column. The css is as follows:

The background image should be a blue image 150 pixels wide. The disadvantage of this method is that em cannot be used to specify the width of the left column. When the user changes the size of the text and the width of the content expands, the width of the background color will not change accordingly.

As of this writing this is the only solution to this type of problem, so you can only use pixel values ​​for the left column to get a different background color that stretches automatically.