DIV+CSS布局与样式之网站设计精粹最新章节_李海燕著

1.4　XHTML CSS基础知识

本节简要概述了在网页制作中涉及到的XHTML和CSS基础知识以及一些经验总结和实用技巧。在工作中熟练掌握基础知识，合理使用经验总结，灵活运用实用技巧，有助于提高网页制作效率，提高网站性能。

1.4.1　XHTML文件的构成

HTML（HyperText Mark-up Language）即超文本标记语言或超文本链接标示语言，是构成网页文档的主要语言。XHTML指扩展超文本标签语言（EXtensible HyperText Markup Language），是更严格更纯净的HTML版本。XHTML文件的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。

0016-01 XHTML 1.0在2000年1月26日成为W3C的推荐标准。

如代码1-3所示是一个XHTML文件：

代码1-3

01    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02    <html xmlns="http://www.w3.org/1999/xhtml">
03    <head>
04    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05    <title>网页标题</title>
06    <link href="css/home.css" rel="stylesheet" type="text/css" />
07    </head>
08    <body>
09    <div id="doc">
10        <div id="hd">/*..modules..*/</div>
11        <div id="bd">/*..modules..*/</div>
12        <div id="ft">/*..modules..*/</div>
13    </div>
14    </body>
15    <script type="text/javascript" src="js/home.js"></script>
16    </html>

其中，DOCTYPE和xmlns都是必须的。编码格式经常使用的有UTF-8和GBK两种，UTF-8是针对英文网页设计的编码格式；GBK是针对中文网页设计的编码格式。在没有特殊需求的情况下统一使用UTF-8编码，因为UTF-8是国际编码，通用性好，另外使用UFT-8编码有个好处是后端页面，如PHP、ASP等一般都使用UTF-8编码，所以与其通信时可以防止出现乱码和不必要的麻烦。

CSS一般位于XHTML文件的头部，JavaScript一般位于XHTML文件的末尾，防止JavaScript文件在加载时出现加载时间过长，而导致页面出现空白等糟糕的用户体验。

0016-01 XHTML标签全部小写。

1.4.2　CSS文件的构成

级联样式表（Cascading Style Sheet）简称CSS，通常又称为“层叠样式表（Style Sheet）”，它是用来进行网页风格设计的。比如，网页上蓝色的字、红色的按钮，这些都是风格。通过设立样式表，可以统一地控制XHTML中各标签的显示属性。CSS样式表可以使人更能有效地控制网页外观。如代码1-4是一个CSS文件：

代码1-4

01    /*css reset*/
02    html{color:#000;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6/*...*/
03    /*全局公共样式*/
04    textarea{resize:none;} /*hack for chrome, disable chrome resizes textarea*/
05    a{color:#049;outline-style:none;}
06    a:hover{color:#f00;}
07    .cf{zoom:1;}
08    .cf:after{content:'.';display:block;visibility:hidden;clear:both;height:0px;}
09    /*moduleABC ABC模块的样式*/
10    #moduleABC h2{font-size:14px;font-weight:bold;}
11    #moduleABC p{font-size:12px;line-height:1.5;}

如代码1-4所示，CSS文件分为三部分：第一部分为CSS重置；第二部分为公共样式；第三部分为模块样式（非公共）。所有的公共样式一般写在第二部分，位于模块样式之上，方便查找。

在模块CSS部分，尽量写出样式的详细路径，比如：

01    #mty_bbs_myblock .searchbar .addblock ul li a{margin:.2em 0;padding-bottom:.2em}

尽量不要简写为：

01    #mty_bbs_myblock .searchbar a{margin:.2em 0;padding-bottom:.2em}

0016-01 CSS代码建议全部小写。

1.4.3　标签语义化

制作网站前，首先应该明白各标签的含义。XHTML每个标签都有自己的含义，都有各自的适用范围，各标签不能随意滥用和忽略。

比如在一个页面中，<div>用了几十个甚至上百个，这是个无意义的标签，只是表示文档中的一个分区而已，非常不利于后期的维护；而<table>标签表示表格，并不是说DIV+CSS结构的页面就不能使用，该用的时候，就要大胆使用。

使用标签语义化有很多好处：

语义化的网页，容易被搜索引擎抓取，便于网站的推广。
去掉样式或者样式丢失时页面结构依然清晰分明。
移动设备能够更加完美地展示网页。
阅读器会根据标签的语义自动解析，呈现更容易阅读的内容形式。
便于后期的开发以及维护，提高团队合作效率。

如表1.1是网页制作中常用的XHTML标签的英文全拼和中文翻译。

表1.1　常见XHTML标签语义汇总

1.4.4　CSS命名规范

CSS命名既要简洁又要尽可能体现出该样式的作用，可以方便以后阅读和理解，提高可维护性。

CSS的命名一般有两种方法：

第一种是驼峰命名法，例如topMenu、subLeftMenu。
另一种是划线命名法，例如top-menu、sub-left-menu、top_menu、sub_left_menu。可以单独使用一种方法也可以将两种方法组合使用。

如表1.2所示是常用的CSS命名：

表1.2　常用的CSS命名

1.4.5　CSS样式重置

浏览器对XHTML标签都有自己默认的样式，如果不对这些默认样式进行重置，那么为了使网页在各浏览器中都呈现出与效果图一致的样子，需要在CSS中对每个XHTML标签反复设置相同的规则。

CSS重置的样式一般都是固定的，如代码1-5所示。

代码1-5

01    /*css reset*/
02    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0; padding:0;}
03    table{border-collapse:collapse; border-spacing:0;}
04    ol,ul{list-style:none;}
05    fieldset,img {border:0;}
06    textarea{resize:none;}
07    input:focus,textarea:focus {outline:none}
08    a{text-decoration:none;}
09    a:hover{text-decoration:underline;}
10    q:before, q:after{content:'';}
11    abbr, acronym{border:0; font-variant:normal;}
12    address,cite,dfn,optgroup,em,var{font-style:normal;}
13    legend{color:#000;}
14    .clear{clear:both;height:0;overflow:hidden;}
15    .cf:after{visibility:hidden;display:block;font-size:0;content:"";clear:both;height:0;}
16    *.cf{zoom:1;}

.cf样式用于对DIV内部的元素清除浮动，从而避免了增加一个空的DIV标签来清除浮动。

0016-01 CSS重置的样式可以根据个人需求不同自定义，也可以参考大型网站，如Yahoo的CSS Reset代码。

如代码1-6所示。

代码1-6

XHTML代码如下：

推荐的写法：

01    <div class="cf">
02        <div class="left">这里是左边导航</div>
03        <div class="right">这里是右边内容</div>
04    </div>

不推荐的写法：

01    <div>
02        <div class="left">这里是左边导航</div>
03        <div class="right">这里是右边内容</div>
04        <div class="clear"></div>
05    </div>

CSS代码如下：

01    .clear{clear:both;height:0;overflow:hidden;}
02    .cf:after{visibility:hidden;display:block;font-size:0;content:"";clear:both;height:0;}
03    *.cf{zoom:1;}
04    .left{float:left;}
05    .right{float:right;}

0016-01 实际项目的CSS文件中，要在CSS文件头部增加代码01~05作为CSS样式重置代码。

1.4.6　CSS Sprites技术

CSS Sprites是一种处理网页图片的方式。它是将一个页面涉及到的零星背景图片都整合到一张大图中，再利用CSS的background-image、background-repeat和background-position的组合对背景图片定位，background-position可以用数字精确定位出背景图片的位置。

使用CSS Sprites的好处是能够减少网页HTTP请求，提高网页性能。因为客户端每显示一张图片都会向服务器发送请求，所以，图片越多请求次数越多，造成延迟的可能性也就越大。

但是，CSS Sprites技术在实际开发中，要视情况决定是否有必要使用。由于CSS Sprites在开发时需要将小图片一张一张整合到一起，过程繁琐、耗时，因此，对于小流量或简单的页面，耗费的人力、时间成本与收效不成正比，不推荐使用。对于较高流量的页面，可以使用CSS Sprites技术合并图片，并且整合后的图片大小不高于200KB时推荐使用。如图1.5所示是一张网页导航的CSS Sprites图，图片的名称是nav.gif。

图1.5　网页导航的CSS Sprites注

蓝色是正常状态下的样式，红色是鼠标指针移上去后的样式。根据图1.5所示，编写代码1-7。

代码1-7

XHTML代码如下：

01    <div class="nav">
02        <ul class="cf">
03            <li class="home"><a href="#" alt="Home" title="Home">Home</a></li>
04            <li class="blog"><a href="#" alt="Blog" title="Blog">Blog</a></li>
05            <li class="contact"><a href="#" alt="Contact" title="Contact">Contact</a></li>
06        </ul>
07    </div>

CSS代码如下：

01    /*css reset*/
02    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0; padding:0;}
03    table{border-collapse:collapse; border-spacing:0;}
04    ol,ul{list-style:none;}
05    fieldset,img {border:0;}
06    textarea{resize:none;}
07    input:focus,textarea:focus {outline:none}
08    a{text-decoration:none;}
09    a:hover{text-decoration:underline;}
10    q:before, q:after{content:'';}
11    abbr, acronym{border:0; font-variant:normal;}
12    address,cite,dfn,optgroup,em,var{font-style:normal;}
13    legend{color:#000;}
14    .clear{clear:both;height:0;overflow:hidden;}
15    .cf:after{visibility:hidden;display:block;font-size:0;content:"";clear:both;height:0;}
16    *.cf{zoom:1;}
17    /*nav*/
18    .nav{width:450px;height:44px;margin:20px auto;}
19    .nav ul li {width:150px; height:44px;float:left; }
20    .nav ul li a {width:150px; height:44px;float:left; background:url(../images/nav.gif) no-repeat; text-indent:-999em;overflow:hidden;}
21    .nav ul .home a{background-position:0px 0px;}
22    .nav ul .blog a{background-position:-150px 0px;}
23    .nav ul .contact a{background-position:-300px 0px;}
24    .nav ul .home a:hover{background-position:0px -44px;}
25    .nav ul .blog a:hover{background-position:-150px -44px;}
26    .nav ul .contact a:hover{background-position:-300px -44px;}

0016-01 代码1-7的CSS文件中，注释/*nav*/以下是导航样式，注释/*css reset*/是CSS样式重置代码。

如图1.6所示是完成后的网页导航效果。

图1.6　网页导航效果

如图1.7所示是鼠标指针移到导航上的网页效果。

图1.7　鼠标指针移到导航上的网页效果

1.4.7　页面质量评估标准

通过插件YSlow或W3C验证http://validator.w3.org/都可以检测XHTML和CSS代码的质量。

YSlow是Yahoo发布的一款基于Firefox的插件。YSlow可以对网站的页面进行分析，为方便用户提高网站性能，会列出具体的修改意见。如图1.8所示是Yslow的Grade视图，即等级视图，是Yslow给出的网站性能评分。

图1.8　Yslow的等级视图Grade视图

如图1.9所示是Yslow的Components视图，即组件视图，通过Components考验查看网页各个元素占用的空间大小。

图1.9　Yslow的Components视图

如图1.10所示是Yslow的Statistics视图，即统计信息视图，Statistics视图统计页面对比了空缓存和使用缓存后页面元素的加载情况。

图1.10　Yslow的Statistics视图

如图1.11所示是Yslow的Tools视图，即辅助工具视图，是YSlow提供的优化页面的小工具。

图1.11　Yslow的Tools视图

0016-01 可以根据网站实际情况选择性的做优化。

通常判断代码质量优劣的标准如下：

浏览器兼容性测试。
XHTML代码结构是否清晰。
XHTML代码结构是否复杂。
XHTML代码是否和CSS混杂在一起。
XHTML代码中是否大量出现不被推荐使用的标签。
XHTML和CSS代码是否书写规范。

1.4.8　代码注释的重要性

代码加注释对于网站制作者本身是一个标记，在大型项目中，能及时有效地进行维护和修改。对代码的阅读者来说，也是一个解释，能让读者透彻了解网站的结构和设计者的思路。对于企业来说，在人员接替时能保证稳定过渡。

1. XHTML代码注释

XHTML代码注释语法：，中间是注释内容。

如代码1-8所示。

代码1-8

01    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02    <html xmlns="http://www.w3.org/1999/xhtml">
03    <head>
04    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05    <title>网页标题</title>
06    <link href="css/home.css" rel="stylesheet" type="text/css" />
07    </head>
08    <body>
09        <!--这是一段注释。注释不会在浏览器中显示。-->
10        <p>这是一段普通的段落。</p>
11    </body>
12    </html>

2. CSS代码注释

CSS代码注释语法有两种：

（1）/* 注释内容 */

（2）//

其中，前者可以注释多行，从“/*”开始到“*/”之间的都是注释，后者是单行注释。如代码1-9所示。

代码1-9

多行注释：

01    /* ----------文字样式开始---------- */
02    /*标题字体样式*/
03    . white12px{color:white;font-size:16px;}
04    /*正文字体样式*/
05    .dreamdublack16px{color:black;font-size:16px;}
06    /* ----------文字样式结束---------- */

单行注释：

01    //详细摘要
02    .summary{font-size:12px;color:#666;}

添加注释时，每行注释应简洁清楚的交代该段代码的功能，同时当一段代码被更改时，相应的注释也应改被更改。

1.4.9　CSS Hack

由于不同的浏览器对CSS的解析不一样，因此会导致生成的页面效果不一样。这时需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中得到相同的页面效果。这个针对不同的浏览器写不同的CSS代码的过程，就叫CSS Hack。

写CSS Hack在CSS的编写中是下下策，不推荐使用，因为质量好的XHTML和CSS代码通常99.9％不需要写CSS Hack就能处理各浏览器的兼容问题，而且写CSS Hack不利于将来的维护和修改。

写CSS Hack代码应该根据浏览器的现代程度由高往低写，比如Firfox、IE 9、IE 8、IE 7及IE 6的CSS Hack书写顺序应该是Firfox、IE 9、IE 8、IE 7、IE 6。

如表1.3所示是常用CSS Hack兼容一览表（IE 6~IE 8、Chrome、Firefox等主流浏览器兼容表）。

表1.3　常用CSS Hack兼容一览表图（IE 6~IE 8、Chrome等主流浏览器兼容一览表图）

浏览器有两种模式：急速模式和普通模式。只要有一种模式不支持使用，表1.3中就用×表示，由于无法判断用户使用的是哪种模式，所以为了保险起见，只要有一种模式下不支持这种CSS Hack的写法，就不建议使用。

0016-01 随着各浏览器版本的升级，对网页的渲染规则也逐渐向W3C标准靠拢，CSS Hack代码也会随之变化。表1.3只是某个时期的CSS Hack的一个参考。

如代码1-10所示是两个DIV块在Firfox、IE 8、IE 7及IE 6下不同显示效果的代码。

代码1-10

XHTML代码：

01    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02    <html xmlns="http://www.w3.org/1999/xhtml">
03    <head>
04    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
05    <title>CSS Hack</title>
06    <link type="text/css" rel="stylesheet" href="1.10.css"/>
07    </head>
08    <body>
09    <div class="block"></div>
10    <div class="block mt color"></div>
11    </body>
12    </html>

CSS代码：

01    /*css reset*/
02    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0; padding:0;}
03    table{border-collapse:collapse; border-spacing:0;}
04    ol,ul{list-style:none;}
05    fieldset,img {border:0;}
06    textarea{resize:none;}
07    input:focus,textarea:focus {outline:none}
08    a{text-decoration:none;}
09    a:hover{text-decoration:underline;}
10    q:before, q:after{content:'';}
11    abbr, acronym{border:0; font-variant:normal;}
12    address,cite,dfn,optgroup,em,var{font-style:normal;}
13    legend{color:#000;}
14    .clear{clear:both;height:0;overflow:hidden;}
15    .cf:after{visibility:hidden;display:block;font-size:0;content:"";clear:both;height:0;}
16    *.cf{zoom:1;}
17    /*block css兼容*/
18    .block{width:500px;height:20px;background-color:#eee;}
19    .mt{
20        margin-top:0px;/*FF*/
21        margin-top:50px\9;/*IE 8*/
22        *margin-top:150px;/*IE 7*/
23        _margin-top:200px;/*IE 6*/
24    }
25    .color{
26        background-color:red;/*FF*/
27        background-color:green\9;/*IE 8*/
28        *background-color:orange;/*IE 7*/
29        _background-color:blue;/*IE 6*/
30    }

0016-01 为方便阅读，部分代码分行显示，实际工作中通常一个类、id或标签的样式写在一行。

如图1.12所示是代码1-10在Firfox、IE 8、IE 7及IE 6下页面的显示效果。

图1.12　代码1-10在Firfox、IE 8、IE 7及IE 6下页面的显示效果

1.4 XHTML CSS基础知识

1.4.1 XHTML文件的构成

1.4.2 CSS文件的构成

1.4.3 标签语义化

1.4.4 CSS命名规范

1.4.5 CSS样式重置

1.4.6 CSS Sprites技术

1.4.7 页面质量评估标准

1.4.8 代码注释的重要性

1.4.9 CSS Hack