CSS syntax skills you may not 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 needNote:When: to make the short definition valid, you must provide at least
The font-size and font-family attributes, and the font-weight, font-style, and font-varient attributes are normal by default if they are not set.

 

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
Class = "text side" is arranged in the order of overwrite)

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 information, see
Print
Different,

5. Vertical Alignment of content in CSS
It is easy to use the traditional table to achieve vertical align, as long as the vertical-align:
The middle can 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;
In this way, 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, the background color and total page size of both columns are
If the background color is different, the displayed effect is 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.

HTML elements of this type include <div>, <p>,
<H1>, <form>, <ul>, and <li>.

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.

HTML elements of this type include <span>, <A>,
<Label>, <input>, , <strong>, and
<Em>.

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

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? "600px ":
Document. Body. clientwidth> 1200? "Pixel PX": "Auto ");
}

9. Text-transform attributes
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. Disappear text and images in IE
Internet Explorer has a strange BUG: 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 problem occurs in text or background images that follow floating elements. To solve this problem, try adding the elements that disappear to you.
Position: relative
Attribute. If not, try setting the width attribute again. Generally, the problem is solved after this is done.

 

Reprinted please keep the original link of this article:Http://www.zeali.net/blog/entry.php? Id = 168