The CSS Anthology

出版者:SitePoint

作者:Andrew, Rachel

页数:420

出版时间:2012-3

价格:$ 45.14

装帧:Paperback

isbn号码:9780987153029

具体描述

The CSS3 Anthology: 101 Essential Tips, Tricks & Hacks is a compilation of best-practice solutions to the most challenging CSS problems. The fourth edition of this best-selling full-color book has been completely revised and updated to cover newer techniques enabled by CSS3 and HTML5, and more recent trends in web design, such as responsive design. It's the most complete question-and-answer book on CSS available, with over 100 tutorials that show readers how to gain more control over the appearance of their web pages, create sophisticated web page navigation controls, and design for alternative browsing devices, including phones and screen readers. The CSS code used to create each of the components is available for download and guaranteed to be simple, efficient and cross-browser compatible.

作者简介

Rachel Andrew is a leader in the web standards community, with more than ten years’ experience as a web developer. Her writing is informed by the work of her company, edgeofmyseat.com, ensuring it remains grounded in the real world of client projects, large and small

目录信息

About the Author
Preface
Who Should Read This Book
What's in This Book
Where to Find Help
The SitePoint Newsletters
The SitePoint Podcast
Your Feedback
Acknowledgments
Conventions Used in This Book
1. Making a Start with CSS
How do I define styles with CSS?
CSS Syntax
What about older browsers?
How does the browser decide which styles to apply?
Will using a CSS framework make it easier to learn CSS?
A Decent Selection
2. Text Styling and Other Basics
How do I set my text to display in a certain font?
Should I use pixels, points, ems, or another unit identifier to set font sizes?
How do I remove underlines from my links?
How do I create a link that changes color when the cursor moves over it?
How do I display two different styles of link on one page?
How do I style the first item in a list differently from the others?
How do I add a background color to a heading?
How do I style headings with underlines?
How do I remove the large gap between an h1 element and the following paragraph?
How do I highlight text on the page?
How do I alter the line height (leading) of my text?
How do I justify text?
How do I indent text?
How do I center text?
How do I change text to all capitals using CSS?
How do I create a drop-caps effect?
How do I add a drop shadow to my text?
How do I change or remove the bullets on list items?
How do I use an image for a list-item bullet?
How do I remove the indented left-hand margin from a list?
How do I display a list horizontally?
How do I remove page margins?
How can I remove browsers' default padding and margins from all elements?
How do I use fonts other than those installed on most users' computers?
Working with Style
3. Images and Other Design Elements
How do I add borders to images?
How do I use CSS to remove the blue border around my navigation images?
How do I set a background for my page using CSS?
How do I control how my background image repeats?
How do I position my background image?
How do I fix my background image in place while the page is scrolled?
Can I set a background image on any element?
How do I create a gradient background?
Can I create a background image that scales with the browser window?
How do I add more than one background image to an element?
How do I make an element transparent so that the background shows through?
How can I add a drop shadow to an element?
How do I create rounded corners on an element?
Can I rotate images without using image-editing software?
What should I be aware of in terms of accessibility when using color?
In the Picture?
4. Navigation
How do I style a structural list as a navigation menu?
How do I use CSS to create rollover navigation without images or JavaScript?
Can I use CSS and lists to create a navigation system with subnavigation?
How do I make a horizontal menu using lists and CSS?
How do I create tabbed navigation using CSS?
My navigation is in an include, so how can I indicate which is the selected tab?
How do I put additional information in my navigation bar?
How can I visually indicate which links are external to my site?
How do I create rollover images in my navigation without using JavaScript?
How should I style a sitemap?
How do I create a drop-down menu with CSS?
Navigating Your Way to Success
5. Tabular Data
How do I lay out spreadsheet data using CSS?
How do I make my tabular data accessible?
How do I add a border to a table?
How do I stop spaces appearing between the cells of my tables when I've added borders using CSS?
How do I display spreadsheet data in an attractive and usable way?
How do I display table rows in alternating colors?
How do I change a row's background color when the mouse hovers over it?
How do I display table columns in alternating colors?
How do I display a calendar using CSS?
How do I create a pricing table?
Tables Topped
6. Forms and User Interfaces
How do I lay out a form with CSS?
Can I change the look and feel of form elements with CSS?
How do I highlight a field when the user tabs into or clicks on it?
What additional elements and attributes are part of the HTML5 forms spec?
Can I style input elements based on their validity?
How do I group related fields?
How do I create a form that reads like a sentence with inline fields?
What should I be aware of in terms of accessibility when creating forms?
You've Got Form
7. Cross-browser Techniques
In which browsers should I test my sites?
Can I just ignore older browsers?
How can I add support for CSS3 selectors in older browsers?
Can I add CSS or JavaScript and have it served only to older versions of IE?
How do I achieve rounded corners in browsers without support for border-radius?
How do I deal with the most common issues in IE6 and IE7?
How do I style HTML5 semantic elements that are unsupported in older browsers?
How can I test in many browsers when I only have access to one operating system?
Can I install multiple versions of Internet Explorer on Windows?
How should I go about testing on mobile browsers?
What do I do if I hit a CSS issue I'm unable to fix?
The validator complains about my vendor-specific extensions, so how do I validate CSS3?
All Users Catered For
8. CSS Positioning Basics
How do I decide when to use a class and when to use an ID?
What are block-level and inline elements in CSS, and can I change how these display?
How do margins and padding work in CSS?
How do I wrap text around an image?
How do I stop the next item floating up once I've floated an element?
How do I set an item's position on the page using CSS?
How do I center a layout on the page?
How do I create a thumbnail gallery?
Positioned: Absolutely
9. CSS for Layout
How do I create a two-column layout?
How do I create a two-column layout with a footer?
How do I create a three-column layout?
How do I create a fixed-width layout with a full-width header and footer?
How do I create a design that works well on mobile devices?
How do I create a print stylesheet?
How can I use responsive-design techniques when my site is image-heavy?
What about older browsers and responsive design?
What is the future of CSS layouts?
A Design for Life
Index
· · · · · · (收起)

用户评价

这本书的叙事风格非常独特，它不像一本冰冷的参考手册，反而更像是一位经验丰富的导师在与你进行一对一的深度交流。语言幽默而不失严谨，在讲解那些晦涩难懂的规范细节时，作者总能找到一个恰当的比喻或一个有趣的逸闻来调和气氛，使得学习过程充满了乐趣。我特别欣赏作者在批判性思维方面的引导。他并非全盘接受当前的“最佳实践”，而是会时不时地抛出一些反思性的问题，比如“我们是否过度依赖框架而牺牲了CSS的本质能力？”或者“未来十年，CSS的哪些特性可能被淘汰？”这种鼓励读者跳出既有框架去思考技术演进方向的引导，让这本书的价值远超出了学习特定技术范畴的范畴，它塑造了一种更为成熟的技术视野。这种风格，让我在深夜阅读时，也不会感到知识点的灌输带来的压力，反而更像是在探索一个充满未解之谜的领域，让人忍不住想一探究竟。

这本书的装帧设计着实让人眼前一亮，初拿到手时，那种沉甸甸的质感和封面材质的细腻触感，立刻就传达出一种“这是本硬货”的信号。我特别喜欢它在色彩运用上的克制与大胆的结合，深沉的主色调中穿插着一些极具现代感的霓虹色点缀，让人联想到那些充满活力的网页设计趋势。内页的排版更是体现了匠心独运，大片的留白不仅缓解了长时间阅读的视觉疲劳，更重要的是，它巧妙地将那些复杂的代码片段与流畅的文字论述区分开来，使得阅读的节奏感非常舒适。比如，在讲解某些高级布局技巧时，作者并非一味地堆砌截图，而是用定制的图例和流程图来可视化概念，这一点对于我这种更依赖视觉学习的开发者来说，简直是福音。我可以清晰地看到一个属性是如何影响整个文档流的，那种“豁然开朗”的感觉，在很多其他教材中是难以寻觅的。再者，纸张的厚度和光泽度控制得非常到位，即便是使用高亮笔做了标记，也不会有墨水渗透到下一页的困扰，这对于我这种喜欢在书本上留下思考痕迹的读者来说，是非常重要的细节体验。整体而言，这本书在物理层面上就成功地建立了一种专业、严谨且充满设计感的阅读氛围。

关于样式隔离和组件化架构的章节，可以说是这本书的“王炸”级别内容。在当前前端生态中，大型项目如何有效管理和维护日益膨胀的CSS代码库，几乎是所有团队面临的共同痛点。这本书没有盲目推崇某一种特定的解决方案（比如特定的命名约定或预处理器），而是从CSS本身的特性出发，深入剖析了作用域、特异性（Specificity）和继承机制的底层奥秘。作者对BEM、OOCSS等传统方法论的优缺点进行了极其客观的辩证分析，最终引导读者去构建一套更具适应性的、能与业务发展同步的样式策略。最让我感到震撼的是，书中对CSS-in-JS的性能开销和运行时复杂性的批判性审视，这在市面上大量推崇该技术的书籍中是极其少见的。它提醒我们，任何技术选型都必须回归到项目目标和性能预算上来权衡。这种平衡和深度，使得这本书不仅是学习CSS的必备指南，更是进行前端架构设计时不可或缺的理论基石。

从实用性的角度来看，这本书的案例代码库是我见过最干净、最贴合工业标准的集合之一。很多技术书籍的配套代码往往是零散的、难以维护的“玩具代码”，但这本书中的每一个示例似乎都像是直接从一个经过严格测试的大型项目中抽取出来的片段。例如，在探讨CSS动画性能优化时，作者不仅展示了如何使用`transform`和`opacity`来触发硬件加速，更重要的是，他提供了一套完整的性能度量框架，指导读者如何在真实的浏览器环境中进行帧率分析和内存泄漏排查。这种将理论与实践的“闭环”设计，极大地提升了我的工程实践能力。我甚至可以把书中的某些模块直接挪用到我当前正在进行的项目中，稍作修改即可投入使用，而无需进行大量的重构或调试。对于追求效率和代码质量的开发者而言，这种“即插即用”的高质量参考资料是无可替代的。作者对现代CSS特性（如CSS Grid的复杂嵌套应用、Subgrid的实际优势）的掌握深度，也充分展示了其深厚的行业积累。

我花了整整一个周末的时间来啃读其中关于响应式设计的那几章，感触颇深。这本书并没有停留在老生常谈的“媒体查询”这一基础层面，而是深入挖掘了那些被广泛讨论却鲜有深度解析的底层逻辑。作者在介绍弹性布局（Flexbox）时，那种对规范的精准把握和实际应用场景的独到见解，远超出了我此前阅读的任何资料。他没有简单地罗列属性值，而是通过一系列精心设计的“陷阱案例”来展示常见误区，并引导读者去理解浏览器渲染引擎在处理这些布局时的真实行为。尤其值得称赞的是，书中对“内容优先”设计哲学的阐述，那部分内容简直是醍醐灌顶。它不再将响应式看作是针对不同视口大小的修补工作，而是将其提升到一种与内容结构深度耦合的战略高度。我甚至发现，自己过去在项目中为了适应某个特定屏幕尺寸而进行的妥协和“hack”，其实都可以用书中提供的那套更优雅、更具前瞻性的思路来避免。这种从“如何做”到“为何如此做”的思维跃迁，是这本书带给我最宝贵的财富。

图书馆最好的一本CSS3书籍

图书馆最好的一本CSS3书籍

图书馆最好的一本CSS3书籍

图书馆最好的一本CSS3书籍

图书馆最好的一本CSS3书籍