CSS使用技巧收集，包含CSS2/CSS3

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

<div id="container">我是一行字</div>

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

<div id="f">
　<div id="s">Some Things!</div>
</div>

div#f{ position:relative; height:500px; }

div#s { position: absolute; top: 50%; height: 250px; margin-top: -125px; }

img {max-width: 100%} 
/* IE 6 hack */
<!--[if IE 6]>
img {width: 100%} 
<![endif]-->

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

body {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 13px;
   font-weight: normal;
   font-variant: small-caps;
   font-style: italic;
   line-height: 150%;
}
/* 可以缩写成以下这种方式 */
body {
   font: font-style font-variant font-weight font-size/line-height font-family;
}

<div>content</div>

  class-2 {color: blue}  
  class-3 {color: green}  
  class-1 {color: red}

.element {border-radius: 5px}

/* Safari, Chrome */
.element {
   border-radius: 5px
   -webkit-border-radius: 5px
   -moz-border-radius: 5px
}
/* Firefox */
.element {
   border-top-left-radius: 5px
   -webkit-border-top-left-radius: 5px
   -moz-border-radius-top-left
}

 $(".element").corner("5px");

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

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie-stylesheet.css" />
< ![endif]-->
<!--[if IE 6]> - targets IE6 only -->
<!--[if gt IE 6]> - targets IE7 and above -->
<!--[if lt IE 6]> - targets IE5.5 and below -->
<!--[if gte IE 6]> - targets IE6 and above -->
<!--[if lte IE 6]> - targets IE6 and below -->

/* the following rules apply only to IE6 */
* html{
}
* html body{
}
* html .foo{
}

/* the following rules apply only to IE7 */
*+html .foo{
}

/* 方法一 */
.element {
　min-height: 500px;
　height: auto !important;
　height: 500px;
}

/* 方法二 */
.element {
　min-height: 500px
　_height: 500px /* _ 只有IE6才能读取 */
}

/* 假设浏览器的默认的大小是 16px ， 首先将其设置为10px (font-size:10/16) */
body {font-size:10/16;} 
/* 然后就可以用em做统一字体单位了 2.4em = 24px */
h1 {font-size: 2.4 em}

  html, body {height: 100%}
  #content {min-height: 100%}

p:first-letter {
  display: block;
  float: left;
  margin: 5px 5px 0 0;
  color: red
  font-size: 1.4em;
  background: #ddd;
  font-family: Helvetica;
}

a {outline: none} or a {outline: 0}

p {text-transform: uppercase} /* 全部大写 */
p {text-transform: lowercase} /* 全部小写 */
p {text-transform: capitalize} /* 首字母大写 */

p {font-variant: small-caps}

  a image {border: none} or a image {border: 0}

  ul {list-style: none}
  ul li {
    background-image: url("dot.png");
    background-repeat: none;
    background-position: 0 0.5em;
  }

.element {
  filter:alpha(opacity=50); /* for ie */
  -moz-opacity:0.5; /* for ff */
  -khtml-opacity: 0.5; /* for webkit as chrome */
  opacity: 0.5; /* for opera */
}

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

h1 { white-space:nowrap; }

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

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

/* IE 显示蓝色标题，其他浏览器显示红色标题 */
h1 {
  color: red !important;
  color: blue;
}

  <a href="#">Link<span>Tooltips</span></a>

  a.tooltip {position: relative}
  a.tooltip span {display:none; padding:5px; width:200px;}
  a:hover {background:#fff;} /*background-color is a must for IE6*/
  a.tooltip:hover span{display:inline; position:absolute;}

body{ margin:0;padding:100px 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;}