CSS Web Design For Dummies- P8

Chia sẻ: Thanh Cong | Ngày: | Loại File: PDF | Số trang:35

0
53
lượt xem
8
download

CSS Web Design For Dummies- P8

Mô tả tài liệu
  Download Vui lòng tải xuống để xem tài liệu đầy đủ

Tham khảo tài liệu 'css web design for dummies- p8', công nghệ thông tin, kỹ thuật lập trình phục vụ nhu cầu học tập, nghiên cứu và làm việc hiệu quả

Chủ đề:
Lưu

Nội dung Text: CSS Web Design For Dummies- P8

  1. 332 Part V: The Part of Tens The SelectORacle: Getting Explanations About Complicated Rules Do you have a CSS style so complex that you’re not sure even you, the author, understand it? Or did you come across an interesting Web page and look at the source, only to discover a line of CSS code that you simply can’t visualize, like this one: body > h2:not(:first-of-type):not(:last-of-type); What does that CSS code mean? What does it select in the body? Some H2 headlines, but which ones? To find a well-explained answer, a translation of the meaning of the rule, and also get a list of any possible errors, go to this site: http://gallery.theopalgroup.com/selectoracle/ You’ll be glad you did. Explanations in English or Spanish are available. What does the SelectORacle say about that H2 rule? Here’s his/her/its answer: “Selects any h2 element that is not a first child of its type and that is not a last child of its type, that is a child of a body element.” For an automated translation, this oracle does a pretty fine job. It can be especially helpful in clarifying complicated relationships. Providing Alternatives For space conservation and other reasons, I’ve avoided using the alt attribute with the img element in this book. In plain English, when I displayed a graphic, I didn’t simultaneously supply a text explanation of that graphic. The text is supposed to fill in the gap left if, for example, the user has a slow Internet connection (or a device that has a very small screen like that of a cell phone or PDA) and, consequently, a graphic cannot be displayed. Another scenario: The blind often listen to audio versions of Web pages. They appreciate hearing a text description of the graphics that they can’t see. These are all valid reasons for using alt. “So, why didn’t you use alt?” I can hear someone saying. “What’s wrong with you?” TEAM LinG - Live, Informative, Non-cost and Genuine !
  2. Chapter 19: Ten Topics That Don’t Fit Elsewhere in the Book (But Are Important) 333 My defense is straightforward. Many computer books include long code exam- ples that go on and on, sometimes for pages. I think that’s bad practice. Sample code should make its point as simply and clearly as possible. I don’t want the reader struggling through lots of code that’s not related to the topic being illus- trated. So I leave out as much as I can (for example, it’s desirable to use the element in your Web pages, but you won’t find that in this book). Another alternative technique, although perhaps less important than alt, is providing a default font family. You do this on the assumption that not every- one has, for example, Microsoft’s famous sans serif font Arial. Yet you want even those viewers to see a sans font (not a serif font, like Times Roman). This isn’t essential, but it’s nice. Even some validators that check CSS code suggest that you do this, if they catch you specifying a particular font family, like this: p { font-family: arial } The suggestion is that you specify the font you really want first, and then you can add any additional fonts that you want to use as substitutes. Finally, if none of your substitutes are available (where are these people with zero fonts?), you end your wish list with a generic font, of which CSS has five: Serif, Sans Serif, Monospace, Cursive, and Fantasy. I suggest that you stick with the first three, unless you design wedding invitations (Cursive) or work for a clown school (Fantasy). Here’s how to add a generic font family: p { font-family: arial, sans-serif } Letting the User Decide How about providing some alternative style sheets, rather than just enforcing one look on your Web documents? Who gets to select between these alterna- tives? Your audience, the viewers of your Web pages, the welcome guests. I’m not suggesting that you become as superhumanly accommodating and polite as some societies. I understand that in some countries, hurricanes are respectfully described as “guest winds.” I’m not prepared to go that far. But civility is always welcome, and users usually appreciate having some say in how things look. TEAM LinG - Live, Informative, Non-cost and Genuine !
  3. 334 Part V: The Part of Tens Netscape 6 lists any alternative styles in its View➪Use Stylesheet menu. Internet Explorer doesn’t offer this feature, but users can adjust their color preferences, for instance, by following these steps: 1. Choose Tools➪Internet Options in Internet Explorer. The Internet Options dialog box opens. 2. Click the General tab. 3. Click the Colors button. Make changes in the Colors dialog box that opens and click OK. Similarly, from the General tab, you can click the Fonts button to modify those. Don’t follow Netscape’s example (it’s not convenient for users to check a menu each time they visit a new Web page, just to see if alternative styles are available). Instead, describe alternative styles right on your Web page and provide links for users to click to shift to a new style. Perhaps you have a style for fewer graphics or larger text (for people with vision problems). You could also vary the styles based on the user’s favorite color or personal hobbies. It’s simply always nice to ask a guest if they want something to drink, and if so, what would they prefer. Even a guest wind appreciates consideration. If you want to have alternative style sheets for Netscape menus, just add extra link elements in your head section, like this (the title appears in the menu): To provide alternatives for most of the world (Internet Explorer users), you could insert elements in the body of your document that can simply send the user to a different page, or an alternative site altogether. This isn’t a CSS solution, though. So if you want to switch styles via CSS external style sheets (as the Netscape solution does), you have to write a script for IE. For exam- ples, go here: http://www.alistapart.com/ TEAM LinG - Live, Informative, Non-cost and Genuine !
  4. Chapter 19: Ten Topics That Don’t Fit Elsewhere in the Book (But Are Important) 335 Exploring Visual Studio Several years ago, starting in 1997 with Visual Interdev, Microsoft managed to merge all of its programming languages and programming tools into a single suite of tools, now called Visual Studio. You’ll find lots of ways to create Web sites, attach databases to them, build modules in several languages (that can work together), and otherwise simplify life for programmers and people cre- ating Web sites. CSS was not omitted from this suite. Although many Web developers and programmers in other fields are rather unhappy with Microsoft, the company remains difficult to ignore. For good or ill, Microsoft sets the standards and will continue to do so for the foreseeable future. Developers and programmers who refuse to use Microsoft products are a bit like drivers who refuse to use highways. It’s possible to do but inconvenient. If you haven’t looked it over, you might want give Visual Studio a try. Inexpensive versions are available on eBay. Sure, other CSS editors are out there, but none offers the huge number of features built into Visual Studio. None comes remotely close. We’re talking advanced debugging, macro facili- ties, direct connection to databases, and hundreds of tools, wizards, controls, add-ins, and other features that make the journey from idea to finished Web site much easier and faster. If you prefer the back roads, more power to you (and I mean that literally). If you want the highway, no other programming suite is even worth considering. Some may say that this book is too Microsoft-centric, but my only response is to look at the marketplace. The huge majority of users (as opposed to some computer professionals for whom Microsoft can do nothing right) are over- whelmingly Microsoft-centric too. Figure 19-1 provides a look at some of the features in the CSS design area of Visual Studio. During 2005, Microsoft is rolling out a set of programming products it calls Express versions. Microsoft touts these technologies — including Visual Web Dev 2005 Express (ASP.NET) — as products that expand the Visual Studio line to include easy-to-use tools for hobbyists and novices who want to build dynamic Windows applications and Web sites. All the same, these are power- ful products. For example, the Visual Basic Express version is actually capa- ble of doing what the “professional” version can do. The primary difference is that the Express version has a friendlier user interface (fewer options are immediately visible, so you don’t get overwhelmed) and a less technical slant (so beginners can get acquainted without feeling threatened). Give these products a try. The beta versions are free for the download now at http://lab.msdn.microsoft.com/express/ TEAM LinG - Live, Informative, Non-cost and Genuine !
  5. 336 Part V: The Part of Tens Figure 19-1: If you plan to do any serious Web site develop- ment — no matter what kind — give Visual Studio a try. Rediscovering Columns Lots of sites (like those for newspapers and magazines) cry out for columnar layouts. Web pages often look best when the text is divided into easily-scanned widths, perhaps two or three columns per page. Maybe you remember from Chapter 12 the exploration of various ways to use columns in your Web pages that you can do with pure CSS, without resorting to tables. However, there are additional techniques involving columns you might want to experiment with. If this topic is of further interest to you, try visiting this Web site, which specializes in CSS column design and has excellent informa- tion and resource lists for other aspects of CSS as well: http://glish.com/css/ TEAM LinG - Live, Informative, Non-cost and Genuine !
  6. Chapter 19: Ten Topics That Don’t Fit Elsewhere in the Book (But Are Important) 337 Playing with Positions Setting the CSS position property to absolute enables you to superimpose elements to your heart’s content. The following sample code paints text on top of text. This is also one way of adding simple shadows (merely offset the absolute positions by a small amount, as in this example). Also notice that the order in which you place these divisions matters: They’re painted on the browser window in the order in which they’re listed. So, in this example, the last div, colored hot pink, is on top of the other two. Its characters are super- imposed on the other text, as shown in Figure 19-2. SUPER imposition imposition TEAM LinG - Live, Informative, Non-cost and Genuine !
  7. 338 Part V: The Part of Tens Figure 19-2: Experiment with super- imposing elements on top of each other by using absolute positioning. TEAM LinG - Live, Informative, Non-cost and Genuine !
  8. Index • Symbols and •A• Numerics • absolute specification divisions, placing independently, 218 * (asterisk) drawbacks of using, 19 attribute selector, creating, 53 nesting boxes, 232 matching parts of words in attributes, positioning, 72, 78 266–267 sizes, typeface, 99 universal selector, styling, 262 text, painting atop, 337–338 */ (asterisk, forward slash), 38 active content, caution about, 246, {} (braces) 248, 283 grouping, 35 Active Server Page, 266–267 JavaScript procedure beginning and Adobe Photoshop end, 282 backgrounds, 143–144, 146 writing style, 300 borders, creating, 118–119, 123 [] (brackets), 264 shadowing text, 105, 235 ^ (caret), 266–267 text, fading, 27 : (colon) 3D effect, 166–167 graphics file, describing, 247 aligning text property and value, separating, 33 changing all, 63–64 , (comma), 257, 259 descriptive values, 139–140 $ (dollar sign), 266–267 horizontal, 141–142 = (equals sign), 298 by percentages, 140–141 /* (forward slash, asterisk), 38 vertical, 138–139 (greater than, less than symbols), 298 all-purpose properties # (hash symbol), 39 font, 100–101 — (em-dash), 109 specifying, 37–38 % (percent sign), 80 analog effects, 21 ; (semicolon) animation error message, 307–308 digital, manipulation of, 21 graphics files, describing, 247 fading text, 27 multiple declarations, 49 arithmetic omitting, 62 coordinates, 72 ~ (tilde), 53 specificity, calculating, 44–45 3-D z-axis, 81–82 drop-shadow effect, 105–106 aspect ratio, 107 text, creating, 166–167 TEAM LinG - Live, Informative, Non-cost and Genuine !
  9. 340 CSS Web Design For Dummies ASP.NET text colors, 261 express version, 335 texturing, 143–147, 243–244 viruses, 283 balance, 156–158 asterisk (*) bandwidth restrictions, 233 attribute selector, creating, 53 baselines, line spacing, 135 matching parts of words in attributes, Basic programming, 238–239 266–267 blank areas universal selector, styling, 262 balance, 156–158 asterisk, forward slash (*/), 38 headline spacing, eliminating extra, 102 attributes lack of, using font to balance, 94 CSS equivalent, 34–35 reviewing, 156 matching parts of words in, 266–267 thirds, rule of, 166 selections, 264 violating, 166 selectors, using as, 50–51 blinds, vertical and horizontal transition transition, 242 wipes, 29, 241–242 types, matching, 53 blinking text, 103 Aunt Mildred’s glazed carrots recipe, 327 blocks auto elements parent and child, distinguishing, 46 centering, 201 positioning, 80–81, 169 Internet Explorer, forcing (!DOCTYPE), blurring 201–202 static filter, 236–237 layout, controlling, 197–200 timing, 321–322 margins, specifying, 200 bold text, 95 vertical positioning, 202–203 borders beveled (inset), 119–120 •B• boxes, 171 choosing styles, 186–188 Baby Kruffy font, 90 colors, 118–119, 190–191 background described, 184 box elements, 170, 178 horizontal rules, 179 browser, positioning against, 73 inheritance, excluded from, 46 colors, 114, 123–125 missing, 320 erasing to create silhouette, 159–160 mixing and matching styles, 188–189 floating ball focal point, freeform design simple, specifying, 184–186 and, 220–221 specifying, 100 images and design rule of thirds, width, specifying, 189–190 166–168 bottom box element, 170 individual properties, setting, 147–148 box in/out transition wipes, 29 non-inheritable, 46, 148 boxes paragraph, 177 borders, 171 positioning, 149–151 content area width and height, 170 special repeats, 148–149 TEAM LinG - Live, Informative, Non-cost and Genuine !
  10. Index 341 described, 169–170 buttons horizontal positioning, 176–178 checking, 276–277 margins separating paragraphs from image-exchange script, 244–246 nearby elements, 172 outset, 121 nesting boxes within, 232 padding, 171–172 text, breaking up with horizontal lines, •C• 178–181 C programming vertical positioning, 173–176 coding exactness, 287 braces ({}) language- versus type- attribute, 281 grouping, 35 punctuation, checking, 297 JavaScript procedure beginning and qualities derived from, 38 end, 282 scripting, 238–240 writing style, 300 Calisto font, 93 brackets ([]), 264 camera, 21 branches, inheritance tree structure, canceling floating elements with clear, 255–256 194–196 browser compatibility issues capital letters avoiding, 25–26, 97 enlarged overlapping at start of border styles, 187 paragraph, 160–162 centering paragraphs, 201 headlines, 88 colors, 116 kerning, 131 column alignment, 228 specifying all, 104–105 competing styles, 64–65 capital letters, smaller (drop caps) CSS as end of, 3–4 design rules, 160–162 descendent selectors, 263 false pseudo-element (first-letter), ignoring, benefits of, 19–20 274–275 kerning, 133 left float, 193 opacity, 84 captions, positioning, 163 positioning, 70 caret (^), 266–267 resizing columns, 224–228 carrots recipe, 327 scripting language, 279 cartoons shadowing text, 235 digital, manipulation of, 21 sniffers, 302–303 fading text, 27 testing and debugging, 301–303 cascade validating work, 300 described, 41 vertical positioning, 202 specificity, 41–45 viewport, 76 Cascading Style Sheets (CSS) committee browser source view, 43 drafts, 265 bullets Cascading Style Sheets (CSS) editors customizing, 210–211, 213, 324–325 filters, 26 left float, 193 HTML tags, modifying, 24 TEAM LinG - Live, Informative, Non-cost and Genuine !
  11. 342 CSS Web Design For Dummies Cascading Style Sheets (CSS) circle in/out transition wipes, 29 editors (continued) circle list symbol, 208–209 text editors versus, 31–33 circular gradient text, 28 with Visual Studio, 22–23 classes Cascading Style Sheets (CSS) Web attribute specificity, calculating, 44 site, 330 defining, 326–327 Cascading Style Sheets, version 3 (CSS3) multiple, specifying with ID descendant selectors, dubious, 277–278 selectors, 40 described, 265 name, adding, 272–273 false pseudo-classes, 269–273 partial attribute values, matching, 53 false pseudo-elements, 273–275 selectors, 51 Mozilla Firefox browser features, closeness 266–269 cascade, 41–45 pseudo-classes, 275–277 style sheet, 57–59, 62 case-sensitivity cm (centimeters), 80 described, 41 coding lowercase, benefits of using, 41 comments, 38 Caslon font, 93 constant, CSS style similarity to, 17 Caslon, William IV (typeface executing scripts upon loading, designer), 92 282–283 cells graphics file descriptions, 247 empty, 216 languages, scripts and, 238–240 vertical alignment, 139 Microsoft Express versions, 335 centering monospace language indicating, 91 auto elements, 201 object-oriented computer languages, 36 headline, 70, 71 rules, changing, 288–290 on hot spot, 167 script writing, 279–282 methods, 320–321 server-side code execution, 283–284 centimeters (cm), 80 styles, modifying, 284–288 changes, global, 17 syntax and, 287 checkerboard transition wipes, 29–30 timers, 290–295 checking radio buttons and check boxes, for users who disable scripts, 280–282 276–277 coin background example, 144–146 child objects colon (:) containing blocks, 169 graphics file, describing, 247 described, 45–46 property and value, separating, 33 em font sizes, 110 color first, selecting only, 263, 273 backgrounds, 114, 123–125 nested blocks, 76 borders, 118–119, 190–191 relative font sizes, 98–99 box, temporary, 178 specificity, 57–58 calculating, 115–116 Chiller font, 90 changing script, 240–241 TEAM LinG - Live, Informative, Non-cost and Genuine !
  12. Index 343 clashing, 320 competing styles, how browsers handle, highlighting text, 37–38, 261–262 64–65 horizontal lines, 179–180 computer display sizes inset borders, 119–121 absolute positioning, 73 light, origins of, 121–123 ignoring different, benefits of, 19–20, 97 list, 116–118 relative positioning, 70 paragraph styles, 115 smallest units on, 108 positioning, 79 worrying about different, 18–19 role of, 113–114 constant, CSS style similarity to, 17 text, painting atop, 337–338 containing block validating use of, 308–309 defined, 169 columns image location within, 80–81 fixed, building, 228–231 nesting, 76 positioning with tables, 217 percentages, calculating, 19 resizing with browser, 224–228 top and left properties, 74 resources for using, 336 content comma (,), 257, 259 box area width and height, 170 command, 60 separating from style, 1–2 comments contextual selectors described, 38 descendants, 261–262 symbols, hiding code with, 281 described, 257–258 compatibility issues, browser grouping versus, 258–260 avoiding, 25–26, 97 styling, 262 border styles, 187 coordinates, mathematical, 72 centering paragraphs, 201 corner, positioning in, 78 colors, 116 countdown timers, 293 column alignment, 228 Courier font, 90–91 competing styles, 64–65 Creating Killer Web Sites (Siegal), 213 CSS as end of, 3–4 CSS (Cascading Style Sheets) committee descendent selectors, 263 drafts, 265 ignoring, benefits of, 19–20 CSS (Cascading Style Sheets) editors kerning, 133 filters, 26 opacity, 84 HTML tags, modifying, 24 positioning, 70 text editors versus, 31–33 resizing columns, 224–228 with Visual Studio, 22–23 scripting language, 279 CSS (Cascading Style Sheets) shadowing text, 235 headline, 17 sniffers, 302–303 CSS (Cascading Style Sheets) online testing and debugging, 301–303 site, 330 validating work, 300 CSS3 (Cascading Style Sheets, version 3) vertical positioning, 202 descendant selectors, dubious, 277–278 viewport, 76 described, 265 TEAM LinG - Live, Informative, Non-cost and Genuine !
  13. 344 CSS Web Design For Dummies CSS3 (Cascading Style Sheets, descenders, character, 135 version 3) (continued) descriptive values, 139–140 false pseudo-classes, 269–273 design false pseudo-elements, 273–275 appropriateness and, 168 Mozilla Firefox browser features, creating compelling, 1 266–269 drop caps, 160–162 pseudo-classes, 275–277 freeform, 217–221 cursive fonts, 90 HTML for different screen sizes, 18–20 inline elements, drawbacks of using, •D• 203–206 internal, 222–224 darker text, 95 judging your capacity, 155 darkness, font, 95 silhouetting objects, 159–160 dates, small caps indicating, 96 tasks, 20–22 debugger thirds, rule of, 164–168 HTML, 309–314 trapped white space, 163 importance, 300 typeface sizes, limiting, 97 W3C tool, 304–309 white space, organizing with, 156–158 debugging and testing digital camera, 21 browser compatibility, 301–303 digital effect, 21 browser source view, 43 disc list symbol, 208–209 HTML validator, 309–314 display sizes missing closing semicolon, 49 absolute positioning, 73 punctuation, checking, 297–300 ignoring different, benefits of, 19–20, 97 scripts, 315, 323–324 relative positioning, 70 separate .css file, 60–61 smallest units on, 108 validating work, 300 worrying about different, 18–19 W3C validator, 304–309 do-it-yourself Web pages, 5–6 decimal lists, 209 dollar sign ($), 266–267 default styles downlevel browsers, 302–303 background property, 148 dramatic visual effects border color, 190 bandwidth restrictions and, 233 conflicts, resolving, 41 fading between images, 243–246 headlines, 32 static filters, 234–238 height of element, 173 transition filters, 238–242 IE font, 94 transitions between pages, 246, positioning, 69–70, 173 248–249 table layout, 214–216 drop caps typeface, 108 design rules, 160–162 descendant false pseudo-element (first-letter), contextual selectors, 261–262 274–275 dubious selectors, 277–278 left float, 193 thwarting, 263 TEAM LinG - Live, Informative, Non-cost and Genuine !
  14. Index 345 drop shadow type effect empty places on page described, 105–106 balance, 156–158 with static filter, 234–238 lack of, using font to balance, 94 duplicate ID selector, viewing, 38–39 reviewing, 156 dynamic code, 238 thirds, rule of, 166 unnecessary between lines of •E• headlines, eliminating, 102 violating, 166 editor, CSS (Cascading Style Sheets) English measurement system, 108 filters, 26 equals sign (=), 298 HTML tags, modifying, 24 errors text editors versus, 31–33 HTML code, color indicating, 58 with Visual Studio, 22–23 programming languages and, 287 editor, graphics W3C validator messages, 307–308 backgrounds, 143–144, 146 escape sequences, 41 borders, creating, 118–119, 123 ex (x-height of font), 80, 109 shadowing text, 105, 235 exact attribute values, matching, 54 text, fading, 27 executing scripts upon loading, 282–283 3D effect, 166–167 exotic fonts, 90 editor, Microsoft Script expandable display tables, 214–216 converted code, 58–59 Express programming versions, 335 opening, 56 eXtensible HTML (XHTML), 40 editor, text eXtensible Markup Language (XML) specialized CSS editors versus, 31–33 attribute selector class matching, 52 styles, changing, 284–288 Word document, converted, 56 element, HTML, 34 extensions, developer, 314 em measurements external style sheet, 59–60 described, 108 font, 80 letter spacing, 128 •F• size and position, specifying, 109–110 fading between images usefulness of, 107–108 animation, 84 Word document, converted to button-activated, 240 HTML, 57 dramatic visual effects, 243–246 embedded style sheets fading text, 26–27 described, 16 false pseudo-classes overriding, 62 class name, adding, 272–273 precedence, 42, 58 described, 269–270 em-dash (—), 109 first children, selecting only, 273 emphasis hovering, 272 contextual selectors and, 260 hyperlink formatting, 270–272 kerning used as, 127 TEAM LinG - Live, Informative, Non-cost and Genuine !
  15. 346 CSS Web Design For Dummies false pseudo-elements substituting, 86–87 described, 274 units of measurement, 80 drop caps (first-letter), 274–275 font family, 62, 86 pseudo-classes versus, 273 foreground objects, silhouetting, 159–160 text lines, special (first-line), 275 formatting fantasy fonts, 90 CSS style, 35 file, separate HTML, growth of, 18 defining CSS rules in, 16 forms, 231 linking, 32, 60 forward slash, asterisk (/*), 38 precedence ranking, 42 framesets, 310 filters full or partial page background described, 26–30 textures, 144 timing, 291, 322 fuzziness transition, dramatic visual effects and, static filter, 236–237 238–242 timing, 321–322 Firefox (Mozilla) border styles, 187 centering issues, 201, 320 •G• column alignment, 228 Garamond typeface, 93, 94 debugger, 312–313 generic Roman fonts, 94 matching parts of attributes, 266–267 .gif graphics, positioning with invisible, negation pseudo-class selector (:not 213–214 command), 267–268 Gigi font, 90 opacity, 84, 268–269 Goudy font, 93 selecting attributes, 50 gradient text syntax, 268 basic, 27 vertical positioning, 202–203 circular, 28 first children, selecting only, 273 graphics fixed columns, building, 228–231 alternatives, providing, 332–333 fixed or expandable display tables, border, 188–189 214–216 bullets, customizing, 210–211, 213 flavor, HTML document, 310 files, specifying in different floating elements programming languages, 247 canceling with clear, 194–196 locations, specifying, 325–326 hand-written code, 191–194 splash screen, 292–293 flow location, modifying, 73–75 stabilizing, 197–198 focal point, placing, 164–165 style, setting for each, 15 font text, dividing, 180–181 line height, adjusting, 133–134 texturing backgrounds, 145–147 relative versus absolute measures, 107 graphics editor size, letting users specify, 319 backgrounds, 143–144, 146 borders, creating, 118–119, 123 TEAM LinG - Live, Informative, Non-cost and Genuine !
  16. Index 347 shadowing text, 105, 235 hex number, 116–117 text, fading, 27 hierarchy, inheritance ranking, 256 3D effect, 166–167 highlighting gray/grey, 118 bold text, 95 greater than, less than symbols (), 298 hover effect, 272 grouping text elements, 37–39 contextual selectors versus, 258–260 horizontal lines, 178–181, 183 multiple selectors, 34 horizontal positioning punctuation, 257 boxes, 176–178 writing CSS, 35 text, 141–142 horizontal transition wipes, 30 •H• hovering, 272 HTML (HyperText Markup Language) Haetten font, 93 advantages of CSS, 15 hand-written code, 191–194 associating styles with, 23–24 hash symbol (#), 39 case-sensitivity, 40 header, style definitions in, 39–40, 77–78 class selectors, 51 headlines comment symbols, hiding code centering, 70 with, 281 changing type and alignment, 63–64 concepts, equivalent language CSS, 17 in CSS, 33 default style, 32 designing for different screen sizes, defining as group, 35 18–20 font, choosing, 94 document, generating, 54–55 freeform design, 220 element, CSS equivalent, 47–48 horizontal spacing, adjusting with embedding CSS code, 16 kerning, 127–131 forms, 231 line height, 101–102 headlines, applying to, 16 organizing paragraphs, 183 indentation problem, 143 positioning, 163 outlining documents in, 17–18 qualities, applying to all, 16, 47–48 paragraph text, specifying, 109–110 rule violations, 156 punctuation, 298 sans serif fonts and all-caps, 88 selecting only attributes, 264 timers changing, 290–292 tags, modifying with CSS editors, 24 vertical line spacing, adjusting, 133–135 timer, working with, 290–293 white space between words, adjusting, upgrading pages to CSS, 330 135–138 validating work, 300 height viewing, 207 box, 172, 175 viruses, 283 default, 173 Word document, converting, 54–57 resizing elements, 173–174 text, defining, 80 TEAM LinG - Live, Informative, Non-cost and Genuine !
  17. 348 CSS Web Design For Dummies HTML (HyperText Markup Language) indenting text validator bulleted or numbered lists, 211–212 alternatives, finding, 314 specifying, 143 described, 309 usefulness, 142 requirements, 310–314 workarounds, 143 versions, 310 inheritance hyperlink formatting confusion about, 331 false pseudo-classes, 270–272 described, 45–46 universal selectors, avoiding use of, 49 hierarchy, places in, 256 offspring, 257 •I• parents versus ancestors, 254–255 roots, 255–256 icon specificity, 58, 253–254 left float, 193 universal selectors, unintended side text, offsetting, 160 effects of, 49 ID selectors initial caps, 104–105 case-sensitivity, 40–41 inline elements creating, 39–40 drawbacks to using, 203–204 duplicates, viewing, 38–39 poor use of, 204–205 multiple classes, specifying, 40 positioning, 169 specificity, calculating, 44 precedence, 42, 58 if ... then programming structure, in/out transition wipes, 29 240–241 input elements image editor checking, 276–277 backgrounds, 143–144, 146 image-exchange script, 244–246 borders, creating, 118–119, 123 outset, 121 shadowing text, 105, 235 inset border colors, 119–121 text, fading, 27 interface, user 3D effect, 166–167 buttons, 121, 276–277 images image-exchange script, 244–246 buttons, script exchanging, 244–246 text, considering, 85–86 focal point, 164 internal design, 222–224 matting, 120 internal style precedence, 42 paragraphs, dividing, 180–181 internal style sheet, 39 resizing, 173–174 Internet address. See URL; Web sites, vertical alignment, 141 addresses listed immovable tables, specifying, 222–224 Internet Explorer (Microsoft) imperial measurement system, 108 active content, caution about, 246, !Important styles 248, 283 described, 60–63 attribute selectors, 50 inconsistency in terminology, 59 auto elements, forcing (!DOCTYPE), in (inches), 80, 108 201–202 TEAM LinG - Live, Informative, Non-cost and Genuine !
  18. Index 349 centering paragraphs, problem with, large font sizes, 102 201, 321 letter-by-letter, 129–131 color list, 79, 117 ultra, 131–133 CSS3, 266 word spacing, 137–138 debugger, 323 keywords, 59–60 designing for, 19–20, 25 filters, 26–30 font, default, 94 •L• ID selector, failure of, 38 language loading CSS files into, 16 monospace font, 91 opacity, 84 values, matching, 53 scripting, 239, 280 layers, 21 tables, 216 layout, controlling with auto elements, validating work, 300 197–200 vertical positioning, 202 leading Internet, high-speed, 233 baselines, 135 interval timers, 294–295 described, 133 intranet design issues, 19 percentages, adjusting, 133–134 invisible .gif graphics, positioning with, reduction, 137–138 213–214 left property italic type box elements, 170 serif characteristics, 88 containing block, 74 specifying, 63–64, 96–97 left side box elements, 170 when to use, 94–95, 127 left strips transition wipes, 30 left/right transition wipes, 29 •J• legibility, 88 length, measuring, 108–109 JavaScript programming letter-by-letter kerning, 129–131 coding exactness, 287 lettering textured backgrounds, 144 described, 239 light source examples, 243 colors and, 121–123 scripts, executing upon loading, 282 drop shadow effect, 235 Joker typeface, 85–86 outset effect, 191 Jokewood font, 90 lightness, font, 95 justified text line height, adjusting, 101–103 described, 135–137 line spacing with kerning and line space reduction, baselines, 135 137–138 described, 133 percentages, adjusting, 133–134 •K• reduction, 137–138 lines around elements kerning beveled (inset), 119–120 described, 127–129 boxes, 171 kerning-mode property, 135 choosing styles, 186–188 TEAM LinG - Live, Informative, Non-cost and Genuine !
  19. 350 CSS Web Design For Dummies lines around elements (continued) colors, 118–119, 190–191 •M• described, 184 Macintosh computers, 26 horizontal rules, 179 Magneto font, 90 inheritance, excluded from, 46 main topic, 164 missing, 320 margins mixing and matching styles, 188–189 auto elements specifying, 200 simple, specifying, 184–186 box width, paragraphs, 177 specifying, 100 browser window size and, 198 visual organization, 184–191 inheritance, excluded from, 46 width, specifying, 189–190 paragraphs, separating from nearby lining up text elements, 170, 172 changing all, 63–64 percentages, specifying, 111–113 descriptive values, 139–140 mathematics horizontal, 141–142 coordinates, 72 by percentages, 140–141 specificity, calculating, 44–45 vertical, 138–139 z-axis, 81–82 link formatting matting, 120 false pseudo-classes, 270–272 McClelland, Deke (Photoshop 7 For universal selectors, avoiding use of, 49 Dummies), 146 linking files, 32, 60 measurement, units of lists listed, 80 bullet graphics, altering, 210–211 specific design, ensuring, 222–224 bullets, customizing, 324–325 metric system, 108 case-sensitivity of element, 40 metronome timer, 294–295 coloring, 262 Microsoft positioning, 211–212 keywords, use of term, 59–60 shortcut format, 213 static filters, 236 styles, 209 Microsoft Internet Explorer universal selector, styling, 262 active content, caution about, 246, usefulness, 208–209 248, 283 loading attribute selectors, 50 scripts, executing upon, 282–283 auto elements, forcing (!DOCTYPE), time, keeping low, 123 201–202 timer, activating, 291 centering paragraphs, problem with, lower-alpha numbered lists, 209 201, 321 lowercase color list, 79, 117 kerning next to uppercase, 131 CSS3, 266 text, transforming, 104–105 debugger, 323 writing code, benefits of, 41 designing for, 19–20, 25 lower-roman numbered lists, 209 filters, 26–30 lurid color combinations, 124–125 TEAM LinG - Live, Informative, Non-cost and Genuine !
  20. Index 351 font, default, 94 matching parts of attributes, 266–267 ID selector, failure of, 38 negation pseudo-class selector (:not loading CSS files into, 16 command), 267–268 opacity, 84 opacity, 84, 268–269 scripting, 239, 280 selecting attributes, 50 tables, 216 syntax, 268 validating work, 300 vertical positioning, 202–203 vertical positioning, 202 multicolumn layout Microsoft Script Editor creating with tables, 217 converted code, 58–59 resizing with browser, 224–228 opening, 56 multiple attributes, selecting, 53 Microsoft Visual Studio multiple classes, specifying, 40 benefits of using, 335–336 multiple properties, defining, 35 color, choosing, 116 multiple selectors creating CSS files, 22–23 declaring, 49–50 opening CSS files, 22 grouping, 34 Microsoft Windows drop shadowing on elements, 234–235 operating system typefaces, 91–92 •N• Microsoft Windows Explorer, 26 naming Microsoft Windows Media Player, case-insensitivity, 40 276–277 classes, 36, 52 Microsoft Word document .css files, 32 editing converted styles, 58–59 font conventions, 87, 90 transforming into Web page, 54–57 negation pseudo-class selector (:not middle alignment command), 267–268 auto elements, 201 nesting headline, 70, 71 boxes within page box, 232 on hot spot, 167 bullets or numbers within list text, methods, 320–321 211–212 minimalism, font selection and, 88 Netscape mm (millimeters), 80, 108 attribute selectors, 50 Modern font, 93 centering elements, 320 monospace typeface, 90–91 column alignment, 228 movies CSS support, 217 digital, manipulation of, 21 decreasing use of, 20, 25 fading text, 27 vertical positioning, 202–203 Mozilla Firefox browser features non-inheritable backgrounds, 148 border styles, 187 Notepad text editor centering issues, 201, 320 filters, 26 column alignment, 228 !Important command, removing, 61 debugger, 312–313 selector group, adding, 64 TEAM LinG - Live, Informative, Non-cost and Genuine !
Đồng bộ tài khoản