非常有用的CSS模板

下面是CSS模板清单，将帮助您减少手酸，烦恼，节省您在写CSS的时间了，我希望你会发现它很有用。无论你是一个有经验的Web开发者，或刚开始使用CSS的初学者，都值得一试。

CSS Reset (CSS固定样板)

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;

Browser-Specific CSS Hacks (浏览器特定CSSHacks)

/* IE6 and below */

* html #uno  { color: red }



/* IE7 */

*:first-child+html #dos { color: red } 



/* IE7, FF, Saf, Opera  */

html>body #tres { color: red }



/* IE8, FF, Saf, Opera (Everything but IE 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- 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  }



/* IE7 */

*+html #dieciocho {  color: red }



/* Firefox only. 1+ */

#veinticuatro,  x:-moz-any-link  { color: red }



/* Firefox 3.0+ */

#veinticinco,  x:-moz-any-link, x:default  { color: red  }



/* FF 3.5+ */

body:not(:-moz-handler-blocked) #cuarenta { color: red; }



/* IE6 */

#once { _color: blue }



/* IE6, IE7 */

#doce { *color: blue; /* or #color: blue */ }



/* Everything but IE6 */

#diecisiete { color/**/: blue }



/* IE6, IE7, IE8 */

#diecinueve { color: blue\9; }



/* IE7, IE8 */

#veinte { color/*\**/: blue\9; }



/* IE6, IE7 -- acts as an !important */

#veintesiete { color: blue !ie; } /* string after ! can be anything */



/* IE8, IE9 */

#anotherone  {color: blue\0/;} /* must go at the END of all rules */

A New Micro Clearfix Hack (清除浮动的CSS)

* For modern browsers */

.cf:before,

.cf:after {

    content:"";

    display:table;

}



.cf:after {

    clear:both;

}



/* For IE 6/7 (trigger hasLayout) */

.cf {

    zoom:1;

}

Font Sizing (字体设置)

html { font-size: 62.5%; }

body { font-size: 14px; font-size: 1.4rem; } /* =14px */

h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */

The New @Font-Face Syntax (自设字体样式)

@font-face {

    font-family: 'MyFontFamily';

    src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),

         url('myfont-webfont.woff') format('woff'),

         url('myfont-webfont.ttf')  format('truetype'),

         url('myfont-webfont.svg#svgFontName') format('svg');

}

Target IE set (针对IE的设置)

body {

color: red; /* all browsers, of course */

color : green\9; /* IE8 and below */

*color : yellow; /* IE7 and below */

_color : orange; /* IE6 */

}

Cross-Browser Min Height (跨浏览器的最小高度)

#div {

   min-height: 500px;

   height:auto !important;

   height: 500px;

}

Font Shorthand (字体设置速写)

/*font: font-style font-variant font-weight font-size/line-height font-family;*/

font: italic small-caps bold 15px/30px Helvetica, sans-serif;

IE6/7 Double Margin/Padding Bug (IE6/7双重边距错误)

ul li {

  float: left;

  margin-left: 5px;

  *display: inline; /*IE7 and below*/

  _display: inline; /*IE6 and below*/

}

/* this example fixes double left margin bug 左边距Bug*/

Web Fonts WithGoogleFont API(Google网页字体)

/* <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font Name"> */

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">

要使用谷歌API的字体，首先引用样式表在之间

/*CSS selector {

  font-family: 'Font Name', serif;

}*/

font-family: 'Tangerine', serif;

Drop Cap (首字下沉)

p:first-letter {
    display:block;
    margin:5px 0 0 5px;
    float:left;
    color:#FF3366;
    font-size:60px;
    font-family:Georgia;
}