Summary CSS Shorthand method

One of the

  efficient CSS notation is to use shorthand. You can make your CSS file smaller and easier to read by shorthand. and understanding CSS attributes shorthand is also one of the basic skills of front-end development engineers. Today we systematically summarize the abbreviations for CSS properties.

  Color abbreviations   Color abbreviations are the simplest, in the color value of 16, if the value of each color is the same, you can write a:   color: #113366   can be shortened to   color: #136   Useful to 16 color value of the place can use shorthand, such as Background-color, Border-color, Text-shadow, Box-shadow and so on.   Box size   Here are mainly used for two properties: margin and padding, we take margin as an example, padding is the same. The box has four directions up and down, each direction has an outer 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   abbreviation is Upper-> right-> down-> left. Clockwise direction. Relative edge values are the same, you can omit:   margin:1px;//four direction of the same margin, equivalent to margin:1px 1px 1px 1px;   MARGIN:1PX 2px;//the upper and lower margins are 1px, and the left and right margins are 2px, equivalent to margin:1px 2px 1px 2px  margin:1px 2px 3px;//The right-hand and left margins are the same, equivalent to margin : 1px 2px 3px 2px;   MARGIN:1PX 2px 1px 3px;//Note that although the top and bottom margins are 1px, this is not abbreviated here.   Border (border)   border is a more flexible property that has border-width, Border-style, Border-color three child properties.   Border-width: Digital + unit;   Border-style:none | | Hidden | | Dashed | | Dotted | | Double | | Groove | | inset | | Outset | | Ridge | | solid;   Border-color: YanColor   It can be abbreviated in the order of width, style, and color:   border:5px solid #369;   Sometimes, border can write more simple, some values can be omitted, but please note which is necessary, you can also test:   Border:groove red; Guess what the width of this border is?   Border:solid; What's it going to look like?   border:5px; Is that OK?   BORDER:5PX Red; Is this OK??   border:red; Is this OK???   Through the above code you can see that the default width of border is 3px, the default color is black--black. The default color is the value of the Color property in the rule, and color defaults to black (thanks to @birdstudio reminder). Border-style is necessary in the border abbreviation.   At the same time, 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;   can also use abbreviations for each attribute:   border-width:1px 2px 3px; Can be up to four values, abbreviated rules similar to box size abbreviations, hereinafter   border-style:solid dashed dotted groove;   border-color:red Blue white black;   Outline   Outline similar to border, the difference is that border will affect the box model, and outline not.   Outline-width: Digital + 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 outline's shorthand, Outline-style is also required, while the other two values are optional, and the default value is the same as border.   Background (background)   Background is one of the most commonly used abbreviations, which 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:X Y | | (top| | bottom| | Center) (Left| | right| | Center);   Background-attachment:scroll | | Fixed   Background's shorthand can greatly improve the efficiency of CSS:   background: #fff URL (img.png) no-repeat 0 0;   Background's shorthand also has some default values:   background:transparent None repeat scroll top left; The value of the   background property is not inherited, you can only declare one of them, and the other values will be applied by default.   Font   Font shorthand is one of the most used, 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";   Font properties also have default values, remember that these defaults are relatively important:   Font-style:normal;   Font-variant:normal;   Font-weight:normal;   Font-size:inherit;   Line-height:normal;   Font-family:inherit;   In fact, the shorthand for font is one of the most cautious of these abbreviations, and a slight omission can have unintended consequences, so many people are not in favor of using the font abbreviation.   But there is a small manual, I believe that will give you a better understanding of font shorthand:       List style   Probably the most common use of the list of attributes is:   List-style:none & nbsp It clears all default list styles, such as numbers or dots.   List-style also has three properties:   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 | | The default properties for inherit   List-style are as follows:   List-style:disc outside none   It should be noted that if a picture is defined in List-tyle, Then the image priority is higher than list-style-type, such as:   list-style:circle inside URL (... /img.gif) In this example, if img.gif exists, the circle symbol previously set is not displayed.   PS: In fact, List-style-type has a lot of useful styles, interested students can refer to: HTtps://developer.mozilla.org/en/css/list-style-type   Border-radius (fillet radius)   Border-radius is a newly added attribute in CSS3. Used to implement rounded borders. The bad thing about this property is that different browsers support it differently, ie not yet, Gecko (Firefox) and WebKit (safari/chrome) need to use the private prefix-moz-and-webkit-respectively. What's even more troubling is that if the Border-radius attribute of a single corner is more different in the two browsers, you have to write a lot of private properties:  -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 looking at the vertigo? This is only to achieve the upper left corner is not rounded corners, the other three corners are rounded corners. So for Border-radius, God fly strongly recommend the use of abbreviations:  -moz-border-radius:0 6PX 6px;  -webkit-border-radius:0 6PX 6px;   border-radius:0 6PX 6px;   This is a lot simpler. PS: Unfortunately, the latest safari (4.0.5) does not support this abbreviation ... (@fireyy)   constantly in the update, and constantly learning, we share knowledge.