Top 10 CSS notes in page design

1. CSS simplified font rules

When CSS is used to define the font, you may do the following:

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 abbreviated these attributes:

Font: 1em/1.5em bold italic small-caps verdana, Serif

It is much better now, but note that you must specify at least the font-size and font-family attributes, and other attributes (such as font-weight, font-style, if not specified, the default value is automatically used.

2. Use two classes at the same time

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

By using two classes at the same time (separated by spaces rather than commas), this section will apply the rules set in both classes at the same time. If there are any overlapping rules, the latter will be applied first.

3.default value of border (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 (black solid-line border with 3 pixels wide). In this example, the only value to be specified is the style. If you specify the style as solid (solid), the remaining values will use the default value: the default width is medium (equivalent to 3 to 4 pixels ); the default color is the text color in the border. If this is exactly what you want, you can not specify it in CSS.

4 .! Important will be ignored by IE

In CSS, the last rule is usually given priority. However, for browsers other than IE, anything is marked later! The important statement will obtain absolute priority, for example:

Margin-top: 3.5em! Important; margin-top: 2em

The top boundary of all browsers except IE is 3.5em, While IE is 2em. Sometimes this is useful, especially when using relative boundary values (like this example ), the differences between IE and other browsers are displayed.

(Many people may also notice that the CSS sub-selector will be ignored by IE)

5. Image replacement skills

It is generally wise to use standard HTML instead of images to display text. In addition to accelerating download, it is also possible to achieve better availability. However, if you are determined to use fonts that may not exist on the visitor's machine, you can only select images.

For example, you want to use the "Buy widgets" title on the top of each page, but you also want this to be discovered by the search engine, if you use a rare font for the sake of appearance, you must use an image to display it:

This is certainly true, but there is evidence that the search engine attaches more importance to real text than alt text (because there are already too many websites that use alt text as keywords), so we have to use another method: buy widgets, what should you do with your beautiful font? The following CSS can help:

H1
{
Background: url(widget-image.gif) No-Repeat;
}
H1 Span
{
Position: absolute;
Left:-2000px;
}

Now you have used both beautiful images and hidden real text-with CSS, the text is positioned at the left-side of the screen-2000 pixels.

6.another choice of CSS box model hack

The CSS box model hack is used to solve the Browser display problem before IE6. In versions earlier than ie6.0, the Border Value and fill value of an element are included in the width (instead of the width value ). For example, you may use the following CSS to specify the size of a container:

# Box
{
Width: 100px;
Border: 5px;
Padding: 20px;
}

And then apply it in HTML:

The total width of the box is 150 pixels in almost all browsers (100 pixel width + two 5 pixel borders + two 20 pixels fill ), only browsers earlier than IE6 still have 100 pixels (border values and fill values are included in width values). the hack of the box model is designed to solve this problem, but it will also cause troubles. The simpler method is as follows:

CSS:
# Box
{
Width: 150px;
}
# Box Div {
Border: 5px;
Padding: 20px;
}
HTML:
...

In this way, the total width of the box in any browser will be 150 pixels.

7. Center block elements

If your website uses a fixed-width layout and all content is placed in the center of the screen, you can use the following CSS:

# Content
{
Width: 700px;
Margin: 0 auto;
}

You can place any project in the HTML body. The project automatically obtains equal left and right boundary values to ensure center display. However, this problem still exists in browsers earlier than IE6 and will not be centered. Therefore, you must modify it as follows:

Body
{
Text-align: center;
}
# Content
{
Text-align: left;
Width: 700px;
Margin: 0 auto;
}

Setting the body will cause the body content to be centered, but even all the text is centered. This is not the expected effect. For this reason, # The content Div must specify a value: text-align: left

8. Vertical center using CSS

Vertical center is a piece of cake for tables. You only need to specify the cell as vertical-align: middle, but this is not used in the CSS layout. Suppose you set the height of a navigation menu to 2em, and then specify the vertical alignment rule in CSS, the text will still be ranked at the top of the box, there is no difference at all.

To solve this problem, you only need to set the Row Height of the box to the same as the height of the box. In this example, the box height is 2em, so you only need to add one more in CSS: line-Height: 2em to achieve vertical center!

9. CSS positioning in the container

One of the biggest advantages of CSS is that it can locate an object anywhere in the document, and it can also locate the object in a container. You only need to add a CSS rule for the container:

# Container
{
Position: relative;
}

The positioning of any element in the container is relative to that of the container. Assume that you use the following HTML structure:

...

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

# Navigation
{
Position: absolute;
Left: 30px;
Top: 5px;
}

10. Background color extending to the bottom of the screen

One of the disadvantages of CSS is the lack of vertical control, which leads to a problem that a table layout will not encounter. Suppose you have set a column on the left of the page to place the website navigation. The page is a white background, but you want the navigation column to be a blue background, use the following CSS:

# Navigation
{
Background: blue;
Width: 150px;
}

The problem is that the navigation item does not extend to the bottom of the page, and its background color does not extend to the bottom. As a result, the blue background in the left column is truncated on the page, which wastes your design. What should we do? Unfortunately, we can only use spoofing to specify the background of the body as an image with the same color and width as the left column. CSS is as follows:

Body
{
Background: url(blue-image.gif) 0 0 repeat-y;
}

The background image must be a blue image of 150 pixels in width. The disadvantage of this method is that EM cannot be used to specify the width of the left column. When the size of the text is changed, the width of the background color will not change.

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