Recommended: Common CSS style sheet abbreviation Grammar summary

css| Style Sheet | syntax

　　Common CSS Abbreviations Grammar summary

Using abbreviations can help reduce the size of your CSS files and make it easier to read. The main rules for CSS abbreviations are as follows:

Color

16 The color value of the binary, if the value of each two digits is the same, you can abbreviate half, for example:

#000000可以缩写为 #000; #336699可以缩写为 #369;

Box size

There are usually four ways to write:

• property:value1; Indicates that all edges are a value value1;
• Property:value1 value2; The values that represent top and bottom are value1,right and left values that are value2
• Property:value1 value2 Value3; The value that represents top is value1,right and left is the value of Value2,bottom is Value3
• Property:value1 value2 value3 value4; The four values, in turn, represent Top,right,bottom,left

Convenient memory method is clockwise, upper right and lower left. Examples of specific applications in margin and padding are as follows:

Margin:1em 0 2em 0.5em;

Border (border)

The properties of the border are as follows:

• border-width:1px;
• Border-style:solid;
• Border-color: #000;

can be abbreviated as one sentence: border:1px solid #000;

Grammar is border:width style color;

Background (backgrounds)

The properties of the background are as follows:

• Background-color: #f00;
• Background-image:url (background.gif);
• Background-repeat:no-repeat;
• background-attachment:fixed;
• background-position:0 0;

can be abbreviated to one sentence: background: #f00 URL (background.gif) no-repeat fixed 0 0;

The grammar is Background:color image repeat attachment position;

You can omit one or more of the property values, and if omitted, the property value will be in the browser default value, the default value is:

• Color:transparent
• Image:none
• Repeat:repeat
• Attachment:scroll
• position:0% 0%

Font (Fonts)

The properties of the font are as follows:

• Font-style:italic;
• Font-variant:small-caps;
• Font-weight:bold;
• Font-size:1em;
• line-height:140%;
• font-family: "Lucida Grande", Sans-serif;

can be abbreviated as one sentence: Font:italic small-caps bold 1em/140% "Lucida Grande", Sans-serif;

Note that if you abbreviate a font definition, you must define at least two values for font-size and font-family.

List (lists)

Cancellation of the default dot and ordinal can be written like this list-style:none;

The properties of the list are as follows:

• List-style-type:square;
• List-style-position:inside;
• List-style-image:url (Image.gif);

can be abbreviated to one sentence: List-style:square inside URL (image.gif);

1. CSS font Shorthand rules

You might do this when you use CSS to define fonts:

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 abbreviate these attributes:

Font:1em/1.5em Bold Italic Small-caps Verdana,serif

It's much better now, but one thing to note: Using this shorthand you should at least specify the font-size and font-family attributes, and other properties (such as Font-weight,font-style,font-varient) will automatically use the default values if unspecified.

2. Use two class at the same time

Usually we just specify a class for the attribute, but that doesn't mean you can only specify one, in fact, you can specify how much you want to specify, for example:

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

By using two classes at the same time (using a space instead of a comma), the paragraph applies the rules set out in the two class. If any of the two rules overlap, the latter will have a practical priority application.

3. CSS in the default value of the border (border)

When you write a border rule, you usually specify the color, width, and style (in any order). For example: border:3px solid #000 (3 pixel wide black solid border), in fact, the only value that needs to be specified in this example is the style. If you specify that the style is solid (solid), the remaining values will use the default value: The default width is medium (equivalent to 3 to 4 pixels), and the default color is the text color in the border. If this is the effect you want, you can definitely not specify it in CSS.

4.!important will be ignored by IE

In CSS, the rule that is usually last specified is given precedence. However, for browsers other than IE, any subsequent statements marked with!important will receive absolute precedence, for example: Margin-top:3.5em!important; Margin-top:2em.

The top border of all browsers except IE is 3.5em, and IE is 2em, which is sometimes useful, especially when using relative boundary values (like this example) to show the nuances of IE and other browsers. (Many people may also notice that the CSS selector is also ignored by IE)

5. Technique of picture replacement

It is often wiser to use standard HTML instead of a picture to display text, except to speed up the download and get better usability. But if you are determined to use a font that may not be available in the visitor's machine, you can only select pictures.

For example, you want to use the title "Buy Widgets" at the top of each page, but you also hope that it can be found by the search engines, for the sake of aesthetics you use a rare font so you have to use a picture to show:

That's certainly true, but there's evidence that search engines value real text far more than ALT text (because there are already too many sites using alt text as keywords), so we have to use another method:

H1 {
Background:url (http://www.webjx.com/htmldata/2007-04-01/widget-image.gif) no-repeat;
}
H1 span {
Position:absolute;
left:-2000px;
}

Now that you have both beautiful pictures and good hidden text--with CSS, the text is located on the left side of the screen-2000 pixels.

6. Another choice for CSS box model hack

The CSS box model hack is used to solve IE6 browser display problems before the IE6.0 version will include the border values and padding values of an element within the width (rather than the width value). For example, you might use the following CSS to specify the size of a container:

#box {
width:100px;
border:5px;
padding:20px;
}

Then apply in HTML: <div id= "box" >...</div>, the total width of the box is 150 pixels in almost all browsers (100 pixel width + two 5 pixel border + two 20 pixel padding), The only IE6 version of the browser is still 100 pixels (the border and padding values are included in the width value), the hack of the box model is to solve this problem, but also can cause trouble. The simpler approach is as follows:

Css:

#box {
width:150px;
}
#box Div {
border:5px;
padding:20px;
}

Html:

<div id= "box" ><div>...</div></div>

The total width of the box in any browser will be 150 pixels.

7. Center The Block element

Suppose your site uses a fixed-width layout with all the content in the center of the screen, and you can use the following CSS:

#content {
width:700px;
margin:0 Auto;
}

You can place any item within the body of HTML

, the item will automatically get an equal left and right boundary value to ensure a centered display. However, this is still problematic in previous versions of IE6 browsers and will not be centered, so you must modify the following:

Body {
Text-align:center;
}
#content {
Text-align:left;
width:700px;
margin:0 Auto;
}

The body of the setting will cause the main content center, but even all the text is centered, which I am afraid is not the effect you want, for this #content div also specify a value: Text-align:left.

8. Use CSS to achieve vertical center

The vertical center is a piece of cake for the table, just specify the cell as Vertical-align:middle, but it doesn't work in the CSS layout. Let's say you set the height of a navigation menu to 2EM and then specify the vertical alignment in the CSS, and the text will be lined up at the top of the box, no difference at all.

To solve this problem, simply set the row height of the box to the same height as the box, in this case, the box height of 2em, then just add one in the CSS: Line-height:2em can be achieved vertically center!

9. CSS positioning within the container

One of the great advantages of CSS is that you can position the object anywhere in the document, and you can also position the object within a container. You only need to add a CSS rule for the container:

#container {
position:relative;
}

The positioning of any element within the container is relative to the container. Suppose you use the following HTML structure:

<div id= "container" ><div id= "navigation" >...</div></div>

If you want to position the navigation within the container 30 pixels from the left edge and 5 pixels from the top, you can use the following CSS statement:

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

10. The background color that extends to the bottom of the screen

One of the drawbacks of CSS is the lack of vertical control, which results in a table layout problem that is not encountered. Let's say you set up a list of navigation on the left side of the page to place the site. The page is a white background, but you want the navigation to be listed as a blue background, use the following CSS:

#navigation {
Background:blue;
width:150px;
}

The problem is that the navigation item does not extend all the time to the bottom of the page, and naturally its background color does not extend to the bottom. So the left column of the blue background on the page is truncated halfway, wasting your design. What do we do? Unfortunately, we can only use deception, the background of the body is designated as the same color with left column picture, CSS is as follows:

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

The background image should be a blue picture with a width of 150 pixels. The disadvantage of this approach is that it is impossible to use EM to specify the width of the left column, and the width of the background color will not change when the user changes the size of the text, causing the width of the content to expand. This is the only solution to this type of problem until you write this article, so you can only use pixel values for the left column to get a different background color that can be automatically extended.