CSS Optimization 2-(Common CSS abbreviation syntax summary)_Experience exchange

WBOY
Release: 2016-05-16 12:07:50
Original
1257 people have browsed it

Using abbreviations can help reduce the size of your CSS files and make them easier to read. The main rules for CSS abbreviation are as follows:

Color
Hexadecimal color value, if the values of each two digits are the same, can be abbreviated in half, for example:
#000000 can be abbreviated to #000;# 336699 can be abbreviated as #369;

Box size
There are usually four writing methods:

property:value1; means that all edges are a value value1;
property: value1 value2; means the value of top and bottom is value1, the value of right and left is value2
property:value1 value2 value3; means the value of top is value1, the value of right and left is value2, and the value of bottom is value3
property:value1 value2 value3 value4; The four values represent top, right, bottom, left in turn
The convenient way to remember is clockwise, top, right, bottom, left. Examples of specific applications in margin and padding are as follows:
margin:1em 0 2em 0.5em;

Border (border)
The properties of the border are as follows:

border-width:1px ;
border-style:solid;
border-color:#000;
It can be abbreviated to one sentence: border:1px solid #000;

The syntax is border:width style color;
Backgrounds
The properties of the background are as follows:

background-color:#f00;
background-image:url(background.gif);
background-repeat :no-repeat;
background-attachment:fixed;
background-position:0 0;
Can be abbreviated to one sentence: background:#f00 url(background.gif) no-repeat fixed 0 0;
The syntax is background:color image repeat attachment position;

You can omit one or more attribute values. If omitted, the attribute value will use the browser default value. The default value is:
color: transparent
image: none
repeat: repeat
attachment: scroll
position: 0% 0%
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, you must define at least two values: font-size and font-family.

Lists
To cancel the default dots and serial numbers, you can write list-style:none;,

The attributes of list are as follows:

list-style -type:square;
list-style-position:inside;
list-style-image:url(image.gif);
It can be abbreviated to one sentence: list-style:square inside url(image. gif);

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!