Style abbreviations--css tips (i)

first, margin and padding abbreviation

Cases:

. Sample-margin1 {margin-top:15px; margin-right:20px; margin-bottom:12px; margin-left:24px; }

After abbreviation:

. Sample-margin1 {margin:15px 20px 12px 24px;}

Padding is the same as the margin abbreviation form

Abbreviation rules: write in a clockwise direction (in the order of top, right, bottom, left), separated by whitespace between attributes. If the relevant attributes are the same, you can do this as follows:

. Sample-margin2 {margin: upper right lower left ; margin: up or down ; margin: Up or down ; margin: all (equals upper right bottom left); //padding Same}

Second, border abbreviation:

Cases:

. Sample-border1 {border-top-width:1px; Border-top-style:solid; border-top-color:#cccccc;} . Sample-border2 {border-top:1px solid #cccccc; border-left:1px solid #cccccc; border-right:1px soli #cccccc; border-bottom:1px solid #cccccc;}

After abbreviation:

. Sample-border1 {border-top:1px solid #ccc;} . Sample-border2 {Border:1px solid #ccc;}

If there are 3 sides with color, in order to simplify the code you can write:

. Sample-border3 {Border:1px solid #ccc; border-top:none; //left, right, bottom border has color, top box is empty }

Abbreviation rule: If the color and width of the four edges can be shortened to the above form, 16 color value, if each two bits of the same value, can be abbreviated half, for example: #000000可以缩写为 #000; #0044DD可以缩写为 #04d; Other color values are the same. Font width Normal is replaced with 400, bold is replaced with 700.

Third, background abbreviation

Cases:

. Sample-background {Background-color:#ccc; background-image:url (sample.gif); background-repeat:repeat-x; background-attachment:scroll; //scroll is the background image scrolling to the default value with the object content, you can not write Background-position:topright;}

After abbreviation:

. Sample-background {background:#ccc url (sample.gif) repeat-x topright; //attributes are: color-background-X-axis tile-background image position (background picture path does not need to be quoted)}

Four, font abbreviation:

Cases:

. Sample-font {Font-style:italic//Sets or retrieves the font style in an object Font-variant:normal//Sets or retrieves whether the text in the object is a small uppercase letter//The first 2 items without special settings, can not be written, The default value can be used to font-weight:bold; font-size:12px; line-height:20px; font-family:"The song Body";}

After abbreviation:

. Sample-font {font:bold 12px/20px "Arial"; //attributes are: Font weight-font size/Line height-font of text }

Five, List-style abbreviation:

Cases:

. Sample-list {list-style-image:url (sample.gif); list-style-position:outside; list-style-type:circle;}

After abbreviation:

. Sample-list {List-style:circle inside URL (sample.gif);}

The attributes are: Preset mark-Mark Position-tag picture (tag picture path does not need quotation marks), preset marker and tagged picture can be two one, if both are defined, then the tag picture overrides the preset mark, but in the project is basically not used, is defined by the background image

Six other abbreviations:

1, the style is clearly defined units, unless the value is 0

. Sample-uint {width:100px; height:50px; font-size:9pt; //value of 0 optional unit margin:0; padding:0;}

2. You can define common properties for tags and reduce duplicate definitions

P {...} H1 {...} img {...}

3. Define classes for all elements that can be reused

. Red {...} . Nav {...} . Tfoot {...}

4, for the website abbreviation initialization style, avoids the browser incompatibility question, uses the group selector to reduce the duplicate definition

body, DL, DT, DD, UL, OL, Li,div, Pre, Code, p, Blockquote,form, fieldset, Legend, Input,button, textarea, label{ margin:0; padding:0;} Body {font:12px/1.5 tahoma,helvetica,arial, ' song Body ', Sans-serif;} HTML {color:#404040; background:#fff; overflow-y:scroll;}

5. Remove the element qualification before class and ID

. Sample-cancel-limit {div#content {...} {...} {...} {...} }

When defining a class or ID for an element, you can omit the preceding element qualification, because the ID is unique on a page, the page class can be used multiple times on the page, you limit the value of an element and increase the size of the file.

If you just want to put the style of the relevant modules together, but also in order to look clear, you can do so, own grasp, do not recommend this writing.

6. You do not need to define inheritable values repeatedly

In CSS, child elements automatically inherit the parent element's property values, such as color, font, and so on, which have been defined in the parent element, can be inherited directly in the child elements, and do not require duplicate definitions. Specifically which attributes can inherit, which can not inherit Baidu a bit.

7. Multiple class definitions

. One {...} . the {....} ...

If the style sheet has related styles, you can write a style to the label, implement defining multiple classes to reduce code redundancy and reuse efficiency, and multiple styles are separated by an empty space.

8. Using sub-selectors

. Son {...} . Son Li {...} . Son Li a {...}

Reasonable use of sub-selectors can help you save a lot of class and ID definitions, more effective control of page elements.

9. Delete spaces and comments

When publishing a Web site, you can delete the space and comments in the CSS file and compress the CSS file to reduce the size of the file

10. Other

The site also has a lot of related abbreviations, experts will have summed up their initials skills, specific abbreviation rules can be based on the actual situation in the project. The rules are human, and the rules are flexible.

Style abbreviations--css tips (i)