CSS code abbreviation div+css layout code abbreviation specification

Using abbreviations can help reduce the size of your CSS files and make them easier to read. For the main rules of CSS abbreviations, please refer to "Summary of Common CSS Abbreviation Syntax". The main rules of CSS abbreviations are as follows:

color
If the values of every two digits of a hexadecimal color value are the same, they can be abbreviated in half, for example:
#000000 can be abbreviated as #000; #336699 can be abbreviated as #369;

Note: Do not interleave full-text and abbreviated color configurations in the same CSS configuration section, as this will cause browser rendering failures when system resources are extremely low.

Box size <br />There are usually four ways to write it:
property:value1; means all edges have a value of value1;
property:value1 value2; means the values of top and bottom are value1, and the values of right and left are value2
property:value1 value2 value3; means the value of top is value1, the values of right and left are value2, and the value of bottom is value3
property:value1 value2 value3 value4; the four values represent top, right, bottom, left respectively
A convenient way to remember is clockwise: up, right, down, left. Specific examples of application 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 into 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 into 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 these 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%

Fonts
The font properties 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 into a 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 shortened to one sentence: list-style:square inside url(image.gif);

<<: Minio lightweight object storage service installation and browser usage tutorial

>>: Solve the problem that line-height=height element height but text is not vertically centered