Using 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
Hexadecimal color values, if the values of each two digits are the same, can be abbreviated by half, for example: #000000 can be abbreviated to #000; #336699 can be abbreviated to #369;
Box size
There are usually four writing methods:
property:value1; means that all edges have a value value1;
property:value1 value2; means the value of top and bottom is value1, and the value of right and left is value2
property:value1 value2 value3; means the value of top is value1, the value of right and left is value2, and the value of bottom is value3
property:value1 value2 value3 value4; The four values represent top, right, bottom, left in sequence
A convenient way to remember is clockwise, top right, bottom left. Examples of specific applications in margin and padding are as follows:
margin:1em 0 2em 0.5em;
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;
The syntax is border:width style color;
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:0 0;
It can be abbreviated to one sentence: background:#f00 url(background.gif) no-repeat fixed 0 0;
The syntax is background:color image repeat attachment position;
You can omit one or more of the attribute values. If omitted, the attribute value will use the browser default value. The default value is:
color: transparent
image: none
repeat: repeat
attachment: scroll
position: 0% 0%
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 1em/140% "Lucida Grande",sans-serif;
Note that if you abbreviate the font definition, you must define at least two values: font-size and font-family.
Lists
To cancel the default dots and serial numbers, you can write list-style:none;,
The properties of list are as follows:
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);