10 good CSS skills you may not know

This translation is not authorized by the author or website. All rights belong to the original author and the original website.
If you are authorized by the original author or the original published website, you can use this translation freely.

1. Simplified CSS font attributes

In general, CSS is used to set the font attributes as follows:

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 all of them to one line:

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

Really good! Only one note: this shorthand method takes effect only when both the font-size and font-family attributes are specified. Also, if you do not set font-weight, font-style, and font-varient, they will use the default value, which should be noted.

2. Use two classes at the same time

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

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

At the same time, two classes are given to the P element, with an empty lattice in the middle. In this way, the attributes of all the text and side classes will be added to the P element. If the attributes of the two classes conflict, the subsequent settings take effect, that is, the attributes of the classes placed in the CSS file take effect.

Supplement: for an ID, neither <p id = "text side">... </P> can be written in this way.

3. Default Value of CSS border

You can usually set the border color, width, and style, such:
Border: 3px solid #000
The border is displayed as 3 pixels wide, black, and solid. However, you only need to specify the style here.

If only the style is specified, the default value is used for other attributes. Generally, the default width of border is medium, which is generally 3 to 4 pixels. The default color is the text color. If this value is correct, you don't need to set that much.

4. CSS for document printing

Many websites have a printing version, but this is not actually required, because you can use CSS to set the printing style.

That is to say, you can specify two CSS files for the page, one for screen display and the other for printing:

<Link type = "text/CSS" rel = "stylesheet" href = "stylesheet.css" Media = "screen"/> <link type = "text/CSS" rel = "stylesheet" href = "printstyle.css" Media = "print"/>

1st rows are displayed, and 2nd rows are printed. Pay attention to the media attributes.

But what should I write in printed CSS? You can set it by designing common CSS. At the same time of design, 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 then turn off some navigation buttons. For more information, see "Print differences.

5. Image replacement skills

Generally, we recommend that you use standard HTML to display text instead of images. This is fast and readable. However, if you want to use some special fonts, you can only use images.

For example, if you want to use the entire selling icon, you can use this image:
<H1> This is certainly acceptable, but for search engines, they are less interested in replacing text in alt than normal text, because many designers put a lot of keywords here to cheat the search engine. The method should be as follows:
<H1> buy widgets However, there is no special font. To achieve the same effect, you can design CSS as follows:
H1 {Background: url(widget-image.gif) No-Repeat; Height: Image Height text-indent:-2000px}

Change the Image Height to the actual image height. Here, the image is displayed as a background, and the real text is Indented by setting-2000 pixels. They will appear at 2000 on the left of the screen and will not be seen. However, this may not be visible to anyone who closes the image.

6. Another adjustment technique for the CSS Box Model

The box model is adjusted mainly for IE browser before IE6. They calculate the boundary width and blank space on the element width. For example:

# Box {width: 100px; Border: 5px; padding: 20px}

Call it like this:
<Div id = "box">... </div>
At this time, the full width of the box should be 150 points, which is correct in all browsers except IE6. However, in a browser like ie5, its full width is still 100 points. The box adjustment method invented by the predecessors can be used to deal with this difference.

However, CSS can achieve the same purpose to make them display the same effect.

# Box {width: 150px} # Box Div {border: 5px; padding: 20px}

Call this method as follows:
<Div id = "box"> <div>... </div>
In this way, no matter what browser, the width will be 150 points.

7. Align block elements in Center

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

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

You will use <Div id = "content"> to enclose all elements. This is very simple, but it is not good enough. This effect will not be displayed in earlier versions of IE6. Change CSS as follows:

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

This will center the webpage content, so the content is added
Text-align: left.

8. Use CSS to process Vertical Alignment

Vertical alignment can be easily implemented using tables. You can set the table unit vertical-align: Middle. But this is useless for CSS. This attribute is useless if you want to set a navigation bar to 2 em and center the navigation text vertically.

What is the CSS method? By the way, set the Row Height of the text to 2em: Line-Height: 2em.

9. Position CSS in the container

One advantage of CSS is that one element can be located at any time in a container. For example, for this container:

# Container {position: relative}

In this way, all elements in the container are relatively located, and can be used as follows:
<Div id = "Container"> <Div id = "navigation">... </div>
If you want to locate at 30 to the left and 5 to the top, you can do this:

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

Of course, you can also do this:
Margin: 5px 0 0 30px
Note that the order of the four numbers is: Top, right, bottom, left. Of course, sometimes the positioning method is better than the margin method.

10. Background Color directed to the bottom of the screen

CSS cannot control the vertical direction. If you want to direct the navigation bar to the bottom of the page like the content bar, It is very convenient to use a table, but if you only use this CSS:

# Navigation {Background: Blue; width: 150px}

A shorter navigation bar will not go straight to the bottom, and it will end when the half-way content ends. What should I do?

Unfortunately, you can only use spoofing to add a background image to the shorter column. The width is the same as the column width, and the color is the same as the Set background color.

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

In this case, EM cannot be used as the unit, because in this case, once the reader changes the font size, this trick will reveal the filling, and only PX can be used.

The author of this article is: Trenton Moss.
Website: http://www.webcredible.co.uk /.

This translation is not authorized by the author or website. All rights belong to the original author and the original website.
if you are authorized by the original author or the original website, you can use this translation freely.