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

This article will explain in detail how to analyze the six rules of CSS abbreviation. The content of the article is of high quality, so the editor will share it with you for reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.

CSS layout has a lot to learn. Here is a description of the rules for CSS abbreviations. Using CSS abbreviations can help reduce the size of your CSS files and make them easier to read.

Common abbreviation syntax for CSS

Using CSS abbreviations can help reduce the size of your CSS files and make them easier to read. The main rules for CSS abbreviations are as follows:

Color

A hexadecimal color value that can be abbreviated by half if every two bits are the same, for example:

# 000000 can be abbreviated to # 000

# 336699 can be abbreviated to # 369

Box size

There are usually four ways to write:

Property:value1; means that all edges are one value value1

Property:value1value2; indicates that the values of top and bottom are value1,right and left are value2

Property:value1value2value3; indicates that the value of top is value1,right and the value of left is value2,bottom. The value is value3.

The four values of property:value1value2value3value4; represent top,right,bottom,left in turn.

The convenient way to remember is clockwise, up, right, down, and left. Examples of specific applications in margin and padding are as follows:

Margin:1em02em0.5em

Border (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:1pxsolid#000

The syntax is border:widthstylecolor.

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:#f00url (background.gif) no-repeatfixed00

The syntax is background:colorimagerepeatattachmentposition

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%0%

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: "LucidaGrande", sans-serif

It can be abbreviated to one sentence:

Font:italicsmall-capsbold1em/140% "LucidaGrande", sans-serif

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

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:squareinsideurl (image.gif); this is the end of the six rules on how to parse CSS abbreviations. I hope the above content can be helpful to you and learn more knowledge. If you think the article is good, you can 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.