写给大家看的CSS书(第2版)(Amazon全五星盛誉畅销著作)
点击看大图基本信息
编辑推荐
学习CSS就这么简单.
在不知不觉中成为Web设计高手..
Amazon全五星盛誉畅销著作...
推荐阅读
内容简介回到顶部↑
本书介绍了css样式设计，主要涵盖利用xhtml为内容定义结构、css的工作原理、字体和文本样式、定位元素、基本的页面布局等内容，详细讲述了所有程序员都需要掌握的两种技能：避免重写以前曾经写过的代码和掌握以最经济的方法编写代码。同时，书中的所有代码都可以从本书的网站(www.stylinwithcss.com)或图灵网站（www.turingbook.com）本书相应页面下载。而且，作者会在发现错误之后改正它们并更新下载文件。.
本书适合web开发人员阅读和参考。...
本书适合web开发人员阅读和参考。...
作译者回到顶部↑
本书提供作译者介绍
Charles Wyke-Smith，世界知名的Web技术专家。目前是Benefitfocus.com公司用户体验总监。此前，他曾担任著名媒体eStar.com的Web开发副总裁，富国集团、ESPN等大公司的Web设计顾问。
.. << 查看详细
.. << 查看详细
目录回到顶部↑
第1章 xhtml：为内容定义结构
1.1 web标准
1.1.1 时至今日，仍然会提到idwimie
1.1.2 内容、结构和表现
1.2 时代在改变
1.2.1 过去的方式
1.2.2 未来刚刚开始
1.3 xhtml及编写规则
1.3.1 xhtml——规则
1.3.2 xhtml模板
1.3.3 标记内容
1.3.4 文档流——块级元素和行内元素
1.3.5 文档层次：认识xhtml家族
第2章 css的工作原理
2.1 为文档应用样式的3种方式
2.1.1 内联样式
2.1.2 嵌入样式
2.1.3 链接样式
2.2 css规则剖析
2.3 编写css规则
1.1 web标准
1.1.1 时至今日，仍然会提到idwimie
1.1.2 内容、结构和表现
1.2 时代在改变
1.2.1 过去的方式
1.2.2 未来刚刚开始
1.3 xhtml及编写规则
1.3.1 xhtml——规则
1.3.2 xhtml模板
1.3.3 标记内容
1.3.4 文档流——块级元素和行内元素
1.3.5 文档层次：认识xhtml家族
第2章 css的工作原理
2.1 为文档应用样式的3种方式
2.1.1 内联样式
2.1.2 嵌入样式
2.1.3 链接样式
2.2 css规则剖析
2.3 编写css规则
译者序回到顶部↑
CSS不难学——但前提是必须有好的教材。.
本书第1版之所以畅销，其中一个主要原因就是作者讲解清晰，内容通俗易懂。在第1版获得成功的基础上，作者根据自身实践，将CSS的最新发展和应用结合起来，基本上重写了第1版，最后将全新的版本呈现给读者。在这一版中，作者沿续了受到广泛好评的平易朴实的写作风格，将CSS中的关键概念和基础术语阐释得更加透彻、准确。相信有一定CSS经验的读者看罢这一版，一定会有相见恨晚之感！
第2版虽然可以说重写了第1版，但内容架构上仍然保持了第1版的按技术主题分类，以实例辅助讲解的组织方式。看全书目录好像比较扼要，但深入各个章节之后，就会发现其涵盖面之广几乎可以与一本权威指南之类的参考书媲美。而且，由于作者表达精练，经常一语中的，因此整本书的篇幅虽小，但信息量、实用性几乎不亚于大部头的CSS著作。译者个人认为，这种组织方式有利于读者提纲挈领，从全局角度理解并记住CSS的关键技术和主要应用。..
第2版还有一个特色，就是随书提供的Stylib样式库。在这个库中，作者提供了多栏布局、导航链接、表单等Web设计常用组件的样式模板。读者只要根据书中的介绍，为页面中添加一些标记并定义相应的类，就可以自动拥有该库提供的样式化能力，从而轻松实现常用的界面元素设计。应该说，设计CSS样式库是一种创新，也是CSS应用进入高级阶段的标志。正如层出不穷的JavaScript/Ajax库一样，也许Charles Wyke-Smith提供CSS样式库的理念也折射出了CSS应用的一种发展趋势。
总之，用简短的语言来概括本书特色，就是讲解透彻、组织巧妙、富有新意，是学习CSS的一本好教材。
本书由李松峰负责翻译，参加翻译工作的还有张程、宋会敏、曹建辉、崔淑云、闫建旺、熊俊佳、熊俊芹、刘英、左艳波、贾爱华等。...
本书第1版之所以畅销，其中一个主要原因就是作者讲解清晰，内容通俗易懂。在第1版获得成功的基础上，作者根据自身实践，将CSS的最新发展和应用结合起来，基本上重写了第1版，最后将全新的版本呈现给读者。在这一版中，作者沿续了受到广泛好评的平易朴实的写作风格，将CSS中的关键概念和基础术语阐释得更加透彻、准确。相信有一定CSS经验的读者看罢这一版，一定会有相见恨晚之感！
第2版虽然可以说重写了第1版，但内容架构上仍然保持了第1版的按技术主题分类，以实例辅助讲解的组织方式。看全书目录好像比较扼要，但深入各个章节之后，就会发现其涵盖面之广几乎可以与一本权威指南之类的参考书媲美。而且，由于作者表达精练，经常一语中的，因此整本书的篇幅虽小，但信息量、实用性几乎不亚于大部头的CSS著作。译者个人认为，这种组织方式有利于读者提纲挈领，从全局角度理解并记住CSS的关键技术和主要应用。..
第2版还有一个特色，就是随书提供的Stylib样式库。在这个库中，作者提供了多栏布局、导航链接、表单等Web设计常用组件的样式模板。读者只要根据书中的介绍，为页面中添加一些标记并定义相应的类，就可以自动拥有该库提供的样式化能力，从而轻松实现常用的界面元素设计。应该说，设计CSS样式库是一种创新，也是CSS应用进入高级阶段的标志。正如层出不穷的JavaScript/Ajax库一样，也许Charles Wyke-Smith提供CSS样式库的理念也折射出了CSS应用的一种发展趋势。
总之，用简短的语言来概括本书特色，就是讲解透彻、组织巧妙、富有新意，是学习CSS的一本好教材。
本书由李松峰负责翻译，参加翻译工作的还有张程、宋会敏、曹建辉、崔淑云、闫建旺、熊俊佳、熊俊芹、刘英、左艳波、贾爱华等。...
前言回到顶部↑
很难相信，从我写本书第1版到现在已经过了3年。在此期间，我又参与了大量网站的开发并调整了使用CSS的方式。我原计划对本书第2版进行一些小的调整，涵盖IE 7并从整体上使内容与时代同步。但是，最终我却对前3章进行了大量改进，并且完全重写了书中剩余的内容。因此，也使原计划几周的工作量用了将近一年才完成。.
我所做的修改反映了任何经常使用CSS的开发人员在技术上的进步，而且这些修改也更深入地涉及所有程序员都需要掌握的两种技能：避免重写以前曾经写过的代码和掌握以最经济的方法编写代码的方法。在新版本中，介绍了实现这两个有价值的目标的各种方式。
重用和DRY
第一个目标是代码重用，它是我们在好几章中都会涉及的一个主题。书中展示了创建功能性构建块的技术，无论是页面布局的框架结构，还是应用样式的美观的链接列表，将它们保存为可以迅速添加到标记中的CSS类，设计者能够对其进行个性化地修改。本书已经将这些构建块添加到一个名为Stylib的代码库中，其中包含各种界面元素并以CSS代码及其相关XHTML标记的形式组织。这个库及本书的示例代码也放在了网站www.stylinwithcss.com中。虽然Stylib库还不算成熟，但已经包含了很多有用的组件，这些组件曾为我节省了很多时间——但愿对你也同样适用。今后，我还要不断完善这个库并将它们放到网站上供读者下载。
另一个目标是代码节约，它是贯穿本书的另一个主题。举例来说，为文档层次中最高层的元素应用一个样式，该样式就能够影响到其他众多元素。我经常看到别人的CSS样式表中包含为每个标题和段落声明的相同的font-family规则，而通过把font-family属性应用给顶层的body标签则意味着只需在一个地方编写和维护该属性。代码节约的底层理念是一句编程名言，叫做DRY，意思是Don’t Repeat Yourself（不要重复自己）。在本书前面几章中，我们会展示很多类似的例子。
掌握关键技术
我认为只要真正理解了少数重要的CSS技术，就能够使一名新手变成能够独当一面的CSS熟手。这些技术包括正确地使用定位和display属性，以及理解浮动和清除的工作原理。在本书第4章中，将专门介绍这些CSS中的重点技术，并通过简单的例子示范如何在实践中运用它们。任何对CSS感兴趣并希望把自己的技能提升到一个新水平的读者，都会发现第4章非常具有启发性——我当然盼望如此。
使用正确的工具
在真正开始学习本书之前，我想解释一下如何做好准备工作，以便读者在最短的时间内完成跨大量浏览器的页面布局。
首先，需要一个优秀的代码编辑器来编写代码，需要一个FTP客户端向Web服务器上传文件。Adobe Dreamweaver（大约400美元）整合了这两种工具，也是我日常使用的编程工具。Dreamweaver的代码视图非常有用，而且代码颜色及自动完成功能有助于区分代码中的不同元素，识别语法错误以及猜测可能的输入（只需输入前几个字母，其余的都能自动完成）。设计视图则会模仿浏览器的方式呈现页面，这当然也很有用，因为通过单击视图中的任何元素都会立即转到代码视图中的相关部分。当然，也有一些价格便宜、甚至免费的编辑器和FTP客户端，它们也能够提供类似的功能，同时为你省下一笔不菲的开销。不过，根本的问题不在于使用什么工具来编写和上传代码，而在于网页在用户浏览器中的最终效果如何。
只考虑4种浏览器
看到这个标题，你可能会因为只需要在4种浏览器中测试代码而感到奇怪。这4种浏览器如下。
Firefox
Safari
IE 7
IE 6
原因是这4种浏览器的市场占有率超过了95%，而其他任何浏览器的市场占有率都没有超过2%（数据来自维基百科上关于各种浏览器使用率统计的平均值，地址http://en.wikipedia.org/wiki/Usage_share_of_web_browsers）。
在这4种浏览器中，无论IE 6存在多少呈现bug和对CSS属性的支持有多匮乏，尽管人们已经慢慢（非常慢）开始放弃使用它了，但它仍然是主流浏览器。另外3种浏览器都是我们常说的SCB，即Standards Compliant Browser（符合标准的浏览器）。也就是说，它们基本上都能够严格遵循W3C（World Wide Web Consortium，万维网联盟）的推荐规范来实现对CSS的支持。事实上，这3种浏览器都能够相当精确地呈现全部CSS2及部分CSS3属性（可以将CSS2和CSS3看成是CSS的版本，后面我们会介绍更多与此相关的内容）。换句话说，当它们呈现了有效的CSS样式的XHTML页面时，结果的差异很小。
在上面的列表中也可以包含Netscape，即使它的市场份额最多也只有1个百分点。但是，因为Netscape和Firefox都是在Mozilla呈现引擎基础上构建的浏览器，所以在Firefox中能够正确呈现的页面，在Netscape中也应该得到几乎相同的结果。因此，如果基于以上4种浏览器测试和调整页面并取得满意的结果，就可以确保页面在几乎任何用户的浏览器中都能够得到体现设计意图的呈现。这里，我们甚至不会提到在IE 5.5中测试；因为它当前只有不到0.5%的使用率，而任何使用一个具有8年历史的老浏览器的用户，恐怕都会有比呈现我们的网页更大的技术问题。..
我的建议是绝对不要使用IE 6作为开发浏览器，而要使用前面3个SCB中的一种，在SCB中已经能得到满意的页面后再在IE 6中测试并调整。实际上，更进一步讲，我会强烈建议你在开发期间使用Firefox来预览页面。之所以作此推荐，是因为我发现Firefox是所有SCB中最符合标准的一种浏览器。此外，在Firefox中安装Web Developer Toolbar（Web开发者工具条），就可以方便地验证XHTML和CSS而无需上传到服务器，启用和禁用CSS，查看页面中XHTML元素的轮廓以便实际地确定元素是否按照计划进行布局，以及使用其他一些有用而且节省时间的工具。假如不安装Web Developer Toolbar，那么大量开发时间就会白白浪费掉。而且，还可以为Firefox安装Firebug调试工具，有了这个附加软件，差不多就具有了进行Web开发的专业级环境。Firefox和这两种附加软件都可以通过www.getfirefox.com免费下载。
我所做的修改反映了任何经常使用CSS的开发人员在技术上的进步，而且这些修改也更深入地涉及所有程序员都需要掌握的两种技能：避免重写以前曾经写过的代码和掌握以最经济的方法编写代码的方法。在新版本中，介绍了实现这两个有价值的目标的各种方式。
重用和DRY
第一个目标是代码重用，它是我们在好几章中都会涉及的一个主题。书中展示了创建功能性构建块的技术，无论是页面布局的框架结构，还是应用样式的美观的链接列表，将它们保存为可以迅速添加到标记中的CSS类，设计者能够对其进行个性化地修改。本书已经将这些构建块添加到一个名为Stylib的代码库中，其中包含各种界面元素并以CSS代码及其相关XHTML标记的形式组织。这个库及本书的示例代码也放在了网站www.stylinwithcss.com中。虽然Stylib库还不算成熟，但已经包含了很多有用的组件，这些组件曾为我节省了很多时间——但愿对你也同样适用。今后，我还要不断完善这个库并将它们放到网站上供读者下载。
另一个目标是代码节约，它是贯穿本书的另一个主题。举例来说，为文档层次中最高层的元素应用一个样式，该样式就能够影响到其他众多元素。我经常看到别人的CSS样式表中包含为每个标题和段落声明的相同的font-family规则，而通过把font-family属性应用给顶层的body标签则意味着只需在一个地方编写和维护该属性。代码节约的底层理念是一句编程名言，叫做DRY，意思是Don’t Repeat Yourself（不要重复自己）。在本书前面几章中，我们会展示很多类似的例子。
掌握关键技术
我认为只要真正理解了少数重要的CSS技术，就能够使一名新手变成能够独当一面的CSS熟手。这些技术包括正确地使用定位和display属性，以及理解浮动和清除的工作原理。在本书第4章中，将专门介绍这些CSS中的重点技术，并通过简单的例子示范如何在实践中运用它们。任何对CSS感兴趣并希望把自己的技能提升到一个新水平的读者，都会发现第4章非常具有启发性——我当然盼望如此。
使用正确的工具
在真正开始学习本书之前，我想解释一下如何做好准备工作，以便读者在最短的时间内完成跨大量浏览器的页面布局。
首先，需要一个优秀的代码编辑器来编写代码，需要一个FTP客户端向Web服务器上传文件。Adobe Dreamweaver（大约400美元）整合了这两种工具，也是我日常使用的编程工具。Dreamweaver的代码视图非常有用，而且代码颜色及自动完成功能有助于区分代码中的不同元素，识别语法错误以及猜测可能的输入（只需输入前几个字母，其余的都能自动完成）。设计视图则会模仿浏览器的方式呈现页面，这当然也很有用，因为通过单击视图中的任何元素都会立即转到代码视图中的相关部分。当然，也有一些价格便宜、甚至免费的编辑器和FTP客户端，它们也能够提供类似的功能，同时为你省下一笔不菲的开销。不过，根本的问题不在于使用什么工具来编写和上传代码，而在于网页在用户浏览器中的最终效果如何。
只考虑4种浏览器
看到这个标题，你可能会因为只需要在4种浏览器中测试代码而感到奇怪。这4种浏览器如下。
Firefox
Safari
IE 7
IE 6
原因是这4种浏览器的市场占有率超过了95%，而其他任何浏览器的市场占有率都没有超过2%（数据来自维基百科上关于各种浏览器使用率统计的平均值，地址http://en.wikipedia.org/wiki/Usage_share_of_web_browsers）。
在这4种浏览器中，无论IE 6存在多少呈现bug和对CSS属性的支持有多匮乏，尽管人们已经慢慢（非常慢）开始放弃使用它了，但它仍然是主流浏览器。另外3种浏览器都是我们常说的SCB，即Standards Compliant Browser（符合标准的浏览器）。也就是说，它们基本上都能够严格遵循W3C（World Wide Web Consortium，万维网联盟）的推荐规范来实现对CSS的支持。事实上，这3种浏览器都能够相当精确地呈现全部CSS2及部分CSS3属性（可以将CSS2和CSS3看成是CSS的版本，后面我们会介绍更多与此相关的内容）。换句话说，当它们呈现了有效的CSS样式的XHTML页面时，结果的差异很小。
在上面的列表中也可以包含Netscape，即使它的市场份额最多也只有1个百分点。但是，因为Netscape和Firefox都是在Mozilla呈现引擎基础上构建的浏览器，所以在Firefox中能够正确呈现的页面，在Netscape中也应该得到几乎相同的结果。因此，如果基于以上4种浏览器测试和调整页面并取得满意的结果，就可以确保页面在几乎任何用户的浏览器中都能够得到体现设计意图的呈现。这里，我们甚至不会提到在IE 5.5中测试；因为它当前只有不到0.5%的使用率，而任何使用一个具有8年历史的老浏览器的用户，恐怕都会有比呈现我们的网页更大的技术问题。..
我的建议是绝对不要使用IE 6作为开发浏览器，而要使用前面3个SCB中的一种，在SCB中已经能得到满意的页面后再在IE 6中测试并调整。实际上，更进一步讲，我会强烈建议你在开发期间使用Firefox来预览页面。之所以作此推荐，是因为我发现Firefox是所有SCB中最符合标准的一种浏览器。此外，在Firefox中安装Web Developer Toolbar（Web开发者工具条），就可以方便地验证XHTML和CSS而无需上传到服务器，启用和禁用CSS，查看页面中XHTML元素的轮廓以便实际地确定元素是否按照计划进行布局，以及使用其他一些有用而且节省时间的工具。假如不安装Web Developer Toolbar，那么大量开发时间就会白白浪费掉。而且，还可以为Firefox安装Firebug调试工具，有了这个附加软件，差不多就具有了进行Web开发的专业级环境。Firefox和这两种附加软件都可以通过www.getfirefox.com免费下载。
媒体评论回到顶部↑
“我读过不少同类图书，本书显然是设计师学习CSS的最佳起点。”.
——Harvey A．Ramer，资深Web设计师
“还在为学习CSS而抓耳挠腮?那还等什么呢，从这本书开始吧。我在读本书的时候，常常会恍然大悟地发出感慨：‘哦，原来别的书讲的是这个意思啊。’……这是你初学道路上的明灯。”...
——Amazon．com读者评论
——Harvey A．Ramer，资深Web设计师
“还在为学习CSS而抓耳挠腮?那还等什么呢，从这本书开始吧。我在读本书的时候，常常会恍然大悟地发出感慨：‘哦，原来别的书讲的是这个意思啊。’……这是你初学道路上的明灯。”...
——Amazon．com读者评论
加载中...
