HTML5与CSS3设计模式

出版时间：2013-1  出版社：人民邮电出版社  作者：[美] Michael Bowers,[美] Dionysios Synodinos,[美] Victor Sumner  译者：曾少宁  
Tag标签：无  

内容概要

　　《HTML5与CSS3设计模式》是一部全面讲述用HTML5和CSS3设计网页的教程。书中含350个即时可用的模式（HTML5和CSS3代码片段），直接复制粘贴即可使用，更可以组合起来构建出无穷的解决方案。每个模式都可在所有主流Web浏览器中可靠地运行。《HTML5与CSS3设计模式》系统地介绍了CSS3的每个可用特性，并结合了HTML5来创建可重用的模式。另外，《HTML5与CSS3设计模式》布局巧妙，各个模式的示例在左边，说明在右边，非常便于查找。　　《HTML5与CSS3设计模式》适合具有HTML和CSS基础的读者学习参考。

作者简介

Michael Bowers有22年编程生涯的老牌程序员。他从14岁那年就开始自学编程，并一直勤奋不辍。现在他的身份是首席工程师和企业信息技术架构师。他曾在很多项目中担当过程序员、架构师以及数据建模师等角色，在开发网站、构建应用程序架构和数据库系统方面有丰富的经验。除了开发过Web应用程序、集成企业信息系统、构建工厂自动化方案之外，他还开发过编程语言、编译器及解释器，并且还管理过软件团队。他最喜欢的编程语言包括：CSS、HTML、XML、C#、C++、Visual Basic、Java、JavaScript、SQL及XQuery。另外，Michael在钢琴上的造诣颇深。他拥有作曲专业的学士学位、乐理专业的硕士及准博士学位（ABD PhD）。闲暇时，他喜欢即兴演奏、编排音乐并谱曲。Dionysios Synodinos C4Media的研究平台团队主管，同时还是一位自由顾问，关注互联网富应用程序、Web应用程序安全性、移动Web以及Web服务等。他还是InfoQ的HTML5及JavaScript方向的首席编辑，定期在网站上撰写一些有关JVM平台的文章。游走于服务器端编程与UI设计10余年，他参与过不同的软件项目，并且参与编写过多部技术书籍。Victor Sumner LookSmart公司的高级软件工程师。作为一位自学的Web程序开发者，在一款Web程序的生命周期中，他要担负很多角色，从数据库管理员到Web设计师，所有的工作他都做过。他喜欢挑战并解决棘手的问题。他有很多业余爱好，包括摄影、骑马、玩电子游戏等。他和妻子Alicia一起住在加拿大的安大略省。

书籍目录

第1章设计模式：简化CSS使用 1.1设计模式——结构化方法 1.2使用设计模式 1.3使用样式表 1.4CSS语法 1.4.1CSS语法详解 1.4.2在CSS中使用空白字符 1.4.3使用属性值 1.5使用层叠顺序 1.6简化层叠顺序 1.7CSS和HTML链接 1.8CSS常用属性 1.9CSS属性与值：常用 1.10CSS属性与值：内容 1.11CSS属性与值：布局 1.12CSS属性与值：专用 1.13选择器 1.14媒体查询 1.15灵活尺寸单位 1.16固定度量单位 1.1796dpi下度量单位的换算 1.1896dpi下的常用字号 1.19过渡、动画与2D变换 1.20修复CSS错误 1.21样式表的规范化 第2章HTML设计模式 2.1概述 2.2HTML结构 2.3HTML结构（续） 2.4XHTML 2.5DOCTYPE 2.6页头元素 2.7条件样式表 2.8结构块元素 2.9终止块元素 2.10多功能块元素 2.11行内元素 2.12类和ID属性 2.13HTML空白字符 第3章CSS选择器与继承 3.1概述 3.2类型、类和ID选择器 3.3位置选择器和选择器分组 3.4属性选择器 3.5伪元素选择器 3.6伪类选择器 3.7子类选择器 3.8继承 3.9可视化继承 第4章框模型 4.1概述 4.2Display 4.3框模型 4.4行内框 4.5行内块级框 4.6块级框 4.7表格框 4.8绝对框 4.9浮动框 第5章框模型的范围 5.1概述 5.2宽度 5.3高度 5.4设定尺寸 5.5收缩适应 5.6拉伸 第6章框模型属性 6.1概述 6.2外边距 6.3边框 6.4内边距 6.5背景 6.6溢出 6.7可见性 6.8分页符 第7章定位模型 7.1概述 7.2定位模型 7.3设定位置 7.4最近定位祖先元素 7.5堆叠上下文 7.6原子显示 7.7静态定位 7.8绝对定位 7.9固定定位 7.10相对定位 7.11浮动定位与复位 7.12相对浮动定位 第8章定位方式：缩进、偏移与对齐 8.1概述 8.2缩进 8.3静态偏移 8.4静态表格偏移与缩进 8.5浮动偏移 8.6绝对偏移与固定偏移 8.7相对偏移 8.8静态行内对齐 8.9静态块级对齐与偏移 8.10静态表格对齐与偏移 8.11绝对对齐与偏移 8.12绝对居中对齐 8.13外部对齐 第9章高级定位 9.1概述 9.2左对齐 9.3左偏移 9.4右对齐 9.5右偏移 9.6居中对齐 9.7居中偏移 9.8上对齐 9.9上偏移 9.10下对齐 9.11下偏移 9.12垂直居中对齐 9.13垂直居中偏移 第10章设置文字样式 10.1概述 10.2字体 10.3高亮显示 10.4文字修饰 10.5文字阴影 10.6使用图片替换文字 10.7使用Canvas和VML替换文字 10.8嵌入字体 10.9不可见文字 10.10仅供屏幕阅读器读取 第11章内容间隔 11.1间隔 11.2块级化 11.3不换行 11.4保留空格 11.5代码 11.6填充内容 11.7行内分隔区 11.8行内装饰 11.9换行 11.10行内水平线规则 第12章内容对齐 12.1文字缩进 12.2悬挂缩进 12.3水平对齐内容 12.4垂直对齐内容 12.5垂直偏移内容 12.6下标与上标 12.7嵌套对齐 12.8高级对齐示例 第13章块级元素 13.1概述 13.2结构含义 13.3可视化结构 13.4节 13.5列表 13.6项目符号背景 13.7行内化 13.8合并外边距 13.9插入 13.10水平线规则 13.11块级分隔区 13.12块级间隔删除器 13.13左旁注 13.14右旁注 第14章图片 14.1概述 14.2图片 14.3图片地图 14.4淡出 14.5半透明 14.6替换文字 14.7内容覆盖图片 14.8内容覆盖背景图片 14.9CSS精灵图 14.10CSS精灵图（续） 14.11基本阴影图片 14.12阴影图片 14.13阴影图片（续） 14.14阴影图片（再续） 14.15圆角 14.16圆角（续） 14.17图片示例 第15章表格 15.1概述 15.2表格 15.3行组与列组 15.4表格选择器 15.5拆分边框 15.6合并边框 15.7合并边框样式 15.8隐藏与删除单元格 15.9删除与隐藏行和列 15.10垂直对齐数据 15.11表格条纹 15.12表格化、行化和单元格化 15.13表格布局 第16章表格列布局 16.1表格布局模型 16.2使用列布局 16.3概述 16.4列宽 16.5收缩适应列 16.6设定尺寸列 16.7按内容比例划分列 16.8按宽度比例划分列 16.9按百分比比例划分列 16.10按反比例划分列 16.11最小等宽列 16.12等宽列 16.13小尺寸列 16.14弹性列 16.15混合列布局 第17章布局 17.1概述 17.2流动布局概述 17.3由外而内框 17.4浮动节 17.5浮动分隔区 17.6流动布局 17.7两侧浮动 17.8事件样式 17.9卷起 17.10选项卡菜单 17.11选项卡 17.12飞出菜单 17.13按钮 17.14布局链接 17.15多列布局 17.16模板布局 17.17布局示例 第18章首字下沉 18.1概述 18.2对齐首字下沉 18.3首字母下沉 18.4悬挂首字下沉 18.5嵌入式图片下沉 18.6浮动首字下沉 18.7浮动图片下沉 18.8旁注式首字下沉 18.9旁注式图片下沉 第19章突出引用与普通引用 19.1概述 19.2左浮动突出引用 19.3右浮动突出引用 19.4居中突出引用 19.5左旁注突出引用 19.6右旁注突出引用 19.7块级普通引用 19.8行内块级普通引用 19.9行内普通引用 第20章警告框 20.1概述 20.2JavaScript警告框 20.3工具提示警告框 20.4弹出式警告框 20.5弹出式警告框（续） 20.6警告框 20.7行内警告框 20.8悬挂式警告框 20.9图片警告框 20.10插入警告框 20.11浮动警告框 20.12左旁注警告框 20.13右旁注警告框 20.14表单验证

章节摘录

版权页：   插图：   浏览器会根据表格类型与单元格设置的宽度类型选择布局算法。换言之，如果单元格设置了auto、100px或20％等不同的值，其结果会有很大差别。这些宽度值不仅仅在数值上不相同，而且类型也不相同，它们分别是：自动尺寸、固定尺寸或百分比。不同类型的宽度再组合不同的表格类型，会导致浏览器使用不同的列宽设置方法。 将width设置为auto，就得到自动宽度。将width设置为具体宽量值（如像素或em），就得到固定宽度。将width设置为百分数（如50％）就得到百分比宽度。 最后，浏览器会检查各行中同一列的所有单元格所设置的width，以确定列宽与列宽类型。列宽设计模式将介绍浏览器如何调整同一列中不同的单元格宽度设置。此外，在不同列上设置不同类型的宽度，会使浏览器在同一个表格中使用多种布局算法。混合列布局设计模式将介绍浏览器如何组合不同的列布局方式。 即使浏览器会检查非固定尺寸表格中所有单元格的宽度，我们实际卜也只需要设置第一行的单元格宽度。 下面的设计模式是通过组合4种表格类型和3种宽度类型而实现的。 16.2使用列布局 长期以来，设计者和开发者会使用多种强大的自动列布局特性实现非表格式内容的布局。事实上，这种广泛应用促使浏览器供应商对这些功能的扩展要远多于其他特性。此外，它也促使主流浏览器供应商优化和完善列布局功能。 虽然可以使用列布局方法设置非表格式数据的布局，但是我们并不推荐使用这种方法，因为这种方法会降低内容的可访问性。 本章主要介绍如何实现表格式数据的布局。表格式数据需要设置样式和布局。这一章将通过实际例子介绍如何使用浏览器内置的强大自动算法实现自动化列布局。 16.3概述 列宽（Column Width）介绍不同情况下浏览器计算列宽的方法，这些情况包括：各行同一列的单元格设置不同的宽度值、不同类型的宽度、不同的最小内容宽度和不同的最大内容宽度。这个模式适用于收缩适应型、设定尺寸型和拉伸型表格。 收缩适应列（Shrinkwrapped Columns）介绍如何实现收缩适应列，使之适应内容宽度。这个模式适用于收缩适应型表格。 设定尺寸列（Sized Columns）介绍如何设置固定列宽，同时将表格宽度限定在最大值或最小值范围之内。这个模式适用于收缩适应型或固定尺寸型表格。

编辑推荐

本书布局很好。它将模式示例放在左页，并将其解说放在右边，因此模式很好查找。本书可帮读者释放在Web设计和开发中的生产力和创造力。读者完全可以重用并组合其中模块化的设计模式来实现成功的设计。其中每个模式都有直观的名字，方便大家查找、记忆和参考。讲诉Web开发最新规范。零基础轻松掌握HTML5和CSS3

用户评论 (总计16条)

•   我看了一点点，感觉还不错
•   讲的挺详细，最近正在学习这项新技术
•   以前写html4，现在转html5，还是有很多用js实现一些特效。
•   内容很系统化，对初学者和进阶人士都有用
•   还行吧，个人感觉内容不是我想要的
•   不错 样子正版，内容易懂
•   我是新手，回来一点也看不懂，还以为是入门级的。
•   感觉故弄玄虚。看了一半，就不想看了。其实css就那些东西，定位模式就哪几种。没必要搞那么复杂～
•   很好的一本工具书 可以找到很多实用的东西
•   概括很全面，就是现在没有时间看，等有时间一定好好看看，哈哈
•   配送速度不错，但是书籍的质量与原先想的又一定的差距
•   如果你是一名web前段工作者，那么这本书你没有理由去读
•   这本书真心是不错。早就想买了。
•   HTML5与CSS3设计模式
•   模板设计必备
•   HTML5的5和CSS3的3是用来搞笑的