CSS · the Definitive Guide · Visual Presentation for the Web by Meyer, Eric A. -- Read -- Imperial Library of Trantor

Index

Preface

Conventions Used in This Book

Value Syntax Conventions

Using Code Examples O’Reilly Safari How to Contact Us Acknowledgments

Eric Meyer Estelle Weyl

1. CSS and Documents

A Brief History of (Web) Style Elements

Replaced and Nonreplaced Elements Element Display Roles

Bringing CSS and HTML Together

The link Tag The style Element The @import Directive HTTP Linking Inline Styles

Stylesheet Contents

Markup Rule Structure Vendor prefixing Whitespace Handling CSS Comments

Media Queries

Usage Simple Media Queries Media Types Media Descriptors Media Feature Descriptors and Value Types

Feature Queries Summary

2. Selectors

Basic Style Rules

Element Selectors Declarations and Keywords

Grouping

Grouping Selectors Grouping Declarations Grouping Everything New Elements in Old Browsers

Class and ID Selectors

Class Selectors Multiple Classes ID Selectors Deciding Between Class and ID

Attribute Selectors

Simple Attribute Selectors Selection Based on Exact Attribute Value Selection Based on Partial Attribute Values A Particular Attribute Selection Type The Case Insensitivity Identifier

Using Document Structure

Understanding the Parent-Child Relationship Descendant Selectors Selecting Children Selecting Adjacent Sibling Elements Selecting Following Siblings

Pseudo-Class Selectors

Combining Pseudo-Classes Structural Pseudo-Classes Dynamic Pseudo-Classes UI-State Pseudo-Classes The :target Pseudo-Class The :lang Pseudo-Class The Negation Pseudo-Class

Pseudo-Element Selectors

Styling the First Letter Styling the First Line Restrictions on ::first-letter and ::first-line Styling (or Creating) Content Before and After Elements

Summary

3. Specificity and the Cascade

Specificity

Declarations and Specificity Universal Selector Specificity ID and Attribute Selector Specificity Inline Style Specificity Importance

Inheritance The Cascade

Sorting by Weight and Origin Sorting by Specificity Sorting by Order Non-CSS Presentational Hints

Summary

4. Values and Units

Keywords, Strings, and Other Text Values

Keywords Strings URLs Images Identifiers

Numbers and Percentages

Integers Numbers Percentages Fractions

Distances

Absolute Length Units Resolution Units Relative Length Units

Calculation values Attribute Values Color

Named Colors Colors by RGB and RGBa Colors by HSL and HSLa Color Keywords

Angles Time and Frequency Position Custom Values

5. Fonts

Font Families

Using Generic Font Families Specifying a Font Family

Using @font-face

Required Descriptors Other Font Descriptors Combining Descriptors

Font Weights

How Weights Work Getting Bolder Lightening Weights The font-weight descriptor

Font Size

Absolute Sizes Relative Sizes Percentages and Sizes Font Size and Inheritance Using Length Units Automatically Adjusting Size

Font Style

The font-style Descriptor

Font Stretching

The font-stretch Descriptor

Font Kerning Font Variants

Level 3 Values

Font Features

The font-feature-settings Descriptor

Font Synthesis The font Property

Adding the Line Height Using Shorthands Properly Using System Fonts

Font Matching Summary

6. Text Properties

Indentation and Inline Alignment

Indenting Text Text Alignment Aligning the Last Line

Inline Alignment

The Height of Lines Vertically Aligning Text

Word Spacing and Letter Spacing

Word Spacing Letter Spacing Spacing and Alignment

Text Transformation Text Decoration

Weird Decorations

Text Rendering Text Shadows Handling Whitespace

Setting Tab Sizes

Wrapping and Hyphenation

Wrapping Text

Writing Modes

Setting Writing Modes Changing Text Orientation Declaring Direction

Summary

7. Basic Visual Formatting

Basic Boxes

A Quick Refresher The Containing Block

Altering Element Display

Changing Roles Block Boxes Horizontal Formatting Horizontal Properties Using auto More Than One auto Negative Margins Percentages Replaced Elements Vertical Formatting Vertical Properties Percentage Heights Auto Heights Collapsing Vertical Margins Negative Margins and Collapsing List Items

Inline Elements

Line Layout Basic Terms and Concepts Inline Formatting Inline Nonreplaced Elements Building the Boxes Vertical Alignment Managing the line-height Scaling Line Heights Adding Box Properties Changing Breaking Behavior Glyphs Versus Content Area Inline Replaced Elements Adding Box Properties Replaced Elements and the Baseline Inline-Block Elements Flow Display Contents Display Other Display Values Computed Values

Summary

8. Padding, Borders, Outlines, and Margins

Basic Element Boxes

Width and Height

Padding

Replicating Values Single-Side Padding Percentage Values and Padding Padding and Inline Elements Padding and Replaced Elements

Borders

Borders with Style Border Widths Border Colors Shorthand Border Properties Global Borders Borders and Inline Elements Rounding Border Corners Image Borders

Outlines

Outline Styles Outline Width Outline Color How They Are Different

Margins

Length Values and Margins Percentages and Margins Single-Side Margin Properties Margin Collapsing Negative Margins Margins and Inline Elements

Summary

9. Colors, Backgrounds, and Gradients

Colors

Foreground Colors Affecting Borders Affecting Form Elements Inheriting Color

Backgrounds

Background Colors Clipping the Background Background Images Background Positioning Changing the Positioning Box Background Repeating (or Lack Thereof) Getting Attached Sizing Background Images Bringing It All Together Multiple Backgrounds

Gradients

Linear Gradients Radial Gradients Manipulating Gradient Images Repeating Gradients

Box Shadows Summary

10. Floating and Shapes

Floating

Floated Elements Floating: The Details Applied Behavior Floats, Content, and Overlapping

Clearing Float Shapes

Creating a Shape Shaping with Image Transparency Adding a Shape Margin

Summary

11. Positioning

Basic Concepts

Types of Positioning The Containing Block

Offset Properties Width and Height

Setting Width and Height Limiting Width and Height

Content Overflow and Clipping

Overflow

Element Visibility Absolute Positioning

Containing Blocks and Absolutely Positioned Elements Placement and Sizing of Absolutely Positioned Elements Auto-edges Placing and Sizing Nonreplaced Elements Placing and Sizing Replaced Elements Placement on the Z-Axis

Fixed Positioning Relative Positioning Sticky Positioning Summary

12. Flexible Box Layout

Flexbox Fundamentals

A Simple Example

Flex Containers

The flex-direction Property Other Writing Directions Wrapping Flex Lines Defining Flexible Flows flex-wrap Continued

Arranging Flex Items Flex Container Justifying Content

justify-content Examples

Aligning Items

Start, End, and Center Alignment Baseline Alignment Additional Notes

The align-self Property Aligning Content Flex Items

What Are Flex Items? Flex Item Features Minimum Widths

Flex-Item–Specific Properties The flex Property The flex-grow Property

Growth Factors and the flex Property

The flex-shrink Property

Proportional Shrinkage Based on Width and Shrink Factor Differing Bases Responsive Flexing

The flex-basis Property

The content Keyword Automatic Flex Basis Default Values Length Units Zero Basis

The flex Shorthand

Common Flex Values

The order property

Tabbed Navigation Revisited

13. Grid Layout

Creating a Grid Container Basic Grid Terminology Placing Grid Lines

Fixed-Width Grid Tracks Flexible Grid Tracks Fitting Track Contents Repeating Grid Lines Grid Areas

Attaching Elements to the Grid

Using Column and Row Lines Row and Column Shorthands The Implicit Grid Error Handling Using Areas Grid Item Overlap

Grid Flow Automatic Grid Lines The grid Shorthand

Subgrids

Opening Grid Spaces

Grid Gutters (or Gaps) Grid Items and the Box Model

Aligning and Grids

Aligning and Justifying Individual Items Aligning and Justifying All Items

Layering and Ordering Summary

14. Table Layout in CSS

Table Formatting

Visually Arranging a Table Table Display Values Anonymous Table Objects Table Layers Captions

Table Cell Borders

Separated Cell Borders Collapsing Cell Borders

Table Sizing

Width Height Alignment

Summary

15. Lists and Generated Content

Lists

Types of Lists List Item Images List-Marker Positions List Styles in Shorthand List Layout

Generated Content

Inserting Generated Content Specifying Content Counters

Defining Counting Patterns

Fixed Counting Patterns Cyclic Counting Patterns Symbolic Counting Patterns Alphabetic Counting Patterns Numeric Counting Patterns Additive Counting Patterns Extending Counting Patterns Speaking Counting Patterns

Summary

16. Transforms

Coordinate Systems Transforming

The Transform Functions

More Transform Properties

Moving the Origin Choosing a 3D Style Changing Perspective Dealing with Backfaces

Summary

17. Transitions

CSS Transitions Transition Properties

Limiting Transition Effects by Property Setting Transition Duration Altering the Internal Timing of Transitions Delaying Transitions The transition Shorthand

In Reverse: Transitioning Back to Baseline Animatable Properties and Values

How Property Values Are Interpolated

Fallbacks: Transitions Are Enhancements Printing Transitions

18. Animation

Defining Keyframes Setting Up Keyframe Animations

Naming Your Animation

Keyframe Selectors

Omitting from and to Values Repeating Keyframe Properties Animatable Properties Nonanimatable Properties That Aren’t Ignored Scripting @keyframes Animations

Animating Elements

Naming Animations Defining Animation Lengths Declaring Animation Iterations Setting an Animation Direction Delaying Animations Animation Events Changing the Internal Timing of Animations Setting the Animation Play State Animation Fill Modes

Bringing It All Together Animation, Specificity, and Precedence Order

Specificity and !important Animation Order Animation Iteration and display: none; Animation and the UI Thread

Seizure and Vestibular Disorders Animation Events and Prefixing

animationstart animationend animationiteration

Printing Animations

19. Filters, Blending, Clipping, and Masking

CSS Filters

Basic Filters Color Filtering Brightness, Contrast, and Saturation SVG Filters

Compositing and Blending

Blending Elements Darken, Lighten, Difference, and Exclusion Multiply, Screen, and Overlay Hard and Soft Light Color Dodge and Burn Hue, Saturation, Luminosity, and Color

Blending Backgrounds

Blending in Isolation

Clipping and Masking

Clipping Clip Shapes Clip Boxes Clip Filling Rules

Masks

Defining a Mask Changing the Mask’s Mode Sizing and Repeating Masks Positioning Masks Clipping and Compositing Masks Bringing It All Together Mask Types Border-image Masking

Object Fitting and Positioning

20. Media-Dependent Styles

Defining Media-Dependent Styles

Basic Media Queries Complex Media Queries

Paged Media

Print Styles

Summary

A. Animatable Properties B. Basic Property Reference C. Color Equivalence Table Index

← Prev
Back
Next →

← Prev
Back
Next →