Smashing CSS
Tags
Summary
Smashing CSS is a practical CSS tutorial by Eric A. Meyer, an internationally renowned expert on web standards and CSS; the original English edition is titled Smashing CSS: Professional Techniques for Modern Layout. The Chinese edition, translated by Ji Guang, was published by Posts & Telecom Press in 2012 in the Turing Programming Series. The book has three parts. Part One, Fundamentals, introduces debugging and development tools (Firebug, Web Developer Toolbar, the IE Developer Toolbar, Dragonfly, Safari's Web Inspector, XRAY, SelectORacle, diagnostic style sheets, and reset style sheets) and systematically covers selectors, including pseudo-classes and pseudo-elements, specificity, importance, overriding shorthand properties, choosing between IDs and classes, the various attribute selectors, descendant and sibling selection, and generated content. Part Two, Core Techniques, is the heart of the book. One chapter offers a wealth of practical tips (line height, border color, hiding with display and visibility, image replacement, print styles, block-level links, list markers, document backgrounds, and more). Another chapter presents more than fifteen layout approaches, from multiple ways to clear floats, two- and three-column layouts, faux columns, fluid bleaching, the One True Layout, the Holy Grail, fluid grids, and em-based layouts to fixed headers and footers. A further chapter focuses on CSS effects such as pop-ups, menus, box punch-outs, rounded corners, CSS sprites, sliding doors, parallax, and ragged floats. Part Three, Cutting-Edge Techniques, discusses styling tables (headers, bodies, and footers, row headers, column-oriented styling, and table mapping and visualization) and looks ahead to HTML5 and CSS3: media queries, styling specific child elements and columns, RGBa and HSL colors, shadows, multiple backgrounds, and 2D transforms. The book is rich in examples, screenshots, code, and practical advice; the techniques demonstrated still belong to the traditional layout systems of floats and positioning, and can be read in contrast with later Flexbox and Grid.
Editor's review
这本书出自一位在 Web 标准领域深耕多年、并以讲解 CSS 著称的作者之手，难得之处在于不满足于罗列属性，而是围绕真实问题给出多套方案并比较取舍：同一个浮动清除有几种写法、两栏与三栏有多少种实现、同一效果哪些做法更稳妥，读者能从中看到判断的过程，而不只是复制粘贴一段代码。全书结构清晰，从工具与选择器起步，经布局与效果两大核心板块，最后落到 HTML5、CSS3、媒体查询等前沿特性，七章内容基本可以支撑一轮系统的进阶学习，每节都配有示例、截图与代码。需要提醒的是，本书成书于 2012 年，示范的仍是浮动与定位时代的布局手法，部分工具（如 Firebug）与写法已退出主流；但这些技术所训练的对盒子模型、浮动、层叠与选择器特殊性的理解并不过时，正适合用来打牢基础、再去理解 Flexbox 与 Grid 为何出现。对已能写简单样式、想进一步掌握布局与视觉效果套路的开发者，它依然是一本值得翻的进阶读物。
Who it's for
A good fit for
- 已掌握 HTML 与基础 CSS 语法、希望系统提升布局能力的开发者
- 需要处理老项目、维护浮动与定位布局代码的前端工程师
- 想通过多个示例对比学习经典 CSS 技巧与效果实现方式的人
- 网页设计方向的学生，可配合课程作为 CSS 进阶参考书
Not a good fit for
- 完全零基础、尚未写过 HTML 与 CSS 的初学者
- 只想学习 Flexbox、Grid 等现代布局方案的读者
- 需要最新浏览器特性与工程化实践的前端团队培训
Reading tips
- 先通读第 2 章选择器与第 3 章提示，这两章对日常写样式最直接有效。
- 第 4 章布局建议动手复现示例，对比清除浮动与各类栏布局方案的差异。
- 阅读前沿技术部分时，用现代浏览器验证示例，并与 Flexbox、Grid 方案对照。
- 注意成书时代局限，书中工具与写法需结合现行浏览器与开发者工具取舍。
About the publisher
Posts & Telecom Press
China · Founded in 1953
Posts & Telecom Press is known for its strengths in science and technology, computing, and information and communications titles, and has extended its publishing into photography, art, software learning, and inspirational growth, giving it a fairly diverse range. Its catalog includes computing and communications works such as Refactoring and Patterns (Revised Edition) and Huawei Switch Learning Guide (Second Edition), alongside bilingual collector's editions such as The Little Prince (Chinese-English-French illustrated collector's edition), The Great Gatsby, and Three Days to See. Beijing Ten Years: 1980-1990 and Ghost Blade: WLOP Personal Illustration Collection reflect its presence in photography and art. Its authors include Antoine de Saint-Exupéry, Helen Keller, Joshua Kerievsky, Wang Da, Zhang Zhaozeng, and WLOP.
Contents
- Copyright Notice
- Dedication
- Preface
- Acknowledgments
- Translator's Preface
- Part One: Fundamentals
- Chapter 1: Tools (Firebug, Web Developer Toolbar, IE Developer Toolbar, Dragonfly, Web Inspector, XRAY, SelectORacle, Diagnostic Style Sheets, Reset Style Sheets, IE9.JS)
- Chapter 2: Selectors (Pseudo-Classes and Pseudo-Elements, Styling Target Elements, Specificity, Importance, Shorthand Properties, Universal Selection, ID or Class, Attribute Selectors, Descendant and Sibling Selection, Generated Content)
- Part Two: Core Techniques
- Chapter 3: Tips (Validation, Font Value Order, Line Height, Border Values, Display and Visibility, Image Replacement, Print Styles, Block-Level Links, Margins and Padding, List Markers, Document Backgrounds)
- Chapter 4: Layout (Centering Block Boxes, Containing Floats, Clearing Floats, Two- and Three-Column Layouts, Faux Columns, Fluid Bleaching, the One True Layout, the Holy Grail, Fluid Grids, Em-Based Layouts, Fixed Headers and Footers)
- Chapter 5: Effects (Complex Spirals, CSS Pop-Ups, CSS Menus, Box Punch-Outs, Rounded Corners, CSS Sprites, Sliding Doors, CSS Parallax, Ragged Floats, Constrained Images)
- Part Three: Cutting-Edge Techniques
- Chapter 6: Tables (Headers, Bodies, and Footers, Row Headers, Column-Oriented Styling, Table Mapping and Visualization)
- Chapter 7: The Predictable Future (Styling HTML5, Media Queries, Styling Specific Child Elements and Columns, RGB Alpha and HSL Colors, Shadow Styles, Multiple Backgrounds, 2D Transforms)
FAQ
这本书适合 CSS 零基础的人读吗？
不太适合。作者在书中已假定读者具备一定 CSS 和 JavaScript 使用经验，零基础读者容易在浮动、特殊性等概念上卡住，建议先读一本入门书再来。
书名「精彩绝伦的CSS」的原版是什么？
原版为 Eric A. Meyer 所著 Smashing CSS: Professional Techniques for Modern Layout，中文版由姬光翻译，2012 年人民邮电出版社出版，ISBN 为 9787115284792。
书里的布局技术现在还实用吗？
书成书于 2012 年，示范的是浮动、定位时代的布局手法，部分工具如 Firebug 已淘汰。但它对盒子、浮动、层叠的理解仍有价值，可作为理解现代布局由来的基础读本。
这本书和图灵丛书里的其他 CSS 书有什么区别？
与《CSS 权威指南》偏重语法与规范详解不同，本书更侧重实用技巧与效果实现，汇集了作者在多处积累的具体做法与方案对比，属于进阶实战型读物。
Comments
Find this book
This site is an index: you start “Search all sources” in your browser, and the entries it lists all point to third-party sites; please judge their availability yourself.
