作者:empty 页数:313 出版社:empty |
AcknowledgementsA book like this is never asolo effort and thanks goto publisherNancy Rue nz el at Peachpit for encouraging me to write this secondedition, Editor-in-Chief Nancy Davis for her insightful advice andgood humor, and to Michael Nolan, New Riders Acquisition Editorfor once again setting everything in motion.On the productionteam, ] want to thank my development editor, Marta lust ak for herinput and direction as we thrashed the book into shape; productioneditor, Hilal Sala, for her grace and constant encouragement; DavidVanNess, the compositor, for his car c in laying out the pages, andDoug Adrian son for his detailed proofing A special thanks goes tomy technical reviewer, Virginia DeBolt for her skilled rev icw of mycode and the related text.Thanks next to all the readers of the first edition who wrote to mewith ideas and fc ed back I hope that I understood and have deliv-ered on what you were looking for, and do keep on writing to mewith your suggestions and sending me the URLs of your sitesAtBenefitfocus.comwhere I work.I want to thank my boss, VP ofEnterprise Product Strategy Nancy Sansom, forgiving me the flex-ibility I needed to write this book, for her constant energy and guid-ance in my work, and forgiving me the opportunity to work for areally amazing company T also want to thank Benefit focus'CEO,Shawn Jenkins, and COO.Jerry Lepore, for their support and leader-ship, and for building and running the best organization I have everworked in.
A big shout-out goes to the talented and creative members of theUser Experience Group team who I am privileged to manage andlearn from-they are Brad Bonham, Darin Cavenaugh, DanielNadeau, Michael Rosier, Mike Attis a no, Leah Gi orlando, TonyMalata nos, and Matt Me grue.T also really enjoy the challenge ofbeing part of the Product Strategy team, which includes the inven-tive minds of Raymond Minnis, Nathan Reel, John“Coach Wilson,Kinsey Ra we, and Mike Full an, Lets next mention some otherpeople who make working at Be nel it focus fun and exciting:NinaSossamon-Pogue, Andrew Alberico, Elena Tudor, Will DeupreeMan on Husman, Kelli Hicks, Tracey Snyder, Annmarie Fini, MichellePage l, NateD a Pore, Randy Chitwood, Glenn Miller, HeatherNorton, Rebecca Laney, PaulS part ow, Robert Moss, Don Taylor, andJonathan Chandler I appreciate your inspiration, friendship, andsupport everydayIlI save the last and biggest thankyou for my wife, Beth.She reallystepped up to help me with this book and her graphicdesign andwriting skills are on every single page.She checked my grammar,clarified my explanations, and re-punctuated my paragraph-lengthrun-on sentences that I like so much.She also laid out the diagrams,designed the Stylin'with CSS Website that is featured in Chapter 7(I wouldnt have made my photo so big but otherwise, nice job,Sweetie l) , and generally ensured that complete and coherent chap-ters went to the editor the first time This book is whatever it is inlarge part due to her unceasing attention to detail and constructivesuggestions for improvements.Thanks, my love.Finaly to my two lovely daughters, Jemma and Lucy I want to sayyou both have been incredibly patient and understanding whileyour daddy has been writing, and now we can go and get icecreamagain on Saturday morning sl
About the AuthorCharles Wyke-Smith has been creating Websites since 1994 andiscurrentlyDirectorofUserExperienceatBenefitfocus.com(www.benfitfocus.com] , a SouthCarolina software company thatprovides online benefits enrollment for over 40 million peoplethrough the nations major healthcare insurance companies,and that also develops consumer healthcare Websites, includingICyou.comandiHealthfocus.com.In 1986, he started PRINTZ Electronic Design, which was the firstall-computerized design hous c in SanFrancisco.Charles has workedas a Webdesign consultant for such companies as WellsFargo, ESPNVideogames, and the University of California, SanFrancisco.Anaccomplished speaker and instructor, he has taught multimedia andinterface design and spoken at many industry conferences.Charles lives in Charleston, SC, with his wife, Beth, and twodaughters.In his spare time, he composes and records music inhis home studio.
IntroductionIts hard to beleve its been over three years since I wrote the firstedition of Stylin'with CSS.In the intervening time, I have beeninvolved in the development of numerous Websites and havefine-tuned the way I use CSS in the process.I intended to makea few small adjustments to this book for the second edition tocover IE 7 and generally bring it uptodate, but I ended up makingnumerous improvements to the first three chapters and completelyrewriting the rest of the book.What should have taken weeks tookalmost ay car.The changes I have made reflect the inevitable improvement tothe skills of anyone who works constantly with CSS, and thesechanges also more deeply address two skills that ali programmersneed to master:to avoid rewriting code that they have previouslywritten elsewhere, and to learn to write code in the most economi-cal way possible, Ways in which you can achieve these two worthygoals in your own work a represented throughout this new editionof the book.
Reuse and DRYThe first goal, re-use of code, is a theme that Iexplore in severalchapters Is how techniques that let me create building blocks offunctionality, whether that is the skeleton framework of a page lay-out or a nicely styled list of links, and store them as CSS classes thatcan be quickly attached to my markup and modified for the specificusc.I've started to add these building blocks to a code library I callSry lib that contains all kinds of interlace elements, organized as CSScode with its associated XHTML markup.l have included this librarywith the downloadable code examples for the book on the Website,www.stylinwithcss.comIt'satanearlystagebutalreadycontainsmany useful components that have saved me hours of developmentwork, and T hope will do the same for you.I wil continue to publishnew code for this library and make it available for download.The other goal.economy of code, is another theme that runsthrough this new edition.For example, by adding a style at thehighest possible level in the document hierarchy, that style canthen influence numerous elements.I often see CSS stylesheetsthat declare the same font-family on every heading and paragraph,but adding that font-fam nil y to the top-level body tag means youonly write and maintain that style in one place The underlyingconcept is a programming maxim known as DRY, meaning DontRepeat Yourself We will look at many other examples ike this inthe chapters ahead.
Content, Structure, and Presentation·5
The Times They AreA-Changing·7
The Way We Were.7
The Future Just Happened·9
XHTML and HowTo Write It w 10
XHTML-The Rules·ll
An XHTML Template·16
Marking Up Your Content·18
Document Flow-Block and In linc Elements·18
DocumentHierarchy:MeettheXHTMLFamily·24
The ThreeWays to Style Your Document·28
Inline Styles·28
Embedded Styles.29
Linked Styles·30
Anatomy of a CSSRule·32
Writing CSS Rules·33
Targeting Tags Within the Document Hierarchy·34
Using Contextual Selectors·34
Working with Child Selectors·38
Adding Classes and IDsm 39
Introducing IDs·43
The Difference Between IDs and Classes·44
Specialized Selectors·45
Summary of Selectors·48
Pseudo-Classes·49
Anchor Link Pseudo-Classes·49
Other Useful Pseudo Classes·51
Pseudo-Elements·52
Inheritance·54
The Cascade·55
Sources of Styles55
The Cascade Rules·56
Rule Declarations·60
Numerical Values·60
Color Values . 63
Specifying Fonts in CSS·68
Introducing Font Collections·69
Exploring Font Families·71
Using Embedded Styles(for Now)·73
Setting the FontFamily for the Entire Page·74
Sizing Fonts·76
Inherited Styles in Nested Tags·79
Font Properties·81
Font-Style Property·81
Font-Weight Property·82
Font-Variant Property83
The Font Property Shorthand·84
Text Properties·84
Text-Indent Property·86
Letter-Spacing Property·88
Word-Spacing Property·89
Text-Decoration Property·90
Text-Align Property·9l
Line-Height Property·92
Text Transform Property·93
Vertical-Align Property·94
Using Font and Text Styles . 96
CHAPTER4:POSITIONINGELEMENTS
CHAPTER5:BASICPAGELAYOUT
Understanding the Box Model·102
The Box Border·103
The Box Padding.1D 6
The BoxMargins·106
Collapsing Margins·108
How Big Is a Box?·109
Floating and Clearing·114
The Float Property.114
The Clear Property·116
The Position Property·120
Static Positioning·120
Relative Positioning·12I
Absolute Positioning . 122
Fixed Positioning·123
Positioning Context·124
The Display Property·127
PositioningDisplay Example·128
Some Multi-Column Layouts·136
Introducing Styli b-the Stylin'Library·139
Width Matters·139
Floated Versus Absolutely-Positioned Layouts·140
A Simple Two-Column Fixed-Width Layout·141
Know Your Inner Diy. 146
Prevent Unwanted Overflow·146
Freely Style Your Inner Divs·147
Styling the Text·147
A Simple Two-Column Liquid Layout·147
Use a Little Constraint·149
To Float or Not To Float?. 150
A Three-Column Fixed-Width Layout·151
A Three-Column Liquid Layout·15s
Making All the Columns the Same Length·159
Faux Columns·160
Programmatically Extend Columns f and Round Their
Corners!·164
An Absolutely-Positioned Layout·168
Styling Tables·176
Styling Forms·189
How Forms Work . 189
Form Markup·190
Form Styling·198
Styling Lists and Menus·205
Lists·205
Creating CSS-Based Menus·217
The Stylin'Site·232
Setting Up the Folder Structure·234
Creating the Site Architecture·236
Copy the Required CSS Files from the Library·239
The e import Rule·239
The Text and Colors StyleSheet·243
The Page Markup·248