10 CSS skills you may not know

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.