CSS Cookbook- P19

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

Thêm vào BST

Báo xấu

98
lượt xem 8
download

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

Tham khảo tài liệu 'css cookbook- p19', 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ủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: CSS Cookbook- P19

:enabled pseudo-class, 53, 675 :first-child pseudo-class, 53 entities, HTML, 112 fixed value (background-attachment property), for custom list bullets, 308 197 for em and en dashes, 125 fixed-width-column layouts, 511–514 .eot file format, 115 with floats, 517–519 events (see hCalendar microformat) columns in any order, 524–544 excessively large text, 570–571 with positioning, 523–524 external stylesheets, 71 Flash, drop-down menus and, 373 alternate, setting up, 88–89 float attribute (img element), 92 changing inline styles with, 552 float property, 143, 655 precedence of, 74 for columnar layouts separating hacks from correct rules, 562– columns in any order, 524–544 563 fixed-width columns, 517–519 using several types of, 79–83 flexible columns, 508, 514–517 when to use, 72 for definition list items, 324 for horizontal navigation menus, 368 two-column forms, designing, 424 F floats, 89–92 fade effect, with PNGs, 284 Doubled Float-Margin Bug, 534 fadeTo( ) function (JavaScript), 634 multicolumn layouts with Fahrner Image Replacement (FIR) technique, columns in any order, 524–544 218, 381 fixed-width, 517–519 fantasy (font family), 106 flexible, 508, 514–517 fast keyword, fadeTo( ) function, 635 self-clearing floated elements, 92–95, 371 Faux Columns method, 539–541 :focus pseudo-class, 53, 272, 348, 671 feedback, integrating with forms, 425–427 changing form element styles, 402, 406 fieldset element, 429 font-family property, 106, 115, 655 file formats for audio, 17 font property, 86, 136, 655 file formats for images, 15 in :first-line pseudo-element, 158 combining different, 222–227 font-size property, 119, 571, 577, 655 filename case sensitivity, 15 applying baseline rhythm, 172 filter property, 167, 179, 642, 661 cross-browser consistency with, 121 opacity of page elements, setting, 292, 293 keywords for, 123 Sleight script, 214 when zero or negative, 120 smoothing images with, 206 font-style property, 655 find( ) function (JavaScript), 639 font-variant property, 655 FIR (Fahrner Image Replacement) technique, font-weight property, 160, 655 218, 381 #font-face rule, 114 Firebug browser extension, 555, 649 Fontdeck service, 117 Firefox view source stylesheet, customizing, fonts 590 ampersand (&) flourish, 112–113 fireworks display, 588–589 comic book look and feel, 252 :first-child pseudo-class, 671 cross-browser consistency, 121–125 :first-letter pseudo-element, 54, 130, 603, 672 embedding font files, 114–118 first line of paragraphs excessively large text, 570–571 indenting, 149–150 inheritance of, 107 styling, 156–157 measurements and sizes, specifying, 119– styling with image, 158–159 120 :first-line pseudo-element, 55, 156, 672 specifying, 106–109 :first-of-type( ) pseudo-class, 53, 676 852 | Index
using multiple in same headline, 575 Gilder/Levin image replacement technique, web-safe, 109–112 217 footer, adding to pages, 502, 606 Google’s hosting feature, 627 with multicolumn layouts, 508 gradients in element backgrounds, 208–210 forcing breaks on long words, 118–119 graphics (see images) form element, print-ready, 487 grayscale, transforming images to, 179–180, formats, audio, 17 484–486, 495 formats, images, 15 grids, designing with, 591–593 combining different, 222–227 groove effect (framing), 281 forms, 397–452 grouping CSS rules in stylesheets, 84–86 access keys, stylizing, 428–429 grouping form elements, 429–430 buttons on grouping selectors, 153, 670 images for, 415–416 gutters (between columns), 535, 592 readying for print, 487, 489 stylizing, 411–415 Submit buttons that look like text, 417– H h1 through h6 elements, 10–12 419 hacks, separating from correct rules, 562–563 submit-once-only buttons, 416–417 handheld media type, 83, 482 text links that operate like, 419 hanging indents designing like spreadsheet tables, 431–434 creating, 153–156 designing without tables, 419–425 in lists, 319–321 grouping common elements, 429–430 paired hanging indent, 155 integrated with feedback, 425–427 # (hash mark) login form (sample design), 434–440 for ID selectors, 44, 58 Macintosh-styled search field, 408–411 in links, 25 print-ready, 486–490 hasLayout element, 296 registration form (sample design), 441–452 hCalendar Creator utility, 29 select and option elements, stylizing, 406– hCalendar microformat, 28–29 408 hCard Creator utility, 28 spacing around, modifying, 398–399 hCards (HTML vCards), 27–28, 606 style changes when user clients, 402–403 head element, 5 styles for input elements, 399–402 header, table, 26, 460–462 different styles for different elements, headings, 10–12 403–404 ampersand flourish in, 112–113 stylizing textarea elements, 404–406 paired hanging indent, 155 fragment identifiers, 392 red flame on, 167 frame elements, for stretching images, 202– reflecting in images, 256–258 203 replacing with images, 217–220 frames, visual (see borders) shadows behind, 165–168 framesets, for stretching images, 203 space between paragraphs and, 129–130 full stop, 41 stylized borders for, 137–139 stylized images for, 139–141 G with stylized text, 135–141 general sibling combinator selectors, 494, 673 hebrew (counting style), 301 getElementbyId method (JavaScript), 385 height (see size) GIF file format, 15 height property, 656 combining different image formats, 222 vertical centering on pages and, 279 hindering theft of your images, 254 help value (cursor property), 352 percentage-based dimensions and, 204 Index | 853
hexadecimal characters for special characters, HTML lists (see lists) 492 HTML pages (see web pages) hidden value (border-style attribute), 455 HTML validator, 30, 554 higher-resolution browsers, stylesheets for, HTML Validator, 649 626 HTML5 highlighted text effect, 159–160 delivering to appropriate browsers, 642– highlighted text (selection) 644 color of, changing, 160–161 document division elements, 59 hiragana (counting style), 301 document types, 6 hiragana-iroha (counting style), 301 HTML5 recipes horizontal navigation menus, 365–371, 599 audio, adding, 16–17 with access menus, 374–375 building sample design, 593–621 collapsible, 383–386 delivering HTML5 to appropriate browsers, contextual, 386–388 642–644 with drop-down submenus, 372–374 making entire div elements clickable, 639– dynamic tabbed, 389–392 640 print-ready, 487 styling screenplay with dialog element, 329– horizontal rules, customizing, 285–287 331 hosting feature (Google), 627 video, adding, 17–19 :hover pseudo-class, 180, 346, 353, 671 when to use class and ID selectors, 56 highlighting table rows, 468 hyperlink pseudo-classes, 344, 346 with web forms, 417, 433 hyperlinks (see links to web pages) HTML 4.01 document types, 6 hyphens, 125–126 HTML basics, 1–31 adding audio to documents, 16–17 adding video to documents, 17–19 I coding a basic page, 4–6 iCalendar file format, 29 emphasizing certain words, 19–20 icons, image sprites for, 258–259 hCalendar events, 28–29 icons for different kinds of links, 349–351 hCards (HTML vCards), 27–28, 606 id attribute (a [anchor] element), 386 headings, 10–12 id attribute (all page elements), 25, 44 images, 14–16 ID selectors, 44, 670 links, 22–25 for different parts of pages, 349 lists, 20–22 when to use, 56–61 quotations (citations), 12–13 IDEs for HTML coding, 4 tables, 25–27 IE NetRenderer tool, 649 text editor selection, 3–4 IE7 script (Dean Edwards), 630 validating HTML on page, 29–31, 30, 102, iframe element, for stretching images, 203 554, 649 -moz-image-rect property, 260 validity and standards compliance, 6–10 image-rendering property, 205 html element, 5 image sprites, 258–259, 339 margin and padding properties, 266 for image-based rollovers, 382 HTML elements (see page elements; specific Image Toolbar (Microsoft), 255 element by name) images, 179–263 HTML entities, 112 adding to documents, 14–16 for custom list bullets, 308 animating elements on page, 584–588 for em and en dashes, 125 applying masks to, 262–263 HTML forms (see forms) background images HTML instruction (resources), 645 clipping, 260–261 fade effect, with PNGs, 284 854 | Index
font inheritance and, 107 star ranking system, 335–340 for headings, 139–141 styling first lines of paragraphs with, 158– for initial caps with decoration, 133 159 line of (repeating), 187–188 stylized, for headings, 139–141 for lists, 313–317 for Submit button (forms), 415–416 multiple, on one HTML element, 191– supporting transparent PNGs in IE6, 640– 193 642 setting, 186–187 in table cells shadow behind text, 165–168 removing gaps from around, 462–464 stationary (locked against scroll), 197– for texture, 619 199 transparent PNG images, 211–214 stretching across entire window, 202– unexpected incongruity, 571–574 203 word balloons, 251–253 stretching when browser resizes, 199– wrapping text around (floats), 89–92–95, 202 371 on borders, 194–197 ime-mode property, 662 borders around, 180–185, 282 img element, 14–16 as browser default, removing, 184–185 float attribute, 92 rounded corners, 182–184 @import rule, 483 setting, 180–181 !important rule, 76–77 centering on page, 277 drop shadows behind images, 246 color, transforming to grayscale, 179–180, overriding inline styles, 552 484–486, 495 imported styles, precedence of, 74 combining multiple file formats, 222–227 :in-range pseudo-class, 53 fireworks display, 588–589 incongruity, unexpected, 571–574 gradients in element backgrounds, 208– indentation 210 lists hindering theft of, 254–256 cross-browser consistency of, 303–304 icons for different link types, 349–351 hanging indents, 319–321 for initial caps (paragraphs), 133–135 margins for (see margins; space for link rollovers, 379–383 (whitespace)) for list items, 308–313 paragraphs moving when window resizes, 582–584 entire paragraph, 150–153 overlaying HTML text on, 215–217 first line only, 149–150 overlaying on web page, 287–292 with hanging indent, 153–156 panoramic presentations, 220–222 paired hanging indent, 155 for pull quotes, 146–149 inheritance reflecting elements in, 256–258 font, 107 rendering method, setting, 205–206 list marker customization, 302, 309 repeating graphic treatment on text, 163– initial caps (paragraphs) 165 images for, 133–135 replacing text with, 217–220 large centered version, 131–133 rollover effects with JavaScript, 634–635 simple version, 130–131, 603 rotating, 206–208 inline elements, about, 13 for rounded corners (see rounded corners) inline forms, 399 scalable, 203–205 inline images, rounded corners with, 184 shadows (see shadows) inline lists, 318–319 shadows behind, 244–250 inline property, 369 slideshows, displaying, 290 inline styles, 71, 72 Index | 855
overriding, 552 percentage-based dimensions and, 204 precedence of, 74 jQuery framework when to use, 72 associating with pages, 627–628 input element chaining JavaScript functions, 634 access keys for, stylizing, 428–429 equalizing height for row of elements, 635 as block-level element, 420 plug-ins for, finding, 642 grouping common, 429–430 use of CSS selectors, 629 print-ready, 487 zebra-striping tables, 631 required, identifying, 425–427 spreadsheet-like forms, 431–434 styles for, 399–402 K different styles for different input katakana (counting style), 301 elements, 403–404 kerning (typography), 170 inset effect (framing), 281 keyframes for animation, 585 Inspect Element toolbar, 555 Knoppix operating system, 564 internal stylesheets, 70, 71 syntax for, 37 when to use, 72 L label element Internet Explorer 6, patching, 557–559, 609 access keys, stylizing, 428–429 Internet Explorer Developer Toolbar, 555 as block-level element, 420 Internet Explorer scroll bar, coloring, 272–275 identifying required elements, 425–427 Internet Explorer's conditional comments, web forms without tables, 419–425 559–561, 609 label property (web forms), 420 :invalid pseudo-class, 53 :lang pseudo-class, 53, 671 invisible text, 120 large centered initial caps (paragraphs), 131– italics (see emphasizing certain words) 133 large keyword (font-size property), 123 J larger keyword (font-size property), 123 JavaScript, 623–644 :last-child pseudo-class, 53, 675 adding jQuery framework to pages, 627– :last-of-type( ) pseudo-class, 53, 335, 676 628 layering availability of, checking for, 623–624 background images, 191–193 CSS3 and HTML5 to appropriate browsers, text on images, 215–217 642–644 layout-grid-char property, 662 CSS3 selectors in IE6 and IE7, 628–630 layout-grid-line property, 662 equalizing height for row of elements, 635– layout-grid-mode property, 662 637 layout-grid property, 662 highlight table rows with mouseovers, 632– layout-grid-type property, 662 634 leading (typography), 163 making page elements clickable, 639–640 Leahy-Langridge Image Replacement (LIR) opening new windows with links, 638–639 method, 381 rounding corners with, 239–242 left property, 656 screen-width-specific stylesheets, 626–627 with absolute positioning, 97 simple rollover effects, 634–635 elements in multicolumn layouts, 522, 523, for time-specific stylesheets, 625–626 545 for transparent PNGs with IE6, 640–642 with relative positioning, 98 zebra-striping tables, 630–632 with shackling positioning, 100 JPEG file format, 15 left value (background-position property), 189 combining different image formats, 222 legend element, 430 856 | Index
length units for font size, 119 opening new windows with, 638–639 letter-spacing property, 168, 656 operating like Submit buttons, 419 in :first-line pseudo-element, 158 removing underlining from, 343–345 lettered lists (see ordered lists) tool tips for, 389 letters (see capitalization; fonts; text; words and LIR (Leahy-Langridge Image Replacement) characters) method, 381 li element, 20–22 list-item value (display property), 287 background images for, 314 List-O-Matic menu builder, 342 lightboxes, 287–292 list-style-image property, 309, 656 line-break property, 662 list-style-position property, 322, 656 line breaks in CSS programming, 37 list-style property, 88, 287, 657 line-height property, 137, 163, 577, 656 none value for, 307 applying baseline rhythm, 172 list-style-type property, 301, 310, 656 in :first-line pseudo-element, 158 lists, 299–340 line of background images, 187–188 color of bullets, 302 line spacing, 161–163 converting into directory trees, 331–335 line-through value (text-decoration property), creating in HTML documents, 20–22 345 default style for, changing, 299–302 lines between list items, 304–305 definition lists, styling, 323–328 link element, 79 dividers between list items, 304–305 media attribute, 549 enriching with imagery, 313–317 media property, 482 hanging indents in, 319–321 title attribute, 88 indentation in, 303–304 :link pseudo-class, 344, 346, 671 inline lists, 318–319 link rot testing, 554 placing markers inside list, 321–323 linked styles, precedence of, 74 screenplays, styling, 329–331 links star ranking systems, creating, 335–340 absolute, using domain names with, 491 unordered, for navigation, 362 changing element styles when clicked, 392– unordered lists 396 for breadcrumb navigation, 375 colors of, changing, 345, 346–347, 608 for drop-down navigation, 372 differently within page, 348–349 for horizontal navigation menus, 365– creating in HTML documents, 22–25 371, 599 cursor rollovers location property (hCalendar), 29 animating with CSS3 transitions, 354– login form (sample design), 434–440 357 logo replacement, for print, 484–486, 495 image-based, 379–383 looping animation, 587 in navigation menus, 358–362, 597 lower-alpha (counting style), 301 stylizing, 351–362 lower-greek (counting style), 301 stylizing without JavaScript, 353–354 lower-latin (counting style), 301 displaying URIs after (in print), 490–492, :lower pseudo-class, 346 501 background-image property with, 379 dotted lines for clicking, removing, 347– lower-roman (counting style), 301 348 lowercase (see capitalization) icons for different kinds of, 349–351 Luminosity Colour Contrast Analyser, 578 inserting characters before (in print), 492– luminosity testing, 578 493 Lynx Viewer, 566 making elements clickable, 639–640 navigation breadcrumbs, 375–378 Index | 857
M rollovers in, 358–362, 597 vertical, submenus in, 363–365 Macintosh-styled search field, 408–411 microformats mailing address, adding to print forms, 489 hCalendar events, 28–29 margin-bottom property, 657 hCards (HTML vCards), 27–28, 606 drop shadows behind images, 245 Microsoft proprietary extensions (complete margin-left property, 657 list), 661–663 auto value for, 277 Microsoft's Image Toolbar, 255 for list items, 303, 304, 324 min-height property, 657 percentage values for, 505 min-width property, 658 margin property, 67, 70, 88, 657 mobile-friendly spreadsheets, 626–627 form buttons, 411 Modernizr JavaScript library, 643 forms, 398 monospace (font family), 106 for html and body elements, 266 web-safe fonts, 109 margin-right property, 657 motion, impression of, 576–577 auto value for, 277 Mountaintop technique (rounding corners), drop shadows behind images, 245 235–238 percentage values for, 505 mouseover( ) and mouseout( ) functions, 633 margin-top property, 657 move value (cursor property), 352 margins moving background scenes, 582–584 box model, 62–70 -mox-image-rect property, 260 with columns -moz-appearance property, 664 around elements within columns, 517, -moz-background-clip property, 664 535 -moz-background-image property, 664 using grids (CSS Frameworks), 592 -moz-background-inline-policy property, 664 one-column layouts, 505 -moz-background-origin property, 664 defined, 63 -moz-binding property, 664 font inheritance and, 107 -moz-border-bottom-colors property, 665 around forms, 398–399 -moz-border-left-colors property, 665 for headings and paragraphs, 129 -moz-border-radius properties, 183, 665 list indentation, 303–304, 319–321 -moz-border-right-colors property, 665 of pages, eliminating, 265–267 -moz-border-top-colors property, 665 masks, applying to images and borders, 262– -moz-box-align property, 665 263 -moz-box-direction property, 665 max-height property, 657 -moz-box-flex property, 665 max-width property, 204, 221, 657 -moz-box-orient property, 665 measurements, font, 119–120 -moz-box-pack property, 665 media attribute (link element), 79, 482, 549 -moz-box-shadow property, 666 @media rule, 79, 483 -moz-box-sizing property, 666 media-specific stylesheets, 79–83 -moz-image-region property, 666 media types, 482 -moz-opacity property, 666 different stylesheets for, 79–83 -moz-outline-color property, 666 menus for navigation, 341–343 -moz-outline-input property, 667 with access keys, 374–375 -moz-outline-offset property, 666 collapsible, 383–386 -moz-outline property, 666 contextual, 386–388 -moz-outline-radius-bottomleft property, 666 dynamic tabbed, 389–392 -moz-outline-radius-bottomright property, horizontal, 365–371, 599 666 with drop-down submenus, 372–374 -moz-outline-radius property, 666 print-ready, 487 858 | Index
-moz-outline-radius-topleft property, 666 for drop-down navigation, 372 -moz-outline-radius-topright property, 666 nested ordered lists, 331 -moz-outline-select property, 667 NetRenderer tool, 649 -moz-outline-style property, 666 new browser windows, opening, 638–639 -moz-outline-width property, 666 Nifty Corners Cube solution, 239 -moz-radial-gradient property, 208, 210 none (counting style), 301 -moz-radial-linear property, 210 none value (border-style attribute), 455 ::-moz-selection pseudo-element, 161 none value (text-decoration property), 345 -moz-transform property, 207 normal keyword, fadeTo( ) function, 635 -moz-user-focus property, 666 noscript element, 624 -moz-window-shadow property, 667 noshade attribute (hr element), 286 Mozilla property extensions (complete list), :not pseudo-class, 53, 395, 676 664–667 Notepad editor, 3 -ms-interpolation-mode property, 205 :nth-child( ) pseudo-class, 53, 408, 632, 675 multicolumn pages (see columnar layouts) with table rows, 468 :nth-last-child( ) pseudo-class, 53, 675 :nth-last-of-type( ) pseudo-class, 53, 676 N :nth-of-type( ) pseudo-class, 53, 675 n-resize value (cursor property), 352 numbered lists (see ordered lists) navigation, 341–396 numbering style (list), 301 breadcrumbs for, 375–378 nw-resize value (cursor property), 352 cursor rollovers animating with CSS3 transitions, 354– 357 O image-based, 379–383 odd-numbered table rows, identifying, 465 in navigation menus, 358–362, 597 offset properties, 100 stylizing, 351–362 elements in multicolumn layouts, 522 stylizing without JavaScript, 353–354 ol element, 20–22 dotted lines for clicking, removing, 347– background images for, 314 348 one-column layouts, 505–507 icons for different kinds of links, 349–351 online forms (see forms) link colors, changing, 345, 346–347, 608 :only-child( ) pseudo-class, 53, 676 differently within page, 348–349 :only-of-type( ) pseudo-class, 53, 676 link underlining, removing, 343–345 onmouseover event (JavaScript), 353 menus and submenus, 341–343 onsubmit event (JavaScript), for select-once- with access keys, 374–375 only buttons, 416 collapsible, 383–386 opacity contextual, 386–388 of background colors, 294–297 dynamic tabbed menus, 389–392 fade effect, with PNGs, 284 horizontal menus, 365–371, 599 lack of (see transparency) horizontal menus with drop-down of page elements, changing, 292–294 submenus, 372–374 reflected images, 257 print-ready, 487 of text shadows, 166 rollovers in, 358–362, 597 opacity property, 292 submenus in vertical menus, 363–365 opening new browser windows, 638–639 tool tips for links, 389 Opera Dragonfly toolbar, 555 ne-resize value (cursor property), 352 Operator add-in (Firefox), 28 nested lists option element, stylizing, 406–408 for breadcrumb navigation, 375 ordered lists descendant selectors with, 364 adding to HTML documents, 20 Index | 859
background images, 313–317 padding-right property, 658 converting into directory trees, 331–335 padding-top property, 134, 658 custom markers page-break-after property, 659 large images, 311–313 page-break-before property, 494, 659 using images, 308–311 page-break-inside property, 659 using text, 306–308 page breaks, setting, 493–495 default style for, changing, 299–302 page elements, 265–297 dividers between list items, 304–305 animating on page, 584–588 hanging indents in, 319–321 browser defaults for, resetting, 268–272, indentation in, 303–304 594 organic page layouts, 544–547 centering on web pages, 275–280 organizing stylesheet contents, 84–86 eliminating page margins, 265–267 origin, 73 equalizing height for row of, 635–637 clarifying specificity of rules, 77–79 horizontal rules, customizing, 285–287 orphans property, 658 IE scroll bar, coloring, 272–275 :out-of-range pseudo-class, 53 lightboxes, 287–292 outline-color property, 658 making clickable, 639–640 outline property, 347, 658 opacity of, changing, 292–294 outline-style property, 658 unexpected incongruity, 571–574 outline-width property, 658 unlike, combining, 574–576 outset effect (framing), 281 page layouts, 505–550 overflow of text, indicating, 128–129 asymmetric or organic, 544–547 overflow property, 95, 658 fake columns, with background images, overflow-x property, 661 539–541 overflow-y property, 661 multicolumn using div element, 175–177 overlapping elements with z-index, 101–102 multicolumn with floats overlaying HTML text on images, 215–217 columns in any order, 524–544 overlaying images on web pages, 287–292 fixed-width, 517–519 overline value (text-decoration property), 345 flexible, 514–517 overriding certain rules, 76–77 multicolumn with positioning overriding inline styles, 552 fixed-width, 523–524 flexible, 520–523 one-column layouts, 505–507 P resolution-independent, 547–550 padding resolution-specific, 626 box model, 62–70 two-column layouts, 507–511 defined, 63 with fixed-width columns, 511–514 elements in multicolumn layouts, 517 using grids (CSS Frameworks), 591–593 font inheritance and, 107 page margins, eliminating, 265–267 around forms, 398–399 pages (see web pages) for headings and paragraphs, 129 paired hanging indent, 155 padding-bottom property, 658 panoramic image presentations, 220–222 padding-left property, 277, 658 paragraphs for list items, 303, 304, 312 highlighted text (selection), 159–160 padding property, 88, 658 indenting for definition list items, 326 entire paragraph, 150–153 form buttons, 411 first line only, 149–150 forms, 398 with hanging indent, 153–156 for html and body elements, 266 initial caps for tables, 453–456 860 | Index
images for, 133–135 pointer value (cursor property), 352 large centered version, 131–133 points (size), 120 simple version, 130–131, 603 positioning (of elements) line spacing, 161–163 background images lists within, 318–319 stationary images, 197–199 multiple columns of, 175–177 position property, 659 space between headings and, 129–130 with absolute positioning, 95 styling first line of, 156–157 in columns, 521, 523, 545 with image, 158–159 with relative positioning, 98 stylized pull quotes, 141–149 with shackling positioning, 100 text in (see text) for vertical centering on pages, 278 parallax, 583 with z-index property, 101 Parallels Desktop, 564 positioning (see aligning) parent element context, changing, 101 positioning (of elements) parent folders, identifying in links, 24 absolute positioning, 95–97 patching Internet Explorer 6, 557–559, 609 background images percentage-based dimensions, 203 stretching across entire window, 202– . (period) for class selectors, 41, 58 203 .. (dot-dot) for parent folder, 24 stretching when browser resizes, 199– ... (ellipsis) for text overflow, 128–129 202 Phark image replacement technique, 219 centering on web pages, 275–280 picas (size), 120 relative positioning, 98–99 pixel units, 120, 122 shackling positioning, 99–101, 339 for fixed-width columns, 512 stacking with z-index, 101–102 Pixy method, 382 positioning, multicolumn layouts with placeholder attribute (input element), 409 fixed-width, 523–524 platforms, testing multiple from one computer, flexible, 520–523 564–565 poster attribute (video element), 18 plug-ins for jQuery, finding, 642 posters for video files, 18 + (plus) precedence of CSS rules in collapsible menus, 383 clarifying specificity, 77–79 for adjacent selectors, 49 origin, understanding, 73 PNG file format, 15 overriding certain rules, 76–77 for background color opacity, 295 sort order, understanding, 73–76 combining different image formats, 222 presentational elements (HTML), 2 fade effect with, 284 print, designing for, 481–503 masks, applying to images and borders, applying stylesheets for printing, 481–484 262–263 color images as grayscale, 179–180, 484– supporting transparency in IE6, 640–642 486, 495 texture, adding to page, 619 displaying URIs after links, 490–492, 501 transparency of, 211–214 footers, adding, 502 (see also transparency) with multicolumn layouts, 508 PNG24 file format, 211 inserting characters before links, 492–493 pointer rollovers sample design, 495–503 animating with CSS3 transitions, 354–357 setting page breaks, 493–495 image-based, 379–383 web forms, 486–490 in navigation menus, 358–362, 597 print media type, 83, 482 stylizing, 351–362 progress value (cursor property), 352 stylizing without JavaScript, 353–354 projection media type, 83, 482 Index | 861
properties, 36, 61–62 reset stylesheets, 268–272, 594 shorthand properties, 86–88, 137, 192 resizing (see size) properties (complete lists of) resizing browser window (see browsers) CSS 2.1 properties, 651–661 resolution-independent page layouts, 547–550 Microsoft proprietary extensions, 661–663 resolution-specific page layouts, 626 Mozilla property extensions, 664–667 resolving conflicts between rules (see Prototype Framework library, 287 precedence of CSS rules) pseudo-classes, 53–54 resources for further reading, 645–650 (see also specific pseudo-class by name) results attribute (input element), 410 CSS 2.1 (complete list), 671 RGBA values for background colors, 294 CSS3 (complete list), 675 ridge effect (framing), 281 pseudo-elements, 54–56, 156 right property, 659 (see also specific pseudo-element by name) with absolute positioning, 97 CSS 2.1 (complete list), 672 elements in multicolumn layouts, 522 pull quotes, 141–149 with shackling positioning, 100 borders for, 145–146 right value (background-position property), with images, 146–149 189 placing to side of column, 143–144 rollover effects, form buttons, 411 rollovers (cursor) animating with CSS3 transitions, 354–357 Q highlight table rows with, 468–469, 632– q (quotation) element, 13 634 quirks mode, 8 image-based, 379–383 quotation marks (smart), 579–582 in navigation menus, 358–362, 597 quotations (citations), 12–13 simple effects with JavaScript, 634–635 quote property, 272 stylizing, 351–362 quotes property, 659 stylizing without JavaScript, 353–354 root folder, 23 R :root pseudo-class, 53, 675 root relative links, 24 ranking systems (lists), creating, 335–340 rotating images, 206–208 readability of CSS programming, 37 round value (border-image property), 197 red flame (on text), 167 rounded corners reference resources, list of, 647 on columns, 227–238 reflections on images, inserting, 256–258 fixed-width columns, 227–230 registration form (sample design), 441–452 Mountaintop technique, 235–238 rel attribute (anchor element), 638 Sliding Doors technique, 230–235 relative length units (font size), 120 on elements, with JavaScript, 239–242 relative links, 23 on image borders, 182–184 relative positioning, 98–99 rows, table, 26 remote screen-capture service, 565 rows, tables removeClass( ) function (JavaScript), 633 alternating background colors, 465–468, rendering images, methods for, 205–206 630–632 repeat value (border-image property), 197 header styles, 460–462 repeating background images, 187–188 highlighting effect on, 468–469, 632–634 repeating graphic treatment on text, 163–165 rule conflicts (see precedence of CSS rules) replacing text with images, 217–220 rules (see CSS rules) required form elements, identifying, 425–427 rules (lines) :required pseudo-class, 53 between list items, 304–305 Reset buttons (forms), stylizing, 411–415 862 | Index
horizontal, customizing, 285–287 grouping selectors, 153, 670 ID selectors, 44, 670 for different parts of pages, 349 S when to use, 56–61 s-resize value (cursor property), 352 type selectors, 40, 669 Safari’s Inspect Element toolbar, 555 for form elements, 405, 406 sans-serif (font family), 106 universal selectors, 45, 669 web-safe fonts, 109 self-clearing floated elements, 92–95, 371 scalable images, 203–205 semantic markup, 2 screen-capture service, 565 ; (semicolon) for properties lists, 37 screen media type, 83, 482 separate model (table borders), 455, 456 screen readers, 381 serif (font family), 106 screen-width-specific stylesheets, 626–627 web-safe fonts, 109 screenplays, styling, 329–331 server-side solution to browser-specific Scriptaculous Effects libraries, 287 stylesheets, 563 scroll value (background-attachment shackling positioning, 99–101, 339 property), 197 shadows scrollbar- color properties, 272, 661 behind images, 244–250 scrolling behind text, 165–168 coloring IE scroll bar, 272–275 box shadows on elements, 242–243 fireworks display during, 588–589 shorthand properties, 86–88, 137, 192 locking background images against, 197– sibling combinator selectors, 494, 673 199 sibling selectors (see adjacent selectors) se-resize value (cursor property), 352 sIFR 3 type workaround, 117 search field, Macintosh-style, 408–411 size select element columns (fixed-width), 511–514 print-ready forms and, 487, 488 equalizing height for row of elements, 635– stylizing, 406–408 637 :selection pseudo-element, 160 excessively large text, 570–571 SelectORacle service, 649 of fonts, 119–120 selectors, 36, 38 cross-browser consistency, 121–125 adjacent selectors, 49, 152, 605 images adjacent sibling selectors, 670 across entire window, 202–203 attribute selectors, 51–52, 670, 674 list bullet images, 309 for input elements (forms), 402, 404 scalable images, 203–205 for placing icons with links, 350 when browser resizes, 199–202 print-readying forms with, 489 padding and, 66 child selectors, 47–49, 670 reflected images, 257 class selectors, 41, 152, 670 screen-width-specific stylesheets, 626–627 for input elements (forms), 399, 404 video element, 18 for table cells, 458–460 whitespace (see margins; space when to use, 56–61 (whitespace)) CSS 2.1 (complete list), 669 size attribute (hr element), 286 CSS3 (complete list), 673 /* */ for comments, 83–84 descendant selectors, 45, 670 Sleight script, 212 for link colors, 349 slideshows, 290 with nested lists, 364 Sliding Doors technique (rounding corners), for table cells, 458–460 230–235 general sibling combinator selectors, 494, slow keyword, fadeTo( ) function, 635 673 Index | 863
small keyword (font-size property), 123 stripes (U.S. flag sample design), 613 smaller keyword (font-size property), 123 striping table rows, 465–468, 630–632 smart quotes, 579–582 strong element, 19–20, 159 smooth drop shadows, 247–250 structure of documents, HTML for, 2, 39 solid effect (framing), 281 HTML5 document division elements, 59 sort order, CSS rules, 73–76 style element, 37 clarifying specificity, 77–79 (see also internal stylesheets) sound (see audio) styles, associating with web pages, 70–73 space (whitespace) stylesheets between columns (gutters), 535, 592 alternate, setting up, 88–89 dividers between list items, 304–305 comments in, 83–84 around elements in columns, 517, 535, 592 conditional comments (Internet Explorer), around forms, 398–399 559–561, 609 between headings and paragraphs, 129– eliminating auto-generated content, 268 130 external stylesheets, 71 indenting lists for higher-resolution browsers, 626 cross-browser consistency, 303–304 inline styles, 71, 72 with hanging indent, 319–321 internal stylesheets, 37, 70, 71 indenting paragraphs organizing contents of, 84–86 entire paragraph, 150–153 overriding inline styles, 552 first line only, 149–150 precedence (see precedence of CSS rules) with hanging indent, 153–156 for printer-friendly pages, 481–503 between letters and words, 168–171 color images as grayscale, 179–180, 484– line spacing, 161–163 486, 495 page margins, eliminating, 265–267 displaying URIs after links, 490–492, (see also margins) 501 in tables footers, adding to pages, 502, 508 cell padding, 453–456 how to apply, 481–484 cell spacing, 456–457 inserting characters before links, 492– gaps between cells, removing, 464–465 493 images in cells, 462–464 sample design, 495–503 special characters (see HTML entities; words setting page breaks, 493–495 and characters) web forms, 486–490 specificity of CSS rules, clarifying, 77–79 screen-width-specific, 626–627 speech media type, 482 separating hacks from correct rules, 562– spreadsheet-like forms, 431–434 563 sprites, 258–259, 339 time-specific, 625–626 for image-based rollovers, 382 using multiple types of, 79–83 square (bullet style), 301 view source stylesheet (Firefox), stacking elements with z-index, 101–102 customizing, 590 standards for HTML pages, 6–10 stylized borders for headings, 137–139 star ranking systems, creating, 335–340 stylized images for headings, 139–141 stars (U.S. flag sample design), 615 stylized pull quotes, 141–149 stationary background images, 197–199 stylized text for headings, 135–141 stealing images, hindering, 254–256 sub element, 173 stretch value (border-image property), 197 submenus for navigation, 341–343 stretching background images collapsible, 383–386 across entire browser window, 202–203 contextual, 386–388 when browser resizes, 199–202 dynamic tabbed, 389–392 864 | Index
horizontal, 365–371, 599 color contrast (accessibility), 578 with drop-down submenus, 372–374 multiple platforms with one computer, 564– print-ready, 487 565 rollovers in, 358–362, 597 with text browser, 565 in vertical menus, 363–365 text access keys, 374–375 alignment of Submit buttons (forms) baseline rhythm, applying, 171–173 images for, 415–416 centering, 126 readying for print, 487, 489 double justification, 126–128 stylizing, 411–415 superscripts and subscripts, 173–175 submit-only-once buttons, 416–417 excessively large, 570–571 text links operating like, 419 fonts (see fonts) that look like text, 417–419 headings (see headings) subscripts, 173–175 highlighting effect for, 159–160 substring matching attribute selectors, 52 impression of depth or motion, 576–577 summary property (hCalendar), 29 inline lists in, 318–319 sup element, 173 letters (see words and characters) superscripts, 173–175 multiple columns of, 175–177 SVG images as masks, 262–263 multiple typefaces in one line, 575 sw-resize value (cursor property), 352 overflow of, indicating, 128–129 overlaying on images, 215–217 paragraphs (see paragraphs) T red flame on, 167 table element, 25–27 repeating graphic treatment on, 163–165 border attribute, 455 replacing with images, 217–220 cellspacing attribute, 456 selection color, 160–161 table-layout property, 659 shadow behind, 165–168 tables, 453–479 space between letters and words, 168–171 alternating row colors, 465–468, 630–632 stylized, for headings, 135–141 borders in, 453–456 superscripts and subscripts, 173–175 calendar (sample design), 470–479 wrapping around images (floats), 89–92–95, caption style, 457–458 371 centering on page, 277 text-align property, 275, 659 creating in HTML documents, 25–27 center value, 126 designing forms without, 419–425 justify value, 127 header element style, 460–462 text-autospace property, 662 highlighting effect on rows, 468–469, 632– text browser, testing website with, 565 634 text-decoration property, 344, 659 spreadsheet-like forms, 431–434 in :first-line pseudo-element, 158 styles within cells, 458–460 text editor selection, 3–4 whitespace in text-indent property, 132, 149, 660 cell padding, 453–456 negative value for, 153, 307, 320 cell spacing, 456–457 text-justify property, 663 gaps around images in cells, 462–464 text-kashida-space property, 663 gaps between cells, removing, 464–465 text markers (lists), custom, 306–308 :target pseudo-class, 53, 394, 395, 675 text menus for navigation, 341–343 tbody element, 26 with access keys, 374–375 td element, 25–27, 458–460 horizontal, 365–371, 599 Technorati Contacts Feed Service, 28 with drop-down submenus, 372–374 testing Index | 865
print-ready, 487 opacity of page elements, changing, 292– rollovers in, 358–362, 597 294 vertical, submenus in, 363–365 of PNG images, 211–214 text-overflow property, 128 of reflected images, 257 text-shadow property, 166 supporting transparent PNGs in IE6, 640– in :first-line pseudo-element, 158 642 text-transform property, 660 texture, adding to page, 619 in :first-line pseudo-element, 158 trees, converting lists into, 331–335 text-underline-position property, 663 troubleshooting text value (cursor property), 352 bookmarklets for, 554 textarea element, stylizing, 404–406 browser extensions for, 555 TextEdit editor, 3 checking for color contrast, 578 TextPad editor, 4 CSS bugs and browser issues, 552 texture, adding, 619 for link rot, 554 TextWrangler editor, 4 patching Internet Explorer 6, 557–559, 609 th element, 25–27, 460–462 testing multiple platforms with one thead element, 26 computer, 564–565 three-column layouts (see columnar layouts) tty media type, 83, 482 ~ (tilde) in attribute selector declarations, 51 tv media type, 83, 482 tiling background images, 187–188 two-column forms without tables, 422–425 time-specific stylesheets, 625–626 two-column layouts, 507–511 title attribute with fixed-width columns, 511–514 a [anchor] element, 389 type selectors, 40, 669 tool tips, 389 for form elements, 405, 406 title attribute typeface (see fonts) link element, 88 Typekit service, 117 title element, 5 tool tips, 15, 22, 389 tools resources, list of, 649 U top property, 660 U.S. flag design (sample), 609–621 elements in multicolumn layouts, 522, 523, ul element, 20–22 545 background images for, 314 with relative positioning, 98 underline value (text-decoration property), with shackling positioning, 100 345 top value (background-position property), 189 underlining of links, removing, 343–345 tr element, 25–27 unexpected incongruity, 571–574 tracking (typography), 170 unicode-bidi property, 660 transform properties, 207 units for font size, 119 transition-duration property, 354, 356 universal selectors, 45, 669 transition property, 355, 357 unlike elements, combining, 574–576 transition-property property, 354, 356 unordered lists transition-timing-function property, 354 adding to HTML documents, 20–22 transitioning-timing-function property, 355 background images, 313–317 transparency, 15 for breadcrumb navigation, 375 background colors, 294–297 color of bullets, 302 CSS gradients, 210 converting into directory trees, 331–335 fade effect, with PNGs, 284 custom bullets masks, applying to images and borders, large images, 311–313 262–263 using images, 308–311 using text, 306–308 866 | Index
default style for, changing, 299–302 dividers between list items, 304–305 W for drop-down navigation, 372 w-resize value (cursor property), 352 hanging indents in, 319–321 W3C CSS Validator, 29–31, 102, 554, 649 for horizontal navigation menus, 365–371, W3C HTML Validator, 30, 554, 649 599 wait value (cursor property), 352 indentation in, 303–304 web browser consistency (see cross-browser as inline lists, 318–319 consistency) for navigation, 362 Web Developer browser extension, 650 nested, descendant selectors with, 364 web pages placing markers inside list, 321–323 associating styles with, 70–73 star ranking systems, creating, 335–340 borders for, 280–282 upper-alpha (counting style), 301 elements of (see page elements; specific upper-latin (counting style), 301 element by name) upper-roman (counting style), 301 web-safe fonts, 109–112 uppercase (see capitalization) -webkit-border properties, 183 URIs and URLs (see links) -webkit-gradient property, 208 url( ) function, 196 -webkit-transform property, 207 -webkit-transition- properties, 354 white-space property, 660 V whitespace (see space) valid HTML pages, understanding, 6–10 whitespace in CSS programming, 37 :valid pseudo-class, 53 widows property, 660 validating CSS rules, 102–103 width (see size) validating HTML on page, 29–31, 30, 102, 554, width attribute (hr element), 286 649 width property, 146, 660 validator, HTML, 29–31, 30, 102, 554, 649 for definition list items, 324 value attribute (input element), 409 form buttons, 415 vCards, 28 (see hCards) percentage values for, 203 versals, 131 windows (see browsers) vertical-align property, 464, 660 Wine software, 565 in :first-line pseudo-element, 158 word balloons, 251–253 vertical centering on pages, 278 word-break property, 663 vertical navigation menus word-spacing property, 169, 660 with access menus, 374–375 in :first-line pseudo-element, 158 collapsible, 383–386 word wrap (forcing breaks), 118–119 contextual, 386–388 word-wrap property, 118, 663 dynamic tabbed, 389–392 words and characters submenus in, 363–365 acronyms, returning values of, 491 vevent class, 29 emphasizing (see emphasizing certain vi and vim editors, 4 words) video element, 17–19 excessively large, 570–571 video, adding to HTML documents, 17–19 forcing breaks on words, 118–119 viewport, browser in general (see text) border around, 283–284 highlighting effect for, 159–160 coloring scroll bar (IE), 272–275 impression of depth or motion, 576–577 viewsource.css stylesheet, 590 inserting characters before links (in print), visibility property, 120, 660 492–493 :visited pseudo-class, 344, 346, 671 multiple typefaces in one line, 575 VMware Workstation, 564 red flame on, 167 Index | 867
smart quotes, 579–582 space between words, adjusting, 168–171 wrapping self-clearing floated elements, 92–95, 371 text around images (floats), 89–92 words (forcing breaks), 118–119 writing-mode property, 663 X x-height units, 120 x-large keyword (font-size property), 123 x-small keyword (font-size property), 123 XHTML 1.0 document types, 6 XHTML 1.1 document types, 6 xScope tools, 650 xx-large keyword (font-size property), 123 xx-small keyword (font-size property), 123 Y YUI Reset CSS stylesheet, 268 Z z-index, 101–102 z-index property, 101, 613, 660 zebra-striping table rows, 465–468, 630–632 zoom property, 95, 296, 662 868 | Index
About the Author Christopher Schmitt is the founder of Heat Vision, a small new media publishing and design firm, based in Cincinnati, Ohio. An award-winning web designer who has been working with the Web since 1993, Christopher interned for both David Siegel and Lynda Weinman in the mid ’90s while he was an undergraduate at Florida State Uni- versity working on a fine arts degree with an emphasis on graphic design. Afterward, he earned a master’s in communication for interactive and new communication tech- nologies while obtaining a graduate certificate in project management from FSU’s Col- lege of Communication. He is the author of one of the first books that looked at CSS-enabled designs, Designing CSS Web Pages (New Riders). He is also the coauthor of Adapting to Web Standards (New Riders), Professional CSS (Wrox), Photoshop in 10 Steps or Less (Wiley) and Dreamweaver MX Design Projects (Wrox), and contributed four chapters to XML, HTML, and XHTML Magic (New Riders). Christopher has also written for New Architect Magazine, A List Apart, Digital Web, and Web Reference. He is the list moderator for Babble, a mailing list community devoted to advanced web design and development topics. With the Web Standards Project, Christopher helps co-lead the Adobe Task Force while contributing to its Education Task Force. On his personal website, Christopher shows his true colors and most recent activities. He is 6'7" and doesn’t play professional basketball, but wouldn’t mind a good game of chess. Colophon The animal on the cover of CSS Cookbook is a grizzly bear (Ursus arctos horribilis). The grizzly’s distinctive features include humped shoulders, a long snout, and long curved claws. The coat color ranges from shades of blond, brown, black, or a combination of these; the long outer guard hairs are often tipped with white or silver, giving the bear a “grizzled” appearance. The grizzly can weigh anywhere from 350 to 800 pounds and reach a shoulder height of 4.5 feet when on all fours. Standing on its hind legs, a grizzly can reach up to eight feet. Despite its large size, the grizzly can reach speeds of 35 to 40 miles per hour. Some of the grizzly’s favorite foods include nuts, berries, insects, salmon, carrion, and small mammals. The diet of a grizzly varies depending on the season and habitat. Griz- zlies in parts of Alaska eat primarily salmon, while grizzlies in high mountain areas eat mostly berries and insects. Grizzlies are solitary, and prefer rugged mountains and forests. They can be found in the Canadian provinces of British Columbia, Alberta, Yukon, and the Northwest Ter- ritories, and in the U.S. states of Alaska, Idaho, Wyoming, Washington, and Montana.
The grizzly is considered a threatened species: only about 850 bears exist in the lower 48 states. Before the West was settled, the grizzly bear population was estimated to be between 50,000 and 100,000. Threats to the survival of the grizzly bear include habitat destruction caused by logging, mining, and human development, as well as illegal poaching. The cover image is a 19th-century engraving from the Dover Pictorial Archive. The cover font is Adobe ITC Garamond. The text font is Linotype Birka; the heading font is Adobe Myriad Condensed; and the code font is LucasFont’s TheSansMonoCondensed.