网页设计与制作教学课件作者HTML+CSS+JavaScript张洪斌教学资源淮安市高校教学资源共建共享平台课件.doc

1.淮安市高校教学资源共建共享平台CSS样式设计

初学网页制作的人经常会觉得对文本样式的定义是让人很困扰的事情，因为对大量的文本定义不同的样式，不但工作量很大，也容易出错，甚至有时候根本达不到需要的效果。使用CSS样式表就会非常方便的解决这些问题，如图1-1所示的界面为淮安市高校教学资源共建共享平台网基本编辑效果。

图 1-1 基本编辑后的效果

存在的问题有：

(1)背景色单调，网页顶端有空隙。

(2)表格中的文字大小不合适，文字之间行间距太小。

(3)超级链接的样式太单调。

实际上，大部分的网站都使用了CSS样式表来控制页面中元素，使用CSS可以对一个网站的整体风格进行规划，至少有以下两个好处。

(1)首先就是能保持风格的一致性。

(2)CSS样式表可以共享，便于调整修改。

下面通过CSS样式表定义来美化“淮安市高校教学资源共建共享平台”的网页界面，具体步骤如下：

1)首先预览目前网站的效果，用浏览器打开“indexold.htm””网页如图1-1所示，将“indexold.htm”网页另存为“index.htm”，这样方便比较两者效果的比较。

2)执行“文件”→“基本页”→“CSS”命令，新建一个CSS页面，将其保存到CSS文件夹中，命名为“style.css”。

3)点击“附加样式表”按钮，如图8-7所示的界面，点击“浏览”按钮，选择css文件夹中的“styles.css”文件完成样式表的附加。

也可以在代码视图中添加：

代码到

中间。

4)在styles.css文件中书写HTML选择符body的CSS样式代码：

body {

background-color: #333333;

margin-left: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;}

说明：网页主体使用的样式表主要控制背景色与边距边距的设置。

5)采用同样的方法书写选择符body、td内的文本的CSS样式代码：

body,td {

font-family: "宋体";

font-size: 13px;

color: #0061A0;

line-height: 20px;}

说明：表格内部的内容使用的样式表。

6)下面超级链接的样式编码：

/*注释文本：普通超级链接文字使用的样式*/

a {

font-family: "宋体";

font-size: 13px;

color: #0061A0;

}

a:link {

text-decoration: none;

}

a:visited {

text-decoration: none;

color: #0061A0;

}

a:hover {

text-decoration: underline;

color: #FF0000;

}

a:active {

text-decoration: none;

color: #FF9900;

}

/*注释文本：导航超级链接文字使用的样式*/

a.dh:link {

font-size: 12px;

color: #000000;

text-decoration: none;

color: #FFFFFF;

font-weight: bold;

}

a.dh:visited {

font-size: 12px;

color: #000000;

text-decoration: none;

color: #FFFFFF;

font-weight: bold;

}

a.dh:hover {

font-size: 12px;

text-decoration: underline;

color: #FFFF00;

}

a.dh:active {

font-size: 12px;

text-decoration: none;

color: #FFCC00;

}

/*注释文本：“更多”文本超级链接文字使用的样式*/

a.green:link {

font-size: 12px;

color:#009900;

text-decoration: none;

font-weight: bold;

}

a.green:visited {

font-size: 12px;

color:#009900;

text-decoration: none;

font-weight: bold;

}

a.green:hover {

font-size: 12px;

text-decoration