CSS Short Guide

Document directory

• Box Size
• Border (Border)
• Outline
• Background)
• Font
• List Style
• Border-radius (rounded corner radius)

One of the efficient CSS writing methods is to use shorthand. You can use abbreviations to make your CSS files smaller and easier to read. Understanding CSS attribute abbreviations is also one of the basic skills of front-end development engineers. This is an article I learned from the front-end about CSS shorthand, and also for future reference.

Box Size

Here, we mainly use two attributes: margin and padding. We use margin as an example. Padding is the same as it. The box has four directions: top, bottom, and left. Each Direction has an outer margin:

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

The four values can be abbreviated together:

margin:1px 1px 1px 1px;

The abbreviation is in the upper-> right-> lower-> left order. Clockwise. If the relative edge value is the same, you can save the following:

Margin: 1px; // The Four margins are the same, equivalent to margin: 1px 1px 1px 1px; Margin: 1px 2px; // the top and bottom margins are both 1px and the left and right margins are both 2px, which is equivalent to margin: 1px 2px 1px 2px. Margin: 1px 2px 3px; // The right margin is the same as the left margin, equivalent to margin: 1px 2px 3px 2px; Margin: 1px 2px 1px 3px; // Note: although the top and bottom margins are all 1px, it cannot be abbreviated here.

Border (Border)

Border is a flexible attribute. It has three sub-attributes: border-width, border-style, and border-color.

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:

border:5px solid #369;

Sometimes, border can be simpler to write, and some values can be saved, but note what is necessary. You can also test it:

Border: Groove red; // you can guess the Border width? Border: solid; // What will this look like? Border: 5px; // Can this be true? Border: 5px red; // Can this be true ?? Border: red; // can this be done ???

The code above shows that the default Border width is 3px and the default color isYes black -- black. The default color is the value of the color attribute in this rule, and the color is black by default (thanks @ birdstudio for your reminder ). In the abbreviation of borderBorder-style is required.

You can also use the abbreviation of 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 the abbreviation for each attribute:

Border-width: 1px 2px 3px; // a maximum of four values can be used. The abbreviation rules are similar to the abbreviations of the box size. border-style：solid dashed dotted groove; border-color:red blue white black;

Outline

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

Outline-width: Number + unit; outline-style: none || dashed || dotted || double || groove || inset || outset || ridge || solid ; Outline-color: color;

Can be abbreviated:

outline:1px solid red;

Similarly, in outline short, outline-style is required, and the other two values are optional. The default value is the same as that of border.

Background)

Background is one of the most commonly used abbreviations. It contains the following attributes:

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;

The abbreviation of background can greatly improve CSS efficiency:

background:#fff url(img.png) no-repeat 0 0;

Background abbreviations also have some default values:

background:transparent none repeat scroll top left ;

The value of the background attribute does not inherit. You can declare only one of them. Other values will be applied by default.

Font

The font abbreviation is also the most commonly used one, and it is also one of the methods for writing efficient CSS.

Font includes the following attributes:

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 font attribute also has default values. Remember these default values.Important:

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

In fact, the abbreviation of font is the most careful one among these abbreviations. A slight negligence may cause unexpected consequences,Many people do not agree to use the font abbreviation..

However, there is a small manual here. I believe it will help you better understand the abbreviation of Font:

List Style

The most common attribute about the list is:

list-style:none

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

List-style also has three attributes:

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 of list-style are as follows:

list-style:disc outside none

Note that if an image is defined in list-tyle, the image priority is higher than list-style-type, for example:

       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 style, interested students can refer to: https://developer.mozilla.org/en/CSS/list-style-type

Border-radius (rounded corner radius)

Border-radius is a newly added attribute in css3, which is used to implement a rounded border. This attribute is not supported by different browsers, but not by IE. Gecko (Firefox) and WebKit (Safari/chrome) you must use the private prefix-moz-and-WebKit-respectively -. What's even more confusing is that if the border-radius attribute of a single angle is significantly different between the two browsers, you need to write a large number of private attributes:

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

Er, Are you confused? This is only the case where the upper left corner is not the rounded corner and the other three corners are the rounded corner. Therefore, for border-radius, we strongly recommend that you use the abbreviation:

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

This is much simpler. PS: Unfortunately, the latest Safari (4.0.5) does not support this abbreviation... (Thanks @ fireyy)

So far, are there other attributes that can be abbreviated? You are welcome to discuss it together.