Speaking in styles- P1

50 226 0
Speaking in styles- P1

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

Thông tin tài liệu

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. { speaking in styles } FUNDAMENTALS OF CSS fo r WEB DESIGNERS jason cranford teague Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Speaking in Styles Fundamentals of CSS for Web Designers Jason Cranford Teague New Riders 1249 Eighth Street Berkeley, CA 94710 510/524-2178 Find us on the Web at www.newriders.com To report errors, please send a note to errata@peachpit.com New Riders is an imprint of Peachpit, a division of Pearson Education Copyright © 2009 Jason Cranford Teague Notice of Rights All rights reserved. No part of this book may be reproduced or transmitted in any form by any means, electronic, mechanical, photocopying, recording, or other- wise, without the prior written permission of the publisher. For information on getting permission for reprints and excerpts, contact permissions@peachpit.com. Notice of Liability  e information in this book is distributed on an “As Is” basis without warranty. While every precaution has been taken in the preparation of the book, neither the author nor Peachpit shall have any liability to any person or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by the instructions contained in this book or by the computer so ware and hardware products described in it. Trademarks Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and Peachpit was aware of a trademark claim, the designations appear as requested by the owner of the trademark. All other product names and services identi ed throughout this book are used in editorial fashion only and for the bene t of such companies with no intention of infringement of the trademark. No such use, or the use of any trade name, is intended to convey endorsement or other a liation with this book. Printed and bound in the United States of America ISBN 13: 978-0-321-57416-9 ISBN 10: 0-321-57416-8 9 8 7 6 5 4 3 2 1 Printed and bound in the United States of America Project Editor: Nancy Peterson Development Editor: Brenda McLaughlin Technical Editor: Dave Artz Production Coordinator: Cory Borman Copy Editors: Dan Foster, Darren Meiss Compositor: Jason Cranford Teague Marketing Manager: Glenn Bisignani Indexer: Emily Glossbrenner Cover and Interior Designer: Jason Cranford Teague Cover Production: Andreas DeDanaan Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. In Memory of Mossie Stone Teague & Oscar Brantley Teague Thanks… Tara Dashiel & Jocelyn Dad & Nancy Johnny Pat & Red Boyd, Dr. G, & Judy Thomas, Archer, & David Charles Dodgson & John Tenniel Douglas Adams & Carl Sagan Neil Gaimen & Dave McKean The noise that kept me going… NPR, Ted Talks, Skepticality, Slice of Sci-fi , The Craig Charles Funk & Soul Show, Bat for Lashes, Amanda Palmer (AFP), Wilson Pickett, Carbon/Silicon, Scissor Sisters, Kate Bush, Bryan Ferry, The Fixx, Jonathan Coulton, Cranes, Johnny Cash, Cocteau Twins, Ladytron, Marvin Gaye, Client, Cracker, Corduroy, Al Green, The Wombats, Electric Six, World Party, Skinny Puppy, The Cramps, Poprocket, Franz Ferdinand, The Long Blondes, Gogol Bordello, Mojo Nixon, Beck, and The Specials. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Introduction . . . . . . . . . . . . . . . . . . . . . . ix PART 1 A Web Primer What is a Web Page? . . . . . . . . . . . 1 HTML, JavaScript, and CSS . . . . . . . . . . . . . . . 2 What Is the DOM? . . . . . . . . . . . . . . . . . . . . . . . . 4 HTML and CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . 6 JavaScript and CSS . . . . . . . . . . . . . . . . . . . . . . 10 Flash and CSS . . . . . . . . . . . . . . . . . . . . . . . . . . 14 Web Designer’s Toolbox . . . . . . 17 Web Browsers . . . . . . . . . . . . . . . . . . . . . . . . . 18 Internet Explorer (IE) . . . . . . . . . . . . . . . . . . . . . . 20 Firefox (FF) . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 Safari (Sa). . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 Opera (Op) . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 Test Internet Explorer 6 on the Mac with Crossover. . 22 Firefox Add-Ons . . . . . . . . . . . . . . . . . . . . . . . . 24 Firebug . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 Colorzilla . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 Palette Grabber . . . . . . . . . . . . . . . . . . . . . . . . . 26 MeasureIt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 Pixel Perfect. . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 Code Editors . . . . . . . . . . . . . . . . . . . . . . . . . . 28 Coda. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 TopStyle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 CSSEdit. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . 29 Online Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 ColorJack . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 Adobe Kuler. . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 Typetester . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 SUMO Paint. . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 Contents 1 2 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. The Myths of CSS . . . . . . . . . . . . . . 35 Myth 1: CSS Is for Developers, Not Designers. . . . . 36 Myth 2: CSS Can’t Handle the Designs I Need . . . . 40 Myth 3: CSS Has Too Many Browser Inconsistencies . 44 PART 2 CSS Grammer Syntax: Creating Meaning . . . . . . . . . . . 49 The Rules of Style . . . . . . . . . . . . . . . . . . . . . . 50 Parts of a Style Rule . . . . . . . . . . . . . . . . . . . . . . 52 A Basic Style Rule . . . . . . . . . . . . . . . . . . . . . . . 54 Declaring More Styles . . . . . . . . . . . . . . . . . . . . . 56 Combining Rules . . . . . . . . . . . . . . . . . . . . . . . . 58 Types of Selectors . . . . . . . . . . . . . . . . . . . . . . 60 HTML Selector . . . . . . . . . . . . . . . . . . . . . . . . . . 60 Class Selector . . . . . . . . . . . . . . . . . . . . . . . . . . 62 ID Selector . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68 Styles in Context . . . . . . . . . . . . . . . . . . . . . . . 70 Styles Based on Where Something Is . . . . . . . . . . 72 Styles for Children . . . . . . . . . . . . . . . . . . . . . . . 76 Styles for Siblings. . . . . . . . . . . . . . . . . . . . . . . . 78 Styles for Special Cases . . . . . . . . . . . . . . . . . 80 Link States . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80 Styles for Link Actions. . . . . . . . . . . . . . . . . . . . . 82 Styles for Dynamic Actions . . . . . . . . . . . . . . . . . 84 Styles for Parts of a Paragraph . . . . . . . . . . . . . . . 86 Semantics: Making Sense of Styles . . 89 Where to Put Style Rules . . . . . . . . . . . . . . . . 90 Inline Styles for an HTML Tag . . . . . . . . . . . . . . . . 92 Embed Styles in a Web Page . . . . . . . . . . . . . . . . 94 External Styles in a Web Site . . . . . . . . . . . . . . . . 96 Adding Notes to CSS . . . . . . . . . . . . . . . . . . . 104 Inheritance . . . . . . . . . . . . . . . . . . . . . . . . . . . 106 Overriding Inheritance . . . . . . . . . . . . . . . . . . . . 108 3 5 4 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Order . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110 Specifi city . . . . . . . . . . . . . . . . . . . . . . . . . . . 112 Determining a CSS Rule’s Weight. . . . . . . . . . . . 114 Importance . . . . . . . . . . . . . . . . . . . . . . . . . . 116 Media . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118 The Cascade . . . . . . . . . . . . . . . . . . . . . . . . . 120 Vocabulary: Talking the Talk . . . . . . . 123 Values . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124 Keywords. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124 Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125 Fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126 Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130 Background . . . . . . . . . . . . . . . . . . . . . . . . . . 134 Image Repeat . . . . . . . . . . . . . . . . . . . . . . . . . 136 Image Position . . . . . . . . . . . . . . . . . . . . . . . . . 138 Box . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140 Display . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142 Visibility. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144 Float . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146 Width and Height . . . . . . . . . . . . . . . . . . . . . . . 148 Border. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152 Padding. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154 Margin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156 Fixing IE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158 Position . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160 Position Type . . . . . . . . . . . . . . . . . . . . . . . . . . 160 Setting the 2-D Position . . . . . . . . . . . . . . . . . . 162 Setting the 3-D Position . . . . . . . . . . . . . . . . . . 164 Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166 Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168 Cursor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170 Design Enhancements . . . . . . . . . . . . . . . . . 172 Shadows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172 Rounded Corners . . . . . . . . . . . . . . . . . . . . . . . 174 Outline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174 6 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. PART 3 Speaking Like a Native Designing with CSS . . . . . . . . . . . 179 The Process: An Overview . . . . . . . . . . . . . . 180 Plan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182 Sketches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182 Page Flow . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184 Wire Frames . . . . . . . . . . . . . . . . . . . . . . . . . . 186 Mood Boards . . . . . . . . . . . . . . . . . . . . . . . . . . 188 Visual Comps. . . . . . . . . . . . . . . . . . . . . . . . . . 190 Build . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192 Cutting Chrome . . . . . . . . . . . . . . . . . . . . . . . . 192 The Style Guide . . . . . . . . . . . . . . . . . . . . . . . . 194 Prototype. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196 Deploy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204 Alpha . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204 Beta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204 Launch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204 Iterate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206 Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . 209 Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210 Head and Body . . . . . . . . . . . . . . . . . . . . . . . . 210 The HTML Framework for CSS . . . . . . . . . . . . . . 212 Adding CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . 214 Default Styles . . . . . . . . . . . . . . . . . . . . . . . . 216 Resetting Browser Default Styles . . . . . . . . . . . . 216 Setting Your Default Styles . . . . . . . . . . . . . . . . 216 The Grid . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218 Rows. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218 Columns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220 Sections . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222 Typography . . . . . . . . . . . . . . . . . . . . . 225 Font Choices . . . . . . . . . . . . . . . . . . . . . . . . . 226 Core Web Fonts . . . . . . . . . . . . . . . . . . . . . . . . 226 Web-Safe Fonts . . . . . . . . . . . . . . . . . . . . . . . . 228 Downloadable Fonts . . . . . . . . . . . . . . . . . . . . . 230 7 8 9 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Fluid Typography . . . . . . . . . . . . . . . . . . . . . . 232 Choosing Typefaces . . . . . . . . . . . . . . . . . . . . . 234 Styling Text . . . . . . . . . . . . . . . . . . . . . . . . . . 238 Headers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238 Paragraph and Block Quotes . . . . . . . . . . . . . . . 240 Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240 Navigation . . . . . . . . . . . . . . . . . . . . . . 243 CSS Sprites . . . . . . . . . . . . . . . . . . . . . . . . . . 244 Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246 Menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248 Buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252 Chrome . . . . . . . . . . . . . . . . . . . . . . . . . . 257 Using Transparent Images . . . . . . . . . . . . . . 258 Fixing Transparent PNGs in IE6 . . . . . . . . . . . . . 260 Defi ning the Grid . . . . . . . . . . . . . . . . . . . . . . 262 Columns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262 Rows. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264 Logos and Forms . . . . . . . . . . . . . . . . . . . . . 266 Logos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266 Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266 Defi ning Sections . . . . . . . . . . . . . . . . . . . . . 268 Alternate Version for Ads. . . . . . . . . . . . . . . . . . 268 Final Flourishes . . . . . . . . . . . . . . . . . . . . . . . . 270 The Last Word . . . . . . . . . . . . . . . . . 273 CSS Validation . . . . . . . . . . . . . . . . . . . . . . . . 274 Designing for Web Standards?. . . . . . . . . . . . . . 275 CSS Frameworks . . . . . . . . . . . . . . . . . . . . . . 278 Creating Your Own CSS Frameworks. . . . . . . . . . 279 CSS for Other Media . . . . . . . . . . . . . . . . . . . 280 Mobile Devices . . . . . . . . . . . . . . . . . . . . . . . . 280 Print . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281 CSS Best Practices . . . . . . . . . . . . . . . . . . . . 282 General . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282 Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284 Coding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285 Optimizing . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286 10 11 12 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. APPENDIXES A: voxLibris Code . . . . . . . . . . . . . . 291 index.html . . . . . . . . . . . . . . . . . . . . . . . . . . . 292 main.css . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295 default.css . . . . . . . . . . . . . . . . . . . . . . . . . . . 296 layout.css . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297 layout.css . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297 navigation.css . . . . . . . . . . . . . . . . . . . . . . . . 298 chrome.css . . . . . . . . . . . . . . . . . . . . . . . . . . 300 B: CSS Values . . . . . . . . . . . . . . . . . . 303 Lengths . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304 Pixels or Ems? . . . . . . . . . . . . . . . . . . . . . . . . . 304 Fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 306 URLs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309 Color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310 Color Opacity . . . . . . . . . . . . . . . . . . . . . . . . . . 310 C: Fixing Internet Explorer . . . . 317 Understanding Quirks . . . . . . . . . . . . . . . . . 318 Fix 1: Doctype Switching . . . . . . . . . . . . . . . 319 Fix 2: Conditional Styles . . . . . . . . . . . . . . . 320 Fix 3: Underscore Hack . . . . . . . . . . . . . . . . 321 Common IE6 Issues . . . . . . . . . . . . . . . . . . . 322 Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . 324 A B C Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... Unlike speaking or writing, however, visual communication happens almost instantaneously on a visceral level Within seconds of seeing something, we should be able to understand its visual message Obviously some designs such as illustrations may take additional deciphering, but when we look at something we can’t help trying to interpret its meaning Although Web design is a visual medium, it is created using... We are not just following the stated directions; we are also calculating what the person giving the directions is actually thinking We fill in missing details, such as that all four lines should touch at their ends As good as they are becoming at understanding humans, computers still require that we communicate explicitly when we describe something, especially when that something is a visual design... details including widths, heights, colors, margins, padding, borders, backgrounds, and type styles Understanding this language, then, becomes critical to achieving the best online designs One of the constant complaints I hear from designers is that developers never execute their design correctly Learning CSS gives you two important advantages as a designer: 01 Control over how your designs look online... 01 Control over how your designs look online If something is the wrong color or is not lining up right, you will know what is wrong and how to fix it 02 The ability to create better Web designs Knowing how CSS works means knowing how to get the best results from what is possible The good news is that speaking CSS is not that different from speaking in English or any other “human” language—it just takes... designs, you need to learn how to speak in styles Introduction Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Verbalizing the Visual I want you to think of a shape It can be any shape you want—a circle, a square, a triangle, an eight-pointed star, or an ameboid glob—but keep it to a single continuous shape I want you to hold that shape in your mind, or, if you need to, scratch... Reading This Book I wrote this book for designers of all stripes—visual, interactive, user experience, information architecture However, it is really for anyone who wants to learn how to use CSS Speaking in Styles is split into three sections and includes three appendixes: Part 1: A Web Primer Defines what makes a Web page, introduces some tools you will need to build one, and dispels some popular... and apply them to a Web page, including the important vocabulary designers need to know Part 3: Speaking Like a Native Follows the creation of a simple Web page design, emphasizing the best practices you should use Appendixes Includes all of the code for Part 3; the length, font, and color values you use with CSS; and a list of common fixes for dealing with the bugs in Internet Explorer Please purchase... styles the objects, hooking into the HTML tags to style them individually or as a group and give each object a unique name called an ID Adobe Flash Pages built with Flash use a browser plug -in to render fla files Behind the scenes, though, Flash files are inserted into a page using HTML and can use CSS for style We will talk about Flash throughout the JavaScript changes the objects, allowing you to make style... papers on the Internet with basic styles, such as underline, bold, and italic, and link these documents into a kind of “web” of documents At first, all he wanted was to be able to display text and link relevant content together, but it quickly became necessary to show charts, graphs, and photos, so the ability to embed images in the page was added in the first graphicsbased browser, Mosaic Originally, tags... PAG E ? HTML, JavaScript, and CSS continued What Is the DOM? A Web page document is a collection of different objects created using HTML and represented by something called the Document Object Model (DOM) DOM sounds kind of “techy,” but really a model is simply a representation of something, an object is a part of that something, and the document is the something being represented So, the DOM is a model . just following the stated directions; we are also calcu- lating what the person giving the directions is actually thinking. We  ll in missing details,. decipher- ing, but when we look at something we can’t help trying to inter- pret its meaning. Although Web design is a visual medium, it is created using writ-

Ngày đăng: 24/10/2013, 14:15

Từ khóa liên quan

Tài liệu cùng người dùng

  • Đang cập nhật ...

Tài liệu liên quan