10 CSS abbreviations/optimization tips compiled

The biggest benefit of abbreviation is that it can significantly reduce the size of CSS files, optimize the overall performance of the website, and make it easier to read. The following is an introduction to the CSS abbreviation rules. Friends who like optimization can refer to it. I hope it will be helpful to everyone

CSS abbreviation refers to abbreviating multiple lines of CSS properties into one line, also known as CSS code optimization or CSS abbreviation. The biggest benefit of the CSS

abbreviation is that it can significantly reduce the size of the CSS file, optimize the overall performance of the website, and make it easier to read. The following introduces common CSS abbreviation rules:

1. Box size

Here are mainly used for two attributes: margin and padding. We take margin as an example, padding and The same.

The box has four directions, up, down, left and right, and each direction has a margin:

margin-top:1px; 
margin-right:2px; 
margin-bottom:3px; 
margin-left:4px;

You can abbreviate it as:

margin:1px 2px 3px 4px;

Syntax margin: top right bottom left

//四个方向的边距相同，等同于margin:1px 1px 1px 1px; 
margin:1px; 
//上下边距都为1px，左右边距均为2px，等同于margin:1px 2px 1px 2px 
margin:1px 2px; 
//右边距和左边距相同，等同于margin:1px 2px 3px 2px; 
margin:1px 2px 3px; 
//注意，这里虽然上下边距都为1px，但是这里不能缩写。 
margin:1px 2px 1px 3px;

2. Border

The properties of the border are as follows:

border-width:1px; 
border-style:solid; 
border-color:#000;

can be abbreviated to one sentence:

border:1px solid #000;

Syntax border:width style color;

3. Backgrounds

The attributes 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;

##

background:#f00 url(background.gif) no-repeat fixed 0 0;

You can omit one or more of the attribute values. If omitted, the The attribute value will use the browser default value. The default value

is:

color: transparent 
image: none 
repeat: repeat 
attachment: scroll 
position: 0% 0%

The attributes 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;

font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

5. Lists
To cancel the default dots and serial numbers, you can write list-style:none;,
The attributes of list are as follows:

list-style-type:square; 
list-style-position:inside; 
list-style-image:url(image.gif);

list-style:square inside url(image.gif);

Hexadecimal color value, if the value of each two digits is the same, it can be abbreviated in half. For example:

Aqua: #00ffff ——#0ff 
Black: #000000 ——#000 
Blue: #0000ff ——#00f 
Dark Grey: #666666 ——#666 
Fuchsia:#ff00ff ——#f0f 
Light Grey: #cccccc ——#ccc 
Lime: #00ff00 ——#0f0 
Orange: #ff6600 ——#f60 
Red: #ff0000 ——#f00 
White: #ffffff ——#fff 
Yellow: #ffff00 ——#ff0

The writing principle is that if the CSS attribute value is 0, then you don’t have to To add units (such as: px/em), you may write like this

padding: 10px 5px 0px 0px;

padding: 10px 5px 0 0;

You don’t need to write the semicolon after the last attribute value, such as:

#nav{ 
border-top:4px solid #333; 
font-style: normal; 
font-variant:normal; 
font-weight: normal; 
}

#nav{ 
border-top:4px solid #333; 
font-style: normal; 
font-variant:normal; 
font-weight: normal 
}

You may It will be written like this:

h1{ 
font-weight:bold; 
} 
p{ 
font-weight:normal; 
}

h1{ 
font-weight:700; 
} 
p{ 
font-weight:400; 
}

border-radius is a newly added attribute in css3, used to implement rounded borders.

-moz-border-radius-bottomleft:6px; 
-moz-border-radius-topleft:6px; 
-moz-border-radius-topright:6px; 
-webkit-border-bottom-left-radius:6px; 
-webkit-border-top-left-radius:6px; 
-webkit-border-top-right-radius:6px; 
border-bottom-left-radius:6px; 
border-top-left-radius:6px; 
border-top-right-radius:6px;

-moz-border-radius:0 6px 6px; 
-webkit-border-radius:0 6px 6px; 
border-radius:0 6px 6px;

The above is the detailed content of 10 CSS abbreviations/optimization tips compiled. For more information, please follow other related articles on the PHP Chinese website!