Another useful common CSS abbreviation Grammar collection _ Experience Exchange

Why do you want to make CSS abbreviations?

In the design of Web standard Web pages, it is necessary to write a large number of CSS syntax, in general we can use the Dreamweaver software's "CSS style" panel to automatically generate the corresponding CSS code.

However, although the software generated CSS code reading is clear and understandable, but because the CSS on the definition of the lines of the clear explanation, it makes the CSS code reading is lengthy and complex, and the CSS code of the number of bytes is also increasing ... This is hard to tolerate for those who pursue high efficiency and perfect sex.

For example, when we define a fill size for an element, we use it to padding, and when there are different requirements for top, right, bottom, and left padding, the code generated by the software might be:


. t1 {
padding-top:3px;
padding-right:20px;
padding-bottom:3px;
padding-left:20px;
}



If it's simple to write,
Copy CodeThe code is as follows:
. T2 {
padding:3px 20px 3px 20px;
}

The four-sided values of the padding correspond to top (top), right (starboard), bottom (lower), left. Of course, this example can be simply written as:
Copy CodeThe code is as follows:
. t3 {
padding:3px 20px 3px;
}


When left is not present, the default value is the value of right, and when bottom (bottom) is not there, the default value is top (top), so the simplest of this example is:
. t4{
PADDING:3PX 20px;
}

(Of course, if padding is a value, it means that the upper-right bottom-left is the same.) ）
<textarea id="runcode53075"><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; } span {border:1px solid #CCCCCC; --</style> <span class= "T1" >cnbruce</span> <span class= "T2" >cnrose</span> < span class= "T3" >cnjames</span> <span class= "T4" >www.cnbruce.com</span></textarea>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
The lengthy 4 lines of code in the example above are condensed into a single line of introductory code-which is the advantage of CSS abbreviations.

Of course, many times when we learn other people's CSS experience, we also see a lot of similar CSS abbreviations. But if you do not understand, it is impossible to understand that learning will not be the CSS method experience. Therefore, we must understand and master some of the commonly used CSS abbreviation syntax.

Common CSS abbreviation syntax
1, background backgrounds
The properties 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 as:


Background: #FCF URL (/images/2007-6.jpg) no-repeat fixed center bottom;



Background: Background color, background image, background repetition, background attachment, background horizontal position, background vertical position

The background color "#FFCCFF" can also be abbreviated as "#FCF", which is for 16 binary color values, if every two bits (RRGGBB) of the same value, you can abbreviate half (RGB). Also, the background image does not need double quotes.

