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;

can be abbreviated For a 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 The attribute value will use the browser default value. The default value

is:

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

4. Fonts (fonts)

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;

can be abbreviated to one sentence:

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

Note that if you abbreviate For font definition, at least two values ​​​​of font-size and font-family must be defined.

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);

can be abbreviated to one sentence:

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

6. Color (Color)

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

7. The attribute value is 0

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;

Try this:

padding: 10px 5px 0 0;

8. The last semicolon

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; 
}

can be abbreviated as:

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

9. Font-weight

You may It will be written like this:

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

can be abbreviated as:

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

10. Rounded corners Radius (border-radius)

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;

can be abbreviated as:

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

Syntax border-radius:topleft topright bottomright bottomleft

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!