题目：高效写CSS

?

先来看一下以下几个CSS代码片段

?

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, font, 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 { 
     margin: 0; 
     padding: 0; 
     border: 0; 
     outline: 0; 
     font-size: 100%; 
     vertical-align: baseline; 
     background: transparent; 
 } 
  
 body { 
     line-height: 1; 
 } 
  
 ol, ul { 
     list-style: none; 
 } 
  
 blockquote, q { 
     quotes: none; 
 } 
  
 blockquote:before, blockquote:after, 
 q:before, q:after { 
     content: ''; 
     content: none; 
 } 
  
 /* remember to define focus styles! */ 
 :focus { 
     outline: 0; 
 } 
  
 /* remember to highlight inserts somehow! */ 
 ins { 
     text-decoration: none; 
 } 
  
 del { 
     text-decoration: line-through; 
 } 
  
 /* tables still need 'cellspacing="0"' in the markup */ 
 table { 
     border-collapse: collapse; 
     border-spacing: 0; 
 } 

??

根据文件格式显示不同的链接样式

/* external links */ 
 a[href^="http://"]{ 
     padding-right: 20px; 
     background: url(external.gif) no-repeat center right; 
 } 
  
 /* emails */ 
 a[href^="mailto:"]{ 
     padding-right: 20px; 
     background: url(email.png) no-repeat center right; 
 } 
  
 /* pdfs */ 
 a[href$=".pdf"]{ 
     padding-right: 20px; 
     background: url(pdf.png) no-repeat center right; 
 } 

?

在IE浏览器删除textarea的滚动条

textarea{ 
     overflow:auto; 
 } 

?

浏览器特定的 hacks

/* IE 6 */ 
 * html .yourclass { } 
  
 /* IE 7 */ 
 *+html .yourclass{ } 
  
 /* IE 7 and modern browsers */ 
 html>body .yourclass { } 
  
 /* Modern browsers (not IE 7) */ 
 html>/**/body .yourclass { } 
  
 /* Opera 9.27 and below */ 
 html:first-child .yourclass { } 
  
 /* Safari */ 
 html[xmlns*=""] body:last-child .yourclass { } 
  
 /* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */ 
 body:nth-of-type(1) .yourclass { } 
  
 /* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */ 
 body:first-of-type .yourclass {  } 
  
 /* Safari 3+, Chrome 1+ */ 
 @media screen and (-webkit-min-device-pixel-ratio:0) { 
  .yourclass  {  } 
 } 
Clearfix

.clearfix:after { 
     visibility: hidden; 
     display: block; 
     font-size: 0; 
     content: " "; 
     clear: both; 
     height: 0; 
 } 
  
 .clearfix { display: inline-block; } 
  
 /* start commented backslash hack \*/ 
 * html .clearfix { height: 1%; } 
 .clearfix { display: block; } 
 /* close commented backslash hack */ 
固定宽度且居中

.wrapper { 
    width:960px; 
    margin:0 auto; 
} 

?

Rounded corners – border-radius

.round{ 
   -moz-border-radius: 10px; 
   -webkit-border-radius: 10px; 
   border-radius: 10px; /* future proofing */ 
   -khtml-border-radius: 10px; /* for old Konqueror browsers */ 
} 

?

伪元素向文本的第一个字母添加特殊样式

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

?

?? 使用 @fontface

@font-face { 
     font-family: 'MyFontFamily'; 
     src: url('myfont-webfont.eot?') format('eot'), 
          url('myfont-webfont.woff') format('woff'), 
          url('myfont-webfont.ttf')  format('truetype'), 
          url('myfont-webfont.svg#svgFontName') format('svg'); 
     } 

?

跨浏览器的inline-block

li { 
         wid