新浪 博客 CSS 样式

今天先记下，以后有机会在分析,学习样式 表这样写的好处和不足。

 

@charset "utf-8";


/*文字色*/

/* 基本正文字色（博文正文文字默认颜色） */
body{ color:#323e32;}
/* 基本链接字色（默认链接） */
a,
a:link,
a:visited,
a:hover,
.SG_more{color:#074387}
/* A类文字色 （同默认链接，特殊情况下定义样式用） */
.SG_txta{color:#074387}
/* B类文字色（举例：正文标题下面的标签、分类） */
.SG_txtb{color:#637160}
/* C类文字色（举例：正文标题后面的时间） */
.SG_txtc{color:#637160}
/*  提示性文字色A（红色，一般不处理） */
.SG_clewtxta{color: #FF0000}
/*  提示性文字色B（橙色，一般不处理） */
.SG_clewtxtb{color: #FF6600}
/* A类链接色（同body色即可） */
.SG_linka a:link,
.SG_linka a:visited,
.SG_linka a:hover,
a.SG_linka:link,
a.SG_linka:visited,
a.SG_linka:hover{ color:#323e32;}
/* B类链接色（同C类文字色即可） */
.SG_linkb a:link,
.SG_linkb a:visited,
.SG_linkb a:hover,
a.SG_linkb:link,
a.SG_linkb:visited,
a.SG_linkb:hover{color:#637160}

/* 边框颜色（内容区投票等模块）*/
.borderc{ border-color: #343143; }


/* 博客标题文字色*/
.sinabloghead .blogtitle,
.sinabloghead .blogtitle a,
.sinabloghead .blogtitle a:link,
.sinabloghead .blogtitle a:visited,
.sinabloghead .blogtitle a:hover,
.sinabloghead .blogtitle .CP_a_fuc{color:#ffffff}
.sinabloghead .bloglink,
.sinabloghead .bloglink a,
.sinabloghead .bloglink a:link,
.sinabloghead .bloglink a:visited,
.sinabloghead .bloglink a:hover{ color:#f4f4f6;}
.sinabloghead .bloglink .CP_a_fuc{color:#e9e9ed}

/* 导航文字色 */
.sinabloghead .blognav  a,
.sinabloghead .blognav  a:link,
.sinabloghead .blognav  a:visited,
.sinabloghead .blognav  a:hover{ color:#d2d2da}
/*导航选中状态*/
.sinabloghead .blognav a.on,
.sinabloghead .blognav a.on:link,
.sinabloghead .blognav a.on:visited,
.sinabloghead .blognav a.on:hover{color:#ffffff}

/* 组件标题颜色 */
.SG_connHead .title,
.SG_connHead .title a,
.SG_connHead .title a:link,
.SG_connHead .title a:visited,
.SG_connHead .title a:hover,
.SG_connHead .tip,
.SG_connHead .tip a,
.SG_connHead .tip a:link,
.SG_connHead .tip a:visited,
.SG_connHead .tip a:hover,
.SG_connHead .edit,
.SG_connHead .edit a,
.SG_connHead .edit a:link,
.SG_connHead .edit a:visited,
.SG_connHead .edit a:hover,
.SG_connHead .tip_r,
.SG_connHead .tip_r a,
.SG_connHead .tip_r a:link,
.SG_connHead .tip_r a:visited,
.SG_connHead .tip_r a:hover,
.SG_connHead .fontSize,
.SG_connHead .fontSize a,
.SG_connHead .fontSize a:link,
.SG_connHead .fontSize a:visited,
.SG_connHead .fontSize a:hover,
.menuList ul li.current,
.menuList ul li.current a,
.menuList ul li.current a:link,
.menuList ul li.current a:visited,
.menuList ul li.current a:hover,
.menuList ul li.current em.SG_txtc{ color:#e6ebeb}

/* 标准尾文字色 */
.sinablogfooter,
.sinablogfooter a:link,
.sinablogfooter a:visited,
.sinablogfooter a:hover{ color:#b7b7c4}

/* 按钮文字颜色 */
a.SG_aBtn,
a.SG_aBtn:link,
a.SG_aBtn:visited{color:#323e32;}

/* 页签链接颜色（非选中）*/
.SG_tag ul li span a,
.SG_tag ul li span a:link,
.SG_tag ul li span a:visited,
.SG_tag ul li span a:hover{ color:#efeff2;}

/***********************************************************************/
/* 背景图*/

/* 背景 */
body{
background-color: #1e1f47;
/*
循环背景图
 background-image:url();
 */
}

/* 头图 (背景、高度)*/
.sinablogb{background-image: url(../../../image/5/5_11/images/sinablogb.jpg); }
.sinabloghead{height: 266px;}

/* 尾图 (背景、高度) */
.sinabloga{ background-image: url(../../../image/5/5_11/images/sinabloga.jpg);}
.sinablogfooter{ height:190px;}

/* 标题 (位置)*/
.sinabloghead .blogtoparea{ top:33%; left:219px;}

/* 导航 (背景、位置、大小、间距)*/
.sinabloghead .blognav{top: 76%; left: 140px; width: 413px; height: 40px;}
.sinabloghead .blognav .blognavInfo{   top:14px;*top:16px;left:68px;}
/* 针对ie6下的滤镜要用绝对路径*/
.sinabloghead .blognav .blognavBg{ background-image:url(../../../image/5/5_11/images/blognavbg.png);
 _background-image:none; 
 _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='http://simg.sinajs.cn/blog7newtpl/image/5/5_11/images/blognavbg.png');}
/* 导航文字间隔线*/
.sinabloghead .blognav span{ padding:0 13px;*padding:0 12px;background-image:url(../../../image/5/5_11/images/sg_newsp.png);}

/* gif图用于当组件透明时，ie6下不透明的效果 */
/* 组件标题栏 */
.SG_colW95 .SG_connHead,
.SG_colW73 .SG_connHead,
.SG_colW51 .SG_connHead,
.SG_colW21 .SG_connHead,
.blogads .ad_head{ background-image: url(../../../image/5/5_11/images/modelhead.png); }
/* 组件标题栏高度 */
.SG_colW95 .SG_connHead,
.SG_colW73 .SG_connHead,
.SG_colW51 .SG_connHead,
.SG_colW21 .SG_connHead{height:26px}
/* 组件背景 */
.SG_colW95 .SG_connBody,
.SG_colW73 .SG_connBody,
.SG_colW51 .SG_connBody,
.SG_colW21 .SG_connBody,
.blogads .ad_body{background-image: url(../../../image/5/5_11/images/modelbody.png); }
/* 组件底边 */
.SG_colW95 .SG_connFoot,
.SG_colW73 .SG_connFoot,
.SG_colW51 .SG_connFoot,
.SG_colW21 .SG_connFoot,
.blogads .ad_foot{background-image: url(../../../image/5/5_11/images/modelfoot.png); }
/* 组件底边高度 */
.SG_colW95 .SG_connFoot,
.SG_colW73 .SG_connFoot,
.SG_colW51 .SG_connFoot,
.SG_colW21 .SG_connFoot{height:1px}

/* 实线&虚线 */
.SG_j_line,
.SG_j_line1   { background-image: url(../../../image/5/5_11/images/SG_line.gif);}
.SG_j_linedot,
.SG_j_linedot1{ background-image: url(../../../image/5/5_11/images/SG_linedot.gif);}

/* 小圆点 */
.SG_dot{ background-image:url(../../../image/5/5_11/images/SG_dot.gif);}

/* 页签 */
.SG_tag,
.SG_tag ul li,
.SG_tag ul li span.tagR,
.SG_tag ul li.current,
.SG_tag ul li.current span.tagR{background-image:url(../../../image/5/5_11/images/sg_newsp.png); }

/* 二级菜单 (选中状态)*/
.menuList ul li.current,
.menuList ul li.current .menuCell_bot{background-image:url(../../../image/5/5_11/images/sg_newsp.png);}

/* 评论条底图 */
.allComm .allCommTit{ background-image:url(../../../image/5/5_11/images/sg_newsp.png);}

/* 按钮 背景 */
a.SG_aBtn,a.SG_aBtn cite{ background-image: url(../../../image/5/5_11/images/sg_newsp.png);}

/***********************************************************************/

/* 恢复浮层按钮颜色 */
a.SG_aBtnB,
a.SG_aBtnB cite{ color:#333399; background-image: url(http://simg.sinajs.cn/blog7style/images/common/sg_btnb.png); _background-image: url(http://simg.sinajs.cn/blog7style/images/common/sg_btnb.gif);}
a.SG_aBtn_dis,
a.SG_aBtn_dis cite{ background-image:url(http://simg.sinajs.cn/blog7style/images/common/sg_btn_dis.png);_background-image:url(http://simg.sinajs.cn/blog7style/images/common/sg_btn_dis.gif);}


/* 预留商业皮肤相关样式、克隆按钮、商业logo等 */
.sinabloghead .adsarea{ display: none; right:0; bottom:50px;}
.sinabloghead .adsarea .pic{display:none;}
.sinabloghead .adsarea .link{ color:#FFFFFF;}
.sinabloghead .adsarea .link a,
.sinabloghead .adsarea .link a:link,
.sinabloghead .adsarea .link a:visited,
.sinabloghead .adsarea .link a:hover{color: #0099FF;}
.sinabloghead .adsarea .other{display:none}

/* 头图区域动画(注意这儿的宽高跟swf文件和头图区域都要保持一致)*/
.sinabloghead .headflash{ width:950px; height:265px;}