CSS 主样式表

/***** Global Settings *****/
 
html, body {
border:0;
margin:0;
padding:0;
}
 
body {
font:100%/1.25 Arial, Helvetica, sans-serif;
}
 
/***** Headings *****/
 
h1, h2, h3, h4, h5, h6 {
margin:0;
padding:0;
font-weight:normal;
}
 
h1 {
padding:30px 0 25px 0;
letter-spacing:-1px;
font-size:2em;
}
 
h2 {
padding:20px 0;
letter-spacing:-1px;
font-size:1.5em;
}
 
h3 {
font-size:1em;
font-weight:bold;
}
 
/***** Common Formatting *****/
 
p, ul, ol {
margin:0;
padding:0 0 1.25em 0;
}
 
ul, ol {
padding:0 0 1.25em 2.5em;
}
 
blockquote {
margin:1.25em;
padding:1.25em 1.25em 0 1.25em;
}
 
small {
font-size:0.85em;
}
 
img {
border:0;
}
 
sup {
position:relative;
bottom:0.3em;
vertical-align:baseline;
}
 
sub {
position:relative;
bottom:-0.2em;
vertical-align:baseline;
}
 
acronym, abbr {
cursor:help;
letter-spacing:1px;
border-bottom:1px dashed;
}
 
/***** Links *****/
 
a,
a:link,
a:visited,
a:hover {
text-decoration:underline;
}
 
/***** Forms *****/
 
form {
margin:0;
padding:0;
display:inline;
}
 
input, select, textarea {
font:1em Arial, Helvetica, sans-serif;
}
 
textarea {
width:100%;
line-height:1.25;
}
 
label {
cursor:pointer;
}
 
/***** Tables *****/
 
table {
border:0;
margin:0 0 1.25em 0;
padding:0;
}
 
table tr td {
padding:2px;
}
 
/***** Wrapper *****/
 
#wrap {
width:960px;
margin:0 auto;
}
 
/***** Global Classes *****/
 
.clear         { clear:both; }
.float-left    { float:left; }
.float-right   { float:right; }
 
.text-left     { text-align:left; }
.text-right    { text-align:right; }
.text-center   { text-align:center; }
.text-justify  { text-align:justify; }
 
.bold          { font-weight:bold; }
.italic        { font-style:italic; }
.underline     { border-bottom:1px solid; }
.highlight     { background:#ffc; }
 
.wrap          { width:960px;margin:0 auto; }
 
.img-left      { float:left;margin:4px 10px 4px 0; }
.img-right     { float:right;margin:4px 0 4px 10px; }
 
.nopadding     { padding:0; }
.noindent      { margin-left:0;padding-left:0; }
.nobullet      { list-style:none;list-style-image:none; }

CSS CSS Image Preloader

#preloadedImages {
       width: 0px;
       height: 0px;
       display: inline;
       background-image: url(path/to/image1.png);
       background-image: url(path/to/image2.png);
       background-image: url(path/to/image3.png);
       background-image: url(path/to/image4.png);
       background-image: url();
}

CSS IE6的最小/最大宽度修复

#content {
	height: 75px;
	background-color: #000;
	color: #fff;
	width: expression(document.body.clientWidth < 742? "740px" : document.body.clientWidth > 1202? "1200px" : "auto");
	min-width: 740px;
	max-width: 1200px;
}

CSS 方便的CSS调试片段

* { outline: 2px dotted red }
* * { outline: 2px dotted green }
* * * { outline: 2px dotted orange }
* * * * { outline: 2px dotted blue }
* * * * * { outline: 1px solid red }
* * * * * * { outline: 1px solid green }
* * * * * * * { outline: 1px solid orange }
* * * * * * * * { outline: 1px solid blue }

CSS Big Curly Blockquotes

blockquote {
	position: relative;
	text-indent: 2em;
}

.bqstart,
.bqend { font-size: 300%; }

/* apply IE specific rules first */
.bqstart {
	text-indent: 0;
	margin: -0.6em 0 -2em 0;
	float: left;
}

blockquote > .bqstart {
	/* add extra non-ie rules */
	position: absolute;
	top: -0.2em;
	left: 0;
	/* remove IE specific rules */
	float: none;
	margin: 0;
}

.bqend {
	position: absolute;
	margin-top: -0.6em;
	right: 0;
	text-indent: 0;
}

blockquote > .bqend {
	margin-top: -0.2em;
}

CSS 死亡中心DIV

body 
	{
	margin: 0px
	}

#horizon        
	{
	color: white;
	background-color: #0ff;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 0px;
	width: 100%;
	height: 1px;
	overflow: visible;
	visibility: visible;
	display: block
	}

#content    
	{
	position: absolute;
	left: 50%;
	width: 250px; /* Overall width of div */
	height: 70px; /* Overall height of div */
	top: -35px; /* half of the overall height */
        margin-left: -125px; /* half of the overall width */
        visibility: visible
	}

CSS 清除浮动没有结构标记

.clearfix
{
	display: inline-table;
/* Hides from IE-mac \*/
	height: 1%;
	display: block;
/* End hide from IE-mac */
}

html>body .clearfix
{
	height: auto;
}

.clearfix:after
{
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}