Top Ten Tips for CSS in Web Page Design

1. cs s font abbreviation rules <br />When using css to define fonts you may do this:

In fact you can abbreviate these properties:

It's much better now, but there is one thing to note: to use this shorthand method, you must specify at least the font-size and font-family properties. If other properties (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:

By using two classes at the same time (separating them with 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 receive absolute priority, for example:

The top margin is 3.5em in all browsers except IE, and 2em in IE. Sometimes this is useful, especially when using relative margin values ​​(like this example), to show the difference between IE and other browsers. Nuance.

(IE here refers to: IE6 and below, excluding IE7. In fact, IE7 supports the !important attribute, and the same is true for css sub-selectors)

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:

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:

Buy widgets, but 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 the css box model hack. The css box model hack is used to solve browser display problems before IE6 . Versions before IE6.0 will include the border value and padding value of an element within the width (instead of added to the width value). For example, you might use the following css to specify the dimensions of a container:

Then apply in html:
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 block elements

Assuming that your website uses a fixed-width layout and all content is 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 you only need to 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.