CSS Abbreviation and how to optimize the skills, CSS abbreviation optimization skills

CSS Abbreviation and how to optimize the skills, CSS abbreviation optimization skills

CSS abbreviationIt refers to simplifying the CSS attribute of multiple rows into one row, also knownCSS code optimizationOrCSS abbreviation. The biggest benefit of CSS 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 describes common CSS shorthand rules:

I. Box Size

Here, we mainly use two attributes: margin and padding. We use margin as an example. padding is the same as it. The box has four directions: top, bottom, and left. Each Direction has an outer margin:

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

You can abbreviated it:

margin:1px 2px 3px 4px;

Syntax margin: top right bottom left;

// The Four margins are the same, equivalent to margin: 1px 1px 1px; margin: 1px; // the top and bottom margins are both 1px and the left and right margins are both 2px, which is equivalent to margin: 1px 2px 1px 2px; margin: 1px 2px; // The right margin is the same as the left margin, equivalent to margin: 1px 2px 3px 2px; margin: 1px 2px 3px; // note, although the top and bottom margins are all 1px, it cannot be abbreviated here. Margin: 1px 2px 1px 3px;

2. border)

The border attributes are as follows:

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

It can be abbreviated:

border:1px solid #000;

Syntax border: width style color;

Iii. Background)

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:00;

It can be abbreviated:

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 attribute values. If this attribute value is omitted, the default value of the browser is used. The default value is:

• Color: transparent

• Image: none

• Repeat: repeat

• Attachment: scroll

• Position: 0% 0%

4. fonts)

The font attributes 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:

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

Note: If you are short for font definition, you must at least define the font-size and font-family values.

5. List (lists)

To cancel the default dot and serial number, you can write list-style: none ;,
The list attributes are as follows:

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

It can be abbreviated:

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

6. Color)

Hexadecimal color value. If the two values are the same, they can be abbreviated to half. For example:

Aqua: #00 ffff -- # 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 property value is 0.

The writing principle is that if the CSS property value is 0, you do not need to add units for it (for example, px/em). You may write the following code:

padding:10px 5px 0px 0px;

Try it like this:

padding:10px 5px 00 ;

8. Last semicolon

The last attribute value can be followed by a semicolon, for example:

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

Can be abbreviated:

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

9. font-weight)

You may write as follows:

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

Can be abbreviated:

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

10. border radius)

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

-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:

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

Syntax border-radius: topleft topright bottomright bottomleft