查字典图书网
查字典图书网
CSS3是最新版的Web样式表语言，它不是介绍何创造新颖特效的，而更多地侧重于提供一些神奇的新方法来实现常见而优美的网页设计效果，这些新方法比十年来惯用的传统技术更为高效，而且能够获得可用性更高且灵活的结果。 CSS3在不断地变化和发展之中，因为支持CSS的浏览器在发展，网页设计师对它的认知程度也在不断提升。它可以用来创造一些令人惊艳的酷炫特效，本书将一一予以展现。要是这些特效对于目前的网站不具实用性，那著书意义何在？因此在本书中，我将致力于教给你那些能够切实改善网站体验，并可以迅速应用到日常工作中的CSS前沿技巧。 本书并非CSS3的百科全书或参考指南，它不会把CSS2.1后新增的属性、选择器和值逐个地教给你，而是通过一系列务实与创新的项目来为你讲解CSS3里最流行、实用和最常见的那些部分。从第2章开始，每一章都会让你从几个实例演练中接触到CSS3的新技术，并最终完成一块甚至是一个页面。你可以直接将这些实例改写成自己的项目，或是从中获得启发，创造性地运用你学到的其他新属性、选择器和值。 从某种程度上说，CSS3不仅是一种新的网页开发方式，它同样是一种新的思考方式。举例来讲，如何应用border-image这个新增属性就是个难题，因为在从事了多年的网站开发之后，你恐怕还不习惯将图片作为边框设计的一种选项来考虑。因此，我整理了一份清单，里面罗列了如何应用每一项CSS3属性、选择器和值的方法，这些方法远不止我们在实例演练中所使用的那一种。我希望能提供足够多的灵感，让你知道如何在项目中实践你的CSS3技术，并辅以一些专业技巧来确保你可以高效自如地使用它。 本书的读者群 本书是写给那些有过CSS编写经验，并希望使自己的网站和技术更上一层楼的读者。我假设你已经知晓了HTML和CSS的语法和相关术语，但你不必是一名CSS专家，而且不需有过使用CSS3新特性的经历。无论你是刚接触CSS，还是已经从事了多年的网站开发工作，这本书都会教给你一些强大的新技巧，把你全面武装起来。 实例文件 每一章都至少包含一个实例演练，使你有机会在真实的页面里一步步地实践技术。你可以从本书的官方网站 (www.stunningcss3.com) 下载这些文件来配合每一次的实例演练。我为每个实例准备了至少两种文件——初始版和完成版，还为一些篇幅较长的实例提供了中间步骤的版本，你可以定期进行对比来确保在自己的文件上执行了正确的修改。 你可以用任何顺手的编辑器来处理这些实例演练的文件，编写CSS无需特殊的工具。我个人使用Adobe Dreamweaver的代码视图（Code View）来手工编写CSS。如果你也使用Dreamweaver或类似的编辑器，我推荐你选择手工编写。 尽管已经花费了大量的精力检查过书中的代码，但难免还会存在一些错误。请通过本书网站上的电子邮件地址将错误报告给我，如有必要我会在网站上进行提示并更新实例演练的文件。 实用链接 每一章包含了若干个实用链接，它们是可能对你有用的资源、文章、教程、工具和实例。而且直接点击链接无疑比你费劲对照书本去输入URL要来得方便，于是我也将每章的实用链接汇总到了www.stunningcss3.com上。 CSS3是一个多变的话题，所以有时当新近的资源涌现出来时我会更新这些链接列表。你可以在书中这些链接处发现提示，以便从网站上找到最新的信息。 浏览器 书中的实例都已在主流浏览器的最新版本上进行过测试。本书编撰之时，这些浏览器的版本分别是Chrome 6、Firefox 3.6、IE 8、Opera 10.6和Safari 5。这些实例也在IE 9和Firefox 4的beta版 上进行了测试，但它们在最终发行版上的效果可能会与书中的描述存在不同。 这些实例在一些至今仍被广泛使用的旧浏览器（比如IE 7和IE 6）上也做了测试。很多情况下，最新浏览器上的CSS3效果通常也能体现在相同浏览器的较低版本；即使无法完全体现，页面也依旧可以工作，不仅能用，而且看起来也不错。对于每一项特性，我们将一直尽可能地去寻求变通或备用方案，使之兼容那些不被原生支持的浏览器。 关于具体某个特性被哪些浏览器支持，我在每一章里将所介绍的每个属性或选择器的兼容度整理成表。针对每个浏览器给定“是”、“部分”或“否”。“是”表示该浏览器支持所有语法和行为，它可能会存在一些非常小的缺陷，或与规范所述不太一致，但总体而言是符合规范的。“部分”则意味着浏览器只支持部分的语法和行为，也可能存在重大缺陷或与规范相左之处。 一些CSS3属性仅当含有渲染引擎的前缀时才能生效（第1章你就将学习这些包含前缀的属性）。我在浏览器兼容表里已经注明了哪些属性需要在哪些浏览器下添加前缀。 为了应对某个浏览器较新的版本支持但老版本不支持的情形，我在兼容表里标注了该浏览器最早开始支持某个属性或选择器的版本号。如果浏览器在最近几个版本中已经支持了该属性或选择器，而且使用不支持该特性的版本的那些用户数量又不大，那么我则不会在兼容表中标注版本号，你可以认为该浏览器的所有版本都兼容它。 说明 反过来说，当某个属性或选择器最早被支持的时间尤其值得强调时，我也会偶尔标注浏览器的版本号。比如，@font-face早在IE 4时代就被支持了。 本书约定 本书使用了一些约定，有必要在这里先说明一下。 W3C表示万维网联盟（World Wide Web Consortium），它是一个制定Web官方标准和规范（比如CSS3）的组织。 IE是Windows Internet Explorer的缩写。“IE 8及之前的版本”代表IE 8、IE 7和IE 6。 Webkit内核浏览器意指Safari（包含桌面和移动版）、Chrome和其他使用近期版本的Webkit页面渲染引擎的浏览器。 偶尔你也会碰到“所有浏览器”这个说法。它代表目前所有被广泛使用的浏览器，而并非字面意义所涵盖的那些可能仅占零星市场份额的不知名的浏览器。 本书的所有示例都以HTML5标记编写。但这仅仅表示我使用了短小精悍的HTML5文档声明<!DOCTYPE html>，还有更简洁的meta字符编码、style和script标签。我并没有使用任何HTML5引入的新标签，如section和article，所以页面可以在IE 8及之前的版本下正常运行，但你可以在自己的页面里将其更换为喜欢的标记。所有的示例也同样兼容HTML 4.01和XHTML 1。 所有CSS实例代码必须置于一个外部样式文件之中，或是HTML/XHTML文档的head标签中。为了方便修改，这些实例文件本身将CSS书写在了页面的head标签中，但对于最终的成品最好还是将其转移到一个外部文件里。 一些实例代码中含有一些被加粗的字符和行，如果它是你之前看到过的代码片段，则说明这块内容有增改；如果是一段新的代码，则表示它需要你特别注意。某些情况下，你会在某行代码之前看到一个¬符号，它代表这行代码由于版面限制被强制换行了，但这并不意味着你的代码也必须在那里换行。 书中所介绍的每个属性或选择器都有一个题为“来龙去脉”的附注栏，它将简述相关的语法、行为和用例。当然，其中不可能包含所有的语法细节，但一些最根本的信息还是值得参考的。此外，附注栏中还会包含定义相应属性及选择器的CSS3模块的站点链接，便于你在想了解完整的规范时参考。