CSS syntax skills

Webcredible lists a lot of syntactic tips on CSS usage, which is more practical. In the past, many things only know how to write them, but seldom consider why. It seems that CSS can do much more than you know.

1. Simplified CSS font definition rules
The general writing method is as follows:

Font-weight: bold;
Font-style: italic;
Font-varient: Small-caps;
Font-size: 1em;
Line-Height: 1.5em;
Font-family: verdana, sans-serif

In fact, you can write it in a more concise way:

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

Isn't it easier? However, you must pay attention to the following points when using this shorthand: to make the shorthand definition valid, you must provide at least the font-size and font-family attributes, and font-weight, if the font-style and font-varient attributes are not set, the default value is normal.

2. Use two class definitions at the same time
Generally, we only specify a class for the content block, but this does not mean that we can only specify one class. In fact, as long as you want, you can assign any number of classes to a part of content at the same time. For example:

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

Separate multiple classes with spaces. When the attributes of multiple classes overlap, the class will be defined in the CSS definition file according to the position of each class, the class attributes defined later automatically overwrite the previously defined class attributes (instead of overwriting based on the order you arrange in class = "text side)

3. Default Value of CSS border
Generally, we define the border attribute to provide the attributes of color, width, and style. For example, border: 3px solid #000. However, the attribute that must be provided is only style. If you only write border: solid, the default value is automatically used for other attributes. The default width of border is medium (about 3px-4px). The default color is the text color of the content located in border. If these default values meet your requirements, you can omit these two attributes.

4. CSS documents for Printing
Many web pages provide a printing link to facilitate the use of another CSS suitable for printing the interface. But in fact, you can specify two CSS document links for your page, so that the browser will automatically call the appropriate CSS for display or printing. For example:

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

By specifying the media attribute of link, the browser can call a specific CSS file to process the page as needed. For more suggestions on printing, see print different,

5. Vertical Alignment of content in CSS
It is easy to use the traditional table to implement vertical align. You can use vertical-align: middle to vertically center the table content. However, this attribute does not work in CSS.
The solution is to set the Row Height of the content to the same height as the content block. For example, if your Div height is 32px, add the line-Height: 32px attribute in your CSS definition so that the text looks perpendicular to the layer. However, this method only applies to single lines of text. For multiple lines of text, there seems to be no good method.

6. Vertically pull the background color to the bottom.
Another unpleasant aspect of CSS and traditional table is its vertical layer alignment. If your page is divided into two columns, one of which is long and the other is short, and the background color of the two columns is different from the total background color of the page, the displayed results are ugly. Unlike the table, if you set the height of TD to 100%, the height of each column can be pulled to the same length.
To solve this problem, it seems that only one clever method can be used to set the background image based on the width and background color of each column, making the user look flattened:

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

7. Block/inline attributes
Any HTML element is block or inline.
The features of block elements include:

It is always displayed starting with another line.
The height, line-height, top/bottom margin attributes can be set.
The default value of width is 100%, unless you specify another width value.
Such HTML elements include <div>, <p>,

The features of the inline element include:

Directly following the current row
The property of height, line-height, top/bottom margin cannot be changed.
The width value is equal to the width of the text/image that contains it, and cannot be changed.
Such HTML elements include <span>, <A>, <label>, <input>, , <strong>, and <em>.

You can set the element attribute display: inline or display: block to change the above features of the element.

8. Set the minimum page width
A useful attribute in CSS syntax is Min-width. With this attribute, you can set the minimum width of any element. That is to say, you can also use this to limit the minimum width of the page display.
But there is a small problem: IE cannot set Min-width for the <body> element, so we need to take a detour to make this attribute take effect.
First insert a <div>:

<Body>
<Div class = "Container">

In the CSS definition, define the minimum width as 600px:

# Container
{
Min-width: 600px;
Width: expression (document. Body. clientwidth <600? "600px": "Auto ");
}

The first attribute is the standard syntax of the minimum width definition, and the second attribute is a javascript expression that only Ie can understand.
You can also set the maximum and minimum width of the page:

# Container
{
Min-width: 600px;
Max-width: pixel PX;
Width: expression (document. Body. clientwidth <600? & Quot; 600px & quot;: Document. Body. clientwidth & gt; 1200? "Pixel PX": "Auto ");
}

9. Text-transform attribute
This attribute may also be one of the few but useful attributes in CSS. Common available values include: Text-transform: uppercase, text-transform: lowercase, and text-transform: capitalize. The first one converts all the letters into uppercase letters, the second one converts all the letters into lowercase letters, and the third one converts the first letter of each word into uppercase letters. However, this function is useless for non-English websites.

10. text and images that disappear from IE
there is a strange bug in IE: Sometimes text or background images cannot be displayed. If you select the entire page, you will find that the content is actually still there, or refresh the page to display it again.
generally, this issue occurs in text or background images that follow floating elements. To solve this problem, try adding the position: relative attribute to your disappearing elements. If not, try setting the width attribute again. Generally, the problem is solved after this is done.