说明:
《动易网站管理系统》2005版提供了默认的蓝色经典的CSS风格,在系统的默认版式模板中,以{$Skin_CSS}标签进行调用系统后台设置的默认风格。
CSS是“Cascading Style Sheets”的简称,中文译为:“层叠样式表”,简称“样式表”。它的作用是用于定义文字属性,文本属性等网页中的基本信息,是网页中的字体大小颜色等等一系列基本信息不随着浏览器及系统显示的分辨率等因素的变化而变化,使得网页具有一定的“固定”性。
CSS是统一HTML标准的“W3C”的工业合作组织于1996年5月制定的第一个排版样本标准,是对HTML功能的一种补充。CSS并不是一种编程语言,简而言之,CSS只是一种用于页面设计的,有设计者提供的手段。CSS的主要功能是通过对HTML标记进行设定,来达到对网页中的字体格式颜色背景图象和其它图文效果的控制功能,使网页能按设计者的意图来显示,从设计者的角度来看,它们几乎可以任意复杂的。
W3C为了解决HTML的结构化问题,和实现Web中的总体外观控制,于1996年底,公布了层叠样式表单CSS(Cascading Style Sheet,CSS)规范。所谓层叠(Cascading)是指对于容器元素指定的所有选项,将被自动的应用到其包含的所有元素中。
例如:根元素中指定文本为红色,则整个文档中的文本颜色为红色。如果用户在包含元素中指定了新的显示选项,该选项将覆盖层叠式选项。
以下是一段定义了H1和H2元素的颜色和字体大小属性:
H1 { font-family:楷体_gb2312;font-size: x-large; color: red }
H2 { font-family:仿宋_gb2312;font-size: large; color: blue }
从这个例子可以看到,标记采用了文本格式定义的方式,从而实现了格式的集中定义和修改。
那如何在《动易网站管理系统》中修改或添加自己的定义呢?
/* 网站链接总的CSS定义:可定义内容为链接字体颜色、样式等 */
a{text-decoration: none;} /* 链接无下划线,有为underline */
a:link {color: #000000;} /* 未访问的链接 */
a:visited {color: #333333;} /* 已访问的链接 */
a:hover{COLOR: #AE0927;} /* 鼠标在链接上 */
a:active {color: #0000ff;} /* 点击激活链接 */
/* 顶部频道文字链接的CSS定义--将顶部频道文字链接与网站链接总的CSS定义分开,以后可以制作深底浅字的格式,如果要保持原来的设计样式,将此定义内容删除或定义成与网站链接总的CSS相同即可。调用代码为*** */
a.Channel:link {color: #ffffff;}
a.Channel:visited {color: #ffffff;}
a.Channel:hover{COLOR: #ffff00;}
a.Channel:active {color: #ffffff;}
/* 顶部当前频道文字链接的CSS定义--调用代码为*** */
a.Channel2:link {color: #ffff00;}
a.Channel2:visited {color: #ffff00;}
a.Channel2:hover{COLOR: #FF6600;}
a.Channel2:active {color: #ffff00;}
/* 底部版权信息文字链接的CSS定义--与顶部频道文字链接定义的想法相同。可设置与顶部频道文字链接定义不同的文字颜色,网页内定义以预留。调用代码为*** */
a.Bottom:link {color: #ffffff;}
a.Bottom:visited {color: #ffffff;}
a.Bottom:hover{COLOR: #ffff00;}
a.Bottom:active {color: #ffffff;}
/* 文章栏目标题文字链接的CSS定义--可设置与顶部频道文字链接定义不同的文字颜色,网页内定义以预留。要相同可不设置。调用代码为*** */
a.Class:link {color: #ffffff;}
a.Class:visited {color: #ffffff;}
a.Class:hover{COLOR: #ff0000;}
a.Class:active {color: #ffffff;}
/* Body的CSS定义:对应CSS中“BODY”,可定义内容为网页字体颜色、背景、浏览器边框等 */
BODY
{
FONT-SIZE: 9pt;background:url(Skin/blue/bg_all.gif);
background-position:center;
text-decoration: none;
SCROLLBAR-FACE-COLOR: #f6f6f6;
SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; SCROLLBAR-SHADOW-COLOR: #cccccc; SCROLLBAR-3DLIGHT-COLOR: #cccccc; SCROLLBAR-ARROW-COLOR: #330000; SCROLLBAR-TRACK-COLOR: #f6f6f6; SCROLLBAR-DARKSHADOW-COLOR: #ffffff;
}
/* 单元格的CSS定义:对应CSS中的“TD”,这里为总的表格定义,为一般表格的的单元格风格设置,可定义内容为背景、字体颜色、样式等 */
TD
{
FONT-FAMILY:宋体;FONT-SIZE: 9pt;line-height: 150%;
}
/* 文本框的CSS定义:对应CSS中的“INPUT”,这里为文本框的风格设置,可定义内容为背景、字体、颜色、边框等 */
Input
{
BACKGROUND-COLOR: #ffffff;
BORDER-BOTTOM: #666666 1px solid;
BORDER-LEFT: #666666 1px solid;
BORDER-RIGHT: #666666 1px solid;
BORDER-TOP: #666666 1px solid;
COLOR: #666666;
HEIGHT: 18px;
border-color: #666666 #666666 #666666 #666666; font-size: 9pt
}
/* 按钮的CSS定义:对应CSS中的“BUTTON”,这里为按钮的风格设置,可定义内容为背景、字体、颜色、边框等 */
Button
{
FONT-SIZE: 9pt;HEIGHT: 20px;
}
/* 下拉列表框的CSS定义:对应CSS中的“SELECT”,这里为下拉列表框的风格设置,可定义内容为背景、字体、颜色、边框等 */
Select
{
FONT-SIZE: 9pt;HEIGHT: 20px;
}
/* 顶部用户登录文字链接的CSS定义 */
.top_UserLogin
{
color: #037FA8;
}
/* ==频道通用表格CSS定义开始== */
.Channel_border /* 灰色表格边框背景颜色定义(760) */
{
border: 1px solid #cccccc;
}
.Channel_title /* 标题背景颜色定义(760) */
{
background: #cccccc;color: #037FA8;height: 27;text-align: center;font-weight:bold;
}
.Channel_tdbg /* 表格背景颜色定义(760) */
{
background:#FAFAFA;line-height: 120%;
}
.Channel_pager /* 分页表格背景颜色定义(760) */
{
background:#FAFAFA;line-height: 120%;
}
/* --评论显示页的CSS定义开始-- */
.Comment_border /* 蓝色表格边框背景颜色定义(760) */
{
border: 1px solid #449AE8;
}
.Comment_title /* 标题背景颜色定义(760) */
{
background:#449AE8;color: #ffffff;font-weight: normal;height: 25;
}
.Comment_tdbg1 /* 表格背景颜色定义(760) */
{
background:#FFFFFF;line-height: 120%;
}
.Comment_tdbg2 /* 留言显示1px表格背景颜色定义 */
{
background:#FAFAFA;
}
/* --评论显示页的CSS定义结束-- */
/* ==频道通用表格CSS定义结束== */
/* ==简短标题文字的CSS定义开始== */
/* [图文]简短标题文字的CSS定义 */
.S_headline1
{
color: blue;
}
/* [组图]简短标题文字的CSS定义 */
.S_headline2
{
color: #FF6600;
}
/* [推荐]简短标题文字的CSS定义 */
.S_headline3
{
color: green;
}
/* [注意]简短标题文字的CSS定义 */
.S_headline4
{
color: red;
}
/* ==简短标题文字的CSS定义开始== */
/* ==top.asp中的CSS定义开始== */
.top_tdbgall /* 顶部表格总背景颜色定义 */
{
width: 760;background:#ffffff;
}
.top_top
{
background:#0089F7;height: 2;
}
.top_Channel /* 频道表格背景、文字颜色定义 */
{
background:#0089F7;color:#3AB1F5!important;text-align: right;border-top: 1px solid #ffffff;border-bottom: 1px solid #ffffff;
}
.top_Announce /* 公告表格背景、文字颜色定义 */
{
background:url(Skin/blue/top_nav_menu.gif);color: #0560A6;height: 30;
}
.top_nav_menu /* 导航栏表格背景、文字颜色定义 */
{
background:url(Skin/blue/top_nav_menu.gif);color: #0560A6;height: 30;
}
.top_Path /* 您现在的位置表格背景、文字颜色定义 */
{
width: 760;background:#ffffff;height: 30;
}
.top_UserLogin /* 顶部用户登录文字链接的CSS定义 */
{
color: #037FA8
}
/* ==top.asp中的CSS定义结束== */
/* ==网页中部中的CSS定义开始== */
.center_tdbgall /* 中部表格总背景颜色定义 */
{
background:#ffffff;
}
/* --网页中部左栏的CSS定义开始-- */
.left_tdbgall /* 左栏表格总背景颜色定义 */
{
background:#ffffff;
}
.left_title /* 左栏标题表格背景、文字颜色定义 */
{
background:url(Skin/blue/left_title.gif);font-weight:bold;color: ffffff;height: 28;width:180;padding-left:40;text-align: left;
}
.left_tdbg1 /* 左栏内容表格背景、文字颜色定义 */
{
background:url(Skin/blue/left_tdbg1.gif);line-height: 150%;padding-left:5;padding-right:8;
}
.left_tdbg2 /* 左栏底部表格背景、文字颜色定义 */
{
background:url(Skin/blue/left_tdbg2.gif);height: 10;
}
.right_title /* 左栏标题表格背景、文字颜色定义 */
{
background:url(Skin/blue/right_title.gif);font-weight:bold;color: ffffff;height: 28;width:180;padding-left:40;text-align: left;
}
/* --网页中部左栏的CSS定义结束-- */
/* --网页中部中栏的CSS定义开始-- */
.main_tdbgall /* 中栏表格总背景颜色定义 */
{
width: 572;background:#ffffff;
}
.main_shadow /* 中栏内容间隔表格背景颜色定义(575) */
{
height: 4;
}
.main_announce /* 中栏公告表格背景、文字颜色定义 */
{
color: 037FA8;height: 25;background:#f9f9f9;border: 1px solid #D2D3D9;
}
.main_Search /* 中栏搜索表格背景、文字颜色定义 */
{
color: 037FA8;height: 25;border: 1px solid #D2D3D9;background:#f9f9f9;
}
.main_top /* 中栏最新推荐表格背景颜色定义 */
{
background:url(Skin/blue/main_top.gif);height: 187;
}
.main_title_760i /* 网站首页中栏标题表格背景、文字颜色定义(760) */
{
color: ffffff;background:url(Skin/blue/main_title_760i.gif);border-top: 1px solid #D2D3D9;border-right: 1px solid #D2D3D9;border-left: 1px solid #D2D3D9;text-align: left;padding-left:40;height: 29;
}
.main_tdbg_760i /* 网站首页中栏内容表格背景、文字颜色定义(760) */
{
border: 1px solid #D2D3D9;line-height: 150%;text-align: left;padding-left:5;padding-right:5;
}
.main_title_575 /* 中栏标题表格背景、文字颜色定义(575) */
{
color: ffffff;background:url(Skin/blue/main_title_575.gif);border-top: 1px solid #D2D3D9;border-right: 1px solid #D2D3D9;border-left: 1px solid #D2D3D9;text-align: left;padding-left:40;height: 29;
}
.main_tdbg_575 /* 中栏内容表格背景、文字颜色定义(575) */
{
border: 1px solid #D2D3D9;line-height: 150%;text-align: left;padding-left:5;padding-right:5;
}
.main_title_282i /* 栏目文章列表标题表格背景、文字颜色定义(282) */
{
background:url(Skin/blue/main_title_282i.gif);color: ffffff;height: 29;border-top: 1px solid #D2D3D9;border-left: 1px solid #D2D3D9;border-right: 1px solid #D2D3D9;padding-left:40;
}
.main_tdbg_282i /* 栏目文章列表内容表格背景、文字颜色定义(282) */
{
border: 1px solid #D2D3D9;line-height: 150%;text-align: left;padding-left:5;padding-right:5;
}
.main_title_282 /* 栏目文章列表标题表格背景、文字颜色定义(282) */
{
background:url(Skin/blue/main_title_282.gif);color: ffffff;height: 29;border-top: 1px solid #D2D3D9;border-left: 1px solid #D2D3D9;border-right: 1px solid #D2D3D9;padding-left:40;
}
.main_tdbg_282 /* 栏目文章列表内容表格背景、文字颜色定义(282) */
{
border: 1px solid #D2D3D9;line-height: 150%;text-align: left;padding-left:5;padding-right:5;
}
.listbg /* --栏目文章列表内容间隔颜色的定义1-- */
{
background:#ffffff;
}
.listbg2 /* --栏目文章列表内容间隔颜色的定义2-- */
{
background:#f7f7f7;
}
/* --网页中部中栏的CSS定义结束-- */
/* --文章显示页的CSS定义开始-- */
.main_ArticleTitle /* 主标题文字颜色定义 */
{
color: ff0000;font-weight:bold;font-size: 18;line-height: 150%;
}
.main_ArticleSubheading /* 副标题文字颜色定义 */
{
color: 037FA8;font-weight:bold;line-height: 150%;
}
.main_title_760 /* 标题导航表格背景、文字颜色定义(760) */
{
background:url(Skin/blue/main_title_760.gif);border: 1px solid #D2D3D9;height: 28;color: ffffff;
}
.main_tdbg_760 /* 内容表格背景、文字颜色定义(760) */
{
border: 1px solid #D2D3D9;padding: 8;line-height: normal;
}
.Article_tdbgall /* 责编等表格背景、文字颜色定义(760) */
{
background:#f5f5f5;
}
/* --文章显示页的CSS定义结束-- */
/* --留言频道CSS定义开始-- */
/* 留言栏目标题文字链接的CSS定义--调用代码为*** */
a.Guest:link {color: #ffffff;}
a.Guest:visited {color: #ffffff;}
a.Guest:hover{COLOR: #ff0000;}
a.Guest:active {color: #ffffff;}
.Guest_title_760 /* 标题导航表格背景、文字颜色定义(760) */
{
background:url(Skin/blue/main_title_760.gif);border: 1px solid #D2D3D9;padding-left:5;height: 29;color: ffffff;
}
.Guest_tdbg_760 /* 内容表格背景、文字颜色定义(760) */
{
border: 1px solid #D2D3D9;padding: 8;
}
.Guest_border /* 蓝色表格边框背景颜色定义(760) */
{
border: 1px solid #449AE8;
}
.Guest_title /* 标题背景颜色定义(760) */
{
background:#449AE8;color: #ffffff;font-weight: normal;height: 25;
}
.Guest_tdbg /* 表格背景颜色定义(760) */
{
background:#FAFAFA;line-height: 120%;
}
.Guest_tdbg_1px /* 留言显示1px表格背景颜色定义 */
{
background:#D2D3D9;
}
.Guest_border2 /* 回复表格虚线边框背景颜色定义(760) */
{
border: 1px dashed #97D2DF;background:#E8F5F8;color: #006633;
}
.Guest_ReplyAdmin /* 管理员回复文字背景颜色定义(760) */
{
color: #ff0000;
}
.Guest_ReplyUser /* 用户回复文字背景颜色定义(760) */
{
color: #449AE8;
}
/* --留言频道CSS定义结束-- */
/* --商城的CSS定义开始-- */
.Shop_border /* 蓝色表格边框背景颜色定义(760) */
{
border: 1px solid #449AE8;
}
.Shop_border3 /* 灰色表格边框背景颜色定义(760) */
{
border: 1px solid #cccccc;
}
.Shop_title /* 标题背景颜色定义(760) */
{
background:url(Skin/blue/main_title_760.gif);color: #ffffff;font-weight: normal;height: 27;
}
.Shop_tdbg /* 表格背景颜色定义(760) */
{
background:#FAFAFA;line-height: 120%;
}
.Shop_tdbg2 /* 表格背景颜色定义2 */
{
background:#f5f5f5;line-height: 120%;
}
.Shop_tdbg3 /* 表格背景颜色定义3 */
{
background:#ffffff;line-height: 120%;
}
.Shop_tdbg4 /* 表格背景颜色定义4 */
{
background:#E1F4EE;line-height: 120%;
}
/* --商城的CSS定义结束-- */
/* ==网页中部中的CSS定义结束== */
/* ==Bottom.asp中的CSS定义开始== */
.Bottom_tdbgall /* 底部表格总背景颜色定义 */
{
width: 760;background:#ffffff;
}
.Bottom_Adminlogo /* 管理信息表格背景、文字颜色定义 */
{
background:#0089F7;color:#ffffff;
}
.Bottom_Copyright /* 版权信息表格背景、文字颜色定义 */
{
background:#ffffff;color:#000000;
}
/* ==Bottom.asp中的CSS定义结束== */
/* ==自选风格中的CSS定义结束== */
.menu
{
background-color: #cccccc;width:97%;border: 1px;
}
.menuBody
{
background-color: #ffffff;
}
/* ==自选风格中的CSS定义结束== */
.Channel_font /* 搜索等特殊文字颜色定义 */
{
color: red;
}
/* --评论显示页的CSS定义开始-- */
.Guest_font /* 隐藏、用户等特殊文字颜色定义 */
{
color: green;
}
/* --评论显示页CSS定义结束-- */
/* --留言频道CSS定义开始-- */
/* 留言栏目标题文字链接的CSS定义--调用代码为*** */
a.Guest:link {color: #000000;}
a.Guest:visited {color: #000000;}
a.Guest:hover{COLOR: #ff6600;}
a.Guest:active {color: #000000;}
|