CSS Cookbook. Quick Solutions to Common CSS Problems. 3rd Edition Christopher Schmitt

Spis treści książki

• CSS Cookbook
• Foreword
• Preface
  • Audience
  • Assumptions This Book Makes
  • Contents of This Book
  • Conventions Used in This Book
  • Using Code Examples
  • Wed Like to Hear from You
  • Safari Books Online
  • Acknowledgments
• 1. Using HTML Basics
  • Introduction
  • Picking a Text Editor
  • Coding a Basic HTML Page
  • Understanding DOCTYPEs and Effects on Browser Layout
  • Marking Up Headers
  • Making Appropriate Quotations
  • Adding an Image
  • Adding Audio with HTML5
  • Incorporating Video with HTML5
  • Using strong and em Effectively
  • Creating Lists
  • Making a Link to a Web Page
  • Coding Tables
  • Creating an HTML vCard (hCard)
  • Marking Up an Event (hCalendar)
  • Validating HTML
• 2. CSS Basics
  • Introduction
  • Applying CSS Rules to a Web Page
  • Using Basic Selectors to Apply Styles
  • Applying Child Selectors
  • Applying Adjacent Selectors
  • Applying Attribute Selectors
  • Using Pseudo-Classes
  • Using Pseudo-Elements
  • Determining When to Use Class and ID Selectors
  • Understanding CSS Properties
  • Understanding the Box Model
  • Associating Styles to a Web Page
  • Understanding the Origin
  • Understanding the Sort Order Within CSS
  • Using !important to Override Certain CSS Rules
  • Clarifying Specificity
  • Setting Up Different Types of Stylesheets
  • Adding Comments Within Stylesheets
  • Organizing the Contents of a Stylesheet
  • Working with Shorthand Properties
  • Setting Up an Alternate Stylesheet
  • Using Floats
  • Using Self-Clearing Floated Elements
  • Using Absolute Positioning
  • Using Relative Positioning
  • Using Shackling Positioning
  • Stacking Elements with z-index
  • Validating CSS Rules
• 3. Web Typography
  • Introduction
  • Specifying Fonts
  • Using Web-Safe Fonts
  • Setting an Ampersand Flourish
  • Embedding Font Files
  • Forcing a Break on Really Long Words
  • Specifying Font Measurements and Sizes
  • Gaining More Cross-Browser Consistency with Font Sizes
  • Setting Hyphens, Em Dashes, and En Dashes
  • Centering Text
  • Setting Text to Be Justified
  • Indicating an Overflow of Text with an Ellipsis
  • Removing Space Between Headings and Paragraphs
  • Setting a Simple Initial Cap
  • Setting a Larger, Centered Initial Cap
  • Setting an Initial Cap with Decoration (Imagery)
  • Creating a Heading with Stylized Text
  • Creating a Heading with Stylized Text and Borders
  • Stylizing a Heading with Text and an Image
  • Creating a Pull Quote with HTML Text
  • Placing a Pull Quote to the Side of a Column
  • Creating a Pull Quote with Borders
  • Creating a Pull Quote with Images
  • Setting the Indent in the First Line of a Paragraph
  • Setting the Indent of Entire Paragraphs
  • Creating a Hanging Indent
  • Styling the First Line of a Paragraph
  • Styling the First Line of a Paragraph with an Image
  • Creating a Highlighted Text Effect
  • Changing the Text Selection Color
  • Changing Line Spacing
  • Adding a Graphic Treatment to HTML Text
  • Placing a Shadow Behind Text
  • Adjusting the Space Between Letters and Words
  • Applying Baseline Rhythm on Web Typography
  • Styling Superscripts and Subscripts Without Messing the Text Baseline
  • Setting Up Multiple Columns of Text
• 4. Images
  • Introduction
  • Transforming Color Images to Black and White in IE with CSS
  • Setting a Border Around an Image
  • Setting a Rounded Border Around an Image
  • Removing Borders Set on Images by Default in Some Browsers
  • Setting a Background Image
  • Creating a Line of Background Images
  • Positioning a Background Image
  • Using Multiple Background Images on One HTML Element
  • Setting Images on a Border
  • Creating a Stationary Background Image
  • Stretching Images As the Browser Resizes
  • Stretching an Image Across the Entire Browser Window
  • Making Images Scalable
  • Setting How a Browser Renders an Image
  • Rotating Images with CSS
  • Setting Gradients with CSS
  • Creating Transparent PNG Images for IE6 and Later
  • Using Transparent PNG Images with JavaScript
  • Overlaying HTML Text on an Image
  • Replacing HTML Text with an Image
  • Building a Panoramic Image Presentation
  • Combining Different Image Formats
  • Rounding Corners with Fixed-Width Columns
  • Rounding Corners (Sliding Doors Technique)
  • Rounding Corners (Mountaintop Technique)
  • Rounding Corners with JavaScript
  • Setting a Shadow on an Element with CSS
  • Placing a Drop Shadow Behind an Image
  • Placing a Smooth Drop Shadow Behind an Image
  • Making Word Balloons
  • Hindering People from Stealing Your Images
  • Inserting Reflections on Images Automatically
  • Using Image Sprites
  • Clipping Background Images
  • Applying Masks to Images and Borders
• 5. Page Elements
  • Introduction
  • Eliminating Page Margins
  • Resetting Browser-Style Defaults for Elements
  • Coloring the Scroll Bar in IE
  • Techniques for Centering Elements on a Web Page
  • Placing a Page Border
  • Placing a Border Around the Browsers Viewport
  • Customizing a Horizontal Rule
  • Adding a Lightbox
  • Changing the Opacity on Elements
  • Adjusting the Opacity of Background Colors
• 6. Lists
  • Introduction
  • Changing the Format of a List
  • Changing the Color of a List Bullet
  • Writing Cross-Browser Indentation in Lists
  • Placing Dividers Between List Items
  • Creating Custom Text Markers for Lists
  • Creating Custom Image Markers for Lists
  • Inserting Larger Custom Image Markers for Lists
  • Making a List Presentation Rich with Imagery
  • Creating Inline Lists
  • Making Hanging Indents in a List
  • Moving the Marker Inside the List
  • Styling a Definition List
  • Styling a Screenplay with the HTML5 dialog Element
  • Turning a List into a Directory Tree
  • Creating a Star Ranking System
• 7. Links and Navigation
  • Introduction
  • Easily Generating Text-Based Menus and Submenus
  • Removing Underlines from Links (and Adding Other Styles)
  • Changing Link Colors
  • Removing Dotted Lines When Clicking on a Link in Internet Explorer
  • Changing Link Colors in Different Sections of a Page
  • Placing Icons at the End of Different Kinds of Links
  • Changing Cursors
  • Creating Rollovers Without JavaScript
  • Animating Rollovers on Links with CSS3 Transitions
  • Creating Text Navigation Menus and Rollovers
  • Adding Submenus to Vertical Menus
  • Building Horizontal Navigation Menus
  • Building Horizontal Navigation Menus with Drop-Down Menus
  • Building a Navigation Menu with Access Keys
  • Creating Breadcrumb Navigation
  • Creating Image-Based Rollovers
  • Creating Collapsible Menus
  • Creating Contextual Menus
  • Making Tool Tips with the title Attribute
  • Designing a Dynamic Tabbed Menu
  • Changing Styles on Anchored Links
• 8. Forms
  • Introduction
  • Modifying the Spacing Around a Form
  • Removing the Space Around a Form
  • Setting Styles for Input Elements
  • Changing Styles on Form Elements When a User Clicks on Them
  • Applying Different Styles to Different Input Elements in the Same Form
  • Setting Styles for textarea Elements
  • Setting Styles for select and option Elements
  • Creating a Macintosh-Styled Search Field
  • Styling Form Buttons
  • Creating an Image Submit Button
  • Setting Up a Submit-Once-Only Button
  • Creating a Submit Button That Looks Like HTML Text
  • Making an HTML Text Link Operate Like a Submit Button
  • Designing a Web Form Without Tables
  • Designing a Two-Column Form Without Tables
  • Integrating Form Feedback with a Form
  • Styling Access Keys in Web Forms
  • Grouping Common Form Elements
  • Entering Data into a Form That Is Similar to a Spreadsheet
  • Sample Design: A Login Form
  • Sample Design: A Registration Form
• 9. Tables
  • Introduction
  • Setting the Borders and Cell Padding for Tables
  • Setting the Cell Spacing
  • Setting the Style for Captions
  • Setting the Styles Within Table Cells
  • Setting the Styles for Table Header Elements
  • Removing Gaps from Images Placed in Table Cells
  • Eliminating Gaps Between Table Cells
  • Creating Alternating Background Colors in Table Rows
  • Adding a Highlighting Effect on a Table Row
  • Sample Design: An Elegant Calendar
• 10. Designing Web Pages for Printing
  • Introduction
  • Applying a Stylesheet for Printing to a Web Page
  • Replacing a Color Logo for a Black-and-White Logo When Printing Web Pages
  • Making a Web Form Print-Ready
  • Displaying URIs After Links
  • Inserting Special Characters Before Links
  • Setting Page Breaks for a Printed Document
  • Sample Design: A Printer-Friendly Page with CSS
• 11. Page Layouts
  • Introduction
  • Building a One-Column Layout
  • Building a Two-Column Layout
  • Building a Two-Column Layout with Fixed-Width Columns
  • Creating a Flexible Multicolumn Layout with Floats
  • Creating a Fixed-Width Multicolumn Layout with Floats
  • Creating a Flexible Multicolumn Layout with Positioning
  • Creating a Fixed-Width Multicolumn Layout with Positioning
  • Using Floats to Display Columns in Any Order
  • Designing an Asymmetric Layout
  • Designing Resolution-Independent Layouts
• 12. Hacks, Workarounds, and Troubleshooting
  • Introduction
  • Overriding Inline Styles
  • Diagnosing CSS Bugs and Browser Issues
  • Using Bookmarklets to Troubleshoot CSS
  • Using Browser Extensions to Troubleshoot CSS
  • Patching Up Internet Explorer 6
  • Patching Up Internet Explorer 6 with JavaScript
  • Using Conditional Comments to Deliver Styles to Different Versions of Internet Explorer
  • Using CSS Filters to Deliver CSS Rules to Almost Any Browser
  • Setting Up an Intelligent CSS Delivery System for Modern Browsers
  • Testing a Site Design on More Than One Platform with Only One Computer
  • Testing a Website with a Text Browser
• 13. Designing with CSS
  • Introduction
  • Enlarging Text Excessively
  • Creating Unexpected Incongruity
  • Combining Unlike Elements to Create Contrast
  • Leading the Eye with Contrast
  • Checking for Enough Color Contrast
  • Emphasizing a Quotation with Smart Quotes
  • Setting a Moving Background Scene When a User Resizes the Window
  • Adding Animation to Elements on a Page
  • Creating a Fireworks Display As a User Scrolls
  • Customizing the View Source Stylesheet for Firefox
  • Designing with Grids (CSS Frameworks)
  • Sample Design: A Cohesive Web Design
  • Sample Design: The U.S. Flag
• 14. Interacting with JavaScript
  • Introduction
  • Determining Whether JavaScript Is Available Within a Browser
  • Applying a Different Stylesheet Based on the Time of Day
  • Redirecting to a Mobile Site Based on the Browsers Screen Width
  • Adding a JavaScript Framework to a Web Page
  • Using CSS3 Selectors in IE6 and IE7
  • Zebra-Striping an HTML Table with JavaScript
  • Highlighting a Table Row with Mouseovers
  • Adding Effects to Simple Image Rollovers
  • Making a Row of Elements with a Variable Amount of Content the Same Height
  • Setting a Link to Open a New Window
  • Making an Entire div Element Clickable
  • Supporting Transparent PNGs in IE6 with JavaScript
  • Delivering HTML5 and CSS3 to Browsers That Can Handle Them
• A. Resources
  • General HTML and CSS Instruction
  • Design Resources
  • Discussion Groups
  • References
  • Tools
• B. CSS 2.1 Properties and Proprietary Extensions
• C. CSS 2.1 Selectors, Pseudo-Classes, and Pseudo-Elements
• D. CSS3 Selectors and Pseudo-Classes
• E. Styling of Form Elements
  • Anatomy of the Appendix
  • Tested CSS Properties
• Colophon
• Copyright

pokaż cały spis treści

ukryj recenzje