BODY
(
background: url(images/bg_page.jpg);
font: 10pt verdana,arial,;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
)
H1, H2, H3, H4, H5, H6
(
border-bottom: solid 1px #ccc;
margin: 1em 0;
)
TD
(
font: 10pt;
)
A:link
(
color: #057AE0;
text-decoration: none;
)
A:visited
(
color: #057AE0;
text-decoration: none;
)
A:hover
(
color: #009900;
)
A:active
(
color: #009900;
) | <><><>
这样的一个样式文件，可以适用于任何一个网页，只要添加引用我们都可以立刻看见效果。 由于样式表的继承规则是外部的标签样式会保留下来继承给这个标签所包含的其他标签。事实上，所有在标签中嵌套的标签都会继承外层标签指定的属性值，有时会把很多层标签的样式叠加在一起，例如在body标签中定义了字体大小，那么div、p等标签也会继承一样的字体大小，如果在P标签中又定义了字体颜色，那么P标签中的文字既具有body标签的字体大小又有P标签的字体颜色。需要注意的是，table标签不会继承body的字体大小设定，所以在上面的样式表中，我们单独来定义td的样式。 3、定义好页面的结构布局 很多时候，我们在制作网页时总是从视觉出发，先用Photoshop或者Fireworks画出来、思考页面的配色，做一些很炫的效果，很精美的图片，再切割成小图。然后通过编辑HTML将所有设计变成页面。 然而，有视觉的缺陷的人，不能理解这些颜色或者效果。PDA、移动电话和屏幕阅读机上也无法解析这些效果。 因此外观并不是最重要的。一个结构良好的XHTML可以通过CSS的不同定义，显示成任何外观，显示在任何支持XHTML的网络设备上。 通过分析我们可以发现，对于大多数WEB网站来说，页面都是由一些类似的内容区块所组成，如: - 站点标题区
- 站点导航(主菜单，次及菜单)
- 功能区(例如搜索框、用户登陆区)
- 内容区(文章正文或者文章、产品列表)
- 页脚(版权和有关法律声明)
然后我们用DIV标签来将这些区块包含起来，类似这样: <div class="pageHeader">站点标题
</div>
<div class="pageNav">站点导航
</div>
<div class="catalogNav">栏目导航
</div>
<div class="pageContent">文章正文或列表等等
</div>
<div class="pageSearch">查询
</div>
<div class="pageBottom">页脚
</div> |
通过CSS的定义，我们可以将这些DIV标签包含的区块放在页面上任何位置，再指定这些块的颜色、字体、边框、背景以及对齐属性等等。如:我们再建立siteLayout.css文件，定义如下: .pageHeader
(
padding: 10px;
border: 1px solid #666;
height: 100px;
height: 70px;
)
.pageNav
(
padding: 10px;
border: 1px solid #666;
height: 100px;
height: 30px;
)
.catalogNav
(
float: left;
top: 130px;
padding: 10px;
border: 1px solid #666;
width: 20%;
)
.pageSearch
(
float: left;
top: 130px;
padding: 10px;
border: 1px solid #666;
width: 20%;
)
.pageContent
(
float: left;
padding: 10px;
border: 1px solid #666;
height: 400px;
width: 60%;
)
.pageBottom
(
clear: both;
padding: 10px;
border: 1px solid #666;
height: 100px;
height: 70px;
) |
如此，我们定义了一个三列的页面布局:顶部自适应页面宽度。中间三列自适应页面。底部自适应页面宽度，当然您也可以将页面定义为中间只有两列等等，您只需要调整layout.css文件即可，这样您可以灵活的修改页面的布局，让页面外观发生根本的变化，而不必动到HTML源文件，这一点对于服务器端生成代码的程序尤为重要。 更多关于CSS布局的资料，请参见:http://www.w3cn.org/article/layout/2004/55.html 4、定义站点独有的样式 经过以上两步之后，我们已经有了一个大概的页面主题外观，接下来我们要设计站点的细节，比如，对站点导航条我们想使用与普通超链接不一样的样式，如:蓝色、加粗、字体更大、再加上有立体效果的背景图: . pageNav a:link, . pageNav a:hover, . pageNav a:visted (Color:#36c;
font-weight:bold; font-size:120%; background: url(images/bg_siteMenu.jpg) #36c;
) | <><><>
|
