作者：郭伟伟
出版社：电子工业出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
CSS全程指南(含光盘1张)试读：
前言
CSS作为Web标准的一部分，已经成为现代网页设计中必不可少的关键要素。CSS是Cascading Style Sheets（层叠样式表）的缩写，它是一种用来表现（X）HTML或XML等文件式样的计算机语言。使用CSS，可以快捷、灵活设置页面中文本的字体、颜色、对齐方式以及其他格式。
另外，希望寻找高级设计技巧的开发人员会发现，CSS可以将文本和图形融合在一起，制作出无穷无尽的效果，使Wed站点更加富有时尚感，现代感，更易于管理和维护。而本书主要介绍如何使用（X）HTML和CSS创建网站，并详细阐述其中的每一步。
全书由浅入深，并注意深入浅出，实例实用，讲解透彻。内容结构安排如下图所示：
本书将最有用的CSS技术汇总在一起，在介绍基本的CSS概念和最佳实践之后，讨论了核心的CSS技术，例如图像、链接、列表操纵、表单设计等。每一章内容由浅入深，直到建立比较复杂的示例。之后本书又着重讨论如何使用DIV结合CSS来搭建网站，同时也介绍了CSS在Dreamweaver中的应用。并且对于在CSS制作过程中遇到的Bug进行了详细的分析。
通过大量的示例，以循序渐进的方式引导读者通过实践迅速、全面地掌握（X）HTML和CSS的知识，这是本书写作的宗旨。“工欲善其事，必先利其器”，希望本书能帮读者您在搭建网站之前，牢固地掌握（X）HTML和CSS的知识并熟练应用。编者按2007/6/15
光盘使用说明
为了方便读者学习，本书附带了一张光盘，下面对光盘内容及使用方法进行简要的介绍。
1.光盘的运行环境
硬件环境：CPU的主频在500MHz以上、内存在128MB以上。
软件平台：操作系统为Windows 2000（SP4），Windows XP或者Windows 2003。调试环境为Dreamweaver等。
2.光盘使用方法
打开光盘（如图1），将光盘中的源代码拷贝到硬盘指定目录下，去掉其只读属性（否则可能无法正常使用这些源程序）。图1 本书光盘目录
3.“源代码”目录
注意
本书附带的源代码是作者编写和测试过的，仅供读者学习时使用，不能用做其他商业用途。
第1篇 新手上路
◆
第1章 Web标准和XHTML基础
◆ 第2章 CSS基础第1章 Web标准和XHTML基础
Web标准是一些规范的集合，是由W3C和其他的标准化组织共同制定的，以用来创建和解释网页的基本内容。这些规范是专门为了那些在网上发布的可向后兼容的文档所设计，使其能够被大多数人所访问。而XHTML则是Web标准中的结构化标准语言，是Web标准的一部分。本章主要来介绍Web标准和XHTML的基本概况。
1.1 Web标准概述
Web标准不是某一个标准，而是一系列标准的集合。Web标准主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括HTML、XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM、ECMAScript等）。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。
1.1.1 结构
结构用以对网页中的信息进行整理和分类，用于结构化设计的Web标准技术主要有HTML、XHTML和XML这三种，下面分别介绍这三种标记语言。
1.HTML
HTML是“Hypertext Markup Language”（超文本标记语言）的缩写。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字的元素。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部主要描述浏览器所需的信息，主体则包含所要说明的具体内容。
HTML虽然是一种语言，但却不是如C++和Java之类的程序语言，它只是标记语言，只要明白了各种标记的用法便算学会了HTML。HTML的格式非常简单，因此任何文本编辑器都可以制作HTML页面（如记事本等），当然还有专业的HTML代码级的制作工具（如Homesite4.5等）。但目前“所见即所得”的编辑器逐渐被网站设计人员接受（如Dreamweaver等），虽然这类编辑器不需要设计者非常熟悉HTML代码，但毕竟是以HTML为基础的，有些必要的语法和页面的优化仍然要用到HTML源码。目前的编辑器并不是很完善，包括HTML4、DHTML、CSS等就需要设计者用源码输入。
2.XHTML
XHTML是“Extensible HyperText Markup Language”（可扩展超文本标识语言）的缩写。HTML是一种基本的Web网页设计语言，而XHTML则是一个基于XML的标记语言，看起来与HTML有些相像，只有一些小的但重要的区别。XHTML其实就是一个扮演着类似HTML的角色的XML。所以，本质上说，XHTML是一个过渡技术，结合了XML的部分强大功能及HTML的大多数简单特性。
2000年底，国际W3C（World Wide Web Consortium，万维网组织）公布发行了XHTML 1.0版本。XHTML 1.0是一种在HTML 4.0基础上优化和改进的新语言，它是一种增强了的HTML，它的可扩展性和灵活性将适应未来网络应用更多的需求。XML虽然数据转换能力强大，完全可以替代HTML，但面对成千上万已有的基于HTML语言设计的网站，直接采用XML还为时过早。因此，在HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。所以，建立XHTML的目的就是实现HTML向XML的过渡。目前国际上在网站设计中推崇的Web标准就是基于XHTML的应用（即通常所说的div+CSS）。
3.XML
XML是“Extensible Markup Language”（可扩展标识语言）的简写。目前推荐遵循的是W3C组织于2000年10月6日发布的XML1.0版本。和HTML一样，XML同样来源于SGML，但XML是一种能定义其他语言的语言。XML最初设计的目的是弥补HTML的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。目前在网站信息传递中常用的RSS就是典型的XML应用。
1.1.2 表现
表现主要用于对已经被结构化了的信息进行显示上的控制，包含颜色、大小等。用于表现的Web标准技术主要是CSS。
CSS是“Cascading Style Sheets”（层叠样式表）的缩写。目前推荐遵循的是W3C于1998年5月12日推荐的CSS2（参考http：//www.w3.org/TR/CSS2/）。W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。
1.1.3 行为
行为是对文档内部的一个模型定义以及交互行为的编写，用以表现行为的Web标准技术主要有DOM和ECMAScript，下面分别介绍这两种技术。（1）DOM
DOM是“Document Object Model”（文档对象模型）的缩写。根据W3C DOM规范，DOM是一种与浏览器、平台、语言的接口，使得用户可以访问页面其中的标准组件。简单理解，DOM解决了Netscape的JavaScript和Microsoft的JScript之间的冲突，给予Web设计师和开发者一个标准的方法，让其来访问站点中的数据、脚本和表现层对象。（2）ECMAScript
ECMAScript是ECMA（European Computer Manufacturers Association）制定的标准脚本语言（JavaScript）。目前推荐遵循的是ECMAScript 262。
1.2 Web标准的发展历史
Web标准的核心技术之一是HTML技术，因此提及Web标准的发展就要提到HTML技术的发展。HTML 是SGML（Standard Generalized Markup Language，标准广义标记语言）的应用，符合ISO 8879标准，是互联网的标准出版语言。
SGML是一种描述标记语言，特别是那些用于电子文档交换，文档管理和文档发布语言的语言。HTML是SGML定义的语言的一个实例。
SGML出现在80年代中期，一直保持得很稳定。稳定的原因是它有丰富的特征和具有灵活性。但是，灵活性也带来一定程度的复杂性，限制了它在多种环境下的适应性，包括World Wide Web。
HTML最初的构想是作为一种交换科学和其他技术文档的一种语言，供那些不熟悉书写文档的专家使用。HTML规定一小套结构语义标签，适于书写相对简单的文档，从而解决了SGML复杂性的问题。除了简化了文档结构外，HTML还加入了对超文本的支持，以后还增加了媒体功能。
在非常短的时间内，HTML变得广泛流行，并且很快超出了其原来的目的。HTML（标准）内部的新元素以很快的速度创造出来，HTML也被很快的改编以用于垂直的，高度专门化的市场。多余的新元素导致了文档在跨平台时的兼容问题。
随着软件和平台不一致性增加，很显然，目前HTML的最新版本HTML 4在这些平台上使用的适用性就会受到一些限制。因此，HTML 4 经过扩展、分离加上现有和未来的文档类型和模块，形成了XHTML家族。XHTML家族文档类型基于XML，它最终的目的也是被设计成基于XML方式的文档。
1.3 Web标准的优点
一些Web开发人员和Web设计师对使用Web标准持抵触态度。普遍的看法是它太难了，因为觉得不管它是怎么运作的，使用的那些软件总会创建出一些不规范的代码。因此，学习新的技术并放弃他们所熟知的技术，这很容易引起反感，并产生抵触的情绪。然而，如果很理智的观察一下现在的形势，将会发现通过学习和使用Web标准会得到许多好处。（1）更简易的开发与维护：使用更具有语义和结构化的HTML，将让设计者更加容易、快速的理解别人编写的代码。（2）与未来浏览器的兼容：在使用已定义的标准和规范的代码后，目前这个向后兼容的文本就消除了不能被未来的浏览器识别的后患。（3）更快的网页下载、读取速度：更少的HTML代码带来的将是更小的文件和更快的下载速度。如今的浏览器当处于标准模式下将比它在以前的兼容模式下拥有更快的网页读取速度。（4）更好的可访问性：语义化的HTML（结构和表现相分离）将让使用浏览器以及不同的浏览设备的读者都能很容易的看到内容。（5）更高的搜索引擎排名：内容和表现的分离使内容成为了一个文本的主体。与语义化的标记结合会提高作品在搜索引擎中的排名。（6）更好的适应性：一个用语义化标记的文档可以很好的适应于打印和其他的显示设备（像掌上电脑和智能电话），这一切仅仅是通过链接不同的CSS文件就可以完成。同样也可以仅仅通过编辑单独的一个文件就完成跨站点般的表现上的转换。
Web标准可以为网站的创建者节省时间与金钱，还可以为网站的浏览者提供一个更好的经历。此外，Web标准是未来的，如果还没有使用Web标准，那么现在应该开始动手了，否则就会落伍的。
1.4 XHTML基础
在本书的1.2.1章节中曾介绍过XHTML的基本概念，本节主要介绍XHTML较之于HTML的一些优点以及XHTML的语法、文档定义和如何转换现有的结构为XHTML。
1.4.1 XHTML标签
XHTML里有很多的标签，但是经常用到的也就是那么几个，只要掌握这几个也就可以了。下面一一介绍这些标签。（1）div标签
div在XHTML中没有什么特定的意义，可以使用在很多地方，也就是说它可以装不同的东西。div都被用来做布局之用，也有用来作为存放文章形成段落，实际上，这个做法并不是很好，因为作为文章的分段自然有一个特定的标签来用。那就是下面要讲的
标签，不过用div来整体的包住所有的段落，这是非常实用的。其正确的写法是，必须要有封口，代码如下所示：（2）p标签这是一个有特定语义的标签，表示段落，是用来区分段落的。在大部分的浏览器中对p基本上都有一个上下的边距，但是没有行首缩进。因为行首缩进只是表示段落的方式但是不是一定或是必需的，所以在用p标签的时候如果需要，可以针对p设定一下行首缩进。笔者是推荐在文章以外的地方不要使用p，因为p是有一定语义的，如果用在别的地方恐怕不合适。正确的写法是
，代码如下所示：（3）span标签span是一个非常常用的标签，这个标签可以说与div很像，没有什么特定的意义，只是span是一个级联元素，不是块级元素。可以把它看作是一个袋子，它不像箱子那样可以有自己的宽高，它的宽高只能随着内容的多少而定，所以很像是袋子。这个标签与div正好互补。正确写法是，代码如下所示：（4）ul和li标签
这是一个列表，在列表中，除了ul还有ol。但是ul通过CSS定义一样可以有ol的数字排序效果。所以笔者不推荐使用ol，有ul就可以了。ul是块级的，它的子级li也是块级标签。li标签是被ul标签包裹的，在ul标签里可以有无数个li标签，li标签不能独立使用，并且li标签一定要封口，这不光是美观问题，对于后期的维护也很有好处。很多程序员都不喜欢把这个li封口。ul列表的用处主要是列举出一维的，同一类型的数据。具体的比如使用在菜单上、文章中列数的一些条例等等。在列表中有一种特别的形式与ul是不一样的。正确的写法是
这是一个很特别的三个标签的组合。这里的dt是指标题，dd是指内容，而dl是包括dt和dd的容器。在dl里可以有很多组的dt以及dd，当出现很多组的时候尽量是一个dt配一个dd，如果dd中内容很多，可以在dd里加p标签配合使用。dl列表是一个非常好的列表形式，可以多加利用。其正确的写法是
a标签表示链接，是一个具有特定属性的，也是网页中最为神奇的标签。因为它才让无数的网页都链接在了一起。正确的写法如下所示：
其中的href是表示目标地址，title是鼠标悬停提示文字，这是可有可无的，但是有必是利大于无，代码如下所示：（7）img标签
这是图片标签，也是个具有特定属性的标签。正常写法如下所示：
这里的src是目标地址，alt与title是替换文字，alt是IE特定的，title是其他浏览器的通用的，不过记得后面的反斜线那是一定要有的，代码如下所示：（8）h标签
这是一个系列的标签，从h1到h6，主要是用来存放标题。值得注意的是这六个标签之间最好不要出现什么相互包含的情况。正确写法是：
这个标签用来给文本加粗，正确的写法是，代码如下所示：（10）em标签
这个标签与strong很像，是表示强调。一般浏览器的默认值是斜体。使用方式与strong一样。写法是，代码如下所示：
读者可能会注意到这里并没有说表单标签form，这是因为表单基本上没有什么变化，因此也没什么可特别说的。
1.4.2 XHTML的优点
XHTML是一种为适应XML而重新改造的HTML，较之于HTML有如下优点。（1）XHTML解决了HTML语言所存在的严重制约其发展的问题。HTML发展到今天存在三个主要缺点。
● 不能适应现在越来越多的网络设备和应用的需要，比如手机、PDA、信息家电都不能直接显示HTML；
● 由于HTML代码不规范、臃肿，浏览器需要足够智能和庞大才能够正确显示HTML；
● 数据与表现混杂，只有重新制作HTML才能改变页面的显示。
因此HTML需要发展才能解决这个问题，于是W3C又制定了XHTML，XHTML是HTML向XML过渡的一个桥梁。（2）XML是Web发展的趋势，所以人们急切的希望加入XML的潮流中。XHTML是当前替代HTML4标记语言的标准，使用XHTML 1.0，只要小心遵守一些简单规则，就可以设计出既适合XML系统，又适合当前大部分HTML浏览器的页面。这个意思就是说，设计者可以立刻设计使用XML，而不需要等到人们都使用支持XML的浏览器。这个指导方针可以使Web平滑的过渡到XML。（3）使用XHTML的另一个优势就是它的严密性。当前网络上的HTML的糟糕情况让人震惊，早期的浏览器接受私有的HTML标签，所以人们在页面设计完毕后必须使用各种浏览器来检测页面，看是否兼容，往往会有许多莫名其妙的差异，人们不得不修改设计以便适应不同的浏览器。而XHTML具有严密的特性，因此使用XHTML可以避免这种情况的发生。（4）XHTML能与其他基于XML的标记语言、应用程序及协议进行良好的交互工作。同时，XHTML是Web标准家族的一部分，能很好工作在无线设备等其他用户代理上。（5）在网站设计方面，XHTML可帮助设计者去掉表现层代码的恶习，养成利用标记校验来测试页面的工作习惯。
1.4.3 XHTML的良好编写习惯
XHTML比HTML要求严格了许多，最显著的是XHTML要求所有的标签都是闭合的。像
1.所有的标记都必须要有一个相应的结束标记
以前在HTML中可以打开许多标签，例如
和
2.属性名字必须小写
与HTML不同，XHTML对大小写是敏感的，
同时，值得注意的是，在XHTML中，大小写夹杂也是不被认可的，通常Dreamweaver自动生成的属性名称“onMouseOver”也必须修改成“onmouseover”。
3.所有的XHTML标记都必须合理嵌套
同样因为XHTML要求有严谨的结构，因此所有的嵌套都必须按顺序，以往在HTML中可以按如下顺序嵌套标记：
但在XHTML中则必须修改为如下嵌套顺序：
这就是说，一层一层的嵌套必须是严格对称。
4.属性值必须用双引号括起来
在HTML中，可以不给属性值加引号，但是在XHTML中，它们必须加引号，例如，如下为错误代码：
符合XHTML规则的代码如下所示：
5.属性的缩写被禁止
在HTML中，常常会使用属性的简写方式，如下所示：
而在XHTML中上述写法都是不正确的，必须要使用完整的写法，正确写法如下所示：
6.把所有<和&特殊符号用编码表示（1）任何小于号（<），不是标签的一部分的，都必须被编码为<；（2）任何大于号（>），不是标签的一部分的，都必须被编码为>；（3）任何与号（&），不是实体的一部分的，都必须被编码为&；
注意
以上字符之间无空格。
7.用id属性代替name属性
在HTML 4.01中为applet、frame、iframe、img和map定义了一个name属性，在XHTML里name属性是不能被使用的，应该用id来替换。例如，如下为定义了name属性的错误代码。
应该替换为如下代码：
注意
为了使旧浏览器也能正常的执行该内容，也可以在标签中同时使用id和name属性，如：
8.不要在注释内容中使用“-”“-”只能发生在XHTML注释的开头和结束，也就是说，在内容中就不再有效。例如下面的代码是无效的。
应该用等号或者空格替换内部的虚线，如下所示：
以上这些规范有的看上去比较奇怪，但这一切都是为了使编写出的代码有一个统一、唯一的标准，便于以后的数据再利用。因此养成一个良好的XHTML编写习惯可以为后面的工作打下坚实的基础。
1.4.4 文档类型
文档类型DOCTYPE是“document type”的简写，用来说明用的XHTML或者HTML是什么版本。
其中的DTD（例如xhtml1-transitional.dtd）叫文档类型定义，里面包含了文档的规则，浏览器根据文档定义的DTD来解释页面的标识，并展现出来。
1.文档类型声明
要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分；除非XHTML确定了一个正确的DOCTYPE，否则其中的标识和CSS都不会生效。
因此，在XHTML中必须声明文档的类型（DOCTYPE），以便于浏览器知道文档是什么类型的，而且声明部分要加在文档的head之前，如下所示：
在上述代码中可以看到，XHTML属性都是在标签里面。然而当在“www.w3.org”上验证时，并不解释文档有没有声明类型。这是因为“xmlns=http：//www.w3.org/1999/xhtml”是一个固定的值，如果没声明的话，它也会被自动的加到标签前。
注意
DOCTYPE声明不是XHTML文档的一部分，它也不是文档的一个元素，所以没必要加上结束标签。
在使用文档类型时的基本结构如下所示：
试读结束[说明：试读内容隐藏了图片]