Start from scratch to learn the abbreviation of html (13) CSS code, which consumes less bandwidth and starts from scratch.

Start from scratch to learn the abbreviation of html (13) CSS code, which consumes less bandwidth and starts from scratch.
I. Simplified Box Model Code

1 <! Doctype html> 2 Simplified Box Model Code
Remember that when talking about the box model, the margin (margin), the padding (padding), and the border (border) are set in the clockwise direction: top, bottom, and left.
An example of the specific application in margin and padding is as follows:
Margin: 10px 15px 12px 14px;/* Set 10px to top, 15px to right, 12px to bottom, and 14px to left */
There are usually three Abbreviations:
1. If the top, right, bottom, and left values are the same, see the following code:
margin:10px 10px 10px 10px;
Abbreviations:
margin:10px;
2. If the top and bottom values are the same, left and right values are the same, as shown in the following code:
margin:10px 20px 10px 20px;
Abbreviations:
margin:10px 20px;
3. If the left and right values are the same, see the following code:
margin:10px 20px 30px 20px;
Abbreviations:
margin:10px 20px 30px;
Note: The abbreviation of padding and border is the same as that of margin.
Task
In the Code Editor, modify the values of margin and padding into abbreviations.
The reference code is as follows:
P {
Padding: 13px;
Margin: 10px 40px;
}
Box Model size = border + margin + padding + content size in the box
Define order: Top right bottom left (clockwise)
Define three values: 1 (top) 2 (left and right) 3 (bottom)
Defines two values: 1 (up and down) 2 (left and right) the order is up, right, bottom, left, clockwise, and, and if there is a shorthand, it is both a simplified form,
For example, if there is only one value, it means this is the case. If there are two values (that is, the upper and lower are the same as the left and right values) if there are three values (the last left by default is the same as the given right)
Ii. Abbreviation of color value
1 <! Doctype html> 2 Abbreviation of color value
 
Css styles of colors can also be abbreviated. When the color you set is a hexadecimal color value, if the two values are the same, they can be abbreviated to half.
Example 1:
p{color:#000000;}
Can be abbreviated:
p{color: #000;}
Example 2:
p{color: #336699;}
Can be abbreviated:
p{color: #369;}

Task
In the Code Editor, try the color shrinking format.

  

 
   

     Reference code: 
   
 
   

     P { 
   
 
   

     Color: #369; 
   
 
   

     } 
   
 
   

 
   

 
   


  
There are three Color Representation Methods in CSS:



1: Use English words to directly describe, such as red, green, and black.



2: represented in hexadecimal notation, for example, #000000, # FFFFFF.



3: represented in hexadecimal notation, for example, #000, # FFF, etc.

  

 
   
 
    
1 <! Doctype html> 2 Abbreviation
  
The font css style code in a webpage can also be abbreviated. The following Code sets the font for the webpage:
  
Body {font-style: italic; font-variant: small-caps; font-weight: bold; font-size: 12px; line-height: 1.5em; font-family: "", sans-serif ;}
  
So many lines of code can be abbreviated as one sentence:
  
Body {font: italic small-caps bold 12px/1.5em "", sans-serif ;}
  
Note:
  
1. You must specify at least the font-size and font-family attributes in this shorthand method, if other attributes (such as font-weight, font-style, font-variant, and line-height) are not specified, the default value is automatically used.
  
2. Add "/" to the center of font-size and line-height.
  
Generally, the abbreviated code below is commonly used because there are few Chinese websites in English:
  
Body {font: 12px/1.5em "", sans-serif ;}
  
Only font size, line spacing, Chinese font, and English font settings are available.
  
 
  
 
  
You can explain the meaning one by one.
Body {
Font-style: italic; // set the font to italic.
Font-variant: small-caps; // case sensitive. The browser displays the font of small uppercase letters.
Font-weight: bold; // set bold
Font-size: 12px; // The font size is 12 pixels.
Line-height: 1.5em; // The row spacing (Row height) is 1.5 times that of the row.
Font-family: "", sans-serif; // set the Chinese font to and the English font to sans-serif}
  
 
  
Body {
Font: italic small-caps bold 12px/1.5em "", sans-serif;
}
The first three orders have no effect, but the last two orders are fixed and must have
Simplified sequence: font-style | font-variant | font-weight | font-size | line-height | font-family