Css attribute abbreviation set, css abbreviation set

Css attribute abbreviation set, css abbreviation set

As a front-end attacker, CSS is definitely the foundation, but it is also difficult to grasp the foundation. Today, we will summarize the simplified CSS attributes that are easy to write incorrectly.

1,Background

Background color: background-color basic syntax: background-color: transparent | color

Background image: background-image basic syntax: background-image: none | url (url)

Background Image Layout: background-repeat basic syntax: background-repeat: repeat | no-repeat | repeat-x | repeat-y

Rolling background image or fixed: background-attachment basic syntax: background-attachment: scroll | fixed

Background Image Location: background-position basic syntax: background-position: length | length or background-position: position | position

Length: percent | length value composed of floating-point numbers and unit identifiers. See length unit

Position: top | center | bottom | left | center | right

The above are commonly used background attributes, which are familiar to everyone,

The short form is:Background: background-color | background-image | background-repeat | background-attachment | background-position

With the development of css, CSS3 introduces four other attributes:

Cropping Area of the background: background-clip basic syntax: background-clip: border-box | padding-box | content-box | no-clip

Border-box: crop the background from the border area.

Padding-box: crop the background from the padding area.

Content-box: crop the background from the content area.

No-clip: crop the background from the border area.

Background display area: background-origin basic syntax: background-origin: border | padding | content

Set the background image size: background-size basic syntax: background-size :[<Length>|<Percentage>| Auto] {1, 2} | cover | contain

Multi-background: [background-image] | [background-origin] | [background-clip] | [background-repeat] | [background-size] | [background-position]

Example: background: url (img/multiple-backgrounds.png) left top no-repeat, url (img/multiple-backgrounds.png)-320px bottom no-repeat, url (img/multiple-backgrounds.png) -640px top repeat-y;

It's over! How can we abbreviated so many attributes?

I found a lot of information and finally found it. I should share some good things:

The short form is:Background: background-color | background-image | background-repeat | background-attachment | background-position/background-size | background-origin | background-clip;

Pay attention to the backslash in it.fontSimilar to the backslash used in the abbreviated form of border-radius.

Example: background: red url ("images/1.jpg") no-repeat scroll center/50% content-box;

2,Font

Font style: font-style basic syntax: font-style: normal | italic | oblique

Set whether the text is a small uppercase letter: font-variant basic syntax: font-variant: normal | small-caps

Set font width: font-weight basic syntax: font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |

Set font size: font-size basic syntax: font-size: xx-small | x-small | medium | large | x-large | xx-large | larger | smaller | length

Set the text font name sequence: font-family Basic Syntax: font-family: ncursive | fantasy | monospace | serif | sans-serif

Which is abbreviated: Font-style | font-variant | font-weight | font-size/line-height | font-family

Example: font: italic small-caps bold 12px/1.5em arial, verdana;

3,Margin & paddingTaking margin as an example, padding is the same

Which is abbreviated: Margin-top margin-right margin-bottom margin-left;

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

4,Border

Border width: border-weight basic syntax: border-width: medium | thin | thick |Length

Border style: border-style basic syntax: border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

Border color: border-color basic syntax: border-width: color

Which is abbreviated: Border-width | border-style | border-color

Example: border: 1px solid #000;

5,Outline

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

Which is abbreviated: Outline-width | outline-style | outline-color

Example: outline: 1px solid red;

6,Border-radius

Radius in the upper right corner: border-top-right-radius,

Radius in the lower right corner: border-bottom-right-radius,

Radius in the lower left corner: border-bottom-left-radius,

Radius in the upper left corner: border-top-left-radius

When the radius of each rounded corner is the same, it is abbreviated:Border-radius: border-top-right-radius border-bottom-left-radius border-top-left-radius;

Example: border-radius: 0 6px 6px; generally abbreviated as border-radius: 0 6px 6px;

When the radius of each rounded corner is different, the abbreviated method is:Border-radius: none | <length> {1, 4} [/<length> {1, 4}]?

For example: border-radius: 0px 5px 10px 15px/20px 15px 10px 5px; write the radius of the two sides of each corner in sequence according to the upper and lower left rules.

7,ColorIt's too simple.

I don't know whether the summary is good or not. If there is something wrong, please point it out. Thank you!