7.3 制作样式表文件并和其他页面绑定

首页 > 代码库 > 7.3 制作样式表文件并和其他页面绑定

7.3 制作样式表文件并和其他页面绑定

2024-07-08 20:49:16 220人阅读

问题：大家发现前面应用模板的页面中存在的问题了吗？如上一节应用模板图3、图4和图5所示，是不是页面中有些字体过大、颜色搭配不合理、超链接样式极其难看、文本排列不够整齐等，那如何解决这些问题？

大家肯定想到了使用样式表，由于有多个页面甚至整个站点都要应用统一的样式，所以应该创建样式表文件，方便多个页面同时引用。

一、制作样式表

根据上一节图3、图4和图5所示的页面效果，我们应该设置哪些样式？其实，这也不难，你只要看到页面中哪里不美观，那么那里就得应用样式。所以根据上一节图3、图4和图5所示的不美观的地方，可以得出应该应用如下样式：字体样式、超链接样式、颜色及背景样式、文本样式、方框样式等。

下面我们就为上一节图3、图4和图5所示的页面创建样式文件。

(1) 打开Dreamweaver，选择“文件”一“新建”命令，弹出“新建文档”对话框，在“类别”列表框中选择“基本页”选项，在“基本页”列表框中选择“CSS”选项，如图1所示。

$图1 “新建文档\对话框$
图1 “新建文档"对话框

(2) 单击“创建”按钮，打开CSS样式编辑页面。

(3) 选择“窗口”一“CSS样式”命令，打开“CSS样式”面板，在面板中右击鼠标，在弹出的菜单中选择“新建”命令。

(4) 在弹出的“新建CSS规则”对话框中，就可以新建标签样式（如body、a等）、ID样式（如#head、#search form等）和类样式（如.fontcolor- white、.tableBorder等）。

(5) 创建完样式规则之后，样式文件里所对应的完整代码如下：

body {
margin-top:7px;
font-family:"宋体",sans-serif;
font-size:12px;
}
a:link{
color:#000000;
}
a:visited{
color:#999999;
}
a:hover{
color:#CC0000;
}

#head{ !头部样式
float:left;
margin:0px auto 0px auto;
width:950px;
height:140px;
}
#search_form{
margin:0px auto 0px auto;
padding:1px 0px 1px 0px;
width:950px;
height:55px;
}
.fontcolor_white{
color:#FFFFFF;
font-size:12px;
}

#content{ !中间内容部分样式
float:left;
margin:0px auto 0px auto;
width:950px;
/*height:720px; */
text-align:left;
background-color:#FFFFFF;
font-size:12px;
}
#content a{
color:#0033FF;
text-decoration:none;
}

#foot a{
color:#0033FF;
}
#content a:hover,#foot a:hover{
color:#FF3300;
}
.fontcolor_blue{
color:blue;
font-size:12px;
}
.font_bold{
font-size: 16px;
font-weight: bold;
}
.tableBorder {
border-right-width: 2px;
border-right-color:#FF9900;
border-right-style:dashed;
padding-top:10px;
padding-left:5px;
}
.tablePad {
padding-left:10px;
}

#foot{
margin:0px auto 0px auto;
width:950px;
height:93px;
text-align:center;
}

.login_success1 {
font-size: 24px;
font-weight: bold;
}
.login_success2 {font-size: 36px}
.login_success3 {font-size: 24px}

.register_textBroader
{
border-width:1px;
border-style:solid;
}
.register_table_line{
font-size:14px;
line-height:35px;
margin-right:5px;
text-align:right;

}

(6) 选择“文件”一“另存为”命令，然后在弹出的“另存为”对话框中将此CSS样文件保存为mainpage.css，最后单击“保存”按钮，如图2所示。这样一个样式文就创建好了，随后就可以被多个页面引用。