It’s common to see people writing CSS like this at work

background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: top right;
Copy the code

And this:

font-style: italic;
font-weight: bold;
font-size: .8em;
line-height: 1.2.;
font-family: Arial.sans-serif;
Copy the code

In short, there is a lot of redundant code, and the project code looks like an uncomfortable zongzi. Today share a CSS shorthand properties, let more people standardize CSS code, do simple and clear.

A, definitions,

A shorthand property is a CSS property that lets you set several other CSS property values at the same time. Using the shorthand property saves time and effort by writing more concise and readable stylesheets.

The CSS specification defines shorthand properties to bring together definitions of common properties on the same topic.

Border properties

For border, the width, color, and type can be abbreviated to a declaration. Such as:

border-width: 1.px;
border-style: solid;
border-color: #fff;
Copy the code

This can be shortened to:

border: 1.px solid # 000;
Copy the code

Margin and Padding properties

Margin and padding are similar shorthand versions. Take a look at the CSS declaration below:

margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;

padding-top: 10px;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 5px;
Copy the code

This is the same as the following declaration (note that the value starts clockwise from top: top, right, bottom, then left)

margin: 10px 5px 10px 5px;
padding: 10px 5px 10px 5px;
Copy the code

The Background

background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: top right;
Copy the code

This can be shortened to a one-line statement:

background: #000 url(images/bg.gif) no-repeat top right;
Copy the code

The Font properties

font-style: italic;
font-weight: bold;
font-size: .8em;
line-height: 1.2.;
font-family: Arial.sans-serif;
Copy the code

This can be abbreviated as:

Font: italic bold.8em /1.2 Arial, sans-serif;Copy the code

Border – the radius attribute

border-top-left-radius: 1.em 5em;
border-top-right-radius: 1.em 5em;
border-bottom-right-radius: 1.em 5em;
border-bottom-left-radius: 1.em 5em;
Copy the code

This can be abbreviated as:

border-radius: 1em/5em;
Copy the code
Update from time to time, welcome to pay attention to ❤