非常有用的CSS模板

CSS Reset (CSS固定样板)

/*
Copyright (c) 2011, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 2.9.0
*/
/**
 * YUI Reset
 * @module reset
 * @namespace
 * @requires 
 */
html {
    color: #000;
    background: #FFF;
}
body{
    font-size:12px;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, select, p, blockquote, th, td {
    margin: 0;
    padding: 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

fieldset,img {
    border: 0;
}

address, button, caption, cite, code, dfn, em, input, optgroup, option, select, strong, textarea, th, var {
    font: inherit;
}

del,ins {
    text-decoration: none;
}

li {
    list-style: none;
}

caption,th {
    text-align: left;
    font-weight:normal;
}

h1,h2,h3,h4,h5,h6 {
    font-size: 100%;
    font-weight: normal;
}

q:before,q:after {
    content: '';
}

abbr,acronym {
    border: 0;
    font-variant: normal;
}

sup {
    vertical-align: baseline;
}

sub {
    vertical-align: baseline;
}

/*because legend doesn't inherit in IE */
legend {
    color: #000;
}

**********辅助css******

/* border */

.bd{border:1px solid #e8e8e8; }
.bdr {border-right: 1px solid #e8e8e8;}
.bdl {border-left: 1px solid #e8e8e8;}
.bdlr{border-left:1px solid #e8e8e8; border-right:1px solid #e8e8e8;}
.bdt{border-top: 1px solid #e8e8e8;}
.bdb {border-bottom: 1px solid #e8e8e8;}
.bdtb{border-top: 1px solid #e8e8e8;border-bottom: 1px solid #e8e8e8;}

/* text-align */
.ta-r{text-align:right;}
.ta-l{text-align:left;}
.ta-c{text-align:center;}

/*float*/
.fl{float:left}
.fr{float:right}
/* padding */
.p{padding:10px;}
.pt{padding-top:10px;}
.pr{padding-right:10px;}
.pb{padding-bottom:10px;}
.pl{padding-left:10px;}
.ptb{padding:10px 0px;}
.plr{padding:0px 10px;}

/* margin */
.m{margin:10px;}
.mt{margin-top:10px;}
.mr{margin-right:10px;}
.mb{margin-bottom:10px;}
.ml{margin-left:10px;}
.mtb{margin:10px 0px;}
.mlr{margin:0px 10px;}

.hide{display:none;}

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

单行省略号效果

.ellipsis-box {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap !important;
	outline: 0 !important
}

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网页字体)

<code><span style="color:#008000;">/* <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font Name"> */</span>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine"></code>
<code><span style="color:#008000;">/*CSS selector {  font-family: 'Font Name', serif;}*/
</span>font-family: 'Tangerine', serif;</code>
 

Drop Cap (首字下沉)

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

初始化不同长度的input:text和select

	select.smallest{width:126px;}
	select.smaller{width:126px;}
	select.small{width:126px;}
	select.long {width:180px;}
	select.longer {width:276px;/*select 同 input 长度不相同，270+6*/}
	select.longest{width:350px;}

	input.smallest{width:32px; margin-right:20px}
	input.smaller{width:54px;}
	input.small{width:120px;}	
	input.long{width:200px;}
	input.longer{width:270px;}
	input.longest{width:350px;}

布局

.subcolumns { display:table; width:100%; table-layout:fixed; }
.fb {_width: 100%;overflow: hidden;clear: both; }
	.c20l, .c25l, .c33l, .c40l, .c38l, .c50l, .c60l, .c62l, .c66l, .c75l, .c80l { float:left; }
	.c20r, .c25r, .c33r, .c40r, .c38r, .c50r, .c60r, .c66r, .c62r, .c75r, .c80r { float:right; margin-left:-5px; }

	.c20l, .c20r { width:20%; }
	.c40l, .c40r { width:40%; }
	.c60l, .c60r { width:60%; }
	.c80l, .c80r { width:80%; }
	.c25l, .c25r { width:25%; }
	.c33l, .c33r { width:33.333%; }
	.c50l, .c50r { width:50%; }
	.c66l, .c66r { width:66.666%; }
	.c75l, .c75r { width:75%; }
	.c38l, .c38r { width:38.2%; }
	.c62l, .c62r { width:61.8%; }

	/*列间距*/
	.subc  { padding:0 0.5em; }
	.subcl { padding:0 1em 0 0; }
	.subcr { padding:0 0 0 1em; }

/*column-container  
  * @section base layout | Basis Layout
  * @see     http://www.yaml.de/en/documentation/css-components/base-stylesheet.html
  * 
  * |-------------------------------|
  * | #col1   | #col3     | #col2   |
  * | 200 px  | flexible  | 200px   |
  * |-------------------------------|
 */

	.column-container{}
	.column-container .col1 { float:left; width:110px; }
	.column-container .col2 { float:right; width:20%; }
	.column-container .col3 { width:auto; margin:0 0 0 110px; }

form-container

.form-container{}
.form-container .form-container-item{ padding-bottom: 10px; padding-left: 100px; position: relative;min-height:1.5em; }
.form-container .form-container-label{display: block; left: 0;position: absolute; text-align: right; top: 1px;width: 95px; _left:-100px; margin:0}
.form-container .txt-impt, .txt-impt{ color:#D93431; font-weight:bold; padding:0 5px; }
.form-container .colon{ color:#666; font-weight:bold; padding:0 5px; }   /*colon 冒号*/
.form-container textarea{width:500px;height: 67px; padding:2px;}