Brief introduction to simplified abbreviation of CSS Code

Source: Internet
Author: User
Tags border color
Now many people use the CSS code is very redundant, in fact, many can simplify the abbreviation.
This time, let's talk about the simplified abbreviation for CSS code as you know it.

1, all CSS code as long as the use of a style tag can be, there is no need to add one each paragraph, is simply superfluous. For example:
Body{background:url ("") Repeat fixed!important;}

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

You can simplify merging to:

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

Like changing the background of each part of the blog, change the font color of each part of the blog, change 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 bits 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 common commonly used colors such as black, white, red, blue, green, yellow and so on if you can not remember their code, the corresponding English black,white,red,blue,green,yellow and so on to express.

3, the same identity for multi-attribute control when you can put a few attributes in a curly brace, the middle of different attributes separated by semicolons. For example, large backgrounds 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 merging 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, the multi-identity control of the same property can also be merged together, the identities are separated by commas. For example:

. Bodytop{background: #transparent;}
. Bodybg{background: #transparent;}

You can simplify merging to:

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

You can simplify merging to:

. Bodytop,.bodybottom{display:none;}


. Feeds. Text a{color: #000;}
. feeds. function A{color: #000;}
You can simplify merging to:

. feeds. Text a,.feeds. function A{color: #000}

So many examples are just to make it clearer that you have to simplify the abbreviation code according to your own situation.

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}
. Calendar. mid
{background: #transparent}
. Callboard. Up
{background: #transparent}
. Callboard. Down
{background: #transparent}
. Callboard. mid
{background: #transparent}
. Gbook. Up
{background: #transparent}
. Gbook. Down
{background: #transparent}
. Links. More
{background: #transparent}
. Add. ico
{background: #transparent}
. add
{background: #transparent}

In fact, it can be abbreviated as:

. Logo,.banner,.menu,
. bodybg,.bodybottom,.feeds. up,.feeds. down,.feeds. function,.feeds. Page,
. Links. Up,.links. down,.links. Mid,.photo. Mid,.label. Mid,
. Calendar. Mid,.callboard. Up,.callboard. Down,.callboard. Mid,
. Gbook. Up,.gbook. down,.links. More,.add. Ico,.add
{background: #transparent}


6. Background (backgrounds)

The properties of the background are as follows:

Background-color: #f00;
Background-image:url ("");
Background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;

can be abbreviated as a sentence: background: #f00 URL ("") no-repeat fixed 0 0;

The syntax is: Background:color image repeat attachment position;


7. FRAME (Border)

The properties of the border are as follows:

border-width:1px;
Border-style:solid;
Border-color: #000;

can be abbreviated as a sentence: border:1px solid #000;

The syntax is: border:width style color;


9. Font (Fonts)

The properties of the font are as follows:

Font-style:italic;
Font-variant:small-caps;
Font-weight:bold;
Font-size:1em;
line-height:140%;
font-family: "Lucida Grande", Sans-serif;

can be abbreviated as a sentence: Font:italic small-caps bold 1em/140% "Lucida Grande", Sans-serif;

Note that if you abbreviate a font definition, you must define at least two values for font-size and font-family.
10, CSS code does not remember the case, line, blank, as long as the format on the line.

The advantage of CSS abbreviations for us blogging is that it simplifies the code so that it doesn't look so redundant, and the most important thing is to make a website,
The speed of the CSS stylesheet file call is related to the size of its file, so the smaller the file, the faster the call,
In one respect, you can improve the loading speed of web pages, and speed is a critical factor for a website.

So the CSS style sheet file should be abbreviated as much as possible to simplify the code, like some extra space,
And for example, I in the overall template six "lock heart for You" provided in the code to add comments, etc. should be removed as far as possible.


The following is a list of the properties of the CSS abbreviation and the general nature of what they represent:

Background (background): Background attachment, background color, background image, background position, background repetition
Border (border): border color, border style, border width
Border-bottom (bottom border): Bottom border color, bottom border style, bottom border width
Border-left (left border): Left border color, left border style, left border width
Border-right (right border): Right border color, right border style, right border width
Border-top (top border): Top border color, top border style, top border width
Cue (sound hint): Front prompt, after prompt
Font (font): typeface, font size, font style, font weight, font variation, line height, font sizing, font stretch
List-style (List style): List style image, List style position, List style type
Margin (blank): Top blank, right blank, bottom blank, left blank
Outline (outline): outline color, outline style, outline width
Padding (GAP): top clearance, right clearance, bottom clearance, left gap
Pause (pause): Pause after, pause before
Attachment is a very useful CSS code Editor, you can display the effect in time.
()
  • 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.