CSS abbreviations: simple abbreviations for CSS code simplification

Source: Internet
Author: User

Now many people use CSS code is very redundant, in fact, many can simplify the abbreviation.
This time, based on what you know, talk about simplifying abbreviations for CSS code.

1, all CSS code just use a style tag on it, no need to add one to each paragraph, is simply superfluous. For example:
Body{background:url ("") Repeat fixed!important;}

. Bodybg{background:url ("") no repeat no scroll!important;

You can simplify the merge to:

Body{background:url ("") Repeat fixed!important;}
. Bodybg{background:url ("") no repeat no scroll!important;

Like changing the background of various blogs, changing the font color of each part of the blog, changing the template width, mouse, scroll bar and other CSS code can be merged into a style tag.
2, Color: 16 color value, if each two digits of the same value, you can abbreviate half, for example:

Black #000000 can be abbreviated as #000;
White #ffffff can be abbreviated as #fff;
Red #ff0000 can be abbreviated as #f00;
Blue #0000ff can be abbreviated as #00f;
#336699可以缩写为 #369.

Some commonly used colors such as black, white, red, blue, green, yellow, etc. if you can't remember their code, you can use the corresponding English black,white,red,blue,green,yellow, etc. to express.
3, the same identity for multiple attribute control when you can put several attributes in a brace, the different attributes in the middle separated by semicolons. such as large background and scroll bars:

Body {Background:url ("") Repeat fixed!important;}
Body {scrollbar-face-color: #EDF6F5;
Scrollbar-highlight-color: #fff;
Scrollbar-shadow-color: #fff;
Scrollbar-3dlight-color: #000;
Scrollbar-arrow-color: #000;
Scrollbar-track-color: #EDF6F5;
Scrollbar-darkshadow-color: #000;}

You can simplify the merge to:

Body {Background:url ("") repeat fixed!important;
Scrollbar-face-color: #EDF6F5;
Scrollbar-highlight-color: #fff;
Scrollbar-shadow-color: #fff;
Scrollbar-3dlight-color: #000;
Scrollbar-arrow-color: #000;
Scrollbar-track-color: #EDF6F5;
Scrollbar-darkshadow-color: #000;}
4, for multiple identities of the same property control can also be merged together, each logo separated by commas. For example:
. Bodytop{background: #transparent;}
. Bodybg{background: #transparent;}

You can simplify the merge to:

. Bodytop,.bodybg{background: #transparent;}
. Bodytop{display:none;}
. Bodybottom{display:none;}

You can simplify the merge to:

. Bodytop,.bodybottom{display:none;}
. Feeds. Text a{color: #000;}
. feeds. function A{color: #000;}
You can simplify the merge to:. Feeds. Text a,.feeds. function A{color: #000} With so many examples just to make it clearer, everyone has to simplify the abbreviated code according to their own circumstances. Like now many people blog on the home page transparent template code:. Logo{background: #transparent}.banner{background: #transparent}.menu{background:# Transparent}.bodybg{background: #transparent}.bodybottom{background: #transparent}.feeds. up{background:# Transparent}.feeds. Down{background: #transparent}.feeds. Function{background: #transparent}.feeds. Page{background : #transparent}.links. Up{background: #transparent}.links down{background: #transparent}.links. mid{background:# Transparent}.photo. Mid{background: #transparent}.label. Mid{background: #transparent}. This article links http://www.cxybl.com/html/wyzz/CSS/20130904/40043.html

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.