Recently, I began to upgrade blog.
, in the process of modify the template needs to be rewritten a CSS stylesheet. Just see instantshift.com have a CSS summary of commonly used skills in the article, I will sort it out, for your reference, also hope that useful to everyone.
in the future, this article will continue to update.

1. The text of the horizontal center
code is as follows:


text - align: center;

2. The level of the container center
code is as follows:


div # container {
width: 760 px;
margin: 0 auto;
}

3. The characters of vertical center
code is as follows:


<Div id="container" >1234567890 </div>

then CSS to write like this:

  code is as follows:  


div # container {height: 35 px; The line - height: 35 px; }

if there are n lines, then the line height is set to one container height of n points.

4. Container of vertical center
code is as follows:


<Div id="big" >
<Div id="small" >
</div>
</div>

first of all, the big container for relative positioning.

  code is as follows:  


div # big {
position: relative;
height: 480 px;
}

then, small containers may be defined as absolute, then put it in the upper left corner along the y axis down 50%, the final margin - top it up itself high level of 50%.

  code is as follows:  


div # small {
position: absolute;
top: 50%;
height: 240 px;
margin - top: - 120 px;
}

use the same way of thinking, also can make level in the results.

5. Adaptive image width
code is as follows:


img {Max - width: 100%}

but IE6 does not support the Max - width, so meet with IE6, use conditional comments, IE the statement to:

  code is as follows:  


img {width: 100%}

6. 3 d button
code is as follows:


div # button {
background: # 888;
border: 1 px solid;
border - color: # 999 # 777 # 777 # 777;
}

7. The font properties shortcut notation
code is as follows:


body {
the font, the font style the font - variant font weight the font - size line - height the font-family;
}

so,

  code is as follows:  


body {
the font-family: Arial, Helvetica, sans-serif;
the font - size: 13 px;
the font - weight: normal;
the font - variant: small - caps;
the font - style: italic;
the line - height: 150%;
}

can be written as:

  code is as follows:  


body {
the font: italic small caps normal 13 px/150% Arial, Helvetica, sans-serif;
}

8. The state of the link set order
code is as follows:


a: the link
a: visited
a: hover
a: active

9. Internet explorer conditional comments
code is as follows:


<! - [if] IE >
<Link rel="stylesheet" type="text/CSS" href="http://www.script-home.com//web/ie-stylesheet.css"/>
<! [endif] -- >

you can also distinguish between different kinds of Internet explorer version:

  code is as follows:  


<! -- [if Internet explorer 6] >- the targets IE6>

  code is as follows:  


/* to the following rules apply>

  code is as follows:  


/* to the following rules apply>

  code is as follows:  


element (the
background: red;/* modern browsers */background:
* green; IE 7 and below *//*
_background: blue;/* IE6 exclusively */
}

12. Priority of CSS
code is as follows:


<Div id="id" class="class" style="color: black;" ></div>

the inline style is top priority, and then the other set of priority, from low to high in turn for:

  code is as follows:  


div <.class <Div. Class <# id <Div # id <# id. Class <Div # id. Class

13. 6 min - height

code is as follows:


element (the
min - height: 500 px;
height: auto!!! Important;
height: 500 px;
}

there are three CSS statement, the first line is set up for other browsers minimum height, and the third sentence is for IE setting minimum height, the second sentence is let other browsers to cover the third set.
method 2:

  code is as follows:  


element (the
min - height: 500 px
_height: 500 px
}

_height only IE6 can read.

14. The font - benchmark size
code is as follows:


body {the font - size: 62.5%; }

behind unity in em as font units and 2.4 em said 24 px.

  code is as follows:  


h1 {the font - size: 2.4 em}

15. The Text - the transform and the font the Variant
code is as follows:


p {Text - transform: uppercase}
p {Text - transform: lowercase}
p {Text - transform: capitalize}

the font the Variant is used for font into small capital letters (i.e., with the same height as lowercase capital letters).

  code is as follows:  


p {the font - variant: small - caps}

16. CSS reset
code is as follows:


ul {list - style: none}
ul li {
background - image: url (" the path - to - your - image ");
background - repeat: none;
background - position: 0.5 em 0;
}

18. The transparent
code is as follows:


element (the
filter: alpha (opacity=50);
- moz - opacity: 0.5;
- KHTML, opacity: 0.5;
opacity: 0.5;
}

in the four lines of CSS statement, the first line is dedicated, IE the second line for Firefox, the third row for webkit browser core, the fourth line is used in the Opera. 19.

CSS triangle code is as follows:


triangle {
border - color: transparent transparent green, transparent;
border - style: solid;
border - width: 0 px, 300 px, 300 px, 300 px;
height: 0 px;
width: 0 px;
}

20) banned word wrap
code is as follows:


h1 {white - space: nowrap; }

21. Replace with image text
code is as follows:


h1 {
text text-indent: - 9999 px;
background: url (" h1 - image. JPG ") no - repeat;
width: 200 px;
height: 50 px;
}

22. The focused form element
code is as follows:


input: focus {border: 2 px solid green; }

23.! Important rule
code is as follows:


h1 {
color: red!!! Important;
color: blue;
}

the result is this section of the statement above, other browsers display red title, only show the blue title IE. 24.

CSS tooltip
code is as follows:


<A class="tooltip" href="http://www.script-home.com//web/#" >Link text <Span> Prompt words </span> </a>

CSS to write like this:

  code is as follows:  


a.t ooltip {position: relative}
a.t ooltip span {display: none; Padding: 5 px; Width: 200 px; }
a: hover {background: # FFF; }/* background - color is a must for IE6 */
a.t ooltip: hover span {display: inline; Position: absolute; }

25. The fixed position of header
code is as follows:


body {margin: 0; Padding: 100 px 0 0 0; }
div # header {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: <Length>;
}
@ media screen {
body> Div # header {position: fixed; }
}
* HTML body {overflow: hidden; }
* HTML div # content {height: 100%; Overflow: auto; }

6 of another kind of writing (used in a fixed position the footer) :

  code is as follows:  


* HTML # footer {
position: absolute;
top: expression ((0 - (footer. OffsetHeight) + (document. The documentElement. ClientHeight? Document. The documentElement. ClientHeight: document. The body. The clientHeight) + (ignoreMe=document. The documentElement. ScrollTop? Document. The documentElement. The scrollTop: document. The body. The scrollTop)) + 'p');
}

26 set in IE6 PNG image transparent effect
code is as follows:


the classname {
background: url (image. PNG);
_background: none;
_filter: progid: DXImageTransform. Microsoft. AlphaImageLoader,
(SRC='http://www.script-home.com//web/image.png', sizingMethod='crop');
}

27 kinds of browser dedicated statement
code is as follows:


/* 6 and below */
* HTML # uno {color: red}
//
* * 7 * : DOS first child + HTML # {color: red}
/* IE7, FF, Saf, Opera */
html> Body # tres {color: red}
/* IE8, FF, Saf, Opera (Everything but the Internet explorer 6, 7) */
html>/**/body #cuatro { color: red }
/* Opera 9.27 and below, safari 2 */
  html:first-child #cinco { color: red }
/* Safari 2-3 */
  html[xmlns*=""] body:last-child #seis { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
  body:nth-of-type(1) #siete { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
  body:first-of-type #ocho { color: red }
/* saf3+, chrome1+ */
  @media screen and (-webkit-min-device-pixel-ratio:0) {
    #diez { color: red }
  }
/* iPhone/mobile webkit */
  @media screen and (max-device-width: 480px) {
    #veintiseis { color: red }
  }
/* Safari 2 - 3.1 */
  html[xmlns*=""]:root #trece { color: red }
/* Safari 2 - 3.1, Opera 9.25 */
  *|html[xmlns*=""] #catorce { color: red }
/* Everything but IE6-8 */
  :root *> # quince {color: red}
//
* 7 * * + HTML # dieciocho {color: red}
/* Firefox>

  code is as follows:  


<Figure class='logo' >
<Span> </span>
<Img class="photo/>
</figure>

CSS code is as follows:

  code is as follows:  


logo {
display: block;
text - align: center;
display: block;
text - align: center;
vertical - align: middle;
border: 4 px solid # DDDDDD;
the padding: 4 px;
height: 74 px;
width: 74 px; {}
logo *
display: inline - block;
height: 100%;
vertical - align: middle; }
. Logo. Photo {
height: auto;
width: auto;
Max - width: 100%;
- height: Max 100%; }

29 CSS shadow
code is as follows:


shadow {
- moz - box - shadow: 5 px 5 px # 5 px CCC;
- webkit - box - shadow: 5 px 5 px # 5 px CCC;
the box - shadow: 5 px 5 px # 5 px CCC;
}

the inner shadow:

  code is as follows:  


shadow {
- moz - box - shadow: an inset 0 0 10 px # 000000;
- webkit - box - shadow: an inset 0 0 10 px # 000000;
the box - shadow: an inset 0 0 10 px # 000000;
}

30. Cancel the IE the text frame's scroll bars
code is as follows:


textarea {overflow: auto; }

31. Image preload


This concludes the body part