CSS Tutorial: Summarizing the abbreviations for CSS Properties

One of the most efficient CSS writing 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 abbreviation

The simplest color abbreviations, in the color value of 16, if the value of each color is the same, you can write a:

1	Color: #113366

can be abbreviated to

1	Color: #136

All of the 16 color values used in the place can be abbreviated, such as Background-color, Border-color, Text-shadow, Box-shadow and so on.

Box size

This is 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, with an outer margin in each direction:

1 2 3 4

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

These four values can be abbreviated together:

1	margin:1px 1px 1px 1px;

The abbreviated order is upper-> right-> down-> left. Clockwise direction. The values for the opposite edges are the same, you can omit:

1 2 3 4

margin:1px;//Four directions of the same margin, equivalent to margin:1px 1px 1px 1px; MARGIN:1PX 2px;//the upper and lower margins are 1px, 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 relatively flexible property that has border-width, Border-style, Border-color three child properties.

1 2 3

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:

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

1 2 3 4 5

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???

You can see from the above code that the default width of the border is 3px, and the default color is black--black. Border-style is necessary in the border abbreviation.

You can also use abbreviations for each edge:

1 2 3 4

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:

1 2 3

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.

1 2 3

Outline-width: number + unit; Outline-style:none dashed dotted double groove inset outset Ridge solid; Outline-color: color;

can be abbreviated as:

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

1 2 3 4 5

Background-color:color #hex RGB (% 0-255) RGBa; Background-image:url (); Background-repeat:repeat repeat-x repeat-y no-repeat; Background-position:x Y (topbottomcenter) (leftrightcenter); Background-attachment:scroll fixed;

Background's shorthand can greatly improve the efficiency of the CSS:

1	Background: #fff URL (img.png) no-repeat 0 0;

The shorthand for background also has some default values:

1	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 also one of the most used, and it is one of the ways to write efficient CSS.

Font contains the following properties:

1 2 3 4 5 6

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 of the font's properties also has a default value, remembering that these defaults are relatively important :

1 2 3 4 5 6

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 here's a little manual that will give you a better understanding of font shorthand:

List Style

Perhaps the most common use of a list of properties is:

1	List-style:none

It clears all default list styles, such as numbers or dots.

List-style also has three properties:

1 2 3

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 properties for List-style are as follows:

1	List-style:disc outside None

Note that if you have a picture defined in 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 exists, the circle symbol previously set is not displayed.

PS: In fact List-style-type has many kinds of very 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 the CSS3 that is 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 than the two browsers, you have to write a large number of private properties:

1 2 3 4 5 6 7 8 9

-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;

Well, isn't that the vision you've been seeing? 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 recommends using abbreviations:

1 2 3

-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)

To sum up so much, are there any other attributes that can be abbreviated? Welcome to come up with a discussion.