CSS tutorial 11. CSS attribute abbreviations [translate Htmldog]

Some CSS attributes allow a string of values to replace many attributes. Values are separated by spaces.
Margin, pdding, and border-width can be merged into margin-top-width, margin-right-width, margin-bottom-width, and so on, in the form of property: top right bottom left; it is in a counter-clockwise order.
So the following:

The code is as follows:	Copy code
P { Border-top-width: 1px; Border-right-width: 5px; Border-bottom-width: 10px; Border-left-width: 20px; }

Can be written:

The code is as follows:	Copy code
P { Border-width: 1px 5px 10px 20px; } Border-width, border-color, and border-style can also be merged together. For example: P { Border: 1px red solid; }

(It can also be applied to border-top, border-right, and so on)
If only two values are used (such as margin: 1em 10em;), the first value includes the top and bottom, and the second value includes the left and right.
Font attributes can also be merged.

The code is as follows:	Copy code
P { Font: italic bold 1em/1.5 courier; }

(Above "/1.5" is the value of line-height)
Summarize them and try the following code:

The code is as follows:	Copy code
P { Font: 1em/1.5 "Times New Roman", times, serif; Padding: 3em 1em; Border: 1px black solid; Border-width: 1px 5px 5px 1px; Border-color: red green blue yellow; Margin: 1em 5em; }

We recommend that you use abbreviations to simplify and optimize CSS code!