CSS Shorthand Guide

One of the efficient CSS notation is to use shorthand. By shorthand, you can make your CSS file smaller and easier to read. The understanding of CSS properties shorthand is also one of the basic skills of front-end development engineers. Today we summarize the abbreviations of CSS properties in a systematic way.

1. Color abbreviations

The abbreviation of color is the simplest, when the color value with 16, if the value of each color is the same, you can write a:

Color: #113366可以简写为: color: #136

Abbreviations can be used wherever 16 color values are used, such as Background-color, Border-color, Text-shadow, Box-shadow, and so on.

2. Box size

This is mainly used for two properties: margin and padding, we take margin for example, padding is the same. The box has four directions up and down, with an outer margin in each direction:

margin-top:1px;margin-right:1px;margin-botton:1px;margin-left:1px;

These four values can be abbreviated to one another:

margin:1px 1px 1px 1px;

The abbreviations are in the order of the left, right and bottom. Clockwise direction. The opposite side has the same value, you can omit:

margin:1px;//four-direction margin is the same, equivalent to margin:1px 1px 1px 1px;margin:1px 2px;//up and down the margin is 1px, the left and right margins are 2px, equivalent to margin:1px 2px 1px 2pxmargin : 1px 2px 3px;//the right margin and the left margin are the same, the equivalent of margin:1px 2px 3px 2px;margin:1px 2px 1px 3px;//Note, here Although the bottom margin is 1px, but here can not be abbreviated.

3. Bezel (border)

Border is a flexible property that has border-width, Border-style, border-color three sub-attributes.

Border-width: Numbers + units; 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, border can be easier to write, some values can be omitted, but note what is necessary, and you can test it:

　

Border:groove Red;  Guess what the width of this border is? Border:solid;  What's this going to look like? border:5px;  Is that OK? BORDER:5PX Red; Is that OK?? border:red; Is that OK???

The above code can be learned 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 is black by default (thanks to @birdstudio reminders). Border-style is required for border abbreviations.

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 property:

border-width:1px 2px 3px; A maximum of four values can be used, and the abbreviation rules resemble box-size abbreviations, the same as border-style:solid dashed dotted groove;border-color:red blue white black;

4.outline

Outline similar to border, the difference is that border will affect the box model, and outline will not.

Outline-width: Numbers + units; 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 shorthand, Outline-style is also required, while the other two values are optional, and the default value is the same as border.

5. Background (background)

Background is one of the most commonly used abbreviations, and it 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;

The shorthand for background also has some default values:

Background:transparent None repeat scroll top left;

The value of the background property does not inherit, you can declare only one of them, and the other values are applied by default.

6.font

Font shorthand is also the most used one, and it is one of the ways to write efficient CSS.

The 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 property of a font also has a default value, and it is relatively important to remember that these default values:

Font-style:normal;font-variant:normal;font-weight:normal;font-size:inherit;line-height:normal;font-family: Inherit

In fact, the shorthand for a 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.

However, there is a small manual, I believe it will allow you to better understand the shorthand for the font:

7. List Style

Probably one of the most common attributes about a list is:

List-style:none

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-romanlist-style-position:  inside | | outside | | inheritlist-style-image:  (URL) | | none | | inherit

The default properties for List-style are as follows:

List-style:disc outside None

Note that if a picture is defined in the List-tyle, the picture will have a higher priority than list-style-type, such as:

List-style:circle inside URL (.. /img.gif)

In this example, if Img.gif is present, the circle symbol set previously is not displayed.

PS: Actually list-style-type has many kinds of very useful styles, interested students can refer to: Https://developer.mozilla.org/en/CSS/list-style-type

8.border-radius (Fillet radius)

The Border-radius is a newly added attribute in the CSS3 that is used to implement rounded borders. The bad thing about this property is that the support of each browser is different, IE is not supported, Gecko (Firefox) and WebKit (Safari/chrome) are required to use the private prefix-moz-and-webkit-respectively. Even more tangled is that if the Border-radius attribute of a single corner is more varied in both browsers, you write a large number 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, is that what you've been looking at? This is only to realize that the upper-left corner is not rounded, the other three corners are rounded corners of the case. So for Border-radius, flying is strongly recommended to use abbreviations:

-moz-border-radius:0 6PX 6px;-webkit-border-radius:0 6PX 6px;border-radius:0 6PX 6px;

Excerpt from: http://www.qianduan.net/css-font-shorthand-attribute-handbook.html

CSS Shorthand Guide (GO)