在html和css編程中，經典的css教學案例是教學和學習的重要內容之一。下面我們就來看看其中的一些經典案例。

/* code for reset.css */
html,body,div,span,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,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;}
:focus{outline:0;}
ins{text-decoration:none;}
del{text-decoration:line-through;}
table{border-collapse:collapse;border-spacing:0;}

上面是RESET.CSS的代碼，這個文件可以清楚地定義瀏覽器的默認css樣式，這樣可以減少瀏覽器之間的差異性，使你的網站看起來更加一致和專業。

/* code for float */
.clearfix:after {
content:""; 
display:table; 
clear:both;
} 
.clearfix { 
zoom:1; 
}
.floatL {
float:left;
_display:inline; 
}
.floatR {
float:right;
_display:inline; 
}

FLOAT是CSS中常用的布局方式，它可以使元素分別左側或右側浮動，然后實現比較靈活的排版。但有時候浮動元素會讓容器元素失去高度，這個時候就需要用float來克服這個問題。

/* code for CSS sprites */
a.spritename {
background-position:0 0;
text-indent:-9999px;
width:102px;
height:102px;
display:block;
}
a.spritename.current {
background-position:0 -102px;
}

當你的網站有很多小圖片或圖標時，就需要用到CSS Sprites優化了。在此我們可以把小圖片合并為一張文件，然后利用background-position來移動需要的圖片位置。這樣可以減少HTTP請求，提高頁面的速度。

以上是三個比較經典的CSS教學案例，可以深入學習CSS編程的常用技巧和方法，將會對你的網站制作很有幫助。