5 tips for CSS style sheet design

1. CSS simplified font rules
When css is used to define the font, you may do the following:
Font-size: 1em;
Line-height: 1.5em;
Font-weight: bold;
Font-style: italic;
Font-variant: small-caps;
Font-family: verdana, serif;
In fact, you can abbreviated these attributes:
Font: 1em/1.5em bold italic small-caps verdana, serif
It is much better now, but note that you must specify at least the font-size and font-family attributes, and other attributes (such as font-weight, font-style, if not specified, the default value is automatically used.
2. Use two classes at the same time
Generally, we only specify one class for the attribute, but this does not mean that you can only specify one class. In fact, you can specify the class as much as you want. For example:
<P class = "text side">... </p> by using two classes at the same time (separated by spaces rather than commas), this section applies the rules set in both classes at the same time. If there are any overlapping rules, the latter will be applied first.
3.default value of border (border) in CSS
When writing a border rule, you usually specify the color, width, and style (in any order ). For example, border: 3px solid #000 (black solid-line border with 3 pixels wide). In this example, the only value to be specified is the style. If you specify the style as solid (solid), the remaining values will use the default value: the default width is medium (equivalent to 3 to 4 pixels ); the default color is the text color in the border. If this is exactly what you want, you can not specify it in css.
4 .! Important will be ignored by IE
In css, the last rule is usually given priority. However, for browsers other than IE, anything is marked later! Important statements obtain absolute priority, for example, margin-top: 3.5em! Important; margin-top: 2em the top boundary of all browsers except IE is 3.5em, while IE is 2em. Sometimes this is useful, especially when using relative boundary values (as in this example), you can see the nuances between IE and other browsers. (Many people may also notice that the css sub-selector will be ignored by IE)
5. Image replacement skills
It is generally wise to use standard html instead of images to display text. In addition to accelerating download, it is also possible to achieve better availability. However, if you are determined to use fonts that may not exist on the visitor's machine, you can only select images.
For example, you want to use the "Buy widgets" title on the top of each page, but you also want this to be discovered by the search engine, if you use a rare font for the sake of appearance, you must use an image to display it: