CSS Classic Tips Ten

css| Tips

This paper is organized by the Classical forum r2no1 translation

Original publishing site:www.webcredible.co.uk

This translation is not authorized by the author or the website. All rights are vested in the original author and the original website.
If you are authorized by the original author or the original published website, you are free to use this translation.

1.CSS Font Property Shorthand rules

Generally using CSS to set font properties is done:

Font-weight:bold;
Font-style:italic;
Font-varient:small-caps;
Font-size:1em;
Line-height:1.5em;
Font-family:verdana,sans-serif;

But you can also write them all up in one line:

Font:bold Italic small-caps 1em/1.5em Verdana,sans-serif;

how nice! There is only one caveat: This shorthand method works only if you specify both the Font-size and Font-family properties. And, if you don't set Font-weight, Font-style, and font-varient, they'll use the default value, which is to remember.

2. Use of two classes at the same time

Generally, you can only set a class for one element, but that doesn't mean you can't use two. In fact, you can do this:

<p class= "text side" >...</p>

At the same time give p elements two classes, the middle with empty open, so that all text and side two classes of properties will be added to the P element. If the properties in their two classes conflict, then the setting works, that is, the properties of the class that are placed in the CSS file later.

add: for an ID, you can't write <p id= "text side" >...</p> can't write like this

3. CSS Border Defaults

You can usually set the boundaries of the color, width and style, such as:

BORDER:3PX Solid #000

This shows the boundary as 3 pixel wide, black, solid line. But in fact, you just need to specify the style.

If only the style is specified, the default value is used for other properties. Generally, the border width defaults to medium, which is generally equal to 3 to 4 pixels, and the default color is the color of the text. If the value is right, it's not as much.

4. CSS for document printing

Many web sites have a print version, but in practice this is not necessary because you can use CSS to set the print style.

That is, you can specify two CSS files for the page, one for on-screen display and one for printing:

<link type= "Text/css" rel= "stylesheet" href= "stylesheet.css" media= "screen"/> <link type= "text/css" rel= " Stylesheet "href=" Printstyle.css "media=" print "/>

Line 1th is displayed, and line 2nd is printed, noting the media properties.

But what should I write in the print CSS? You can set it up in a way that is designed to be normal CSS. Design at the same time you can set this CSS to display CSS to check its effect. Perhaps you will use the Display:none command to turn off some decorative images and then turn off some navigation buttons. To learn more, you can see the "Print Difference" article.

5. Picture Replacement Technique

It is generally recommended that you use standard HTML to display text instead of using pictures, which is faster and more readable. But if you want to use some special fonts, you can only use pictures.

For example you want to sell the whole thing icon, you use this picture:

That's OK, but for search engines, they're less interested in alt text than normal text because many designers put a lot of keywords here to trick search engines. So the method should be this:

But then there is no special font. To achieve the same effect, you can design css like this:

H1 {Background:url (http://www.webjx.com/htmldata/2006-06-14/widget-image.gif) no-repeat; height:image height Text-indent: -2000px}

Notice that the image height is changed to the height of the real picture. Here, the picture will be displayed as a background, and the real text because of the set-2000 pixel indentation, they will appear on the left side of the screen 2000 points, it is not visible. But for those who close the picture, you may not be able to see it.

6. Another adjustment technique for the CSS box model

The box model was adjusted primarily for IE browsers before IE6, which counted the width of the boundary and the padding on the element width. Like what:

#box {width:100px; border:5px; padding:20px}

Call it this way:

<div id= "box" >...</div>

At this point the full width of the box should be 150 points, which is correct in all browsers except IE browsers before IE6. But on a browser like IE5, its full width is still 100 points. This difference can be handled using the box adjustment method that was invented by the previous person.

But using CSS can also achieve the same goal, let them show the same effect.

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

This call:

<div id= "box" ><div>...</div></div>

In this way, no matter what browser, the width is 150 points.

7. Block Element Center Alignment

If you want to be a fixed-width page and want to center the page horizontally, this is usually the case:

#content {width:700px; margin:0 auto}

You will use <div id= "content" > to surround all elements. This is simple, but not good enough, IE6 the previous version will not show this effect. Change the CSS as follows:

Body {Text-align:center} #content {text-align:left; width:700px; margin:0 Auto}

This will center the contents of the page, so add in the content: Text-align:left.

8. Use CSS to handle vertical alignment

Vertical alignment with the table can be easily implemented, set the table cell Vertical-align:middle on it. But it's no use for CSS. Setting this property is useless if you want to set a navigation bar that is 2em high and you want to center the navigation text vertically.

What is the CSS method? Yes, the line height of these words is set to 2em:line-height:2em, this is OK.

9. CSS positioning within the container

One advantage of CSS is that you can position an element arbitrarily, within a container. For example, for this container:

#container {position:relative}

All elements in the container are positioned relative to each other, and can be used in this way:

<div id= "container" ><div id= "navigation" >...</div></div>

If you want to navigate to the left 30 points from 5 points, you can:

#navigation {position:absolute; left:30px; top:5px}

Of course, you can also do this:

margin:5px 0 0 30px

Note that the order of 4 digits is: top, right, bottom, left. Of course, sometimes the method of locating rather than the margin is better.

10. Straight to the bottom of the screen background color

In the vertical direction is to control is not the CSS. If you want the navigation bar and the content bar to go straight to the bottom of the page, it is convenient to use the table, but if you only use this CSS:

#navigation {background:blue; width:150px}

The shorter navigation bar will not go straight to the bottom of the section, the halfway end of the content it is over. What should we do?

Unfortunately, the only way to cheat is to add a background image to the shorter column, width and bar width, and make it the same color as the set background color.

Body {background:url (blue-image.gif) 0 0 Repeat-y}

At this point can not use EM to do units, because in that case, once the reader changed the font size, the trick will be revealed, can only use PX.