HTML5与CSS3设计模式——引　　言

本书主要介绍使用CSS3为HTML5网页添加样式的方法。书中包含了350多个可以拿来立使用的设计模式。每一个设计模式都是模块化和可定制的，通过组合运用它们，可以创建出无数的设计方案。 　　每一个设计模式都经过了全面测试，能够在所有主流Web浏览器上正常运行，这些浏览器包括Chrome、Firefox、Internet Explorer、Opera和Safari。本书的内容都非常实用，所有内容都是经测试可行的。学习本书，读者不需要在多个浏览器上反复地修改、调试和测试网页内容。 　　使用这些设计模式也非常简单，只需将本书所提供的代码复制粘贴到自己的代码中，再对一些值稍加调整，就能够复用某个设计模式。读者很快就会学习到哪些值可以修改，以及这些值会产生什么效果，从而创建出真正满足需要的样式和布局——而且它们是一定能够正常运行的。 　　本书并不只是一本手册。它不仅系统介绍了多个实用的CSS特性，而且将这些特性与HTML相结合，创造出了一些可复用的设计模式。每一个设计模式都有一个直观名称，以便于查找、记忆和交流。书中每一个设计模式、示例和源代码都是经过精心编制的，融入了无障碍设计和最佳实践。 　　读者可以通读本书，也可以将它作为参考书，或者用它来查找合适的解决方法。每一个例子都带有一幅屏幕截图以及所有相关的HTML和CSS代码，读者能从中直观地了解每一个设计模式的工作原理。同时，每一个设计模式都配备详细说明，所以例子的学习是很简单的。 　　本书按主题来组织设计模式，并且对所有可用的CSS规则进行了其他书所没有的深入而具体的介绍。所有设计模式都易于理解，并且符合最佳实践，因此本书值得读者从头到尾细细品味，也很适合作为设计和编写代码时的参考资料。 　　本书将帮助读者提高Web设计和开发的效率，激发创意。设计模式就像积木一样，以无数不同的组合方式可以创造出各种设计结果。它们就像是工具箱里的工具，而本书就是要向读者提供大量工具，以帮助读者快速有效地解决问题。读者不需要对这些解决方法进行太大修改，因为本书将会讲解如何结合使用效果可预期的模式来进行可预见式设计。 　　读者对象 本书是专门为熟悉CSS和HTML的读者编写的。它适合于以下读者：读过CSS和HTML入门书籍的新手，曾经用过CSS但由于达不到效果而放弃的设计者和开发者，希望进一步提高CSS技能的专业人员，以及所有希望不需要测试所有浏览器而快速完成设计的人们。 　　我们假定读者了解CSS和HTML编码的基础知识。如果你只能够使用一些所见即所得的设计工具（如Dreamweaver或FrontPage），而从未接触过HTML或CSS代码，那么你可能无法理解本书的代码。 　　如果你喜欢通过示例学习，喜欢了解代码的工作原理，并且熟悉CSS和HTML，那么你一定会喜欢本书。 　　有一些设计模式使用了JavaScript。为了完全理解这些设计模式，读者需要了解JavaScript基础知识，但是使用这些模式却并不需要了解JavaScript。最重要的是，读者不需要知道JavaScript就能够理解和使用其余340多个设计模式，因为这些设计模式与JavaScript完全无关。 　　本书创新点 本书提到了一些创新性的概念、术语和技术，但它们并非无中生有：主流浏览器都已经内置了这些技术，CSS规范也已经定义了这些概念，而且这些术语也已被广泛使用。所谓创新，是指在展示CSS与HTML功用方面，本书的定义和使用方式有所突破。换言之，它们之所以具有创新性，是因为它们能够简化CSS和HTML的学习、理解与使用。这些概念改变了人们对CSS和HTML的看法，而这一点至关重要。而且，本书介绍的许多设计模式都具有创新性，因为它们组合使用了多个属性和元素，采用全新的方法解决了一些难题。 　　6种框模型 本书的第一个创新点是在CSS中使用了多达6种框模型。CSS通常只使用一种框模型来定义常用的属性和行为。单个框模型非常实用，但却过于简单。在多年的实践中，我们发现框模型属性的效果会因框类型而不同。 　　这也是许多人认为CSS很难使用的原因之一。框模型似乎很简单，但是当使用一种框模型属性时（如width），它有时候会正常工作，而有时候则会出现意料之外的结果。例如，width属性可用来设定块级框的内部宽度，但是用在表格框时，它设置的是外边框宽度，而对行内框不起任何作用。 　　为了避免用一种非常复杂的框模型来处理不同的行为，我们定义了6种简单的框模型，分别规定每一种框的表现。第4章将介绍这6种框模型，它们分别是行内型、行内块级型、块级型、表格型、绝对型和浮动型。因为总是明白使用的是哪一种框模型，所以我们就一定知道每一种模型属性的表现效果。 　　而且，每一种框模型都定义了特有的排列或定位方式。例如，行内框采用水平排列方式，在行末换行。块级型框则采用垂直排列方式。表格型框按照行和列的单元格进行排列。浮动型框采用水平排列方式，紧靠其他浮动控件的下端，但是将行内框和表格推离原位。绝对和固定位置型框则没有排列规则，它们不采用任何一种排列方式，而是根据离它们最近元素的位置进行相对定位。 　　框模型范围 本书的另一个创新点是采用了3种设置框尺寸的方法：设定尺寸、收缩对齐或拉伸（参见第5章）。每一种框都需要组合使用不同的属性和属性值，才能够变成设定尺寸型、收缩对齐型或拉伸型。第5章～第9章介绍的各种设计模式详细说明了这3种方法。这3个术语并不是CSS官方术语，但是CSS的正式规范中却隐含了这三个概念，分别用“尺寸”（size）、“收缩到合适”（shrink-to-fit）和“拉伸”（stretch）表示[ 在CSS 2.1规范中，第8、9、10、11、17、18章共出现15次“size”（尺寸）和“sized”。这使人感觉方框是有尺寸的。 在CSS 2.1规范的第9章和第10章中，“shrik”（收缩）和“shrink-to-fit”（收缩到合适）共出现9次。 不同的方框可以根据内容进行伸缩的想法在10.3.5节～10.3.9节和17.5.2节均有描述。 在第9章和第16章中，“stretch”（收缩）和“stretched”出现了4次。拉伸方框以适应其容器的想法在下面这段引用文字（楷体）中被顺便提到：“许多方框位置和尺寸都是根据称为‘容器块’的矩形框边界计算得到的。”（参见9.1.2节、9.3.1节和10.1节。） ]。 　　当然，设定尺寸、收缩对齐和拉伸并不是新概念。这里所指的创新之处在于本书对这3个术语进行了清晰的定义，说明了它们为何既是CSS的基础特性又是CSS设计模式的重要生成器。 　　框模型位置 另一个创新点是关于框相对于其容器或相邻兄弟元素的3种定位方式：缩进（或外凸）、相对相邻兄弟元素偏移或相对容器对齐和偏移（参见第8章）。CSS规范主要规定了元素偏移定位方式，关于元素对齐定位方式讨论较少（参见CSS 2.1规范的第9章），根本没提元素的缩进方式，不过它的规则支持这种方式。 　　缩进、偏移和对齐是3种不同的效果。例如，缩进框是会伸缩的，它的外边距会收缩它的宽度，而对齐框具有固定尺寸或者收缩对齐，它的外边距不会收缩宽度。对齐和缩进框会与它们的容器对齐，而偏移框则相对它们的容器或同级元素偏移指定距离。 　　各种框的缩进、偏移和对齐需要通过属性和属性值的不同组合来实现。第8章和第9章的设计模式说明了这一点。 　　当然，缩进、偏移和对齐并不是新概念。本书的创新之处在于对这3个词汇进行了清晰定义，并且说明了它们为何既是CSS的基础特性又是CSS设计模式的重要生成器。 　　列布局 另一个创新点是提炼出浏览器内置的12个对表格列进行自动布局的方法，并对它们进行了命名和解释（参见第16章）。 　　所有主流浏览器都包含了这些强大的列布局特性。它们在主流浏览器中都是可用的，而且非常可靠。虽然我们不推荐在表格中使用页布局[ 使用表格进行布局会影响视障用户的访问，而流动布局技术（参见第17章）则完全不同，访问友好性优于表格。 ]，但是列表数据仍然需要设置布局，并且我们可以利用这些列布局优化列表数据的表现。 　　流动布局 另一个创新点是流动布局（参见第17章）。流动布局也不是新概念，但是通常需要反复试验才能成功。在第17章，我们将提出4个简单的设计模型，它们可用于创建复杂的流动布局，而且保证兼容主流浏览器。 　　这些设计模式包括由外而内框、浮动节、浮动分隔区和流动布局，它们使用浮动和百分数宽度实现流动布局，但是它们不会出现以前常常遇到的问题，如容器挤压、浮动错列及百分数不当引起浮动元素重叠[ 在元素浮动上，Internet Explorer 6存在许多bug。遗憾的是，虽然流动布局设计模式在大多数情况下能够规避这些bug，但是现在仍然没有一种方法能保证完全规避这些bug。幸好，Internet Explorer 7已经修复这些bug。 ]。 　　流动布局设计模式不需要使用表格就能够实现各种类似于表格分栏的布局。而比表格更好的是，这些布局会自动调整宽度，自动将列换到下一行，从而在较窄宽度下也能正常显示。 　　事件样式化 另一个创新点是将在第17章介绍的事件样式化JavaScript框架。这是一个简单而强大的开源框架，可以用动态和交互的方式设置文档样式。通过使用最新的最佳实践，HTML代码可以完全与JavaScript代码分离，实现最高的易用性，并且所有样式都交由CSS实现。此外，这个框架支持在JavaScript中选择元素，而且使用的元素选择器也与CSS完全相同。这大大简化和统一了为动态HTML文档添加样式和脚本的工作。 　　通过这个框架，本书介绍了整合JavaScript、CSS和HTML的方法，读者可以交互地使用样式。当然，如果读者不愿意使用JavaScript，那么可以跳过第17章介绍的5个JavaScript设计模式和第20章介绍的2个JavaScript模式——其余343以上的个设计模式都没有使用JavaScript。 　　组合HTML5和 CSS3来创建设计模式 本书最后也是最普遍的一个创新点是，通过组合一般类型的HTML元素和CSS属性来实现设计模式。本书在第2章中定义了4种主要的HTML元素类型（结构块、终止块、多功能块和行内块），并在第4章中将它们对应到6个框模型（行内型、行内块级型、块级型、表格型、绝对型和浮动型）。 　　每一个设计模式都说明了应用到各种HTML元素的方法。换言之，一个设计模式不仅是支持特定元素的方法，它还是能够应用到所有同类型HTML元素的模式。 　　例如，第18章的浮动下沉设计模式使用了块级和行内元素，但是它并没有规定必须使用哪些块级和行内元素（参见代码清单1）。例如，我们可以使用段落作为BLOCK元素，使用SPAN作为INLINE元素（参见代码清单2），或者使用DIV作为BLOCK，而〈strong〉作为INLINE，等等。 　　在一些特殊情况中，设计模式可能会规定一个明确的元素，如〈span〉。这是因为这种特定的元素是最佳解决方案、唯一解决方案或者极为常用的解决方案。即使是这样，通常也可以用其他同类元素替换这种特定的元素。 　　1. 代码清单1. 浮动首字下沉设计模式 HTML 〈BLOCK class="hanging-indent"〉〈INLINE class="hanging-dropcap"〉 text 〈/INLINE〉〈/BLOCK〉 CSS .hanging-indent { padding-left:+VALUE; text-indent:-VALUE; margin-top:±VALUE; }.hanging-dropcap { position:relative; top:±VALUE; left:-VALUE; font-size:+SIZE;line-height:+SIZE;} 2. 代码清单2. 浮动下沉首字示例 HTML 〈p class="hanging-indent"〉〈span class="hanging-dropcap" 〉H〈/span〉anging Dropcap.〈/p〉 CSS .hanging-indent { padding-left:50px; text-indent:-50px; margin-top:-25px; }.hanging-dropcap { position:relative; top:0.55em; left:-3px; font-size:60px;line-height:60px;} 本书约定 本书中每一个设计模式都采用以下约定。 　　所有大写符号都必须用实际值替换。（注意：代码清单1的大写符号在代码清单2中都被替换为了具体的值。） 大写的元素必须相应地替换成所选择的元素。除非确定修改后仍然能产生相同的框模型，否则不要修改写元素名。下面是常用的元素占位符。 ELEMENT　表示任意类型的元素。 INLINE　表示行内元素。 INLINE_TEXT　表示〈span〉、〈em〉或〈code〉等包含文件内容的行内元素。 BLOCK　表示块级元素。 TERMINAL_BLOCK　表示终止块元素。 INLINE_BLOCK　表示行内块级元素。 HEADING　表示〈h1〉、〈h2〉、〈h3〉、〈h4〉、〈h5〉和〈h6〉。 PARENT　表示可作为子元素有效父级的元素。 CHILD　表示可以作为父级元素有效子级的元素。 LIST　表示任意的列表元素，包括〈ol〉、〈ul〉和〈dl〉。 LIST_ITEM　表示列表项，包括〈li〉、〈dd〉和〈dt〉。 需要替换的选择器也是大写的。除非是同时对HTML模式进行了修改（如修改了类名），否则不要修改选择器中的小写符号。下面是常用的占位符。 SELECTOR {}　表示任意的选择器。 INLINE_SELECTOR {}　表示用于选择行内元素的选择器。 INLINE_BLOCK_SELECTOR {}　表示用于选择行内块级元素的选择器。 BLOCK_SELECTOR {}　表示用于选择块级元素的选择器。 TERMINAL_BLOCK_SELECTOR {}　表示用于选择终止块元素的选择器。 SIZED_BLOCK_SELECTOR {}　表示用于选择设定尺寸块元素的选择器。 TABLE_SELECTOR {}　表示用于选择表格元素的选择器。 CELL_SELECTOR {}　表示用于选择表格单元格元素的选择器。 PARENT_SELECTOR {}　表示用于选择设计模式中父级元素的选择器。 SIBLING_SELECTOR {}　表示用于选择模式中子元素的选择器。 TYPE {}　表示一种按类型（如h1或span）选择元素的选择器。 *.CLASS {}　表示按类名选择元素的选择器。 #ID {}　表示按ID进行选择的元素选择器。 所有需要替换的值都用大写符号表示。如果一个值包含小写符号，那么不要修改这部分值。下面是常用的值占位符。 一些值是字面值，不需要替换，如0、-9999px、1px、1em、none、absolute、relative和auto。这些值总是小写的。 +VALUE　表示大于或等于0的非负度量值，如0、10px或2em。 -VALUE　表示小于或等于0的非正度量值，如0、-10px或-2em。 ±VALUE　表示任意度量值。 VALUEem　表示em度量值。 VALUEpx　表示像素度量值。 VALUE%　表示百分数比度量值。 VALUE_OR_PERCENT　表示一个度量值或百分比值。 WIDTH STYLE COLOR　表示多个属性值，如border值。每一个值都用大写符号表示。 url("FILE.EXT")　表示背景图像，请将FILE.EXT替换为图像的URL。 CONSTANT　表示有效的常量值。例如，white-space支持3个常量值：normal、pre和nowrap。为了方便起见，我们通常用大写字母列举有效的常量值，每个值之间用下划线连接，如NORMAL_PRE_NOWRAP。 ABSOLUTE_FIXED　表示可以从中选择值的一组常量值。各个常量值用下划线分隔。例如，position的全部值包括static、relative、absolute和fixed。如果一个设计模式只支持absolute和fixed，那么这个模式会规定为position:ABSOLUTE_FIXED。如果它支持全部４个值，那么它会规定为position:STATIC_RELATIVE_ABSOLUTE_FIXED或position:CONSTANT。 -(TAB_BOTTOM + EXTRA_BORDER + EXTRA_PADDING)　是一个公式例子，我们可以将它替换为一个计算所得值。公式中的大写符号源于设计模式。例如，如果将TAB_BOTTOM、EXTRA_BORDER和EXTRA_PADDING都赋值为10px，那么公式可以替换为值-30px。 本书用法 本书可以作为CSS学习资料。读者可以通过阅读本书来提高自身的CSS技能，以及从设计模式中学习大量宝贵知识。在结构编排上，书中每一章内容都基于本章前面及上一章的设计模式。另外，每一章和每一个设计模式都是相对独立的，读者可以任意选择阅读某一章或某一个设计模式，以掌握某个特定的主题或技术。 　　本书可以作为参考书。书中介绍了所有实用的CSS属性，并且通过例子说明了它们的用法。更重要的是，许多属性在与其他属性组合使用时都可以产生不同的效果。每一个设计模式确定和描述了一种能够产生具体结果的特殊属性组合。因此，本书不仅是介绍CSS属性工作方式的参考书，也是介绍CSS属性组合使用方式的参考书。 　　本书可以用来通过实例学习。因为本书中的所有例子都符合最佳实践，所以只需要学习这些例子，读者就能够学习良好的习惯和技术。为了方便通过实例学习本书，读者可以通过“另请参阅”部分学习所有相关的设计模式。从中，读者可以轻松学习到更多的实例，了解特定CSS属性或特性在特定场景下的用法。 　　本书还可以作为一本实用方案手册，帮助读者创建设计样式或解决问题。设计模式是按主题组织的，读者可以快速查找相关的解决方案。 　　我们还对本书进行了其他方面的设计，以方便读者寻找需要的解决方案。读者可以使用目录、每章概述、设计模式名称和每个设计模式的“另请参阅”部分，快速查找属性、模式、答案和解决方案。由于每个例子的截图在页面中的位置都是相同的，所以读者可以通过翻阅这些截图来寻找解决方案。翻阅图片是一种非常简单、快捷且有效的寻找方法。 　　本书结构 第1章～第3章介绍CSS与HTML基础知识。 　　第1章介绍如何使用设计模式来简化CSS使用。这一章介绍如何将简单的设计模式组合为更复杂和更强大的模式，涉及CSS语法和层叠顺序。此外，我们将展示一些方便CSS使用的资源：一组实用的CSS网站链接；CSS属性概述；4页清单，包括所有按使用场合分组的实用CSS属性、值和选择器；度量单位和字体大小换算表；媒体查询；过渡、动画和2D变换；修复CSS问题的12步指南；还有两个用于在所有浏览器中规范化元素样式的示例样式表。 第2章介绍HTML基础设计模式。在这一章中，我们将介绍一些使用HTML的最佳方法，包括XHTML的一些编码规则，另外还将介绍可以使用HTML创建的结构类型，包括结构化块、终止块、多功能块和行内元素，以及如何使用ID和属性CSS选择器实现简单的元素选择。 第3章介绍CSS选择器和继承设计模式。在这一章中，我们将介绍如何使用选择器在HTML和CSS之间建立联系，一些使用类型、类、ID、位置、分组、属性、伪元素、伪类和子类等选择器的设计模式，以及CSS继承。 第4章～第6章将介绍6个CSS框模型以及如何将各种HTML元素渲染（或者为何不能渲染）为6种框模型之一，介绍如何使用相同的属性在各种框模型中产生不同的结果，以及各种框模型之间的区别。 　　第4章介绍6种框模型：行内型（inline）、行内块级型（inline-block）、块级型（block）、表格型（table）、绝对型（absolute）和浮动型（float）。 第5章介绍3种设置框尺寸的方法：设定尺寸、收缩适应或拉伸。 第6章介绍每一种框模型属性：外边距、边框（半径、阴影等）、内边距、背景、溢出、可见性和分页。 第7章～第9章介绍了框的定位和排列方法。 　　第7章介绍5种定位模式（静态、绝对、相对、固定和浮动），并将它们与6种框模型相关联。 第8章介绍3种框定位方法包括让元素缩进或外凸、相对同级元素偏移或者相对上级容器对齐和偏移。 第9章组合使用第7章和第8章中介绍的模式。组合产生50多种元素定位设计模式，主要关注绝对定位和固定定位。 第10章～第12章详细介绍内联框的排列，以及如何设定文字和对象的样式、分隔和对齐方式。 　　第10章介绍设置文字样式的属性，还包括3个隐藏文本但对视障用户可访问的设计模式。这一章还介绍了一些高级技术，如使用画布与矢量标记语言替换文字，以及CSS3嵌入字体。 第11章介绍如何以水平和垂直方式分隔行内内容。 第12章介绍如何以水平和垂直方式对齐行内内容。 第13章和第14章详细介绍块和图像流动布局，以及它们的样式设置方法。 　　第13章先介绍块，以介绍块的结构含义及其可视化显示方式开始。这一章涉及列表、行内块、收缩边界、插入块、块间隔和块边距等内容。 第14章介绍图片相关内容，如图片映射、半透明图片、使用图片替代文本、精灵图（sprite）、阴影图片和图片圆角。 第15章和第16章详细介绍如何设置表格及单元格的样式和布局。 　　第15章介绍表格相关内容，包括表格选择器、收缩边框、隐藏单元格、按单元格垂直对齐内容及将内联与块元素显示为表格。 第16章介绍12个实现表格列布局的模式，它们能够自动缩小列宽、设定尺寸、按比例分列等。 第17章介绍如何使用浮动创建流动布局。 　　第17章介绍如何创建自动适应不同设备、字体、宽度和缩放比例的流动布局。这一章还介绍如何使用JavaScript创建交互式布局。 第18章～第20章介绍如何组合使用多种设计模式，实现同一个问题的多种解决方案。每一种方法都针对不同的情况，具有不同的和缺点。除了这些实用的方法，这几章还介绍了组合模式来解决设计问题的方法。 　　第18章介绍首字下沉效果。这一章将介绍由7种不同设计模式组合实现的7种首字下沉效果。 第19章介绍突出引用和普通引用效果。这一章将介绍5种突出引用（callout）和3种普通引用。 第20章介绍实现警告框的方法。这一章将介绍3种动态警告框和8种静态警告框（例如，醒目的告示）。此外，还介绍了HTML5表单验证方法，展示了HTML5原生表单验证方法和提醒用户错误输入的方法。 下载代码 读者可以在原出版商网站www.apress.com搜索本书Pro HTML5 and CSS3 Design Patterns的明细页，该页包含一个下载示例代码压缩文件的链接[ 读者也可以到图灵社区（ituring.con.cn）本书页面下载。——编者注 ]。