CSS样式表-手实用手册与讲解
伺服網路科技股份有限公司 (02)2711-7555
建立日期：2006/10 修改日期：2006/10 版 本：1.0
自定义页面样式 1 使用说明： 1 页面结构 2 头部说明 4 主体定制 8 主体背景（跨三栏）设置 左边栏背景设置 8 中间栏背景设置 8 右边栏背景设置 9 底部定制 10 底部背景修改 10 底部文字修改 10 模块定制 11 模块标题修改 11 模块边框修改 12 模块背景修改 12 普通文字修改 12 链接文字修改 13 学校名称修改 13 模块标题文字修改 13 明细页标题文字修改 14 信息陈列标题文字修改 14 简单说明文字修改 分类列表文字修改 页首连接文字修改 小技巧 17 CSS 标签定义对照表 样式结构图 21 Pictures 图文件范例说明 小图示 24 论坛图档 25 完成制作 26 14 15 16 18 24
8
自定义页面样式
使用说明：
本软件的页面样式设计采用了大量的ＣＳＳ定义， 因此， 本手册仅限于熟悉ＣＳＳ编写规则的专业 网页设计制作人员使用。 当从往站后台下载自定义页面样式文件后，解压缩您可以看到如下所示一些档案：
?
如图所示，在 Example 目录下，有两个文件夹（catalog、style）和一个档案（index.html） 。 catalog 文件夹内存放网页范例内容，供您预览使用，请不要随意更改； style 文件夹包含两个档案（style.css、font.css）以及两个文件夹（images、pictures） ， 更改这些档案将从新设定当前页面样式的显示效果：
o o o
style.css font.css images
主样式表单，包含绝大部分的样式定义； 字型样式表单，简要定义了一些字型与字号大小； 存放样式表单中引用到的图档的文件夹，在样式表单里引用到的所有背景
图都存放在此；
o ?
pictures
是存放样式表单中没有引用、但在页面中引用的图档。
双击"index.html"，开启网页制作范本页面、预览当前所有页面的显示效果； 同样，您对 css 样式的任意修改都可以通过刷新该范例页面来预览。
1
页面结构
页面的结构如下图：
背景修改 请通过修改样式表单来设定页面整体背景的背景色或者背景图。
?
修改背景色
o
用任意文本编辑器打开 style.css，找到下面这段样式：
body { ... background: #8DCF2F url("images/bg.gif"); ... } 其中 background: #8DCF2F url("images/bg.gif") 便是设置页面的背景，将以上 css 代码 改动如下，页面的背景色就变成了 black（黑色）：
o
body { ... background: black; ... }
2
?
修改背景图
o o
同上，找到"body"所在的那段代码片段。 将以上 CSS 代码改动如下，页面的背景图就变成了 mybg.gif：
body { ... background: url("images/mybg.gif"); ... } 间距修改 请按照下列方法，设定网页与浏览器的间距。
?
用任意文本编辑器打开 style.css，找到下面这段样式：
body { margin: 10px; ... ... } 将上面这段 css 代码改动如下，网页与浏览器的间距（上下左右都有间距）就变成了 25 像 素：
?
body { margin: 25px; ... }
?
3
头部说明
头部的结构如下图：
学校名称文字修改
用任意文本编辑器打开 font.css，找到下面这段样式，修改"｛｝"内的样式代码。 https://www.wendangku.net/doc/4f13086795.html,pany { font-family: Arial, Tahoma, "MS Sans Serif", Geneva, sans-serif; font-size: 14px; font-weight: bold; }
提示："font-family"设定字型，"font-size"设定字号，"font-weight"设定文字的粗细。关于文字 样式的设定，请参考「文字修改」中的「普通文字样式修改方法」 。
页首连结定制
请通过修改样式表单来修改文字前的小图、链接文字的颜色，调整整个页首链接导航条的位置 等。
4
?
页首连结小图修改
o
用任意文本编辑器打开 style.css，找到下面这段样式，"nav_li1.gif "为默认的显示 图形，"nav_li2.gif" 为鼠标移上后的小图。
div.navbar li a, div.navbar li a:link, div.navbar li a:visited { ... ... background: url("images/nav_li.gif") no-repeat 0 50%; } div.navbar li a:hover { ... ... background: url("images/nav_li2.gif") no-repeat 0 50%; }
o
如果要修改这两张图形， 请重新制作两张新的图形， 覆盖 images 文件夹内的原有档 案；如果不需要小图显示，请将"background..."这行代码删除。
?
页首链接文字样式修改
o
用任意文本编辑器打开 font.css，找到下面这段样式，横线上方为鼠标移上前的文 字样式，横线下方为鼠标移上后的文字样式。
div.navbar li a, div.navbar li a:link, div.navbar li a:visited { font-weight: bold; color: #FFF; text-decoration: none; } div.navbar li a:hover { color: #FF0; border-top: 1px #FF0 solid; }
o
提示： 关于文字样式设定， 请参照 「文字修改」 「带链接的文字样式修改方法」 中的 。
5
?
页首连结定位
o
用任意文本编辑器打开 style.css，找到下面这段样式，其中"bottom:0px"表示导航 栏与头部的最下端的距离为 0， "right:-1px"表示导航栏与头部右端的距离为-1 像素， 也就是导航栏超出头部的右侧一个像素。
div.navbar { position: absolute; bottom: 0px; right: -1px; z-index: 100; ... ... }
?
banner 定位
用任意文本编辑器打开 style.css，找到下面这段样式，"right:10%"表示 banner 与头部的最右 端的距离为头部宽度的 10%，"top:10px"表示 banner 与头部顶端的距离为 10 像素。 div.banner { ... ... top: 10px; right: 10%; }
头部高度设定
当 logo 高度较小或者 banner 高度过大时，banner 将盖住网页的部分内容，此时请通过在样式 表单中修改网页头部高度来解决这个问题。
?
用任意文本编辑器打开 style.css，找到下面这段样式 div.head https://www.wendangku.net/doc/4f13086795.html,yer_03 { background: url("images/hd_bgr.gif") no-repeat top right; }
?
在"div.head https://www.wendangku.net/doc/4f13086795.html,yer_03 {}"中增加一个高度"height"的设定，改动如下，头部的高度就变 成您所设定的值（本例中设定头部的高度为 150 像素） 。
6
div.head https://www.wendangku.net/doc/4f13086795.html,yer_03 { background: url("images/hd_bgr.gif") no-repeat top right; height: 150px;
7
主体定制
主体背景（跨三栏）设置
?
用任意文本编辑器打开 style.css，找到下面这段样式，其中，background 已经定义了主 体的背景，将制作好主体背景图命名为"bd_bg.gif"，放到 images 文件夹中即可。 以下例子中背景是居左朝下并且不平铺，如需要对背景的平铺方式进行修改。
table.container td.body { ... background: #FFF url("images/bd_bg.gif") no-repeat left bottom; ... } 左边栏背景设置
?
用任意文本编辑器打开 style.css，找到下面这段样式，background 已经定义了主体的背 景，制作好第一栏背景图，命名为"col_01bg.gif"，放到 images 文件夹中即可； 以下例子中背景是朝上对齐并且横向平铺，如果需要对背景的平铺方式进行修改。
td.col_01 { border-right: 1px #6CA51A solid; background: url("images/col_01bg.gif") repeat-x; } 中间栏背景设置
?
用任意文本编辑器打开 style.css，找到下面这段样式。 td.col_02 { }
?
如下，在其后添加另一段样式代码，并制作好第二栏背景图，命名为"col_02bg.gif"，放到 images 文件夹中； 以下例子中背景是朝上对齐并且横向平铺，如果需要对背景的平铺方式进行修改。
8
td.col_02 { background: url("images/col_02bg.gif") repeat-x; } 右边栏背景设置
?
用任意文本编辑器打开 style.css，找到下面这段样式。 td.col_03 { }
?
如下，在其后添加另一段样式代码，并制作好第三栏背景图，命名为"col_03bg.gif"，放到 images 文件夹中； 以下例子中背景是朝上对齐并且横向平铺，如果需要对背景的平铺方式进行修改。
td.col_03 { background: url("images/col_03bg.gif") repeat-x; }
?
9
底部定制
底部背景修改
?
用任意文本编辑器打开 style.css，找到下面这段样式。 div.foot https://www.wendangku.net/doc/4f13086795.html,yer_01 { ... background: #8B720C url("images/ft_bg.gif") repeat-x; ... }
底部文字修改
?
用任意文本编辑器打开 font.css，找到下面这段样式。 div.foot div.copyright { font-size: 9pt; font-family: verdana, Tahoma, "MS Sans Serif", Geneva, sans-serif; color: #000; }
10
模块定制
模块标题修改
?
标题小图修改 将制作好标题小图命名为 bd_bg.gif，放到 images 文件夹中即可；如果要更改标题文字与 小图的距离，请用任意文本编辑器打开 style.css，找到下面这段样式，修改"padding: 5px 0 1px 20px"中的"20px"，该值越大则文字离图越远，反之则越近。 div.md_top https://www.wendangku.net/doc/4f13086795.html,yer_01 div{ ... background: url("images/icon_mdl_title.gif") no-repeat 0px 50%; padding: 5px 0 1px 20px; ... }
?
标题文字修改 用任意文本编辑器打开 font.css，找到下面这段样式。 div.md_top https://www.wendangku.net/doc/4f13086795.html,yer_01 div { font-size: 14px; font-weight: bold; font-family: verdana; color: #000; }
?
标题隔线修改 用任意文本编辑器打开 style.css，找到下面这段样式。 div.md_top https://www.wendangku.net/doc/4f13086795.html,yer_01 div{ ... border-bottom: 1px #558A0B solid; ... }
11
提示：以上范例是为标题的下方设定一条高度为 1 像素，颜色为#558A0B 的细实线。 模块边框修改
?
模块边框修改 用任意文本编辑器打开 style.css，找到下面这段样式，并在"{}"中加入你所设定的样式。 div.md_middle { }
模块背景修改
?
背景修改 用任意文本编辑器打开 style.css，找到下面这段样式，并在"{}"中加入你所设定的样式。 div.md_middle { }
普通文字修改
?
用任意文本编辑器打开 font.css，找到下面这段样式，并参照字型修改范例来修改。 body,td,div,span { font-family: Tahoma, "MS Sans Serif", Geneva, sans-serif; font-size: 12px; } input,select,textarea,marquee { font-family: Tahoma, "MS Sans Serif", Geneva, sans-serif; font-size: 12px; }
提示："body、td,div、span"设定的是一般区域的字型样式； "input,select,textarea,marquee"设定的是输入框、 选择框、 文本输入区域以及跑马灯的字型样式。
12
链接文字修改
?
用任意文本编辑器打开 font.css，找到下面这段样式，并参照字型修改范例来修改。 a:link,a:visited { color: #457302; } a:hover { color: #D37225; }
提示："a:link,a:visited"设定的是鼠标移上前字型的样式，"a:hover"设定的是鼠标移上后字 型的样式。 学校名称修改
?
用任意文本编辑器打开 font.css，找到下面这段样式，并参照字型修改范例来修改。 https://www.wendangku.net/doc/4f13086795.html,pany { font-family: Arial, Tahoma, "MS Sans Serif", Geneva, sans-serif; font-size: 14px; font-weight: bold; }
模块标题文字修改
?
用任意文本编辑器打开 font.css，找到下面这段样式，并参照字型修改范例中的普通文字 样式范例来修改。
div.md_top https://www.wendangku.net/doc/4f13086795.html,yer_01 div { font-size: 14px; font-weight: bold; font-family: verdana; color: #000; }
13
明细页标题文字修改
?
用任意文本编辑器打开 font.css，找到下面这段样式，并参照字型修改范例中的普通文字 样式范例来修改。
div.ptname span { font-size: 14px; font-family: arial; } 信息陈列标题文字修改
?
用任意文本编辑器打开 font.css，找到下面这段样式，并参照字型修改范例中的普通文字 样式范例来修改。
span.shadow-ptname a, span.shadow-ptname a:link, span.shadow-ptname a:visited { color: #457302 } span.shadow-ptname a:hover { color: #F60 }
提示：横线以上为鼠标移上前的字型样式，横线以下为鼠标移上后的字型样式。 简单说明文字修改
?
用任意文本编辑器打开 font.css，找到下面这段样式，并参照字型修改范例中的普通文字 样式范例来修改。
td.shadow-text { font-size: 12px; }
14
分类列表文字修改
?
用任意文本编辑器打开 style.css，找到下面这段样式，并参照字型修改范例中的普通文字 样式范例来修改。 第一级分类鼠标移上之前的字型样式 .flyoutLink a,.flyoutLink a:visited { font-size:14px; color: #2E4D01; text-decoration: none; } ... 第一级分类鼠标移上之后的字型样式 .flyoutLinkOver a,.flyoutLinkOver a:hover,.flyoutLinkOver a:visited { font-size:14px; color: #C00; text-decoration: none; } ... 第一级分类鼠标按下时的字型样式 .flyoutLinkDown a,.flyoutLinkDown a:hover,.flyoutLinkDown a:visited { font-size:14px; color: #C00; text-decoration: none; } ... 下级分类鼠标移上之前的字型样式 .flyoutSubLink a,.flyoutSubLink a:visited { font-size:14px; color: #2E4D01; text-decoration: none; } ... 下级分类鼠标移上之后的字型样式 .flyoutSubLinkOver a,.flyoutSubLinkOver a:hover,.flyoutSubLinkOver a:visited { font-size:14px;
15
color: #CC0000; text-decoration: none; } ... 下级分类鼠标按下时的字型样式 .flyoutSubLinkDown a,.flyoutSubLinkDown a:hover,.flyoutSubLinkDown a:visited { font-size:14px; color: #004D99; text-decoration: none; } 页首连接文字修改
?
用任意文本编辑器打开 font.css，找到下面这段样式，并参照字型修改范例中的普通文字 样式范例来修改。
div.navbar li a, div.navbar li a:link, div.navbar li a:visited { font-weight: bold; color: #FFF; text-decoration: none; } ... ... div.navbar li a:hover { color: #FF0; border-top: 1px #FF0 solid; }
?
提示：横线以上为鼠标移上前的字型样式，横线以下为鼠标移上后的字型样式。
16
小技巧
背景样式修改 常见的背景设置可以写为 ：
div { background: #FFFFFF url("images/bg.gif") repeat-x 5% 60%; }
其对应格式说明如下：
div { background: 背景色 url("背景图") 是否重复 背景离左边框的距离 背景与上边框的距 离; }
提示：若同时设定背景色与背景图，画面则以背景图作为填充。 提示：范例中的"repeat-x"设定的是背景图横向平铺，若要改成纵向平铺，将"repeat-x"改成 "repeat-y"即可。
隐藏暂时无须显示的网页内容 利用样式设定能够对一个网页元素(如图形、表格、文字等)进行隐藏，如信息明细页中的网页 路径，请用任意文本编辑器打开 style.css，找到下面这段样式，并在"{}"中加入"display:none"， 使之隐藏：
div.mo_ptdetail div.path { }
17
CSS 标签定义对照表
样式制作主要用到的 CSS 说明对照如下表：
CSS 样式名 body form div.container table.container td.head div.head https://www.wendangku.net/doc/4f13086795.html,ng div.navbar div.logo https://www.wendangku.net/doc/4f13086795.html,pany div.banner div.searchbar input.keyword td.body 样式说明 页面主体标签 窗体标签 整体最外层 div 整体 table 头部 td 头部 div 语言别 div 头部导航栏 logo 所在 div 学校名称所在 div banner 所在 div 头部搜寻栏 搜寻关键词 主体 td 示例 body{font-size:12px;} form{margin:0;} div.container{margin:0;} table.container{width:100%} td.head{background: #fff;} div.head {padding-top: 5px;} https://www.wendangku.net/doc/4f13086795.html,ng{float:right} div.navbar{text-align: right;} div.logo{padding: 20px;} https://www.wendangku.net/doc/4f13086795.html,pany{font-size:14px;} div.banner{background: #fff;} div.searchbar{border: 1px #999 solid;} input.keyword{color: #000;} td.body{padding:10px} 示例说明 设定页面整体字号 12px 设定页面窗体外边距 0 设定最外层 div 边距 0 设定页面宽度 100% 设定头部背景白色 设定头部的顶部内边距 5px 设定头部语言别按钮向右浮动 设定导航栏文字向右对齐 设定 logo 区内边距 20px 设定学校名称字号 14px 设定 banner 背景白色 设定头部搜寻栏边框 1px 灰色实 线框 设定搜寻关键词体黑色 设定主体 td 的内边距 10px 设定首页主体内容第一列的边框， 每列各有左中右三栏，第二列样式 名称 div.row_02 设定三栏总宽度是页面宽度的 100% 设定左栏宽度 20% 设定中栏宽度 60% 设定左栏宽度 20% 设定左栏外边距 5px 设定中栏外边距 5px 设定右栏外边距 5px 设定底部 td 的上部内边距 5px 设定底部背景白色 计数器居中对齐
div.row_0
主体内容第一列
div.row_0{border: 1px #999 solid;}
table.box td.col_01 td.col_02 td.col_03 div.col_01 div.col_02 div.col_03 td.foot div.foot div.counter
左中右三栏外层表 格 左栏整体 td 中栏整体 td 右栏整体 td 左栏整体 div 中栏整体 div 右栏整体 div 底部 td 底部 div 计数器 div
table.box{width: 100%;} td.col_01{width: 20%;} td.col_02{width: 60%;} td.col_03{width: 20%;} div.col_01{margin: 5px;} div.col_02{margin: 5px;} div.col_03{margin: 5px;} td.foot{padding-top:5px;} div.foot{background:#fff} div.counter{text-align: center;}
18
div.copyright div.gotop div.md_top div.md_middle div.md_bottom div.showborder
版权宣告 div 返回顶部小图所在 div 模块头部 模块内容部分 模块底部 后端设置有边框的 模块 div 后端设置无边框的 模块 div 推荐模块 table 查看更多 搜寻结果画面 进阶搜寻画面 学生资料 div 学生资料分类如 Account Info 学生资料 table 注册返回讯息 学生登陆模块 学生登陆画面 购物车画面 div
div.copyright{text-align: center;} div.gotop{display: none;} div.md_top{height:22px;} div.md_middle{background:#fff} div.md_bottom{height:12px;} div.showborder {margin-bottom: 5px; }
版权宣告居中对齐 设定返回顶部小图不显示 设定模块头部高度 22px 设定模块内容部分背景白色 设定模块底部高度 12px 设定首页所有有边框模块下部外边 距 5px 设定首页所有无边框模块下部外边 距 5px 推荐模块内容向左对齐 查看更多按钮向右对齐 搜寻结果画面背景白色 进阶搜寻画面背景白色 学生资料区上部外边距 5px 设定学生资料分类背景 设定学生资料 table 的宽度 100% 设定注册返回讯息居左对齐 设定登陆模块下方外边距 5px 设定登陆画面最小高度 200px 设定购物车画面最小高度 200px
div.noborder table.special div.more div.search div.mo_search div.account div.title table.account div.acctmsg div.mo_login div.login div.viewcart
div.noborder {margin-bottom: 5px; } table.special{text-align: left;} div.more{text-align: left;} div.search{background:#fff} div.mo_search{background:#fff} div.account{margin-top:5px;} div.title{ background: url("images/tcat.gif") repeat-x} table.account{width:100%} div.acctmsg{text-align: left;} div.mo_login{margin-bottom: 5px;} div.login{min-height: 200px;} div.viewcart{min-height: 200px;} .popcart{background: #EDF0F9 url("images/body_bg_top.gif") repeat-x;} .query{padding:5px;} div.check{margin-bottom: 5px;} div.checkall{float: right;} .bill{width:100%} .checkoutmsg{padding-left: 150px;} .mo_forum{display: none;} div.forumlist{line-height:30px;} div.bbsearch{margin-bottom: 5px;} 19
.popcart
购物车(弹出) 定单查询 选择加入购物车 全部选择加入购物 车 结账画面 结账讯息 论坛 论坛贴子列表 论坛搜寻
设定购物车弹出页面头部背景 设定定单查询画面边距 5px 设定加入购物车画面下边距 5px 全部选择加入购物车 div 向右 浮动 结账画面宽度 100% 结账讯息左内边距 150px 论坛不显示 论坛贴子列表字体行高 30px 设定论坛搜寻下方外边距 5px
.query div.check div.checkall .bill .checkoutmsg .mo_forum div.forumlist div.bbsearch
css样式表基础
层叠样式表（CSS） “层叠样式表”（Cascading Style Sheets,缩写为CSS）是由W3C协会所制定，主要的用途是定义网页数据的编排、显示、格式化及特殊效果，因为HTML提供的、、、 、、等控制标记虽然可以将数据格式化，但能做到的格式化有限，而CSS正好弥补了这个不足。 CSS属于较新技术，故IE3.0版本以上支持，Netscapt Navigator 4.0版以上支持。此外，不同浏览器显示的结果可能有不同。 一、如何链接HTML文件与层叠样式表 它有4种方法： ●在HTML文件的区块嵌入层叠样式表的定义。 ●将层叠样式表定义在单独的文本文件，然后将之导入或链接至 HTML文件。 ●在HTML文件的标签属性style中加入样式定义 ●在HTML文件中套用样式类别。 1．在HTML文件的区块嵌入层叠样式表的定义 附：CSS样式表范例（中国学生网） 1、巧用CSS控制鼠标样式变换 主页上的鼠标是不是就只有箭头和小手两种模样呢？如果鼠标移到“帮助”等字样上时，形状就变成求助的问号；鼠标移到可能需要较长时间等待的超链接时，鼠标形状就变成等待的样子……那该多好啊！其实，借助我们的css，几句很简单的代码就可以实现这一切！ 不信？把鼠标移到下面的演示文字上看看效果吧！ 演示：手形 源代码： 演示：手形 演示：移动 演示：等待 源代码： 等待状态 演示：定位指示 演示：帮助 是不是简单又方便？这里我们只用到了CSS中的“cursor”属性，利用“style=cursor:值”这样的语句形式，分别设置具体的值就可以了。例如：值为“hand”时，当鼠标移到相应的文字或图片上时，就会变成超链接的小手形；值为“move”时，当鼠标移到相应的文字或图片上时，就会变成上下左右带方向箭头的形状，依此类推。 2、横线样式的输入框（中国学生网） 在网上我们常常看见一些注册表单的输入框部分并不是我们常见的矩形框，而是一条细线。其实要实现这样的效果并不困难，只要用一段简短的CSS代码控制好表单输入框的样式即可。 代码主要运用了表格边框的样式控制，将左、上、右边框设置为none，只剩下下边框即可。 CSS样式表复习讲义 一、CSS概述 CSS的全称是Cascading Style Sheet，通常称为“层叠样式表”。是网页设计不可缺少的工具之一。 CSS是一组样式，它是用来进行网页风格设计的，它能精确控制页面的布局、字体、颜色和其他效果，不受浏览器的设置的影响。 <例1>在浏览器中使用CSS样式和没使用CSS样式的对比。（1.html） 二、CSS样式内容形式和应用 对象｛a属性:a属性值；b属性:b属性值；……….. ；x属性:x属性值；｝ ●对象：表示要定义样式的对象名称 ●属性：属性名称，如color(前景色) ●属性值：设置属性的具体值，如给color设置red或#00FF00。（常见属性另见文件） （一）、对象：可以是： 1、HTML标签。如：body、p、a等；只对该标签起作用。 例： P { color: #FFFFFF; background-color: #999999; font-family: "宋体"; font-size: 30px; } 直接应用到相同标签： 使用样式表的文字、
CSS样式表范例
CSS样式表复习讲义