Collection of common CSS abbreviations

Why is CSS abbreviated?

When designing standard web pages, it is essential to write a large number of CSS syntaxes. Generally, we can automatically generate the corresponding CSS through the "CSS style" Panel of the Dreamweaver software.Code.

However, although the CSS code generated by the software is clear and easy to understand, the CSS code reading is lengthy and complex due to the clear interpretation of the style definition of a bar, at the same time, the number of CSS Code bytes is also increasing ...... This is intolerable for those pursuing high efficiency and perfection.

For example, when we define the padding size for an element and use padding, the code generated by the software may be as follows:

. T1 {
Padding-top: 3px;
Padding-Right: 20px;
Padding-bottom: 3px;
Padding-left: 20px;
}

If it is easy to writeCopy codeThe Code is as follows:. T2 {
Padding: 3px 20px 3px 20px;
}

The four sides of padding correspond to top (top), right (right), bottom (bottom), and left (left ). Of course, this example can also be abbreviated:Copy codeThe Code is as follows:. T3 {
Padding: 3px 20px 3px;
}

when left (left) is absent, the default value is right (right). If bottom (bottom) is absent, the default value is top (top, in this example, the simplest is:
. t4 {
padding: 3px 20px;
}

(Of course, if padding is a value, it indicates that the top right bottom left is the same .)<Br/> <style type = "text/CSS"> <! --. T1 {padding-top: 3px; padding-Right: 20px; padding-bottom: 3px; padding-left: 20px ;}. t2 {padding: 3px 20px 3px 20px ;}. t3 {padding: 3px 20px 3px ;}. t4 {padding: 3px 20px ;} --> </style> <p> <SPAN class = "T1"> cnbruce </span> <br/> <SPAN class = "T2"> cnrose </span> <br/> <SPAN class = "T3"> cnjames </span> <br/> <SPAN class = "T4"> www.cnbruce.com </span> <br/>
[Ctrl + A select all Note: If you need to introduce external JS, You need to refresh it to execute]

In the previous example, four lengthy lines of code are condensed into one line of introduction code, which is the advantage of CSS abbreviations.

Of course, many times we will see many similar CSS abbreviations when learning other people's CSS experience. However, if you do not understand the CSS method, you cannot understand it. Therefore, we must understand and master some common CSS abbreviations and syntaxes.

Common CSS abbreviations
1. Background backgrounds
The attributes of the background are as follows:
Background-color: # ffccff;
Background-image: URL (/images/2007-6.jpg );
Background-repeat: No-Repeat;
Background-Attachment: fixed;
Background-position: center bottom;

The CSS code can be abbreviated:

Background: # fcf url (/images/2007-6.jpg) No-repeat fixed center bottom;

Background: background color, background image, background duplication, background attachment, background horizontal position, and background vertical position

The background color "# ffccff" can also be abbreviated as "# FCF", which is a hexadecimal color value. If the values of each two digits (rrggbb) are the same, it can be abbreviated to half (RGB ). At the same time, no double quotation marks are required for the background image.