CSS样式表详解

2020-03-24 17:10:09

字体：大中小

来源：转载

供稿：网友

!-- Office 2003 风格 by 51dsn--
style type="text/css"
BODY
{
margin: 0px;
color: #333333;
background-color: #84BFE9;
background-color: #006699; !-- 网页背景，网页两边细竖色块--
font-family: Verdana, Arial, 宋体; !-- 字体--
font-size: 9pt; !-- 字体大小--
text-decoration: none; !-- 字体无下划线，若改成有下划线，改none为underline(下划线）、overline（上划线）、line-through（删除线，即横线通过字中部效果）--
scrollbar-face-color: #377ED0; !-- 滚动条主体色，长块和小块的深蓝色--
scrollbar-shadow-color: #E5EEFD; !-- 阴影：内右下色--
scrollbar-highlight-color: #E5EEFD; !-- 强光：内左上色--
scrollbar-3dlight-color: #377ED0; !-- 3D光：外左上色--
scrollbar-darkshadow-color: #377ED0; !-- 阴影：外右下色--
scrollbar-track-color: #E5EEFD; !-- 轨道的淡蓝色--
scrollbar-arrow-color: #E5EEFD; !-- 箭头的淡蓝色--
!-- 如有兴趣的朋友还可设一条：scrollbar-base-color: #E5EEFD;（基础色）--
!-- 以上为右边网页滑动条效果，包含友情连接、留言栏目的滑动条--
}
A {text-decoration: none;} !-- 连接无下划线，若改成有下划线，改none为underline(下划线）、overline（上划线）、line-through（删除线，即横线通过字中部效果）--
A:link {color: #003399;} !-- 未访问过的连接色--
A:visited {color: #003399;} !-- 已经访问过的连接色--
A:hover {color: #ff9900;} !-- MOUSE指向的连接色--
A:active {color: #ff9900;} !-- 已经激活的连接色--
a.Channel:link {color: #ffffff;}
a.Channel:visited {color: #ffffff;}
a.Channel:hover {color: #ff9900;}
a.Channel:active {color: #ff9900;}
!-- 以上为频道连接字体色，主参照前文修改--
TD
{
color: #333333;
font-family: Verdana, Arial, 宋体;
font-size: 9pt;
line-height: 150%;
} !-- 以上为所有单元格设置，可不用修改--
INPUT
{
font-family: Verdana, Arial, 宋体; !-- 输入区字体设置--
font-size: 9pt; !-- 输入区字体大小设置--
color: #0560A6; !-- 输入区字体色设置（深蓝色）--
border: #7F9DB9 1px solid; !-- 输入区边框色设置（蓝灰色）--
height: 20px; !-- 输入区高度设置--
} !-- 以上为表单输入区设置--
BUTTON
{
font-family: Verdana, Arial, 宋体;
font-size: 9pt;
color: #0560A6; !-- 字体色--
background-color: #fafafa; !-- 按钮背景色--
border: #7F9DB9 1px solid; !-- 边框色--
height: 20px; !-- 高度--
} !-- 以上为按钮设置--
SELECT
{
font-family: Verdana, Arial, 宋体;
font-size: 9pt;
color: #0560A6;
border: #7F9DB9 1px solid;
height: 20px;
} !-- 以上为下拉菜单设置--
TEXTAREA
{
font-family: Verdana, Arial, 宋体;
font-size: 9pt;
color: #0560A6;
border: #7F9DB9 1px solid;
} !-- 以上文本输入区属性设置--
.border
{
background-color: #CEDEFA; !-- 以上为左边浅蓝色--
border-right: #bbbbbb 1px solid; !-- 为左边右方竖下来线条色设置--
} !-- 以上为左边属性设置--
.border2
{
background-color: #E4EEFD;
border: #ff9900 1px solid;
padding: 0px 6px; !-- 间隙（四个全出现顺序为顶部间隙、右侧间隙、底部间隙、左侧间隙；出现一个，则四个间隙都是这样设置；出现两个以上，按顺序设置）--
} !-- 栏目子页相关设置，如搜索单元格，文章列表格等--
.title_txt
{}
.title
{}
.tdbg
{}
.pic1
{
border: #ff9900 1px solid; !-- 热门图片黄色边框，若不显示，改1为0--
padding: 6px; !-- 间隙--
}
.txt_css
{
background-color: #409EDE;
background-image: url(Skin/51dsn03/top_pathbg1.jpg); !-- 您现在所在的位置背景图片--
background-repeat: repeat-y;
padding: 2px 8px; !-- 间隙--
border-bottom: #bbbbbb 2px solid; !-- 您现在所在的位置下边灰色线--
}
.title_lefttxt
{}
.title_left
{
background-color: #FDDB94;
background-image: url(Skin/51dsn03/title_bg1.gif); !-- 左边黄色背景图片--
background-repeat: repeat-x;
border: #7DABE1 1px solid; !-- 左边黄色背景图片的边框色--
padding: 0px 6px; !-- 间隙--
color: #333333; !-- 以上为左边图片上的字体色--
font-weight: bold; !-- 字体加粗--
}
.tdbg_left
{
padding: 6px; !-- 间隙--
}
.title_left2
{}
.tdbg_left2
{}
.tdbg_leftall
{
border-bottom: #ffffff 1px solid; !-- 左边那条难看的白线，应改1为0就没有了--
padding: 6px; !-- 间隙--
}
.title_maintxt
{}
.title_main
{
color: #ffffff;
font-weight: bold;
text-align: right; !-- 文本居右--
background-image: url(Skin/51dsn03/title_m1.jpg); !-- 浅蓝色图片--
background-repeat: no-repeat;
background-position: right; !-- 背景图片居右--
border-bottom: #bbbbbb 1px solid; !-- 首页最新文章栏单元格下边灰线--
padding: 2px 6px; !-- 间隙--
} !-- 浅蓝色图片，如首页最新文章栏单元格--
.tdbg_main
{
background-color: #fafafa; !-- 背景色--
border-bottom: #bbbbbb 1px solid; !-- 底部灰色线，改1为0，则无底线--
padding: 6px; !-- 间隙--
} !-- 以上为最新文章列表、最新论坛论新贴、最新留言、图片更新、文章频道的最新推荐最新热门等列表设置--
.title_main2
{
color: #ffffff;
font-weight: bold;
text-align: right;
background-image: url(Skin/51dsn03/title_m2.jpg);
background-repeat: no-repeat;
background-position: right;
border-bottom: #bbbbbb 1px solid;
padding: 2px 6px;
} !-- 橙黄色图片设置，如首页论坛新贴、下载更新（其它设置见.title_main）--
.tdbg_main2
{
color: #ffffff;
font-weight: bold;
text-align: right;
background-image: url(Skin/51dsn03/title_m3.jpg);
background-repeat: no-repeat;
background-position: right;
border-bottom: #bbbbbb 1px solid;
padding: 2px 6px; !-- 间隙--
} !-- 绿色图片设置，如首页图片更新、最新留言（其它设置见.title_main）--
.tdbg_mainall
{
padding: 6px; !-- 间隙--
}
.title_righttxt
{}
.title_right
{
background-image: url(Skin/51dsn03/title_r1.gif); !-- 图片位置--
background-repeat: no-repeat;
border-right: #cccccc 1px solid; !-- 单元格右边线--
padding: 0px 6px; !-- 间隙--
height: 23px; !-- 单元格高度--
} !-- 各页栏目标题栏设置，就是那个左上圆角图片单元格设置--
.tdbg_right
{
border-left: #cccccc 1px solid; !-- 单元格左边线--
border-right: #cccccc 1px solid; !-- 单元格右边线--
border-bottom: #cccccc 1px solid; !-- 单元格底边线--
padding: 6px; !-- 间隙--
}
.title_right2
{
background-color: #C3DAF9;
background-image: url(Skin/51dsn03/title_bg2.gif);
background-repeat: repeat-x;
border: #cccccc 1px solid;
padding: 0px 6px; !-- 间隙--
height: 23px;
}
.tdbg_right2
{
background-color: #fafafa;
border-left: #cccccc 1px solid;
border-right: #cccccc 1px solid;
border-bottom: #cccccc 1px solid;
padding: 6px; !-- 间隙--
}
.tdbg_rightall
{}
.topborder
{}
.nav_top
{
background-color: #377ED0;
background-image: url(Skin/51dsn03/top_channelbg1.jpg); !-- 顶部频道背景图片位置--
background-repeat: repeat-y;
padding: 2px 8px; !-- 间隙--
color: #ffffff;
text-align: right;
} !-- 顶部频道--
.nav_main
{
background-color: #2C92DC;
background-image: url(Skin/51dsn03/top_main01.jpg); !-- 顶部BANNER位置--
background-repeat: no-repeat;
height: 60px; !-- 高度--
} !-- 顶部BANNER--
.nav_bottom
{
background-color: #5197DD;
background-image: url(Skin/51dsn03/bottom_navbg1.jpg); !-- 底部背景图片位置--
background-repeat: repeat-y;
border-top: #bbbbbb 1px solid; !-- 底部上方的那条灰线--
padding: 2px 8px; !-- 间隙--
} !-- 底部设置--
.nav_ann
{
border-top: #377ED0 2px solid; !-- 公告栏上边深蓝色线条--
background-color: #BFD6F9; !-- 背景色--
padding: 2px 8px; !-- 间隙--
} !-- 公告栏设置--
.nav_menu
{
background-color: #2C92DA;
background-image: url(Skin/51dsn03/top_menubg1.jpg);
background-repeat: repeat-y;
padding: 2px 8px; !-- 间隙--
text-align: right;
} !-- 以上为顶部菜单--
本文作者:html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：CSS兼容要点分析

下一篇：DIV+CSS实现网页布局实例代码(2)