Home » CSS » HTML basic CSS code abbreviation

HTML basic CSS code abbreviation

was originally from mousse class: http://www.imooc.com/code/2088


Abbreviation for box model code

remember talking about box model margins (margin), padding (padding) and the frame (border) margin setting up and down the four direction is clockwise set: right lower left. The specific application in the margin and padding examples are as follows:


margin:10px 15px 12px 14px; / * is set to 10px, the right is set to 15px, set to 12px, the left is set to 14px*/

usually has the following three abbreviation methods:

1, if the values of top, right, bottom, and left are the same, such as the following code:


margin:10px, 10px, 10px, 10px; 

can be abbreviated as:


margin:10px; 

2, if the top and bottom values are the same, the values of left and right are the same, such as the following code:


margin:10px, 20px, 10px, 20px; 

can be abbreviated as:


margin:10px 20px; 

3, if the values of left and right are the same, such as the following code:


margin:10px, 20px, 30px, 20px; 

can be abbreviated as:


margin:10px 20px 30px; 

note: the abbreviation for padding and border is consistent with margin.




Color value abbreviation

's CSS style for color is also abbreviated. When you set the color value of the 16 Decimal range, you can abbreviate half of the value if the value of each two bits is the same.

Example 1:


p{color:#000000;}

can be abbreviated as "

"
p{color: #000;}

example 2:


p{color: #336699;}

can be abbreviated as "

"
p{color: #369;}




Font abbreviation

page font CSS style code also has its own abbreviation, the following is the font for the web page code:


body{
Font-style:italic;
Font-variant:small-caps;
Font-weight:bold;
Font-size:12px;
Line-height:1.5em;
Font-family: "Song typeface", sans-serif;
}

so many lines of code can actually be abbreviated as "

"
body{
Font:italic, small-caps, bold, 12px/1.5em, Song typeface, sans-serif;
}

attention:

1, with this shorthand, you need to specify at least font-size and font-family attributes, and other attributes such as font-weight, font-style, font-variant, line-height), if not specified, will automatically use default values.

2, in the acronym, font-size and line-height to join the "/" oblique shoulder.


in general, because of the Chinese website, English is still relatively small, so the following abbreviated code is more commonly used:


body{
Font:12px/1.5em "Song typeface", sans-serif;
}

just have font size, line spacing, Chinese font, English font settings,.

Latest