Why do you want to make CSS abbreviations?
When making Web Standard Web page design, it is necessary to write a lot of CSS syntax, in general, we can through the Dreamweaver software "CSS style" panel automatically generate the corresponding CSS code.
However, although the software generated CSS code reading clearly understandable, but it is because of CSS to the style definition of the clear explanation, also makes the CSS code reading is long and complex, while the number of bytes in the CSS code is also increasing ... This is hard to tolerate for those who pursue high efficiency and perfection.
For example, when we define the padding size for an element, we use it to padding, and when there are different requirements for the top, right, bottom, and left padding, the code generated by the software may be this way:
. t1 {
padding-top:3px;
padding-right:20px;
padding-bottom:3px;
padding-left:20px;
}
If it's easy to write,
Copy Code code as follows:
. T2 {
padding:3px 20px 3px 20px;
}
The four-padding values in turn correspond to top (upper), right (starboard), bottom (bottom), left. Of course, this example can also be written as:
Copy Code code as follows:
. t3 {
padding:3px 20px 3px;
}
When left is not present, the default value is right, when bottom (bottom) is not, the default value is top (upper), so the simplest of this example is:
. t4{
PADDING:3PX 20px;
}
(Of course, if padding is a value, it means that the upper right and lower left are the same.) ）
<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>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
The lengthy 4 lines of code in the previous example condense into a line of introductory code--this is the advantage of CSS abbreviations.
Of course, many times when we are learning from other people's CSS experience, we will see many similar CSS abbreviations. But if you do not understand, it is simply not clear to learn these CSS methods experience. Therefore, we must understand and grasp some 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 Repeat, background attachment, background horizontal position, background vertical position
The background color "#FFCCFF" can also be abbreviated to "#FCF", which is for 16 color values, if the value of each two-bit (RRGGBB) is the same, you can abbreviate half (RGB). Also, the background image does not require double quotes.
