发一则样式表文章

前端技术 样式表是基础，很好的控制样式，是实现页面布局呈现和复杂前端效果的前提。最近新做的东西当中有几个还是写的挺认真的 ，这是网站的统一头部，将几个频道的样式集合在一套样式之中，通过改变背景图片的位置即可方便实现频道的切换，表现在样式表中方便到只改变一个类名，即可自动识别当前频道标示于样式。CSS选择器合理使用也十分强大。当样式表成为一种工具，可以省却不少的麻烦，在一定程度上减少脚本的使用。

先贴一下 DEMO地址：点击查看

贴一下CSS：

 CSS Document 
*Name   ：Titan Global Header Style
*Author : trance
*Date   : 2009-8-5
*Email  : trance2005@163.com
*QQ     : 397902738
*MSN    : trancelover@live.cn
*Intro  : chn0 - chn8 为九大频道 只需在 <div class="Theader"> 
*         后添加相应 chn+序号 即可实现频道切换  默认和 chn0 则为首页
*例如   ：<div class="Theader chn2"> 为豪门官网. 
*/
/*Reset*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6,     
pre, form, fieldset, input, textarea, p, blockquote, th, td {padding: 0; margin: 0;}    
fieldset, img {border: 0;}    
table {border-collapse: collapse;border-spacing: 0;}    
ol, ul {list-style: none;}    
address, caption, cite, code, dfn, em, th, var {font-weight: normal;font-style: normal;}    
caption, th {text-align: left;}    
h1, h2, h3, h4, h5, h6 { font-weight: normal; font-size: 100%; }    
q:before, q:after {content: ''; }    
abbr, acronym {border: 0;}
/* Clear Fix */
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-block;}
.clearfix{display:block;}
.clear{clear:both;height:0px;font-size:0px;line-height:0px;}
/*Start Chnnals*/
.chn0,.chn1,.chn2,.chn3,.chn4,.chn5,.chn6,.chn7,.chn8{}
.swicher span,
.Theader,
.TtopBar{ background:url(img/headerbg.png); background-repeat:repeat-x; font-family:Arial, Helvetica, sans-serif; font-size:12px;}
.Theader a{ text-decoration:none;}

.TtopR a,
.toplog button,
.TmainNav h2 span,
.TmainNav h2 a,
.TmainNav h2 a:hover,
.TmainNav h2 a.cur{ background:url(img/headicon.gif); background-repeat:no-repeat;}
/*默认首页topbar样式*/
.Theader{ height:180px; clear:both; background-position:0 34px;}
.TtopBar{ height:34px; line-height:34px; color:#fff; padding:0 8px; overflow:hidden; clear:both; background-position:0 -418px;}
.TtopBar a,
.TtopBar a:hover{ color:#fff;}

.TtopL{ float:left; width:624px;}
.TtopL p.welcome_info{ float:left; width:140px;}
.toplog{ float:left; width:480px;}
.toplog input{ width:92px; height:18px; background:#fff; border:1px solid #c9c9c9; float:left; margin:7px 9px 0 0; line-height:18px; padding-left:2px; color:#999;}
.toplog button{ float:left; width:59px; height:21px; background-position:0 -670px; border:none; text-indent:-200px; overflow:hidden; margin-top:7px; text-align:center; cursor:pointer; margin-right:6px;}
.toplog form a{ float:left; line-height:normal; padding:0 7px; margin-top:10px;}
/*topbar 右侧*/
.TtopR{ float:right; width:310px;}
.TtopR a{ float:left; width:60px; padding-left:22px;}
.TtopR a.g_sethome{ background-position:0 -691px;}
.TtopR a.g_favorite{ background-position:0 -720px;}
.TtopR a.g_review{ background-position:0 -751px;}
.TtopR a.g_rss{ padding:0; width:58px; height:18px; margin-top:9px; background-position:0 -786px; text-indent:-200px; overflow:hidden;}
.TtopBar a:hover{ text-decoration:underline;}
/*频道图标 H1 H2*/
.TmainNav{ height:91px; margin-bottom:2px; overflow:hidden; clear:both;}
.TmainNav h1{ display:block; float:left; width:280px; margin-right:34px; background:url(img/logos.png) no-repeat;}
.TmainNav h1 a{ display:block; width:280px; height:91px; text-indent:-500px; overflow:hidden; cursor:pointer;}
.TmainNav h2{float:left; width:73px; height:75px; text-align:center; padding:0;  margin:10px 6px 0 0; background:none; overflow:hidden; line-height:normal; text-indent:0; text-decoration:none;}
.TmainNav h2 a{display:block; width:73px; height:67px; padding:8px 0 0; text-align:center; font-weight:900; text-decoration:none; color:#696969; background-position:0px 100px;}
.TmainNav h2 span{ padding-left:0; padding-right:0; text-align:center; display:block; text-indent:0; line-height:normal; height:16px;padding:44px 0 0 0 ;font-size:12px; margin:0px auto 0; cursor:pointer;}
.TmainNav h2 a span{ zoom:1; vertical-align:baseline;}
/*自动识别当前频道和鼠标滑过样式*/
.chn0 .TtopBar,.swicher span.chn0{ background-position:0 -418px;}
.chn1 .TtopBar,.swicher span.chn1{ background-position:0 -146px;}
.chn2 .TtopBar,.swicher span.chn2{ background-position:0 -180px;}
.chn3 .TtopBar,.swicher span.chn3{ background-position:0 -214px;}
.chn4 .TtopBar,.swicher span.chn4{ background-position:0 -248px;}
.chn5 .TtopBar,.swicher span.chn5{ background-position:0 -282px;}
.chn6 .TtopBar,.swicher span.chn6{ background-position:0 -316px;}
.chn7 .TtopBar,.swicher span.chn7{ background-position:0 -350px;}
.chn8 .TtopBar,.swicher span.chn8{ background-position:0 -384px;}
/*识别当前频道Logo*/
.chn0 .TmainNav h1{ background-position:0 0;}
.chn1 .TmainNav h1{ background-position:0 -91px;}
.chn2 .TmainNav h1{ background-position:0 -182px;}
.chn3 .TmainNav h1{ background-position:0 -273px;}
.chn4 .TmainNav h1{ background-position:0 -364px;}
.chn5 .TmainNav h1{ background-position:0 -455px;}
.chn6 .TmainNav h1{ background-position:0 -546px;}
.chn7 .TmainNav h1{ background-position:0 -637px;}
.chn8 .TmainNav h1{ background-position:0 -728px;}
/*识别当前频道图标和状态*/
.chn1 h2.chn1 a,
.chn2 h2.chn2 a,
.chn3 h2.chn3 a,
.chn4 h2.chn4 a,
.chn5 h2.chn5 a,
.chn6 h2.chn6 a,
.chn7 h2.chn7 a,
.chn8 h2.chn8 a,
.TmainNav h2 a.cur,
.TmainNav h2 a:hover{ background-position:0 -595px;}
.TmainNav h2 a:hover span{ color:#ee0c04;}

.TmainNav h2.chn1 span{ background-position:0 0;}
.TmainNav h2.chn2 span{ background-position:0 -71px;}
.TmainNav h2.chn3 span{ background-position:0 -144px;}
.TmainNav h2.chn4 span{ background-position:0 -220px;}
.TmainNav h2.chn5 span{ background-position:0 -298px;}
.TmainNav h2.chn6 span{ background-position:0 -370px;}
.TmainNav h2.chn7 span{ background-position:0 -444px;}
.TmainNav h2.chn8 span{ background-position:0 -518px;}
/*通用快捷菜单*/
.TsubNav{ height:46px; padding-top:5px; overflow:hidden; clear:both;}
.TsubNav table{ width:100%; border:none; border-collapse:collapse;}
.TsubNav th,.TsubNav td{ text-align:left; white-space:nowrap; color:#000; line-height:22px; height:22px;}
.TsubNav th{ font-weight:900; padding:0 10px;}
.TsubNav th span{ font-size:16px; margin-right:4px;}
.TsubNav a{ color:#000; text-decoration:none;}
.TsubNav td a{ padding:0 5px; *padding:0 2px 0 4px;}
.TsubNav a:hover{ color:#d00; text-decoration:underline;}

/*Chnnal Swichers*/
.swicher{ padding:6px 0 0px; height:20px;}
.swicher span{ float:right; border:1px solid #ccc; margin-left:4px; height:16px; width:20px; cursor:pointer;}
.swicher span.chn0{}