《精通CSS：高级Web标准解决方案(第2版)》（CSS Mastery）[PDF]

CSS作为Web标准的一部分，已经成为现代网页设计中必不可少的关键要素。CSS看似简单，但真正精通CSS绝非易事。在使用CSS开发网站时，会遇到形形色色的浏览器bug和不一致问题，而解决方案又五花八门，往往让使用者感觉千头万绪，不知从何着手。
本书将最有用的CSS技术汇总在一起，还总结了CSS设计中的最佳实践，讨论了解决各种实际问题的技术，填补了一直以来CSS图书的空白。正因如此，英文版出版后，一时洛阳纸贵，多次重印，并迅速登上Amazon图书排行榜前列，最高时甚至与《哈利·波特》并驾齐驱，创造了计算机图书的销售奇迹。
作为最新的升级版，本书淘汰了过时的内容，补充了大量CSS领域的新技术，涵盖了CSS 3和HTML 5，无愧于Web设计人员必读的第一经典著作。

——Shared by Fay

本人也是初学Web前端，希望能与大家多交流，如果有QQ群什么愿意拉我的，或者有意加我的可以加QQ：670883900。共同学习，一起进步。

很抱歉由于中秋节放假未能及时给大家供源，如果源代码一时无法下载，也可以前往http://www.cssmastery.com下载

Product Description:

Building on what made the first edition a bestseller, CSS Mastery: Advanced Web Standards Solutions, Second Edition unites the disparate information on CSS-based design spread throughout the internet into one definitive, modern guide. Revised to cover CSS3, the book can be read from front to back, with each chapter building on the previous one. However it can equally be used as a reference book, dipping into each chapter or technique to help solve specific problems. In short, this is the one book on CSS that you need to have.

This second edition contains:

1. New examples and updated browser support information
2. New case studies from Simon Collison and Cameron Moll
3. CSS3 examples, showing new CSS3 features, and CSS3 equivalents to tried and tested CSS2 techniques

What you’ll learn:

The best practice concepts in CSS design.
The most important (and tricky) parts of CSS
Identify and fix the most common CSS problems
How to deal with the most common bugs
Completely up to date browser support information
Covers CSS3 as well as CSS2 showing you the future of CSS

Who is this book for?

This book will be aimed towards intermediate web designers/developers, although the examples should be simple enough for novice designers/developers with a basic understanding of CSS to grasp. Readers will probably have read beginner/intermediate instructional books such as Web Standards Solutions and will be looking for more practical and in-depth information. This book is likely to have a broad appeal, attracting intermediate developers wanting to improve their skills as well as advanced developers wanting a useful reference.

The CSS 2/3 content of the book is delivered in a way that allows readers to learn CSS2 techniques that they can implement now in professional work, and then gem up on CSS3 techniques if they want to start looking towards the future.


About the Author:

In October 2006 Simon started Erskine Design—based in Nottingham, UK—that grew to become an eight-strong team of creative web designers and developers who are afraid of nothing. Some people say they're one of the best agencies out there, and their clients include major magazines, government stuff, software companies—and polar explorers.



Moons ago, he was a successful visual artist, and founded an independent arts org and annual arts festival, putting his degree to some use at least. Then he caught the interwebs bug.



As lead web developer at Agenzia from 2002 to 2006, he worked on numerous web projects for major record labels (such as Poptones, Universal) and bands (including The Libertines, Dirty Pretty Things, Beta Band), visual artists and illustrators (Jon Burgerman, Paddy Hartley, Lucy Orta, NOW Festival), businesses, community, and voluntary sector orgs, passionately ensuring everything was accessible and complied with current web standards.



He does a bit of public speaking here and there, and will generally do anything for a biscuit and cup of tea, but prefers hard cash.



He has lived in many cities, including London and Reykjavik, but has now settled back in his beloved Nottingham, where the grass is green and the girls are pretty. He also drives a 31 year old car, and has a stupid cat called Bearface.




Andy Budd is one of the founding partners at User Experience Design Consultancy, Clearleft. As an interaction design and usability specialist, Andy is a regular speaker at international conferences like Web Directions, An Event Apart, and SXSW. Andy curates dConstruct, one of the UK’s most popular design conferences. He’s also responsible for UX London, the UK’s first dedicated usability, information architecture, and user experience design event.



Andy was an early champion of web standards in the UK and has developed an intimate understanding of the CSS specification and cross-browser support. As an active member of the community, Andy has helped judge several international design awards and currently sits on the advisory board for .Net magazine. Andy is also the driving force behind Silverbackapp, a low-cost usability testing tool for the Mac. Andy is an avid Twitter user and occasionally blogs at andybudd.com.



Never happier than when he’s diving in some remote tropical atoll, Andy is a qualified PADI dive instructor and retired shark wrangler.




Cameron Moll has been designing meaningful web interfaces that harmonize utility and presentation since the late 1990s. His work or advice has been featured by HOW, Print, and Communication Arts magazines, Forrester Research, National Public Radio (NPR), and many others. He speaks on user interface design at conferences nationally and internationally, and he is also the author of Mobile Web Design.



Cameron is the founder and president of Authentic Jobs Inc., a targeted destination for web and creative professionals and the companies seeking to hire them. He is also the proprietor of Cameron Moll LLC, whose products include letterpress typography posters available for purchase at cameronmoll.bigcartel.com. And amid all this craziness, he still finds time to play ball with each of his four boys.



You can also find Cameron online at cameronmoll.com, twitter.com/cameronmoll, flickr.com/photos/authentic, and vimeo.com/cameronmoll.

Contents
Foreword ......................................................................................................................xiv
About the Authors........................................................................................................ xv
About the Technical Reviewers ................................................................................xvii
Acknowledgments.....................................................................................................xviii
Introduction ..................................................................................................................xx
Who is this book for?.........................................................................................xx
How is this book structured? .............................................................................xx
Conventions used in this book .........................................................................xxi
Chapter 1: Setting the Foundations .............................................................................3
Structuring your code ..........................................................................................4
A brief history of markup ................................................................................4
The power of meaning ............................................................................. 6
IDs and class names................................................................................7
Naming your elements.............................................................................9
IDs or Classes?......................................................................................10
Divs and spans ......................................................................................11
Microformats ..........................................................................................12
Different versions of HTML and CSS.....................................................16
Document types, DOCTYPE switching, and browser modes ......................18
Validation......................................................................................................18
Browser modes......................................................................................20
DOCTYPE switching..............................................................................21
Summary ...........................................................................................................22
Chapter 2: Getting Your Styles to Hit the Target ......................................................25
Common selectors .......................................................................................25
Pseudo-classes......................................................................................27
The universal selector ..................................................................................27
Advanced selectors ......................................................................................28
Child and adjacent sibling selectors ......................................................28
Attribute selectors ..................................................................................30
The cascade and specificity .........................................................................35
Specificity...............................................................................................35
Using specificity in your style sheets .....................................................37
Adding a class or an ID to the body tag.................................................38
Inheritance....................................................................................................39
Planning, organizing, and maintaining your style sheets..................................40
Applying styles to your document ................................................................40
Structuring your code.............................................................................42
Note to self.............................................................................................44
Removing comments and optimizing your style sheets.........................45
Style guides..................................................................................................45
Summary ...........................................................................................................48
Chapter 3: Visual Formatting Model Overview .........................................................51
Box model recap ...............................................................................................51
IE and the box model ...................................................................................53
Margin collapsing .........................................................................................54
Positioning recap...............................................................................................57
The visual formatting model .........................................................................57
Relative positioning ......................................................................................59
Absolute positioning .....................................................................................60
Fixed positioning....................................................................................61
Floating.........................................................................................................62
Line boxes and clearing.........................................................................63
Summary ...........................................................................................................69
Chapter 4: Using Backgrounds for Effect..................................................................71
Background image basics .................................................................................72
Rounded-corner boxes......................................................................................75
Fixed-width rounded-corner boxes............................................................... 75
Flexible rounded-corner box ..................................................................78
Mountaintop corners.....................................................................................81
Multiple background images ..................................................................83
border-radius.......................................................................................... 85
border-image..........................................................................................86
Drop shadows ...................................................................................................88
Easy CSS drop shadows..............................................................................88
Drop shadows à la Clagnut ..........................................................................91
Box-shadow ...........................................................................................91
Opacity ..............................................................................................................95
CSS opacity ...........................................................................................95
RGBa .....................................................................................................96
PNG transparency .................................................................................97
CSS parallax effect ................................................................................99
Image replacement..........................................................................................102
Fahrner Image Replacement (FIR) ............................................................103
Phark ..........................................................................................................104
Scalable Inman Flash Replacement (sIFR) ...............................................104
Summary .........................................................................................................106
Chapter 5: Styling Links ............................................................................................109
Simple link styling............................................................................................109
Fun with underlines .........................................................................................111
Simple link embellishments........................................................................111
Fancy link underlines..................................................................................112
Visited-link styles.............................................................................................113
Styling link targets ...........................................................................................113
Highlighting different types of links..................................................................115
Highlighting downloadable documents and feeds......................................117
Creating links that look like buttons.................................................................118
Simple rollovers..........................................................................................120
Rollovers with images ................................................................................120
Pixy-style rollovers .....................................................................................121
CSS sprites.................................................................................................123
Rollovers with CSS 3..................................................................................125
Pure CSS tooltips............................................................................................128
Summary .........................................................................................................130
Chapter 6: Styling Lists and Creating Nav Bars .....................................................133
Basic list styling ...............................................................................................134
Creating a basic vertical nav bar.....................................................................135
Highlighting the current page in a nav bar ......................................................138
Creating a simple horizontal nav bar...............................................................139
Creating a graphical nav bar ...........................................................................142
Simplified sliding door tabbed navigation........................................................144
Suckerfish drop-downs....................................................................................147
CSS image maps ............................................................................................151
Flickr-style image maps..............................................................................156
Remote rollovers .............................................................................................165
A short note about definition lists ....................................................................171
Summary .........................................................................................................172
Chapter 7: Styling Forms and Data Tables..............................................................175
Styling data tables...........................................................................................176
Table-specific elements..............................................................................178
Summary and caption..........................................................................178
thead, tbody, and tfoot .........................................................................178
col and colgroups.................................................................................179
Data table markup ......................................................................................179
Styling the table..........................................................................................181
Adding the visual style................................................................................182
Simple form layout...........................................................................................185
Useful form elements .................................................................................186
Form labels ..........................................................................................187
The basic layout .........................................................................................188
Other elements...........................................................................................189
Embellishments ..........................................................................................192
Required fields.....................................................................................193
Complicated form layout .................................................................................193
Accessible date input .................................................................................195
Multicolumn check boxes ...........................................................................196
Submit buttons.....................................................................................198
Form feedback ...........................................................................................201
Summary .........................................................................................................203
Chapter 8: Layout.......................................................................................................205
Planning your layout........................................................................................206
Setting the foundations ...................................................................................208
Centering a design using margins..............................................................210
Float-based layouts.........................................................................................212
Two-column floated layout .........................................................................213
Three-column floated layout.......................................................................216
Fixed-width, liquid, and elastic layout..............................................................219
Liquid layouts ..................................................................................................220
Elastic layouts .................................................................................................223
Liquid and elastic images................................................................................226
Faux columns ..................................................................................................228
Equal-height columns......................................................................................231
CSS 3 columns................................................................................................236
CSS Frameworks vs. CSS Systems ...............................................................238
Summary .........................................................................................................243
Chapter 9: Bugs and Bug Fixing ..............................................................................245
Bug hunting .....................................................................................................246
Common CSS problems.............................................................................246
Problems with specificity and sort order ..............................................247
Problems with margin collapsing .........................................................249
Bug hunting basics..........................................................................................252
Try to avoid bugs in the first place .............................................................254
Isolate the problem.....................................................................................254
Creating minimal test cases .......................................................................255
Fixing the problem, not the symptoms .......................................................256
Asking for help............................................................................................256
Having layout...................................................................................................256
What is layout?...........................................................................................257
What effect does layout have?...................................................................258
Workarounds ...................................................................................................260
Internet Explorer conditional comments.....................................................260
A warning about hacks and filters ..............................................................261
Using hacks and filters sensibly .................................................................262
Applying the IE for Mac band pass filter.....................................................262
Applying the star HTML hack .....................................................................263
Applying the child selector hack.................................................................264
Common bugs and their fixes .........................................................................264
Double-margin float bug .............................................................................264
Three-pixel text jog bug..............................................................................265
IE 6 duplicate character bug.......................................................................267
IE 6 peek-a-boo bug...................................................................................269
Absolute positioning in a relative container................................................269
Stop picking on Internet Explorer ...............................................................270
Graded browser support .................................................................................271
Summary .........................................................................................................273
Chapter 10: Case Study: Roma Italia .......................................................................276
About this case study ......................................................................................276
The foundation ................................................................................................278
An eye towards HTML 5.............................................................................279
reset.css .....................................................................................................281
The 1080 layout and grid ................................................................................282
Using grids in web design ..........................................................................283
Advanced CSS2 and CSS3 features ..............................................................285
Dowebsitesneedtolookexactlythesameineverybrowser.com?....................285
Attribute selector ........................................................................................288
box-shadow, RGBa, and text-overflow.......................................................289
Font linking and better web typography ..........................................................293
Setting font-size like it’s 1999.....................................................................293
Hanging punctuation ..................................................................................294
Multi-column text layout..............................................................................296
@font-face..................................................................................................298
Cufón, an interim step towards @font-face................................................301
Adding interactivity with Ajax and jQuery........................................................303
Ajax.............................................................................................................304
jQuery.........................................................................................................305
Using Ajax + jQuery for the search feature ................................................307
Summary .........................................................................................................310
Chapter 11: Case Study: Climb the Mountains .......................................................311
About this case study ......................................................................................312
Style Sheet organization and conventions......................................................314
The hard-working screen.css .....................................................................315
Describing contents .............................................................................315
Reset ..........................................................................................................316
IE style sheets using conditional comments ..............................................317
Grid flexibility ...................................................................................................317
How does the CTM layout work? ...............................................................318
Navigation control with body classes ..............................................................319
Highlighting the current page .....................................................................319
Layering the blockquote .............................................................................323
Strategically targeting elements ......................................................................325
Deep descendent selectors........................................................................325
The :first-child pseudo-class.......................................................................329
Adjacent sibling selectors...........................................................................331
Transparency, shadows, and rounded corners...............................................332
Our aim.......................................................................................................332
Caption image overlay and RGBa transparency........................................333
Combining classes .....................................................................................336
border-radius ..............................................................................................337
box-shadow ................................................................................................339
Positioning lists and revealing content............................................................340
Rounding the corners .................................................................................343
The main elevation chart ............................................................................344
Summary .........................................................................................................351
Index ............................................................................................................................355