10 good CSS skills that you may not know_Experience exchange

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

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;

Great! 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 the P element two classes at the same time, separated by spaces, like this 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 like this

...

You can’t write it like this

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 makes the border appear 3 pixels wide, black, and solid. But in fact, you only need to specify the style here.

If only style is specified, default values ​​will be used for other attributes. 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 CSS can be used to set the printing style.

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



No. 1 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 sell an entire icon, you would use this image:

Of course this is possible, but for search engines, it is the same as normal text. In comparison, they have little interest in the replacement text in alt. This is because many designers put many keywords here to deceive 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 }

Pay attention to the image height is replaced by the height of the real picture. 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 the CSS box model

The adjustment of this Box model is mainly for IE browsers before IE6. They count the border width and white space as the element width. superior. 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 correct on all browsers except IE browsers before IE6. 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 div { border: 5px; padding: 20px }

Call like this:

.. .

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

7. Align block elements in the center

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 center the content of the web page. So
text-align: left was 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 position 30 points from the left and 5 points from the top, you can do this:

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

Of course, you 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 positioning rather than margins is better.

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

Control in the vertical direction is beyond the capabilities of 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 can we do about it?

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 changes the font size, this The trick will be revealed, you can only use px.

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

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