One of the most effective ways to write CSS is to use abbreviations. Using abbreviations can make your CSS files smaller and more readable. Understanding the abbreviations of CSS properties is also one of the basic skills of front-end development engineers. Today we systematically summarize the abbreviations of CSS properties.
color abbreviation
The abbreviation of color is the simplest. When the color value is in hexadecimal, if the value of each color is the same, it can be written as:
| color: #113366 |
can be abbreviated as
| color: #136 |
Abbreviations can be used wherever hexadecimal color values are used, such as background-color, border-color, text-shadow, box-shadow, etc.
box size
There are mainly two attributes used here: margin and padding. We take margin as an example, and padding is the same. The box has four directions, up, down, left, and right, and each direction has a margin:
| margin-top:1px; margin-right:1px; margin-botton:1px; margin-left:1px; |
These four values can be abbreviated together:
| margin:1px 1px 1px 1px; |
The order of abbreviations is top->right->bottom->left. Clockwise direction. If the values of opposite sides are the same, they can be omitted:
| margin:1px;//The margins in the four directions are the same, which is equivalent to margin:1px 1px 1px 1px; margin:1px 2px;//The top and bottom margins are both 1px, and the left and right margins are both 2px, which is equivalent to margin:1px 2px 1px 2px margin:1px 2px 3px;//The right margin and the left margin are the same, which is equivalent to margin:1px 2px 3px 2px; margin:1px 2px 1px 3px;//Note that although the upper and lower margins here are both 1px, abbreviations cannot be used here. |
border
Border is a relatively flexible attribute. It has three sub-attributes: border-width, border-style, and border-color.
| border-width: number + unit; border-style: none || hidden || dashed || dotted || double || groove || inset || outset || ridge || solid ; border-color: color; |
It can be abbreviated in the order of width, style and color:
| border:5px solid #369; |
Sometimes, the border can be written simpler and some values can be omitted, but please pay attention to which ones are necessary. You can also test it:
| border:groove red; //Guess what the width of this border is? border:solid; //What would this look like? border:5px; //Is this okay? border:5px red; //Is this okay? ? border:red; //Is this okay? ? ? |
As you can see from the above code, the default width of the border is 3px, and the default color is black. In the abbreviation of border, border-style is required.
You can also use abbreviations for each edge:
| border-top:4px solid #333; border-right:3px solid #666; border-bottom:3px solid #666; border-left:4px solid #333; |
You can also use abbreviations for each attribute:
| border-width: 1px 2px 3px; //Up to four values can be used, the abbreviation rules are similar to the abbreviation of box size, the same below border-style: solid dashed dotted groove; border-color:red blue white black; |
outline
Outline is similar to border. The difference is that border will affect the box model, but outline will not.
| outline-width: number + unit; outline-style: none || dashed || dotted || double || groove || inset || outset || ridge || solid ; outline-color: color; |
Can be abbreviated as:
| outline:1px solid red; |
Similarly, in the abbreviation of outline, outline-style is also required, and the other two values are optional. The default value is the same as border.
background
Background is one of the most commonly used abbreviations and contains the following properties:
| background-color: color || #hex || RGB(% || 0-255) || RGBa; background-image:url(); background-repeat: repeat || repeat-x || repeat-y || no-repeat; background-position: XY || (top||bottom||center) (left||right||center); background-attachment: scroll || fixed; |
The abbreviation of background can greatly improve the efficiency of CSS:
| background:#fff url(img.png) no-repeat 0 0; |
The abbreviation for background also has some default values:
| background:transparent none repeat scroll top left; |
The values of the background properties are not inherited. You can declare only one of them, and the default will be applied to the other values.
font
The font abbreviation is also the most used one, and it is also one of the ways to write efficient CSS.
font contains the following properties:
| font-style: normal || italic || oblique; font-variant:normal || small-caps; font-weight: normal || bold || bolder || || lighter || (100-900); font-size: (number+unit) || (xx-small - xx-large); line-height: normal || (number+unit); font-family:name,"more names"; |
Each attribute of font also has a default value. It is relatively important to remember these default values:
| font-style: normal; font-variant:normal; font-weight: normal; font-size: inherit; line-height: normal; font-family:inherit; |
In fact, the abbreviation of font is the one that requires the most caution among these abbreviations. A slight negligence may cause some unexpected consequences. Therefore, many people do not agree with the use of font abbreviation.
But here is a small manual, I believe it will help you better understand the abbreviation of font:
list style
Perhaps the most commonly used attribute of lists is:
| list-style:none |
It clears all default list styles, such as numbers or dots.
list-style also has three attributes:
| list-style-type:none || disc || circle || square || decimal || lower-alpha || upper-alpha || lower-roman || upper-roman list-style-position: inside || outside || inherit list-style-image: (url) || none || inherit |
The default attributes of list-style are as follows:
| list-style:disc outside none |
It should be noted that if pictures are defined in list-style, the priority of pictures is higher than list-style-type, for example:
| list-style:circle inside url(../img.gif) |
In this example, if img.gif exists, the circle symbol set previously will not be displayed.
PS: In fact, list-style-type has many useful styles. Interested students can refer to: https://developer.mozilla.org/en/CSS/list-style-type
border-radius(corner radius)
Border-radius is a newly added attribute in CSS3, used to implement rounded borders. The current disadvantage of this attribute is that each browser supports it differently. IE does not yet support it. Gecko (firefox) and webkit (safari/chrome) need to use the private prefixes -moz- and -webkit- respectively. What's even more confusing is that if the border-radius attribute of a single corner is written more differently between the two browsers, you will have to write a large number of private attributes:
| -moz-border-radius-bottomleft:6px; -moz-border-radius-topleft:6px; -moz-border-radius-topright:6px; -webkit-border-bottom-left-radius:6px; -webkit-border-top-left-radius:6px; -webkit-border-top-right-radius:6px; border-bottom-left-radius:6px; border-top-left-radius:6px; border-top-right-radius:6px; |
Uh, are you already dazzled? This is just to achieve the situation where the upper left corner is not rounded and the other three corners are rounded. So for border-radius, Shenfei strongly recommends using the abbreviation:
| -moz-border-radius:0 6px 6px; -webkit-border-radius:0 6px 6px; border-radius:0 6px 6px; |
This is much simpler. PS: Unfortunately, the latest Safari (4.0.5) does not support this abbreviation yet... (thanks @fireyy)
That’s all. Are there any other attributes that can be abbreviated? Everyone is welcome to discuss it together.