Tài liệu CSS Cookbook

Copyright
Preface
Chapter 1. General
Section 1.0. Introduction
Recipe 1.1. Using CSS with HTML
Recipe 1.2. Using Different Selectors to Apply Styles
Recipe 1.3. Determining When to Use Class and ID Selectors
Recipe 1.4. Understanding CSS Properties
Recipe 1.5. Understanding the Box Model
Recipe 1.6. Understanding DOCTYPES and Effects on Browser Layout
Recipe 1.7. Associating Styles to a Web Page
Recipe 1.8. How to Use Different Types of Style Sheets
Recipe 1.9. Adding Comments Within CSS
Recipe 1.10. Organizing the Contents of a Style Sheet
Recipe 1.11. Organizing Style Sheet Files
Recipe 1.12. Working with Shorthand Properties
Recipe 1.13. Setting up an Alternate Style Sheet
Recipe 1.14. Using Floats with Images
Recipe 1.15. Using Absolute Positioning
Recipe 1.16. Using Relative Positioning
Recipe 1.17. Using CSS in Adobe Dreamweaver
Recipe 1.18. Using CSS in Microsoft Expression Web Designer
Chapter 2. Web Typography
Section 2.0. Introduction
Recipe 2.1. Specifying Fonts
Recipe 2.2. Specifying Font Measurements and Sizes
Recipe 2.3. Gaining More Control over Font Sizes
Recipe 2.4. Enforcing Font Sizes
Recipe 2.5. Centering Text
Recipe 2.6. Setting Text to Be Justified
Recipe 2.7. Removing Space Between Headings and Paragraphs
Recipe 2.8. Setting a Simple Initial Cap
Recipe 2.9. Setting a Larger, Centered Initial Cap
Recipe 2.10. Setting an Initial Cap with Decoration (Imagery)
Recipe 2.11. Creating a Heading with Stylized Text
Recipe 2.12. Creating a Heading with Stylized Text and Borders
Recipe 2.13. Stylizing a Heading with Text and an Image
Recipe 2.14. Creating a Pull Quote with HTML Text
Recipe 2.15. Creating a Pull Quote with Borders
Recipe 2.16. Creating a Pull Quote with Images
Recipe 2.17. Setting the Indent in the First Line of a Paragraph
Recipe 2.18. Setting the Indent of Entire Paragraphs
Recipe 2.19. Creating a Hanging Indent
Recipe 2.20. Styling the First Line of a Paragraph
Recipe 2.21. Styling the First Line of a Paragraph with an Image
Recipe 2.22. Creating a Highlighted Text Effect
Recipe 2.23. Changing Line Spacing
Recipe 2.24. Adding a Graphic Treatment to HTML Text
Recipe 2.25. Placing Shadow Behind Text
Recipe 2.26. Adjusting the Spacing Between Letters and Words
Chapter 3. Images
Section 3.0. Introduction
Recipe 3.1. Placing a Border Around an Image
Recipe 3.2. Removing Borders Set on Images by Default in Some Browsers
Recipe 3.3. Setting a Background Image
Recipe 3.4. Creating a Line of Background Images
Recipe 3.5. Placing a Background Image on a Web Page
Recipe 3.6. Using Multiple Background Images on One Selector
Recipe 3.7. Creating a Stationary Background Image
Recipe 3.8. Overlaying HTML Text on an Image
Recipe 3.9. Replacing HTML Text with an Image
Recipe 3.10. Replacing HTML Text with Flash Text
Recipe 3.11. Using Multiple PNGs with Transparency
Recipe 3.12. Building a Panoramic Image Presentation
Recipe 3.13. Combining Different Image Formats
Recipe 3.14. Rounding Corners with Fixed-Width Columns
Recipe 3.15. Rounding Corners (Sliding Doors Technique)
Recipe 3.16. Rounding Corners (Mountaintop Technique)
Recipe 3.17. Rounding Corners with JavaScript
Recipe 3.18. Placing a Drop Shadow Behind an Image
Recipe 3.19. Placing a Smooth Drop Shadow Behind an Image
Recipe 3.20. Making Images Scalable
Recipe 3.21. Making Word Balloons
Recipe 3.22. Hindering People from Stealing Your Images
Recipe 3.23. Inserting Reflections on Images Automatically
Recipe 3.24. Using Image Sprites
Chapter 4. Page Elements
Section 4.0. Introduction
Recipe 4.1. Eliminating Page Margins
Recipe 4.2. Coloring the Scrollbar
Recipe 4.3. Techniques for Centering Elements on a Web Page
Recipe 4.4. Placing a Page Border
Recipe 4.5. Customizing a Horizontal Rule
Recipe 4.6. Adding a Lightbox
Chapter 5. Lists
Section 5.0. Introduction
Recipe 5.1. Changing the Format of a List
Recipe 5.2. Writing Cross-Browser Indentation in Lists
Recipe 5.3. Place Dividers Between List Items
Recipe 5.4. Creating Custom Text Markers for Lists
Recipe 5.5. Creating Custom Image Markers for Lists
Recipe 5.6. Inserting Large Custom Image Markers for Lists
Recipe 5.7. Making a List Presentation Rich with Imagery
Recipe 5.8. Creating Inline Lists
Recipe 5.9. Making Hanging Indents in a List
Recipe 5.10. Moving the Marker Inside the List
Chapter 6. Links and Navigation
Section 6.0. Introduction
Recipe 6.1. Removing Underlines from Links (and Adding Other Decorations)
Recipe 6.2. Changing Link Colors
Recipe 6.3. Changing Link Colors in Different Sections of a Page
Recipe 6.4. Placing an Icon at the End of the Link
Recipe 6.5. Changing Cursors
Recipe 6.6. Creating Rollovers Without JavaScript
Recipe 6.7. Creating Text Navigation Menus and Rollovers
Recipe 6.8. Building Horizontal Navigation Menus
Recipe 6.9. Building a Navigation Menu with Access Keys
Recipe 6.10. Creating Breadcrumb Navigation
Recipe 6.11. Creating Image-Based Rollovers
Recipe 6.12. Creating Collapsible Menus
Recipe 6.13. Creating Contextual Menus
Recipe 6.14. Making Tool Tips with the Title Attribute
Recipe 6.15. Designing a Dynamic Visual Menu
Recipe 6.16. Apply Styles Dynamically to a Web Page
Chapter 7. Forms
Section 7.0. Introduction
Recipe 7.1. Modifying the Spacing Around a Form
Recipe 7.2. Setting Styles for Input Elements
Recipe 7.3. Applying Different Styles to Different Input Elements in the Same Form
Recipe 7.4. Setting Styles for textarea Elements
Recipe 7.5. Setting Styles for Select and Option Elements
Recipe 7.6. Creating a Macintosh-Styled Search Field
Recipe 7.7. Styling Form Buttons
Recipe 7.8. Creating an Image Submit Button
Recipe 7.9. Setting Up a Submit-Once-Only Button
Recipe 7.10. Creating a Submit Button That Looks Like HTML Text
Recipe 7.11. Making an HTML Text Link Operate Like a Submit Button
Recipe 7.12. Designing a Web Form Without Tables
Recipe 7.13. Designing a Two Column Form Without Tables
Recipe 7.14. Highlighting Form Fields
Recipe 7.15. Integrating Form Feedback with a Form
Recipe 7.16. Styling Access Keys in Web Forms
Recipe 7.17. Grouping Common Form Elements
Recipe 7.18. Entering Data into a Form Like a Spreadsheet
Recipe 7.19. Sample Design: A Login Form
Recipe 7.20. Sample Design: A Registration Form
Chapter 8. Tables
Section 8.0. Introduction
Recipe 8.1. Setting the Cell Spacing
Recipe 8.2. Setting the Borders and Cell Padding
Recipe 8.3. Setting the Style for Caption
Recipe 8.4. Setting the Styles Within Table Cells
Recipe 8.5. Setting Styles for Table Header Elements
Recipe 8.6. Removing Gaps from Images Placed in Table Cells
Recipe 8.7. Eliminating Gaps Between Table Cells
Recipe 8.8. Creating Alternating Background Colors in Table Rows
Recipe 8.9. Adding a Highlighting Effect on a Table Row
Recipe 8.10. Sample Design: An Elegant Calendar
Chapter 9. Page Layouts
Section 9.0. Introduction
Recipe 9.1. Building a One-Column Layout
Recipe 9.2. Building a Two-Column Layout
Recipe 9.3. Building a Two-Column Layout with Fixed-Width Columns
Recipe 9.4. Creating a Flexible Multicolumn Layout with Floats
Recipe 9.5. Creating a Fixed-Width Multicolumn Layout with Floats
Recipe 9.6. Creating a Flexible Multicolumn Layout with Positioning
Recipe 9.7. Creating a Fixed-Width Multicolumn Layout with Positioning
Recipe 9.8. Using Floats to Display Columns in Any Order
Recipe 9.9. Designing an Asymmetric Layout
Chapter 10. Print
Section 10.0. Introduction
Recipe 10.1. Creating a Printer-Friendly Page
Recipe 10.2. Making a Web Form Print-Ready
Recipe 10.3. Displaying URIs After Links
Recipe 10.4. Inserting Special Characters Before Links
Recipe 10.5. Sample Design: A Printer-Friendly Page with CSS
Chapter 11. Hacks, Workarounds, and Troubleshooting
Section 11.0. Introduction
Recipe 11.1. Isolating Styles for Netscape Navigator 4.x
Recipe 11.2. Delivering Specific Styles to Internet Explorer 5.x for Windows
Recipe 11.3. Removing Web Page Flicker in Internet Explorer 5.x for Windows
Recipe 11.4. Keeping Background Images Stationary in Internet Explorer 6 for Windows
Recipe 11.5. Using Internet Explorer for Windows' Conditional Comments to Deliver Styles
Recipe 11.6. Keeping CSS Rules from Internet Explorer 5 for Macintosh
Recipe 11.7. Setting Up an Intelligent Hack Management System
Recipe 11.8. Diagnosing CSS Bugs and Browser Issues
Recipe 11.9. Testing a Site Design on More Than One Platform with Only One Computer
Recipe 11.10. Installing More Than One Version of Internet Explorer for Windows on a Computer
Recipe 11.11. Testing a Web Site with a Text Browser
Chapter 12. Designing with CSS
Section 12.0. Introduction
Recipe 12.1. Enlarging Text Excessively
Recipe 12.2. Creating Unexpected Incongruity
Recipe 12.3. Combining Unlike Elements to Create Contrast
Recipe 12.4. Leading the Eye with Contrast
Recipe 12.5. Checking for Enough Color Contrast
Recipe 12.6. Emphasizing a Quotation
Appendix A. Resources
General HTML and CSS Instruction
Design Resources
Discussion Groups
References
Tools
Appendix B. CSS 2.1 Properties and Proprietary Extensions
Appendix C. CSS 2.1 Selectors, Pseudo-Classes, and Pseudo-Elements
Appendix D. Styling of Form Elements
Checkboxes
File Input
Radio Buttons
Text Fields
Multiple Options
Select Element
Submit Button
Textarea Element
Colophon
Index