A brief discussion on the simplified abbreviation of css code

The CSS codes used by many people nowadays are very redundant. In fact, many of them can be simplified and abbreviated.
This time I will talk to you about the simplified abbreviation of CSS code based on what I know.

1. All CSS codes only need to use one style tag. There is no need to add one to every paragraph. It is simply redundant. For example:
body{background:url("") repeat fixed!important;}

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

can be simplified and merged into:

body{background :url("") repeat fixed!important;}
.bodybg{background:url("") no repeat no scroll!important;}

Like changing the background of each part of the blog, changing the font color of each part of the blog, and changing the template width , mouse, scroll bar and other CSS codes can be merged into a style tag.


2. Color: Hexadecimal color value. If the values ​​of each two digits are the same, they can be abbreviated by half, for example:

Black #000000 can be abbreviated to #000;
White #ffffff can be abbreviated to #fff;
Red #ff0000 can be abbreviated to #f00;
blue #0000ff can be abbreviated to #00f;
#336699 can be abbreviated to #369.

Some common colors such as black, white, red, blue, green, yellow, etc. If you can’t remember the codes, you can use the corresponding English black, white, red, blue, green, yellow, etc. to represent them.

3. When controlling multiple attributes of the same logo, you can put several attributes in a brace, and separate different attributes with semicolons. For example, large background and scroll bar:

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;}

Yes Simplified and merged into:

body {background:url("") repeat fixed!important;
SCROLLBAR-FACE-COLOR: #EDF6F5;
SCROLLBAR-HIGHLIGHT-COLOR: #fff;
SCROLLBAR-SHADOW-COLOR: #fff;
SCROLLBAR-3DLIGHT-COLOR: #000; The same attribute controls can also be merged together, and each identifier is separated by commas. For example:

.bodytop{background:#transparent;}
.bodybg{background:#transparent;}

can be simplified and merged into:

.bodytop,.bodybg{background:#transparent;}
.bodytop{display: none;}
.bodyBottom{display:none;}

can be simplified and merged into:

.bodytop,.bodyBottom{display:none;}


.feeds .text a{color:#000;}
.feeds .function a{color:#000;}
can be simplified and merged into:

.feeds .text a,.feeds .function a{color:#000}

I give so many examples just to make it clearer. Specifically, everyone has to simplify the abbreviation code according to their own situation.

Like the code for the transparent template on the homepage that many people are posting on their blogs now:

.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 to:

.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. Backgrounds

The attributes 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 to one sentence: background :#f00 url("") no-repeat fixed 0 0;

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


7. Border (border)

The properties of the border are as follows:

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

can be abbreviated to one sentence: border:1px solid #000;

The syntax is: border:width style color;


9. Fonts (fonts )

The attributes 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 to one sentence: font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

Note that if you abbreviate the font definition, at least Define two values: font-size and font-family.
10. The CSS code does not take into account case, line breaks, or spaces, as long as the format is correct.

The advantage of CSS abbreviation for our blog is that it can simplify the code and make it less redundant, but it is very important for making a website.
The speed of calling the CSS style sheet file is related to the size of the file, so the smaller the file The faster the call speed,
can improve the loading speed of website pages in a certain aspect, and speed is a crucial factor for a website.

So when making CSS style sheet files, you should try to abbreviate and simplify the code. Some extra spaces,
and for example, the comments in the code I provided in the overall template 6 "Lock Heart for You" should be deleted as much as possible.


Here is a list of CSS abbreviated properties and the general properties they represent:

Background: background attachment, background color, background image, background position, background repeat
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 prompt): front prompt , post-tip
font (font): font, font size, font style, font weight, font variant, line height, font size adjustment, font stretching
list-style (list style): list style image, list style position, List style type
margin (blank): top margin, right margin, bottom margin, left margin
outline (outline): outline color, outline style, outline width
padding (gap): top margin, right margin, bottom Gap, left gap
pause (pause): back pause, front pause
The attachment is a very easy-to-use CSS code editor that can display effects in time.
()