Css study Notes-notes abbreviated to CSS

Font

Font: font-style | font-variant | font-weight | font-size | line-height | font-family;

Margin & Padding
Magin: magin-top | margin-right | margin-bottom | margin-left;
P {magin: 20px ;}
P {magin: 20px 10px ;}
P {magin: 20px 10px 100px;} the top margin is 20px, the left margin is 10px, and the bottom margin is 100px.

Border

Border: border-width | border-style | color

Border-top: border-width | border-style | color
Border_right: border-width | border-style | color
Border-bottom: border-width | border-style | color
Border-left: border-width | border-style | color

Border-width: top | right | bottom | left
Border-color: top | right | bottom | left
Border-style: top | right | bottom | left

Supports the abbreviations of 1-4 parameters

Abbreviation of List
List-style: list-style-type | list-style-position | list-style-image

Abbreviated Background

Background: background-color | background-image | background-repeat | background-attachment | background-position

Abbreviation of color

Color
The hexadecimal color value. If the two values are the same, they can be abbreviated to half. For example:
#000000 can be abbreviated as #000; #336699 can be abbreviated as #369;

Box size

There are usually four writing methods:

• Property: value1; indicates that all edges are value1 values;
• Property: value1 value2; the value of top and bottom is value1, and the value of right and left is value2.
• Property: value1 value2 value3; indicates that the top value is value1, the right and left values are value2, and the bottom value is value3.
• Property: value1 value2 value3 value4; four values in turn represent top, right, bottom, left

Easy to remember is clockwise, top right bottom left. The specific application in margin and padding

Example:

Margin: 1em 0 2em 0.5em;

CSS padding ):

Padding-top: 5px; padding-bottom: 10px; padding-left: 15px; padding-right: 20px;

Can be abbreviated

Padding: 5px 20px 10px 15px; or padding-top: 5px; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; abbreviation: padding: 5px 10px;

CSS margin (CSS margin ):

Margin-top: 5px; margin-bottom: 10px; margin-left: 15px; margin-right: 20px;

Can be abbreviated

Margin: 5px 20px 10px 15px; or margin-top: 5px; margin-bottom: 5px; margin-left: 10px; margin-right: 10px; abbreviated as margin: 5px 10px;