1. Box model code abbreviation When the
box model is used, the margins, padding and border are set. The margins in the four directions are set in a clockwise direction: top right bottom left. Examples of specific applications in margin and padding are as follows:
margin: 10px 15px 12px 14px; /* set to 10px on the top, 15px on the right, 12px on the bottom, and 14px on the left*/
There are usually three abbreviations:
1) , If the values of top, right, bottom, and left are the same, as follows:
margin: 10px 10px 10px 10px;
can be abbreviated as:
margin: 10px;
2) If the top and bottom values are the same, the left and right values are the same, as follows Surface code:
margin: 10px 20px 10px 20px;
can be abbreviated as:
margin: 10px 20px;
3), if the values of left and right are the same, as follows:
margin: 10px 20px 30px 20px;
can be abbreviated as:
margin: 10px 20px 30px ;
Note: The abbreviations of padding and border are the same as margin.
2. Color value
abbreviation The CSS style of color can also be abbreviated. When the color you set is a hexadecimal color value, if the value of each two digits is the same, it can be abbreviated by half.
p{color:#000000;}
Can be abbreviated to:
p{color: #000;}
p{color: #336699;}
can be abbreviated to:
1. To use this shorthand, you must at least specify the font-size and font-family properties. Other properties (such as font-weight, font-style, font-variant, line-height) will automatically use the default if not specified. value.
2. Add "/" slash between font-size and line-height when abbreviating.
Under normal circumstances, because for Chinese websites, English is still relatively small, so the following abbreviation codes are more commonly used:
body{
font:12px/1.5em "宋体", sans-serif;
}
only has font size, line spacing, Chinese font, English font set up
box model is used, the margins, padding and border are set. The margins in the four directions are set in a clockwise direction: top right bottom left. Examples of specific applications in margin and padding are as follows:
margin: 10px 15px 12px 14px; /* set to 10px on the top, 15px on the right, 12px on the bottom, and 14px on the left*/
There are usually three abbreviations:
1) , If the values of top, right, bottom, and left are the same, as follows:
margin: 10px 10px 10px 10px;
can be abbreviated as:
margin: 10px;
2) If the top and bottom values are the same, the left and right values are the same, as follows Surface code:
margin: 10px 20px 10px 20px;
can be abbreviated as:
margin: 10px 20px;
3), if the values of left and right are the same, as follows:
margin: 10px 20px 30px 20px;
can be abbreviated as:
margin: 10px 20px 30px ;
Note: The abbreviations of padding and border are the same as margin.
2. Color value
abbreviation The CSS style of color can also be abbreviated. When the color you set is a hexadecimal color value, if the value of each two digits is the same, it can be abbreviated by half.
p{color:#000000;}
Can be abbreviated to:
p{color: #000;}
p{color: #336699;}
can be abbreviated to:
p{color: #369;}
3. Font Abbreviations
The font CSS style code in the web page also has its own abbreviation. The following is the code to set the font for the web page:
body{
font-style:italic; /*Font inclination*/
font-variant:small-caps;/*Set paragraph to small caps font:*/
font-weight:bold; /*Text weight*/
font-size: 12px; /*Text size*/
line-height: 1.5em; /*Text with line height 1.5 times*/
font-family:"宋体",sans-serif;
}
So many lines of code can actually be abbreviated to one sentence:
body{
font:italic small-caps bold 12px/1.5em "宋体",sans-serif;
}
Note:
1. To use this shorthand, you must at least specify the font-size and font-family properties. Other properties (such as font-weight, font-style, font-variant, line-height) will automatically use the default if not specified. value.
2. Add "/" slash between font-size and line-height when abbreviating.
Under normal circumstances, because for Chinese websites, English is still relatively small, so the following abbreviation codes are more commonly used:
body{
font:12px/1.5em "宋体", sans-serif;
}
only has font size, line spacing, Chinese font, English font set up