致爱丽丝钢琴简谱双手:非常有用的CSS模板

非常有用的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-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  }/* 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 With Google Font API(Google网页字体)

/*  */

要使用谷歌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;}