Shulou(Shulou.com)06/02 Report--

This article introduces you to the common CSS abbreviation methods are what, the content is very detailed, interested friends can refer to, I hope to help you.

Skillful use of CSS abbreviations, CSS code streamlining, can greatly improve the readability of your CSS code, here and share with you several common CSS abbreviation methods, through CSS abbreviations can make your CSS file smaller, more readable.

Common CSS Abbreviations

CSS experts often pursue CSS code refinement and clarity, one of which is the use of CSS abbreviations. CSS abbreviations make your CSS files smaller and easier to read. Today we're going to summarize a few CSS shorthand terms that are often used.

case-sized

This is mainly used for two attributes: margin and padding, we take margin as an example, padding is the same as it. The box has four directions, up, down, left and right, and each direction has an outer margin:

sample code

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

The CSS abbreviations for these four values are:

sample code

margin:1px1px1px1px;

Note: The order of abbreviations is top-> right-> bottom-> left. clockwise direction.

If the four blank values are the same, they can be abbreviated further:

sample code

margin:1px;//margins are the same in all four directions

More CSS abbreviations:

sample code

margin:1px2px;//The upper and lower margins are both 1px, and the left and right margins are both 2px, which is equivalent to margin:1 px2px1px2px margin:1px2px3px;/The right margin is the same as the left margin, which is equivalent to margin:1px2px3px2px; margin:1px2px1px3px;/Note that although the upper and lower margins are both 1px, they cannot be abbreviated here.

border (border)

First, let me introduce the basic properties of border:

border-width: number + unit;

border-style:none||hidden||dashed||dotted||double||groove||inset||outset||ridge||solid;

border-color: color;

Border can be abbreviated in the order of width, style, and color:

sample code

border:5pxsolid#369;

Note: The default width of border is 3px, and the default color is black--black. Border-style is required in the abbreviation of border.

We can also simplify CSS abbreviations for each attribute of the edge. CSS abbreviations are similar to box size abbreviations, as follows:

sample code

border-width：1px2px3px; border-style：soliddasheddottedgroove; border-color:redbluewhiteblack;

Background

Let me introduce the basic grammar of background first.

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 shorthand for background can greatly improve the efficiency of CSS:

sample code

background:#fffurl(img.png)no-repeat00;

Note: The shorthand for background also has some default values: background:#fffurl(img.png)no-repeat00; the value of the background attribute is not inherited, you can declare only one of them, and the other values will be applied by default.

What are the common CSS abbreviation methods to share here, I hope the above content can be of some help to everyone, you can learn more knowledge. If you think the article is good, you can share it so that more people can see it.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.