If you have a deep understanding of the front end of CSS, you should know that there are many abbreviations for CSS style code. For example, CSS code can be abbreviated to one line when defining fonts, backgrounds, etc. CSS abbreviation refers to the abbreviation of multi line CSS attributes into one line, also known as CSS code optimization or CSS abbreviation. The biggest advantage of CSS shorthand is that it can significantly reduce the size of CSS files, optimize the overall performance of the website, and make it easier to read. In order to better understand the abbreviation method of CSS, I have collected some reference materials about CSS abbreviation, and now I will share 10 common rules for CSS abbreviation:
1、 Box size
This is mainly used for two attributes: margin and padding. Let's take margin as an example. Padding is the same as margin. The box has four directions: up, down, left, right, and each direction has an outer 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;
The margins in the four directions are the same, which is equal to margin: 1px 1px 1px 1px; margin:1px; The upper and lower margins are 1px, and the left and right margins are 2px, which is equivalent to margin: 1px 2px 1px 2px; margin:1px 2px; The right margin is the same as the left margin, which is equal to margin: 1px 2px 3px 2px; margin:1px 2px 3px; Note that although the upper and lower margins are 1px, they cannot be abbreviated here. margin:1px 2px 1px 3px;
2、 Border
The properties of the border are as follows:
border-width:1px;
border-style:solid;
border-color:#000;
It can be abbreviated as: 1border: 1px solid # 000; Syntax border: width style color;
3、 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:00; 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 attribute values. If omitted, the attribute value will use the browser default value, which 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 to one sentence:
font:italic small-caps bold 1em/140%"Lucida Grande",sans-serif;
Note that if you abbreviate font definition, you should define at least two values: font size and font family.
5、 Lists
To cancel the default dot and serial number, write list style: none;,
The attributes of the 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); 6、 Color
The color value in hexadecimal system can be abbreviated in half if every two bits have the same value. 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、 Property value is 0
The writing principle is that if the CSS attribute value is 0, you do not need to add a unit for it (such as px/em), you may write as follows:
padding:10px 5px 0px 0px; Try this:
padding:10px 5px 00 ; 8、 Last semicolon
The semicolon after the last attribute value can be left blank, such as:
#nav{border-top:4px solid #333; font-style: normal;font-variant:normal;font-weight: normal;}
It can be abbreviated as:
#Nav {border top: 4px solid # 333; font style: normal; font variant: normal; font weight: normal} IX. font weight
You might write:
h1{font-weight:bold;} p{font-weight:normal;}
It can be abbreviated as:
h1{font-weight:700;} p{font-weight:400;}
10、 Fillet radius (border radius)
Border radius is a new attribute in css3, which is 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;
It can be abbreviated as:
-moz-border-radius:6px 6px 0;- webkit-border-radius:6px 6px 0;border-radius:6px 6px 0;
Syntax border radius: topleft topright bottomright bottomleft
