How to parse the six rules of CSS abbreviation
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.
