CSS Cookbook

Name: CSS Cookbook
Brand: O'Reilly
Price: 33.49 EUR
Availability: OnlineOnly

Christopher Schmitt(Autor*in)

O'Reilly (Verlag)

2. Auflage

Erschienen am 17. Oktober 2006

538 Seiten

E-Book

PDF mit Adobe-DRM

Systemvoraussetzungen

978-0-596-51007-7 (ISBN)

33,49 €inkl. 7% MwSt.

Systemvoraussetzungen

für PDF mit Adobe-DRM

E-Book Einzellizenz

Als Download verfügbar

Zur neuen Auflage

Beschreibung

Weitere Details

Weitere Ausgaben

Inhalt

Intro
Table of Contents
Preface
Audience
Assumptions This Book Makes
Contents of This Book
Conventions Used in This Book
Using Code Examples
How to Contact Us
Safari Enabled
Acknowledgments
General
1.0 Introduction
1.1 Using CSS with HTML
Problem
Solution
Discussion
See Also
1.2 Using Different Selectors to Apply Styles
Problem
Solution
Discussion
Type selectors
Class selectors
ID selectors
Descendant selectors
Child selectors
Universal selectors
Adjacent sibling selectors
Attribute selectors
Pseudo-classes
Pseudo-elements
See Also
1.3 Determining When to Use Class and ID Selectors
Problem
Solution
Discussion
See Also
1.4 Understanding CSS Properties
Problem
Solution
Discussion
See Also
1.5 Understanding the Box Model
Problem
Solution
Discussion
See Also
1.6 Understanding DOCTYPES and Effects on Browser Layout
Problem
Solution
Discussion
See Also
1.7 Associating Styles to a Web Page
Problem
Solution
Discussion
When to use inline styles
When to use internal style sheets
See Also
1.8 How to Use Different Types of Style Sheets
Problem
Solution
Discussion
See Also
1.9 Adding Comments Within CSS
Problem
Solution
Discussion
See Also
1.10 Organizing the Contents of a Style Sheet
Problem
Solution
Discussion
See Also
1.11 Organizing Style Sheet Files
Problem
Solution
Discussion
See Also
1.12 Working with Shorthand Properties
Problem
Solution
Discussion
See Also
1.13 Setting up an Alternate Style Sheet
Problem
Solution
Discussion
See Also
1.14 Using Floats with Images
Problem
Solution
Discussion
See Also
1.15 Using Absolute Positioning
Problem
Solution
Discussion
See Also
1.16 Using Relative Positioning
Problem
Solution
Discussion
See Also
1.17 Using CSS in Adobe Dreamweaver
Problem
Solution
Discussion
See Also
1.18 Using CSS in Microsoft Expression Web Designer
Problem
Solution
Discussion
See Also
Web Typography
2.0 Introduction
2.1 Specifying Fonts
Problem
Solution
Discussion
See Also
2.2 Specifying Font Measurements and Sizes
Problem
Solution
Discussion
Length units
Relative units
Setting the size of fonts to zero or a negative value
See Also
2.3 Gaining More Control over Font Sizes
Problem
Solution
Discussion
Using pixels
Accessibility and web typography
Using font keywords
Using em units to control type
See Also
2.4 Enforcing Font Sizes
Problem
Solution
Discussion
See Also
2.5 Centering Text
Problem
Solution
Discussion
See Also
2.6 Setting Text to Be Justified
Problem
Solution
Discussion
See Also
2.7 Removing Space Between Headings and Paragraphs
Problem
Solution
Discussion
See Also
2.8 Setting a Simple Initial Cap
Problem
Solution
Discussion
See Also
2.9 Setting a Larger, Centered Initial Cap
Problem
Solution
Discussion
See Also
2.10 Setting an Initial Cap with Decoration (Imagery)
Problem
Solution
Discussion
See Also
2.11 Creating a Heading with Stylized Text
Problem
Solution
Discussion
See Also
2.12 Creating a Heading with Stylized Text and Borders
Problem
Solution
Discussion
See Also
2.13 Stylizing a Heading with Text and an Image
Problem
Solution
Discussion
See Also
2.14 Creating a Pull Quote with HTML Text
Problem
Solution
Discussion
See Also
2.15 Creating a Pull Quote with Borders
Problem
Solution
Discussion
See Also
2.16 Creating a Pull Quote with Images
Problem
Solution
Discussion
See Also
2.17 Setting the Indent in the First Line of a Paragraph
Problem
Solution
Discussion
See Also
2.18 Setting the Indent of Entire Paragraphs
Problem
Solution
Discussion
See Also
2.19 Creating a Hanging Indent
Problem
Solution
Discussion
Hanging indents safely
The paired hanging indent
See Also
2.20 Styling the First Line of a Paragraph
Problem
Solution
Discussion
See Also
2.21 Styling the First Line of a Paragraph with an Image
Problem
Solution
Discussion
See Also
2.22 Creating a Highlighted Text Effect
Problem
Solution
Discussion
See Also
2.23 Changing Line Spacing
Problem
Solution
Discussion
See Also
2.24 Adding a Graphic Treatment to HTML Text
Problem
Solution
Discussion
See Also
2.25 Placing Shadow Behind Text
Problem
Solution
Discussion
See Also
2.26 Adjusting the Spacing Between Letters and Words
Problem
Solution
Discussion
See Also
Images
3.0 Introduction
3.1 Placing a Border Around an Image
Problem
Solution
Discussion
See Also
3.2 Removing Borders Set on Images by Default in Some Browsers
Problem
Solution
Discussion
See Also
3.3 Setting a Background Image
Problem
Solution
Discussion
See Also
3.4 Creating a Line of Background Images
Problem
Solution
See Also
3.5 Placing a Background Image on a Web Page
Solution
Discussion
See Also
3.6 Using Multiple Background Images on One Selector
Problem
Solution
Discussion
See Also
3.7 Creating a Stationary Background Image
Problem
Solution
Discussion
See Also
3.8 Overlaying HTML Text on an Image
Problem
Solution
Discussion
See Also
3.9 Replacing HTML Text with an Image
Problem
Solution
Discussion
Origin of the image replacement method
Problem with the FIR method
Phark image replacement method
CSS 3 approach to image replacement
See Also
3.10 Replacing HTML Text with Flash Text
Problem
Solution
Discussion
See Also
3.11 Using Multiple PNGs with Transparency
Problem
Solution
Discussion
See Also
3.12 Building a Panoramic Image Presentation
Problem
Solution
Discussion
See Also
3.13 Combining Different Image Formats
Problem
Solution
Discussion
See Also
3.14 Rounding Corners with Fixed-Width Columns
Problem
Solution
Discussion
See Also
3.15 Rounding Corners (Sliding Doors Technique)
Problem
Solution
Discussion
See Also
3.16 Rounding Corners (Mountaintop Technique)
Problem
Solution
Discussion
See Also
3.17 Rounding Corners with JavaScript
Problem
Solution
Discussion
Different colors
Different sizes
Different elements
Specific corners
See Also
3.18 Placing a Drop Shadow Behind an Image
Problem
Solution
Discussion
See Also
3.19 Placing a Smooth Drop Shadow Behind an Image
Problem
Solution
Discussion
See Also
3.20 Making Images Scalable
Problem
Solution
Discussion
See Also
3.21 Making Word Balloons
Problem
Solution
Discussion
See Also
3.22 Hindering People from Stealing Your Images
Problem
Solution
Discussion
Microsoft's Image toolbar
No images are safe
See Also
3.23 Inserting Reflections on Images Automatically
Problem
Solution
Discussion
Customization features
Known browser issues
See Also
3.24 Using Image Sprites
Problem
Solution
Discussion
See Also
Page Elements
4.0 Introduction
4.1 Eliminating Page Margins
Problem
Solution
Discussion
See Also
4.2 Coloring the Scrollbar
Problem
Solution
Discussion
See Also
4.3 Techniques for Centering Elements on a Web Page
Problem
Solution
Discussion
Tables
Images
Vertical centering
See Also
4.4 Placing a Page Border
Problem
Solution
Discussion
See Also
4.5 Customizing a Horizontal Rule
Problem
Solution
Discussion
See Also
4.6 Adding a Lightbox
Problem
Solution
Discussion
Setting up the files
Making a slideshow
Known browser issues
See Also
Lists
5.0 Introduction
5.1 Changing the Format of a List
Problem
Solution
Discussion
See Also
5.2 Writing Cross-Browser Indentation in Lists
Problem
Solution
Discussion
See Also
5.3 Place Dividers Between List Items
Problem
Solution
Discussion
See Also
5.4 Creating Custom Text Markers for Lists
Problem
Solution
Discussion
See Also
5.5 Creating Custom Image Markers for Lists
Problem
Solution
Discussion
See Also
5.6 Inserting Large Custom Image Markers for Lists
Problem
Solution
Discussion
See Also
5.7 Making a List Presentation Rich with Imagery
Problem
Solution
Discussion
See Also
5.8 Creating Inline Lists
Problem
Solution
Discussion
See Also
5.9 Making Hanging Indents in a List
Problem
Solution
Discussion
See Also
5.10 Moving the Marker Inside the List
Problem
Solution
Discussion
See Also
Links and Navigation
6.0 Introduction
6.1 Removing Underlines from Links (and Adding Other Decorations)
Problem
Solution
Discussion
See Also
6.2 Changing Link Colors
Problem
Solution
Discussion
See Also
6.3 Changing Link Colors in Different Sections of a Page
Problem
Solution
Discussion
See Also
6.4 Placing an Icon at the End of the Link
Problem
Solution
Discussion
See Also
6.5 Changing Cursors
Problem
Solution
Discussion
See Also
6.6 Creating Rollovers Without JavaScript
Problem
Solution
Discussion
See Also
6.7 Creating Text Navigation Menus and Rollovers
Problem
Solution
Discussion
See Also
6.8 Building Horizontal Navigation Menus
Problem
Solution
Discussion
See Also
6.9 Building a Navigation Menu with Access Keys
Problem
Solution
Discussion
See Also
6.10 Creating Breadcrumb Navigation
Problem
Solution
Discussion
See Also
6.11 Creating Image-Based Rollovers
Problem
Solution
Discussion
See Also
6.12 Creating Collapsible Menus
Problem
Solution
Discussion
See Also
6.13 Creating Contextual Menus
Problem
Solution
Discussion
See Also
6.14 Making Tool Tips with the Title Attribute
Problem
Solution
Discussion
See Also
6.15 Designing a Dynamic Visual Menu
Problem
Solution
Discussion
See Also
6.16 Apply Styles Dynamically to a Web Page
Problem
Solution
Discussion
Pure CSS collapsible menus
See Also
Forms
7.0 Introduction
7.1 Modifying the Spacing Around a Form
Problem
Solution
Discussion
See Also
7.2 Setting Styles for Input Elements
Problem
Solution
Discussion
See Also
7.3 Applying Different Styles to Different Input Elements in the Same Form
Problem
Solution
Discussion
See Also
7.4 Setting Styles for textarea Elements
Problem
Solution
Discussion
See Also
7.5 Setting Styles for Select and Option Elements
Problem
Solution
Discussion
See Also
7.6 Creating a Macintosh-Styled Search Field
Problem
Solution
Discussion
Search field attributes
Best practices
See Also
7.7 Styling Form Buttons
Problem
Solution
Discussion
See Also
7.8 Creating an Image Submit Button
Problem
Solution
Discussion
See Also
7.9 Setting Up a Submit-Once-Only Button
Problem
Solution
Discussion
See Also
7.10 Creating a Submit Button That Looks Like HTML Text
Problem
Solution
Discussion
See Also
7.11 Making an HTML Text Link Operate Like a Submit Button
Problem
Solution
Discussion
See Also
7.12 Designing a Web Form Without Tables
Problem
Solution
Discussion
See Also
7.13 Designing a Two Column Form Without Tables
Problem
Solution
Discussion
See Also
7.14 Highlighting Form Fields
Problem
Solution
Discussion
See Also
7.15 Integrating Form Feedback with a Form
Problem
Solution
Discussion
See Also
7.16 Styling Access Keys in Web Forms
Problem
Solution
Discussion
See Also
7.17 Grouping Common Form Elements
Problem
Solution
Discussion
See Also
7.18 Entering Data into a Form Like a Spreadsheet
Problem
Solution
Discussion
See Also
7.19 Sample Design: A Login Form
7.20 Sample Design: A Registration Form
Tables
8.0 Introduction
8.1 Setting the Cell Spacing
Problem
Solution
Discussion
See Also
8.2 Setting the Borders and Cell Padding
Problem
Solution
Discussion
See Also
8.3 Setting the Style for Caption
Problem
Solution
Discussion
See Also
8.4 Setting the Styles Within Table Cells
Problem
Solution
Discussion
See Also
8.5 Setting Styles for Table Header Elements
Problem
Solution
Discussion
See Also
8.6 Removing Gaps from Images Placed in Table Cells
Problem
Solution
Discussion
Using Document Type Definitions
See Also
8.7 Eliminating Gaps Between Table Cells
Problem
Solution
Discussion
See Also
8.8 Creating Alternating Background Colors in Table Rows
Problem
Solution
Discussion
Using JavaScript
Using server-side solutions
See Also
8.9 Adding a Highlighting Effect on a Table Row
Problem
Solution
Discussion
See Also
8.10 Sample Design: An Elegant Calendar
Page Layouts
9.0 Introduction
9.1 Building a One-Column Layout
Problem
Solution
Discussion
See Also
9.2 Building a Two-Column Layout
Problem
Solution
Discussion
See Also
9.3 Building a Two-Column Layout with Fixed-Width Columns
Problem
Solution
Discussion
See Also
9.4 Creating a Flexible Multicolumn Layout with Floats
Problem
Solution
Discussion
See Also
9.5 Creating a Fixed-Width Multicolumn Layout with Floats
Problem
Solution
Discussion
See Also
9.6 Creating a Flexible Multicolumn Layout with Positioning
Problem
Solution
Discussion
See Also
9.7 Creating a Fixed-Width Multicolumn Layout with Positioning
Problem
Solution
Discussion
See Also
9.8 Using Floats to Display Columns in Any Order
Problem
Solution
Discussion
The markup
Defining the columns
Creating whitespace
Adjusting the order of columns
Page layout algorithm
Faking columns
An alternative solution
See Also
9.9 Designing an Asymmetric Layout
Problem
Solution
Discussion
See Also
Print
10.0 Introduction
10.1 Creating a Printer-Friendly Page
Problem
Solution
Discussion
Using @import when assigning media types
Using @media when assigning media types
See Also
10.2 Making a Web Form Print-Ready
Problem
Solution
Discussion
Using attribute selectors to differentiate form elements
Adding user friendliness
See Also
10.3 Displaying URIs After Links
Problem
Solution
Discussion
Placing the domain name before absolute links
See Also
10.4 Inserting Special Characters Before Links
Problem
Solution
Discussion
See Also
10.5 Sample Design: A Printer-Friendly Page with CSS
Setting the Page for Black-and-White Printing
Designing the Main Heading
Styling the Article Header and Byline
Gaining Attention Through the Teaser
Displaying URIs After Links
Finishing with the Footer
Hacks, Workarounds, and Troubleshooting
11.0 Introduction
11.1 Isolating Styles for Netscape Navigator 4.x
Problem
Solution
Discussion
Caio hack
@media workaround
Descendant selectors
See Also
11.2 Delivering Specific Styles to Internet Explorer 5.x for Windows
Problem
Solution
Discussion
Star HTML hack
Another approach: Tantek's box model hack
See Also
11.3 Removing Web Page Flicker in Internet Explorer 5.x for Windows
Problem
Solution
Discussion
See Also
11.4 Keeping Background Images Stationary in Internet Explorer 6 for Windows
Problem
Solution
Discussion
See Also
11.5 Using Internet Explorer for Windows' Conditional Comments to Deliver Styles
Problem
Solution
Discussion
See Also
11.6 Keeping CSS Rules from Internet Explorer 5 for Macintosh
Problem
Solution
Discussion
See Also
11.7 Setting Up an Intelligent Hack Management System
Problem
Solution
Discussion
See Also
11.8 Diagnosing CSS Bugs and Browser Issues
Problem
Solution
Discussion
See Also
11.9 Testing a Site Design on More Than One Platform with Only One Computer
Problem
Solution
If you own a PC
If you own a Macintosh
If you own a Linux Workstation
Discussion
See Also
11.10 Installing More Than One Version of Internet Explorer for Windows on a Computer
Problem
Solution
Discussion
See Also
11.11 Testing a Web Site with a Text Browser
Problem
Solution
Discussion
See Also
Designing with CSS
12.0 Introduction
12.1 Enlarging Text Excessively
Problem
Solution
Discussion
See Also
12.2 Creating Unexpected Incongruity
Problem
Solution
Discussion
See Also
12.3 Combining Unlike Elements to Create Contrast
Problem
Solution
Discussion
See Also
12.4 Leading the Eye with Contrast
Problem
Solution
Discussion
See Also
12.5 Checking for Enough Color Contrast
Problem
Solution
Discussion
See Also
12.6 Emphasizing a Quotation
Problem
Solution
Discussion
See Also
Resources
General HTML and CSS Instruction
Dave Shea's Roadmap to Standards Essay
Web Page for Designers' CSS Tutorial
Community MX's Basics of CSS Positioning
CSS Float Property Tutorial
CSS Selectors Tutorial
Design Resources
A List Apart: CSS Topics
BlueRobot.com Layout Reservoir
CSS-Edge
CSS Zen Garden
Glish.com CSS Layout Techniques
Microformats
Real World Style
SimpleQuizes
Typetester
Discussion Groups
Babble List
css-discuss
Usenet Stylesheets Newsgroup
www-style (W3C Style Mailing List)
References
CSS Browser Support Charts
W3C's Recommended DTDs
W3C's CSS Page
CSS 2.1 Specification
HTML 4.01 Specification
XHTML 1.0 Specification
Tools
BrowserCam
iCapture
SelectORacle
W3C CSS Validator
W3C HTML Validator
Web Developer Browser Extension
Xyle Scope
CSS 2.1 Properties and Proprietary Extensions
CSS 2.1 Selectors, Pseudo-Classes, and Pseudo-Elements
Styling of Form Elements
Checkboxes
File Input
Radio Buttons
Text Fields
multiple options
Select Element
Submit Button
Textarea Element
Index

Systemvoraussetzungen

Als PDF speichern Als Link merken