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

This article mainly explains "what are the skills of CSS abbreviation". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what are the skills of CSS shorthand".

1. Box size

This is mainly used for two properties: margin and padding. Let's take margin as an example, and padding is the same. The box has four directions, up and down, left and right, with an outer margin in each direction:

Margin-top:1px

Margin-right:2px

Margin-bottom:3px

Margin-left:4px

You can write it simply as:

Margin:1px 2px 3px 4px

Syntax margin:top right bottom left

/ / the margins are the same in all four directions, which is equivalent to margin:1px 1px 1px 1px

Margin:1px

/ / both the upper and lower margins are 1px, and the left and right margins are 2px, which is equivalent to margin:1px 2px 1px 2px

Margin:1px 2px

/ / the right margin is the same as the left margin, which is equivalent to margin:1px 2px 3px 2px

Margin:1px 2px 3px

/ / Note that although the upper and lower margins here are 1px, it cannot be abbreviated here.

Margin:1px 2px 1px 3px

II. Frame (border)

The properties of the border are as follows:

Border-width:1px

Border-style:solid

Border-color:#000

It can be abbreviated to one sentence:

Border:1px solid # 000

Syntax border:width style color

Background (Backgrounds)

The properties of the background are as follows:

Background-color:#f00

Background-image:url (background.gif)

Background-repeat:no-repeat

Background-attachment:fixed

Background-position:00

It can be abbreviated to one sentence:

Background:#f00 url (background.gif) no-repeat fixed 00

The syntax is background:color image repeat attachment position

You can omit one or more of the property values. If omitted, the property value will use the browser default value, which is:

Color: transparent

Image: none

Repeat: repeat

Attachment: scroll

Position: 0%

IV. Font (fonts)

The properties of the font are as follows:

Font-style:italic

Font-variant:small-caps

Font-weight:bold;font-size:1em

Line-height:140%

Font-family: "Lucida Grande", sans-serif

It can be abbreviated to one sentence:

Font:italic small-caps bold 1embank 140% "Lucida Grande", sans-serif

Note that if you abbreviate the font definition, you should define at least two values, font-size and font-family.

5. List (lists)

Cancel the default dot and sequence number to write list-style:none like this

The attributes of list are:

List-style-type:square

List-style-position:inside

List-style-image:url (image.gif)

It can be abbreviated to one sentence:

List-style:square inside url (image.gif)

VI. Color (Color)

The hexadecimal color value can be abbreviated by half if every two bits are the same. For example:

Aqua: # 00ffff-# 0ff

Black: # 000000-# 000

Blue: # 0000ff-# 00f

Dark Grey: # 666666-# 666

Fuchsia:#ff00ff-# f0f

Light Grey: # cccccc-# ccc

Lime: # 00ff00-# 0f0

Orange: # ff6600-- # f60

Red: # ff0000-- # f00

White: # ffffff-# fff

Yellow: # ffff00-# ff0

7. The attribute value is 0

The writing rule is that if the value of the CSS attribute is 0, then you don't have to add units to it (for example, px/em), you might write:

Padding:10px 5px 0px 0px

Try this:

Padding:10px 5px 00

The last semicolon

The semicolon after the last attribute value can be left unwritten, such as:

# nav {

Border-top:4px solid # 333

Font-style: normal

Font-variant:normal

Font-weight: normal

}

It can be simplified as:

# nav {

Border-top:4px solid # 333

Font-style: normal

Font-variant:normal

Font-weight: normal

}

9. Font weight (font-weight)

You might write like this:

H2 {

Font-weight:bold

}

P {

Font-weight:normal

}

It can be simplified as:

H2 {

Font-weight:700

}

P {

Font-weight:400

}

Radius of fillet (border-radius)

Border-radius is a new attribute in css3, which is used to implement fillet borders.

-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

It can be simplified as:

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

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

Border-radius:0 6px 6px

Syntax border-radius:topleft topright bottomright bottomleft

Thank you for your reading, these are the contents of "what are the skills of CSS abbreviation?" after the study of this article, I believe you have a deeper understanding of the skills of CSS abbreviation, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.