XXSS与插件如何使用插件.docx

1、XXSS与插件如何使用插件第1章如何使用插件 由于CSS得到了所有主流浏览器的支持，因此，大家认为使用它就像使用文本编辑器和Web浏览器一样容易。虽然可以这样想，但如果希望生成在所有主流浏览器上都能最佳显示的页面，实际上还要考虑很多事情。首先，尽管几乎所有Web浏览器都支持CSS，但在实现特定功能的方式上它们之间还是有差异的，包括元素周围的空间，甚至元素的大小。这意味着需要在所有主流浏览器上测试Web页面，以确保它们在所有情况下都能很好地显示。因此，如果使用Mac OS X或其他操作系统(如Linux)，那还需要能访问Windows计算机，因为Internet Explorer目前的版本只支持

2、Windows操作系统。1.1 下载和安装Web浏览器表1-1列出了5种主流Web浏览器及它们的Internet下载地址。尽管所有这些浏览器都可在Windows PC上安装，但它们并不都支持OS X或Linux。这些URL处的网页是智能的，会根据操作系统提供相应的下载版本(如果支持)。在准备学习本书之前，笔者建议你尽可能将这些浏览器都安装到你的计算机上。如果运行的是XP或以上版本的Windows系统，那就能够安装所有浏览器，但在其他操作系统上，想都安装则不太容易。例如，在Mac OS X上(因为针对Mac的IE只开发到了版本5，其后已就没有开发了)，可以安装除Microsoft Interne

3、t Explorer之外的所有浏览器。尽管可以在Mac上安装Wine软件的执行部分Windows应用程序，如使用它运行Internet Explorer，但笔者发现这一过程比较费力且结果不一致。因此，笔者不建议采用这一方法。也不建议依赖那些在不同的浏览器中对Web页面进行屏幕截图的网站，因为它们不能告诉你鼠标、键盘和其他功能是否工作良好或者根本不工作。最好的选择是进行双系统(Windows和Mac OS X)安装，或是确保能访问Windows PC。毕竟，除非特意针对Mac计算机开发，否则使用Windows操作系统的用户还是占大多数。至于Linux，它不但不能访问Internet Explor

4、er，而且也没有Safari版本，不过所有其他的浏览器都支持Linux系统。和OS X一样，尽管存在集成Wine来运行Internet Explorer的各种解决方案，但它们只适用于部分发布版本，要想找到在Linux上运行Windows浏览器的完美方法还是有点困难的。因此，如果你准备在非Windows计算机上进行开发，应保证它能访问Windows PC或者在安装主操作系统的同时安装Windows实现双启动(或作为虚拟机)，这样可以在将Web站点发布到Web之前对其进行完全测试。表1-1 Web浏览器的下载URL以及支持的操作系统Web浏览器下载URLWindowsMacLinuxApple S

5、afariGoogle ChromeMicrosoft Internet ExplorerMozilla FirefoxOpera1.2 老版本的Microsoft Internet Explorer虽然Internet Explorer的最新版本(在写本书时是IE8，不过IE9也在开发当中)能与其他主流浏览器非常好地兼容，但仍有大量运行IE7甚至IE6的用户。据统计，截至2010年中，浏览器的使用率如图1-1所示。图1-1 截至2010年6月的浏览器市场份额由于Internet Explorer的每个版本的工作方式不尽相同(IE6和IE7约有超过25%的用户)，因此除了在主流浏览器的最新版本

6、中测试Web页面外，还需要在这些较老版本中测试。我们知道这很痛苦，但又必须去做。幸运的是，有使其变简单的方法。1.2.1 模拟IE6和IE7为了帮助设计Web站点的开发人员专门针对较老版本做些工作，Internet Explorer的开发人员创建了元标记，可将其添加到Web页面的头部，从而让IE知道它是较老的版本。下面是两个主要的元标记。下面是如何使用IE7标记的例子：My Website. Website Contents .没有IE=6选项(可能因为IE5和IE6的呈现引擎是类似的)，因此使用IE=5选项使Internet Explorer进入所谓的特殊模式。在该模式下，其行为类似于IE5

7、和IE6。顺便提一下，如果想强制Internet Explorer进入完全标准模式(即尽可能与其他浏览器兼容)，可使用选项IE=8。或者，没有元标记，Internet Explorer将使用其自己的、专有的优化设置，即边缘模式也可以选择IE=edge。当然，一旦完成测试，除非有特殊理由，应删除或注释掉这些元标记。另外，应总是确保在每个文档的开头有一个合适的HTML文档类型声明。例如，最常见的文档类型如下所示，它是经过完全测试的，适用于本书中所有插件。提示：如果使用不同于此的文档类型，特定的插件可能有不同的行为，因而必须对其稍作修改。笔者经常使用前面所示的“松散”文档类型和IE7元标记获得与其他

8、主流浏览器最大的兼容。记住，如果你的Web页面在所有其他浏览器中都正常工作但在IE中行为怪异，那么解决方案就是修改文档类型和IE5/IE7元标记。如果对浏览器兼容性和它们间各种细微差别感兴趣，可访问Quirks Mode网站(quirksmode.org)。1.3 配套网站为了省去输入插件代码的工作，可从本书的配套网站()下载插件，如图1-2所示。单击Download链接下载文件plug-ins.zip，这是个包含了所有插件的压缩文件(在所有操作系统中都可解压缩)。解压缩之后，可看到所有插件按数字顺序保存在PC.css文件中。还有一个名为ReadMe.txt的文件，该文件包含了有关插件的最新信

9、息，包括自本书出版后所做的所有改进或更新。另外，还包含有演示每个插件用法的各种示例文件，可将它们加载到浏览器中测试。同时还有两个JavaScript文件PJ.js和PC.js，本章最后一节在介绍JavaScript时将对这两个文件进行说明，第12章中的插件将会使用它们。图1-2 配套网站警告：默认情况下，Windows计算机可能不显示文件扩展名，除非启用这一功能。在这种情况下，文件将显示为index(而不是index.html)或PC(而不是PC.css)等。1.4 关于文档对象模型当HTML出现时，一个重要的设计决定是将其基于DOM(Document Object Model，文档对象模型)

10、。这是一种将Web页面中的不同元素分成单独对象的方法，每个对象有其自己的属性和值。这是个明智的决定，因为这样就引入了样式表，使得Web页面的内容与其样式完全分开，同时使HTML文档易于用如JavaScript这样的语言修改，从而提供动态用户交互功能。当将Web页面放入DOM中时，用CSS样式化其每个部分是很容易的。例如，每个标题将位于像这样的标记对中，单个CSS指令就可以设置文档中所有这样的标记的样式，如可以改变使用的字体、字体大小及任意字体修饰等。这样就可以完全改变页面设计而不修改HTML，正如在后面的一些插件中将看到的，一些样式设置甚至可以使页面元素在鼠标划过时有动态效果(例如，改变其颜色

11、和其他属性)或使用专门的浏览器扩展创建渐变效果。1.4.1 DOM的工作原理DOM将HTML文档的各个部分组成一个对象层次结构，每个对象有其自己的属性。术语“属性”用于表示对象的特性，如对象包含的HTML、对象宽度和高度等。最外层的对象是window对象，它表示的是当前浏览器窗口、tab、iframe或弹出式窗口。在其下是document对象，可以有多个文档(例如将几个文档加载到同一页面的不同iframe中)。在文档中有一些其他对象，如页面头部和主体等。在页面头部中，又有其他对象，如标题和元对象，而主体对象可包含大量其他对象，包括标题、锚、表单等的HTML标记。图1-3显示了示例文档的DOM表

12、示，其头部有一个标题Hello和一个元标记，其主体部分有3个HTML元素(链接、表单和图像)。当然，即使是最简单的Web页面，其结构也比这里的复杂，这里只是用于演示DOM的工作原理。从最外部开始是窗口，其中有一个文档，在该文档中是各种元素或对象，它们互相联系。在图1-3中，属性用较黑的背景和斜体表示。例如，值robots是name的属性，name又是meta的属性，依此类推。尽管图中没有显示，元标记应还有另一个匹配的属性content，该属性包含一个字符串，指定哪个机器人可以访问Web页面的内容。其他属性包括(它是href标记的属性，href又是a的属性，依此类推)和Hello(它是title

13、的属性)。所有其他项均是对象或对象参数名。如果将图1-3向纵向和横向扩展，则将显示出其他对象和属性。图中两个这样的地方用断开的虚线表示。图1-3 显示头部和主体部分的DOM示例如果将该DOM示例表示成HTML代码，头部的结构如下所示：HelloHTML的主体部分如下所示：Visit Googleor enter your username and password to continue.记住，HTML的这两个部分是同一文档的一部分，我们将它们放在标记中，如下所示：HelloVisit Google,or enter your username and password to continue

14、.当然，实际的Web页面可能与此完全不同，但它们常采用同样的形式。尽管并不总是这样，因为大部分浏览器比较宽容，允许省略一些内容，如末尾的结束标记及开始标记等。不过，笔者不建议这样做，因为后面你还有可能将页面转换成XHTML，而后者要严格得多。因此，闭合每个标记并确保顺序正确是个好习惯。例如，不应将放在后面来闭合文档，因为这样的标记嵌套顺序是不正确的。同理，应有自关闭没有结束标记的标记的习惯。如，它没有匹配的标记，因此，要求在最后的符号之前有一个/字符以正确关闭它。同样，变成等。还应记住，标记中的参数必须由单引号或双引号引起来，以实现与XHTML的兼容，尽管几乎所有浏览器都允许省略它。注意：在W

15、eb早期，大部分用户使用非常慢的拨号调制解调器，所以经常看到在Web页面中省略引号和各种标记的现象。但如今，大部分用户获得了相当不错的带宽速度，因而也就不需要这样做了。1.5 关于CSS使用CSS，可以按自己的意愿对Web页面应用样式。这是可行的，因为CSS是与DOM相联系的，因此可以快速而容易地改变元素样式。例如，如果不喜欢、等标题标记的默认样式，可以指派新样式来覆盖所使用的字体系列和大小的默认设置，或决定是否设置粗体或斜体及许多其他属性。给Web页面添加样式的一种方式是将所需的语句插入到Web页面的头部中，即和标记之间。因此，要改变标记的样式，可使用下列代码：h1 color:red; f

16、ont-size:3em; font-family:Arial; 在HTML页面中，结果如下所示(见图1-4)：h1 color:red; font-size:3em; font-family:Arial; Hello WorldHello there图1-4 样式化标记，小窗口中显示的是原样式1.5.1 导入样式表当希望样式化整个站点而不是单个页面时，较好的管理样式表的方法是将它们完全从Web页面中移除，放到单独的文件中，然后导入需要的文件。这样针对不同的布局(如Web布局和打印布局)就有了不同的样式表，而不会改变HTML。可以通过两种不同的方法达到此目的，一种是使用CSS的import指令

17、，如下所示：import url(/css/styles.css);这一语句告诉浏览器从/css文件夹中取出名为styles.css的样式表。import命令是非常灵活的，如可以创建导入其他样式表的样式表等。但要确保在任何外部样式表中没有或标记，否则就不行。1. 从HTML内部导入CSS也可以用HTML标记包括进样式表，如下所示：这与import指令的效果是一样的，除了是个HTML标记，而不是个有效的样式指令外。因此，它不能用于从一个样式表中导入另一个样式表，也不能放在标记对中。正如可以在CSS中使用多个import指令包括多个外部样式表一样，也可以在HTML中使用任意多条语句。1.5.2 局

18、部样式设置也可以分情况单独设置或覆盖当前页面上的特定样式，方法是直接在HTML中插入样式语句，如下所示(该样式语句使标记中的文本为蓝色斜体)：Hello但这应只限于最特殊的情况，因为它破坏了内容和布局的分离性。1.5.3 ID和类设置元素样式的更好方法是在HTML中给它赋一个ID，如下所示：Hello该语句声明了ID为iblue的div元素的内容应采用在相应#iblue样式设置中定义的样式。匹配的CSS语句如下所示：#iblue font-style:italic; color:blue; 注意符号#的使用，它指定只有名称为iblue的ID用这一语句样式化。如果想对多个元素应用同一样式，不必给

19、每个元素都指定一个不同的ID，可指定一个类对它们一起进行管理，如下所示：Hello其声明了这个元素(及其他使用该类的元素)的内容应采用在相应iblue类中定义的样式。如果应用类，可在页面头部或在外部样式表中使用下列样式设置为类设置样式：.iblue font-style:italic; color:blue; 类语句不使用#符号(这是为ID保留的)，而是以(.)符号开头。注意：除了使用单个ID或类外，还有很多对元素应用样式的方式。第2章有详细介绍。1.6 CSS和分号当CSS语句出现在同一行中时，为了分开它们，必须在每条语句后加分号。但如果一行上(或在HTML标记内部的内联样式设置中)只有一条

20、语句，则可以省略分号。为了避免导致难以发现的CSS错误，在开发样式表时，最好总是在每个CSS设置后使用分号。后面如果需要优化样式表以获得最大的下载速度和最小的尺寸，仅删除不需要的分号即可。1.7 在自己的网站中使用插件从网站下载了plug-ins.zip文件后(并作了解压缩)，这里推荐的访问方式是将存储在PC.css文件中的整个插件集作为外部样式表加载，使用的命令如下所示：这里，/css是保存文件的文件夹(相对于当前文件夹)，PC.css是样式表的文件名(P和C是Plug-in和CSS的缩写)。这种包含方法确保了可以向需要额外插件的Web页面中添加新元素，而不必单独地进行复制和粘贴。这个文件的

21、大小与中等图像相当，下载速度和所需的带宽也差不多，因此包括进整个文件通常不是个问题。但如果只需要包括其中一些插件，则清楚地标注它们，并轻松地将它们复制和粘贴到另一个样式表或是Web页面的部分中。注意：有些JavaScript支持的插件需要几行HTML代码才能包含进来。如果想使用它们，可以参考1.8节的内容。1.7.1 类名冲突为了使插件易于访问，笔者总是尽量使用简短的、自说明的类名，甚至包括了大量单字母名的类，如i(对文本应用斜体)。不过，如果你自己或第三方的样式使用了任一相同的类名，那(根据第2章要介绍的规则)该类将获得优先权，其他样式只能局部实现(如果有的话)。在这种情况下，不能同时使用两

22、者。1.8 JavaScript支持的插件本书中的一些插件完成的事情可能单用CSS不能完成，它们通过使用两个JavaScript插件库来完成。这两个插件库分别是来自配套书Plug-in JavaScript中的PJ.js和专为本书而写的PC.js。PJ.js中的函数提供了大量的定位、调整大小和转换效果，然后由PC.js中的函数实现各种增强的CSS效果。使用这些库非常容易，在相关小节中也有详细解释，也就是在Web页面的头部包含下列HTML代码行：这行代码从当前文件夹(但也可从任何地方导入它们)加载库并执行基本的初始化。这些文件也包含在可通过网站下载的plug-ins.zip文件中。1.8.1 将

23、JavaScript支持的CSS与纯CSS同时引用为了使用本书中的所有插件(包括纯CSS和JavaScript支持的CSS)，同时为了不必总是想着要导入它们，笔者建议将下列两行代码添加到使用它们的所有Web页面的头部：记住，如果从非当前文件夹的其他地方导入文件，要用正确的路径引用文件名。注意：有一个名为PJsmall.js的较小版的PJ.js文件，该文件也可从plug-ins.zip下载中获得。它包含了所有相同的函数，工作方式也相同，只是被压缩为PJ.js文件的二分之一。因此，在文件大小或可用带宽成问题的情况下，可使用这个较小的文件。1.8.2 禁用JavaScript的用户使用JavaScr

24、ipt支持的插件有一个不利方面，因为少量用户在浏览器中禁用JavaScript。因此你可能选择不使用JavaScript支持的插件，这太令人遗憾了，因为它们提供了一些非常好的增强功能。可以包括如下所示的HTML代码段，要求用户在网站上启用JavaScript(在这种情况下，应记住那些不能很好降级的增强功能只是对禁用JavaScript的用户不可用)：JavaScript EnhancedThis website is enhanced with JavaScript and you will be able toview it at its best only if you enable JavaScript in your browser.另外，更友好的方法(虽然要多花些时间)是在每次使用JavaScript支持的CSS时都提供这样一个HTML代码段。这样，非JavaScript用户将感觉不到有区别。1.9 小结至此，你应对样式表的工作原理、CSS与DOM如何相关及如何导入插件有了一个基本的了解。下一章，我们将讲述CSS速成法。学习完该章，你将能理解并使用本书中的所有插件，也能够通过调整或扩展它们创建自己的变体形式。欢迎您的下载，资料仅供参考！