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

This article will explain in detail what the abbreviated usage of CSS is, and the editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Introduction to the abbreviated usage of CSS

To put it simply, CSS abbreviation is to simplify multiple pieces of CSS code into one sentence on the premise of equivalence. In my opinion, CSS has three advantages: first, it is easy to write (like keyboard shortcuts); second, it simplifies the code; and third, it helps you familiarize yourself with and deeply understand CSS.

Abbreviation for font in CSS:

Font:italicsmall-capsbold12px/1.5emarial,verdana; is equivalent to:

Font-style:italic

Font-variant:small-caps

Font-weight:bold

Font-size:12px

Line-height:1.5em

Font-family:arial,verdana; order: font-style | font-variant | font-weight | font-size | line-height | font-family

(note: when abbreviated, font-size and line-height can only be composed of a value by slash, not separately. )

Abbreviation for background in CSS:

Background:#fffurl (bg.gif) no-repeatfixedlefttop; is equivalent to:

Background-color:#fff

Background-image:url (bg.gif)

Background-repeat:no-repeat

Background-attachment:fixed

Background-position:lefttop; order: background-color | background-image | background-repeat | background-attachment | background-position

Abbreviation for margin&padding in CSS:

Margin:1px02em-20px; is equivalent to:

Margin-top:1px

Margin-right:0

Margin-bottom:2em

Margin-left:-20px; order: margin-top | margin-right | margin-bottom | margin-left

The abbreviation of padding is exactly the same as margin.

Abbreviation for border in CSS:

Border:1pxsolid#000; is equivalent to:

Border-width:1px

Border-style:solid

Border-color:#000; order: border-width | border-style | border-color

These three sentences are also abbreviated, which is tantamount to combining the styles of the four sides into one. (the questions on the four sides are explained in detail below)

Abbreviation for border-top/border-right/border-bottom/border-left in CSS:

Border-top:1pxsolid#000; is equivalent to:

Border-top-width:1px

Border-top-style:solid

Border-top-color:#000; (like border)

Abbreviation for list-style in CSS:

List-style:squareoutsideurl (bullet.gif); equivalent to:

List-style-type:square

List-style-position:outside

List-style-image:url (bullet.gif); order: list-style-type | list-style-position | list-style-image

About the four sides

There are many styles that involve the problems of the four sides, which are explained uniformly here.

The abbreviations on the four sides are generally as follows:

Padding:1px2px3px4px; is equivalent to:

Padding-top:1px

Padding-right:2px

Padding-bottom:3px

Padding-left:4px; order: top | right | bottom | left

No matter the border width, or the border color, margin, etc., as long as the CSS style involves four sides, the order is all "upper right, lower left" (clockwise).

◆ if one of the four values is omitted, only three are written:

Padding:1px2px3px; is equivalent to:

Padding-top:1px

Padding-right:2px

Padding-bottom:3px

Padding-left:2px; (the omitted "left" value equals "right")

◆ if the values on the four sides are omitted two:

Padding:1px2px; is equivalent to:

Padding-top:1px

Padding-right:2px

Padding-bottom:1px

Padding-left:2px; (the omitted "down" value equals "up")

If ◆ has only one value:

Padding:1px; is equivalent to:

Padding-top:1px

Padding-right:1px

Padding-bottom:1px

Padding-left:1px

This is the end of the article on "what are the abbreviated uses of CSS". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

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.