Ten classic CSS techniques_CSS/HTML

1. CSS font attribute abbreviation rules

Generally, this is how to set font attributes with CSS:

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 on one line:

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

Really good! Just one caveat: this shorthand method only works when both the font-size and font-family properties are specified. Also, if you don't set font-weight, font-style, and font-variant, they will use default values, so keep this in mind.

2. Use two classes at the same time

Generally, only one class (Class) can be set for an element, but this does not mean that two cannot be used. In fact, you can do this:

...

Give two P elements at the same time Classes, separated by spaces, so that all attributes of the text and side classes will be added to the P element. If there is a conflict between the attributes in the two classes, the one set later will take effect, that is, the attributes of the class placed later in the CSS file will take effect.

Supplement: For an ID, you cannot write

...

nor can you write

3. The default value of CSS border

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

border: 3px solid #000

This one shows the border as a 3 pixel wide, black, solid line. But in fact, you only need to specify the style here.

If only style is specified, other attributes will use default values. Generally, the default width of Border is medium, which is generally equal to 3 to 4 pixels; the default color is the color of the text. If this value is just right, there is no need to set so many settings.

4. CSS for document printing

Many websites have a version for printing, but in fact this is not needed because it can be set with CSS Set printing style.

In other words, you can specify two CSS files for the page, one for screen display and one for printing:

The first line is for display, and the second line is for printing. Pay attention to the media attribute.

But what should be written in the printing CSS? You can set it up the same way you would design normal CSS. While designing, you can set this CSS to display CSS to check its effect. Maybe you will use the display: none command to turn off some decorative images and turn off some navigation buttons. To learn more, see the "Printing Differences" article.

5. Image replacement skills

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

For example, if you want to create an icon for selling things, you would use this image:

Of course it is possible, but for search engines, compared with normal text, they have little interest in the replacement text in alt. This is because Many designers put many keywords here to trick search engines. So the method should be like this:

Buy widgets

But this way 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 }

Be sure to replace the image height with the height of the real image. Here, the image will be displayed as the background, and because the indentation of -2000 pixels is set, the real text will appear 2000 points on the left side of the screen and will be invisible. But for people who turn off the picture, they may not be able to see it at all, so be careful.

6. Another adjustment technique for CSS box model

This adjustment of the Box model is mainly for IE before IE6 For browsers, they count border width and whitespace into the element width. For example:

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

Call it like this:

...

At this time, the full width of the box should be 150 points, which is the case in all browsers except IE browsers before IE6 All are correct on the device. But on browsers like IE5, its full width is still 100 points. This difference can be handled using the Box adjustment method invented by previous people.

But the same purpose can be achieved with CSS to make them display consistent.

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

Call like this:

...

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

7. Center alignment of block elements

If you want to make a fixed-width web page and want the web page to be centered horizontally, it is usually like this:

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

You would use

to surround all elements. This is simple, but not good enough, and versions prior to IE6 will not display this effect. Change the CSS as follows:

body { text-align: center } #content { text-align: left; width: 700px; margin: 0 auto }

This will The content of the web page is centered, so text-align: left is added to Content.

8. Use CSS to handle vertical alignment

Vertical alignment can be easily achieved using tables. Just set the table unit vertical-align: middle. But this is useless with CSS. If you want to set a navigation bar to be 2em high and want the navigation text to be vertically centered, setting this attribute is useless.

What is the CSS method? By the way, set the line-height of these words to 2em: line-height: 2em and that's it.

9. CSS positioning within a container

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

#container { position: relative }

In this way, all elements in the container will be relatively positioned. You can use it like this:

...

If you want to locate 30 points to the left, 5 points to the top, like this:

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

Of course, you can Like this:

margin: 5px 0 0 30px

Note that the order of the 4 numbers is: top, right, bottom, left. Of course, sometimes positioning rather than margins is better.

10. The background color that goes straight to the bottom of the screen

is controlled in the vertical direction and cannot be controlled by CSS. If you want the navigation bar to go straight to the bottom of the page like the content bar, it is very convenient to use a table, but if you only use CSS like this:

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

A shorter navigation bar will not go straight to the bottom, it will end when the content ends halfway. What to do?

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

body { background: url(blue-image.gif) 0 0 repeat-y }

You cannot use em as the unit at this time, because in that case, once the reader Change the font size and this trick will be revealed, only px can be used.