CSS Classic Tip Ten 1th/2 page _css/html

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 (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.

Current 1/2 page 12 Next read the full text