CSS实战手册

David Sawyer McFarland

出版时间

2007-07-01

ISBN

9787121046476

评分

★★★★★

标签

编程

书籍介绍

CSS是一场革命

借用quirksMode的PPK(Peter-Paul Koch)的话来说:CSS是一场革命。

Ajax的浪潮正在逐步改变着Web开发的方式。谈到Ajax,开发人员似乎更注重于 XMLHttpRequest 和 JavaScript ,而淡忘了Ajax还有一个重要的组成部分 CSS。

事实上,CSS和DOM、xHTML以及粘合它们的JavaScript密不可分,相辅相成。

传统的使用Photoshop制作效果然后切图并用拼合成html页面的网页设计师们需要精通CSS,因为CSS能帮助你们重新审视自己的作品,让结构和细节更适合于网页的展现形式。

传统的使用HTML模板往其中注入逻辑或业务代码的Web开发工程师们需要理解CSS。因为CSS能帮助你们重新思考Web开发。高效的CSS和清晰的HTML结构,Ajax的魔力就隐藏在其中。

我很喜欢《CSS实战手册》这本书的内容,它即讲解了CSS的基础知识,又分享了很多实践的心得。尤其每章最后的实战教程最是宝贵,理论后的实践能让我们学而有成,成能见效。

我把这本书推荐给好学的网页设计师和Web开发工程师们。它能帮助你们自信的融入这场革命。

—— 小马

推荐序一

软件开发作为新兴的行业,在短短几年中走过了辉煌的历程,尤其是互联网的发展,给Web开发带来无比强大的推动力,让网页开发技术飞速发展。回想几年前,网页设计还是开发中不被重视的一环,而今天,我们在新一轮互联网的大潮中深刻地感受到网页——直接给予用户第一感受的载体,是多么的重要。当“Table禁止用于布局”逐步写进各大公司的网页制作规范的时候,当CSS + Div模式已经成为行业标准的时候,当开发的产品要适应不同浏览器的时候,我们逐步发现,行业技术在不断地细化,网页的设计与制作之间的关系,不仅超越了技术本身,而且还逐步引入感官体验、易用性,甚至交互设计等元素。

本书从行业发展的角度出发,深入细致地讲述了如何制作出优秀的网页,以及规范中隐含的技巧。本书深入浅出地讲述了如何换位思考HTML的结构,如何规范使用样式表的各种功能,如何整体规划网页布局和感受用户体验。本书最好地体现了“细节决定成败”的原则。阅读本书,希望读者不仅能了解到制作优秀网页的方法,而且能培养“探索无止境,学习无尽期”的创新和开拓精神。

本书是帮助你站上巨人肩膀的又一块垫脚石。

—— Yanger

Web标准革命以降,我们应该看什么?

自Web标准革命以降,无论是设计师还是程序员,都在谈论新时代的网页制作方式。作为呈现的语言,CSS自然首当其冲。现在,已经不是讨论该不该使用Web标准的时候,应该关心的是如何更好地使用CSS为Web标准服务,以便将将并缤纷多彩的设计从语义的结构分离出来。不幸的是,一个本世纪初的浏览器(您知道我说的是IE6),对CSS的欠缺关键性的支持,但还在大行其道。有时候您会忙得焦头烂额,盒装模型、浮动、定位等等,听着都头晕的名词困扰着您。或许您可以通过搜索引擎找到很多文章来看,或是英文的、或是“专家”级别的,您还得费力四处去找一个问题的结症。但是,无论如何,请坚持住,别放弃,因为您已经走在正确的路上。或许在您灰心的时候,不妨翻开这本《CSS实战手册》吧。

笔者有幸在第一时间拿到CSS Missing Manual的译作,即《CSS实战手册》,作者David Sawyer McFarland将复杂的问题用轻松的、不拘一格的语言风格阐述开来,让人读来津津有味,不负笔者对O’Reilly的一向信赖。一本好书,不仅要技术过关,还需要能将问题阐述清楚;能将问题解决外,还需要轻松的语言能让读者在会心一笑中学习。这是一本很好的教程,还是一本诙谐小品。这本书面向的是初中级别的读者,因此一开始就向传统的HTML编写方式开炮,其实是让读者了解为语义,为CSS而写HTML的重要性。接着讲述创建样式及样式表、确定需要样式的元素、使用CSS的继承和层叠、如何格式化文本、设置内外边据和边框、样式化图片、创建基于浮动的布局、定位页面元素、如何编写打印样式,最后,也是很重要的经验之谈:如何编写能够维护的CSS,作者称之为CSS习惯。这些习惯可以为您节省很多积累时间,因此对于高手来说,其实也能起到查漏补缺之效。附录还列举了很多有价值的资源,可以作为读完本书后的提升资源。作者每个部分都运用大量的精心准备的例子,虽然稍嫌罗嗦,但不失为初学者的“实战”之道,对于开发者或者程序员来说,例子也会比枯燥的理论更容易让人接受。尤其对于常用工具(比如Dreamweaver)生成HTML和CSS的设计师来说,如能按照例子“实战”一遍,定能获益匪浅,提高手写代码能力。拿到这本书,可以说让人欣喜的,回想三年前我学习CSS的那段时间,往往只能苦啃英语,四处搜索解决问题的方案,并自己慢慢积累。如今,虽然随着“革命”的蓬勃发展,中文的相关书籍还是太少,有品质的更是凤毛麟角。对于阅读外文有困难的读者来说,《CSS实战手册》实在是一个好消息。允许我再罗嗦一遍,它能够大大降低您的学习成本和积累时间,如果您真的是初学者的话。

—— Realazy

Web开发者当前所急需的CSS专著

HTML(XHTML)很容易入门,但是与其他同样很容易入门的技术一样,HTML很容易被误用。在最初学习阶段的愉快感觉之后,开发者在实际工作中很快就会陷入到混乱之中。这并不是HTML的错,正是因为HTML的简洁性和易用性(低门槛),Web才得以以几何级数的速度飞速发展,HTML应该继续保持这样的特点。使用HTML显然并不是我们的目标,我们需要掌握一些更高层次的技术,这些技术可以指导我们以正确的方式使用HTML,建造出可用性良好的Web页面。从CSS的角度来使用HTML,就是一种最佳实践。其前提是开发者必须要深入掌握CSS,然后才能确定如何为CSS来使用HTML。

《CSS实战手册》就是Web开发者当前所急需的CSS方面的专著,而且它是从面向开发者的角度来写作的,将CSS的优雅和巨大潜力充分展示给了读者。它的重点在于展示CSS在目前主流的浏览器中可以实践的那些部分,而不是巨细无靡地罗列CSS规范的内容。这本书得到了Jolt的技术类书籍的大奖,据我所知,这是Web标准方面(HTML、CSS、JavaScript、Ajax、etc)的技术书籍中第一本获得Jolt大奖的。由于Jolt大奖的信誉,足以让我们对这本书高度关注。博文视点以最短的时间将这本书引进到国内,使得国内的Web开发者很幸运地及时读到了这本书。

我使用CSS来设计页面的样式已经有两年多了,不过至今仍然遇到一些难以解决的问题。特别是完全使用基于浮动的布局,似乎在一些场合的表现并不比基于table的布局更好。这是我对CSS最关注的地方,我想也是大部分Web开发者最关注的地方。《CSS实战手册》中有一章内容非常详细地介绍了基于浮动的布局,这有助于我们更加深刻地理解这种新的布局方式,克服对这种布局方式的不适应。从解决复杂的问题入手来阐述技术的应用,这是这本书的与众不同之处,这使得这本书更加实用(用现在流行的一个buzzword来说:更加pragmatic),我想这就是它获得Jolt大奖的原因。此外,这本书中还有一章专门介绍如何设计打印机友好的页面,这也是我很关心的部分,这是传统的页面设计的一个盲区。这本书还涉及到了页面设计中很多晦暗的部分,包括各种浏览器之间的差异,IE的各种鲜为人知的bug等等。《CSS实战手册》在黑夜中为我们打开了一盏探照灯,让我们清晰地看到了更加广阔的区域,对于全面采用CSS充满了信心。

基于Web标准的技术目前仍然处在迅速发展的阶段。能够反映出使用Web标准的最佳实践的书籍,在国内姗姗来迟,据我所知还是最近三年左右的事情(以博文视点的《网站重构》为起点)。但是这样的一些声音声势越来越大,逐渐汇成了一道洪流。假以时日,再过两三年,Web开发的面貌将会发生根本性的变化。

—— dlee

AI导读
核心看点
  • 本书严格遵循W3C标准,系统讲解CSS选择器、继承、层叠等核心机制,深入剖析margin折叠、百分比计算等易错陷阱,帮助读者建立严谨的CSS思维,避免编写出脆弱且难以维护的代码。
  • 提供大量从基础到高级的实战教程,涵盖文本格式化、边框背景、导航栏制作、表格表单美化及浮动定位布局,每章末尾的练习环节确保读者能将理论知识转化为实际开发能力,实现即学即用。
  • 特别强调浏览器兼容性与最佳实践,指导读者如何编写适应不同浏览器的代码,并介绍打印样式等高级应用。作为O'Reilly经典系列,其内容规范严谨,是纠正不良编码习惯、提升Web开发规范性的权威指南。
适合谁读
  • 适合希望系统掌握CSS底层原理、纠正以往野路子写法的Web前端开发工程师,特别是需要从HTML模板注入逻辑转向标准化CSS+DIV布局开发的程序员,帮助其提升代码规范性与可维护性。
  • 适合缺乏CSS实战经验的网页设计师,书中内容能帮助其理解CSS与HTML结构的紧密关系,学习如何将设计稿转化为符合Web标准的代码,避免因不懂技术限制而无法实现设计效果的困境。
  • 适合需要查阅CSS规范细节、解决浏览器兼容性问题或学习打印样式等特定功能的开发者,本书可作为案头工具书随时查阅,但其翻译质量参差不齐,建议有一定英语基础者参考原版或谨慎阅读。
读前提醒
  • 本书中文版翻译质量受到广泛批评,存在语句生硬、术语不准等问题,严重影响阅读体验。强烈建议读者在条件允许时阅读英文原版《CSS: The Missing Manual》,或结合其他高质量中文教程对照阅读,以免被错误翻译误导。
  • 书中部分技术内容基于较早期的Web标准,虽然CSS核心原理未变,但现代CSS3特性及新布局方式(如Flexbox、Grid)未涵盖。读者应将其作为学习CSS基础逻辑的教材,而非最新技术手册,需自行补充现代CSS知识。
  • 切勿跳过书中的警告与最佳实践部分,书中关于margin折叠、继承陷阱等内容的讲解极具价值。读者应严格按照教程动手实践,通过编写代码验证理论,切勿仅停留在阅读层面,否则无法真正掌握CSS的复杂行为。
读者共识
  • 读者普遍认为本书内容结构清晰、循序渐进,对CSS基础概念讲解透彻,特别适合零基础入门者建立正确的CSS知识体系。其提供的实战案例和错误排查思路对初学者极具帮助,能有效降低学习曲线,提升编码信心。
  • 尽管内容专业且实用,但中文版翻译质量极差是最大槽点,大量评论指出译文晦涩难懂、逻辑混乱。许多读者表示因翻译问题导致阅读体验极差,甚至产生误解,建议读者务必警惕翻译陷阱,优先选择原版或寻找更优质的中文替代品。
  • 本书被公认为经典的CSS入门教材,其强调标准合规和最佳实践的理念值得肯定。但鉴于Web技术迭代迅速,读者需意识到书中部分布局技术已过时,应将其作为理解CSS底层逻辑的辅助材料,同时关注现代CSS规范,避免技术栈滞后。

本导读基于书籍简介、目录、原文摘录、短评和书评生成,不等同于全文精读。

精彩摘录
  • "How Styles Cascade"
  • "Nearest Ancestor Wins"
  • "The Directly Applied Style Wins One Tag, Many Styles"
  • "The Tiebreaker: Last Style Wins"
  • "Controlling the Cascade"
  • "Adding Color to Text"
  • "Changing Font Size"
  • "For example, say you set the line-height property of the <body> tag to 150 percent. All tags inside the page would inherit that value. However, it’s not the percentage that’s inherited; it’s the calculated line height. In this example, instead of using a line-height of 150 percent applied to the <bo"
目录
The Missing 的荣誉
简介
第1部分 CSS基础知识
第1章 为CSS重新思考HTML
HTML:过去和现在

显示全部
用户评论
终于读完了,CSS还是蛮好玩的!
深入浅出,覆盖了css的方方面面,特别的是关于浏览器兼容的细节,同时也适合作为手册查阅。
看CSS,有这一本足矣
英文版的,不知道能不能搞定。
过时了...
当参考书来用.
: TP393.092/8228
陆陆续续看了几遍,对于CSS,学习本书后,多多练习并直到熟悉。
垃圾翻译
翻译很不给力,但是书的知识点覆盖全面,适合初级在一定的指导下阅读。
收藏