CSS: The Definitive Guide. Visual Presentation for the Web. 4th Edition - Helion
ISBN: 978-14-493-2508-4
stron: 1090, Format: ebook
Data wydania: 2017-10-16
Księgarnia: Helion
Cena książki: 211,65 zł (poprzednio: 246,10 zł)
Oszczędzasz: 14% (-34,45 zł)
If you’re a web designer or app developer interested in sophisticated page styling, improved accessibility, and saving time and effort, this book is for you. This revised edition provides a comprehensive guide to CSS implementation, along with a thorough review of the latest CSS specifications.
CSS is a constantly evolving language for describing the presentation of web content on screen, printers, speech synthesizers, screen readers, and chat windows. It is used by all browsers on all screen sizes on all types of IoT devices, including phones, computers, video games, televisions, watches, kiosks, and auto consoles. Authors Eric Meyer and Estelle Weyl show you how to improve user experience, speed development, avoid potential bugs, and add life and depth to your applications through layout, transitions and animations, borders, backgrounds, text properties, and many other tools and techniques.
This guide covers:
- Selectors, specificity, and the cascade
- Values, units, fonts, and text properties
- Padding, borders, outlines, and margins
- Colors, backgrounds, and gradients
- Floats and positioning tricks
- Flexible box layout
- The new Grid layout system
- 2D and 3D transforms, transitions, and animation
- Filters, blending, clipping, and masking
- Media and feature queries
Osoby które kupowały "CSS: The Definitive Guide. Visual Presentation for the Web. 4th Edition", wybierały także:
- Windows Media Center. Domowe centrum rozrywki 66,67 zł, (8,00 zł -88%)
- Ruby on Rails. Ćwiczenia 18,75 zł, (3,00 zł -84%)
- Przywództwo w świecie VUCA. Jak być skutecznym liderem w niepewnym środowisku 58,64 zł, (12,90 zł -78%)
- Scrum. O zwinnym zarządzaniu projektami. Wydanie II rozszerzone 58,64 zł, (12,90 zł -78%)
- Od hierarchii do turkusu, czyli jak zarządzać w XXI wieku 58,64 zł, (12,90 zł -78%)
Spis treści
CSS: The Definitive Guide. Visual Presentation for the Web. 4th Edition eBook -- spis treści
- Preface
- Conventions Used in This Book
- Value Syntax Conventions
- Using Code Examples
- OReilly Safari
- How to Contact Us
- Acknowledgments
- Eric Meyer
- Estelle Weyl
- Conventions Used in This Book
- 1. CSS and Documents
- A Brief History of (Web) Style
- Elements
- Replaced and Nonreplaced Elements
- Replaced elements
- Nonreplaced elements
- Element Display Roles
- Block-level elements
- Inline-level elements
- Replaced and Nonreplaced Elements
- Bringing CSS and HTML Together
- The link Tag
- Attributes
- Alternate stylesheets
- The style Element
- The @import Directive
- HTTP Linking
- Inline Styles
- The link Tag
- 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
- The universal selector
- Grouping Declarations
- Grouping Everything
- New Elements in Old Browsers
- Grouping Selectors
- 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
- Matching one word in a space-separated list
- Matching a substring within an attribute value
- Matching a substring at the beginning of an attribute value
- Matching a substring at the end of an attribute value
- 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
- Selecting the root element
- Selecting empty elements
- Selecting unique children
- Selecting first and last children
- Selecting first and last of a type
- Selecting every nth child
- Selecting every nth of a type
- Dynamic Pseudo-Classes
- Hyperlink pseudo-classes
- User action pseudo-classes
- Real-world issues with dynamic styling
- UI-State Pseudo-Classes
- Enabled and disabled UI elements
- Check states
- Default option pseudo-class
- Optionality pseudo-classes
- Validity pseudo-classes
- Range pseudo-classes
- Mutability 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
- Basic Style Rules
- 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
- Specificity
- 4. Values and Units
- Keywords, Strings, and Other Text Values
- Keywords
- Global keywords
- inherit
- initial
- unset
- Global keywords
- Strings
- URLs
- Images
- Identifiers
- Keywords
- Numbers and Percentages
- Integers
- Numbers
- Percentages
- Fractions
- Distances
- Absolute Length Units
- Pixel lengths
- Pixel theory
- Resolution Units
- Relative Length Units
- em and ex units
- The rem unit
- The ch unit
- Viewport-relative units
- Absolute Length Units
- Calculation values
- Attribute Values
- Color
- Named Colors
- Colors by RGB and RGBa
- Functional RGB colors
- RGBa colors
- Hexadecimal RGB colors
- Hexadecimal RGBa colors
- Colors by HSL and HSLa
- Color Keywords
- Angles
- Time and Frequency
- Position
- Custom Values
- Keywords, Strings, and Other Text Values
- 5. Fonts
- Font Families
- Using Generic Font Families
- Specifying a Font Family
- Using quotation marks
- Using @font-face
- Required Descriptors
- On being bulletproof
- Other Font Descriptors
- Restricting character range
- Combining Descriptors
- Required 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
- Rounding for display
- Keywords and monospace text
- 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
- The font-variant descriptor
- 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
- Font Families
- 6. Text Properties
- Indentation and Inline Alignment
- Indenting Text
- Text Alignment
- Start and end alignment
- Justified text
- Parent matching
- Aligning the Last Line
- Inline Alignment
- The Height of Lines
- Constructing a line
- Assigning values to line-height
- Line-height and inheritance
- Vertically Aligning Text
- Baseline alignment
- Superscripting and subscripting
- Bottom feeding
- Getting on top
- In the middle
- Percentages
- Length alignment
- The Height of Lines
- 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
- Indentation and Inline Alignment
- 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
- Baselines and line heights
- 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
- Basic Boxes
- 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
- Multiple styles
- Single-side styles
- Border Widths
- No border at all
- Border Colors
- Transparent borders
- Shorthand Border Properties
- Global Borders
- Borders and Inline Elements
- Rounding Border Corners
- More complex corner shaping
- Corner blending
- Individual rounding properties
- Image Borders
- Loading and slicing a border image
- Altering the image widths
- Creating a border overhang
- Altering the repeat pattern
- Shorthand border image
- Some examples
- Borders with Style
- Outlines
- Outline Styles
- Outline Width
- Outline Color
- The only outline shorthand
- 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
- Basic Element Boxes
- 9. Colors, Backgrounds, and Gradients
- Colors
- Foreground Colors
- Affecting Borders
- Affecting Form Elements
- Inheriting Color
- Backgrounds
- Background Colors
- Special effects
- Clipping the Background
- Background Images
- Using an image
- Why backgrounds arent inherited
- Good background practices
- Background Positioning
- Keywords
- Percentage values
- Length values
- Negative values
- Changing the offset edges
- Changing the Positioning Box
- Background Repeating (or Lack Thereof)
- Repeating and positioning
- Spacing and rounding
- Tiling and clipping
- Getting Attached
- Interesting effects
- Sizing Background Images
- Covering and containing
- Bringing It All Together
- Multiple Backgrounds
- Filling in missing values
- Background Colors
- Gradients
- Linear Gradients
- Gradient colors
- Positioning color stops
- Setting color hints
- Gradient lines: the gory details
- Radial Gradients
- Shape and size
- Positioning radial gradients
- Radial color stops and the gradient ray
- Degenerate cases
- Manipulating Gradient Images
- Repeating Gradients
- Average gradient colors
- Linear Gradients
- Box Shadows
- Summary
- Colors
- 10. Floating and Shapes
- Floating
- Floated Elements
- No floating at all
- Floating: The Details
- Applied Behavior
- Negative margins
- Floats, Content, and Overlapping
- Floated Elements
- Clearing
- Float Shapes
- Creating a Shape
- Inset shapes
- Circles and ellipses
- Polygons
- Shaping with Image Transparency
- Adding a Shape Margin
- Creating a Shape
- Summary
- Floating
- 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
- Basic Concepts
- 12. Flexible Box Layout
- Flexbox Fundamentals
- A Simple Example
- Flex Containers
- The flex-direction Property
- Other Writing Directions
- Wrapping Flex Lines
- Defining Flexible Flows
- Understanding axes
- 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
- Space between, around, and evenly
- Flex Items
- What Are Flex Items?
- Flex Item Features
- Absolute positioning
- Minimum Widths
- Flex-ItemSpecific 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
- Percentage units
- Zero Basis
- The flex Shorthand
- Common Flex Values
- Flexing with initial
- Flexing with auto
- Preventing flexing with none
- Numeric flexing
- Common Flex Values
- The order property
- Tabbed Navigation Revisited
- Flexbox Fundamentals
- 13. Grid Layout
- Creating a Grid Container
- Basic Grid Terminology
- Placing Grid Lines
- Fixed-Width Grid Tracks
- Flexible Grid Tracks
- Fractional units
- Content-aware tracks
- Fitting Track Contents
- Repeating Grid Lines
- Auto-filling tracks
- 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 arrangement rules
- Table Display Values
- Row primacy
- Columns
- Anonymous Table Objects
- Object insertion rules
- Table Layers
- Captions
- Visually Arranging a Table
- Table Cell Borders
- Separated Cell Borders
- Border spacing
- Handling empty cells
- Collapsing Cell Borders
- Collapsing border layout
- Border collapsing
- Separated Cell Borders
- Table Sizing
- Width
- Fixed layout
- Automatic layout
- Height
- Alignment
- Width
- Summary
- Table Formatting
- 15. Lists and Generated Content
- Lists
- Types of Lists
- String markers
- List Item Images
- List-Marker Positions
- List Styles in Shorthand
- List Layout
- Types of Lists
- Generated Content
- Inserting Generated Content
- Specifying Content
- Inserting attribute values
- Generated quotes
- Counters
- Resetting and incrementing
- Using counters
- Counters and scope
- 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
- Lists
- 16. Transforms
- Coordinate Systems
- Transforming
- The Transform Functions
- Translation functions
- Scale functions
- Rotation functions
- Skew functions
- The perspective function
- Matrix functions
- A note on end-state equivalence
- The Transform Functions
- More Transform Properties
- Moving the Origin
- Choosing a 3D Style
- Changing Perspective
- Defining a group perspective
- Moving the perspectives origin
- Dealing with Backfaces
- Summary
- 17. Transitions
- CSS Transitions
- Transition Properties
- Limiting Transition Effects by Property
- Suppressing transitions via property limits
- Transition events
- Setting Transition Duration
- Altering the Internal Timing of Transitions
- Step timing
- Delaying Transitions
- Negative delay values
- The transition Shorthand
- Limiting Transition Effects by Property
- In Reverse: Transitioning Back to Baseline
- Reversing interrupted transitions
- Animatable Properties and Values
- How Property Values Are Interpolated
- Interpolating repeating 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 Arent Ignored
- Scripting @keyframes Animations
- Animating Elements
- Naming Animations
- Defining Animation Lengths
- Declaring Animation Iterations
- Setting an Animation Direction
- Delaying Animations
- Animation Events
- Animation chaining
- Animation iteration delay
- Changing the Internal Timing of Animations
- Step timing functions
- Adding a second animation
- Animating the timing function
- 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 Masks Mode
- Sizing and Repeating Masks
- Positioning Masks
- Clipping and Compositing Masks
- Bringing It All Together
- Mask Types
- Border-image Masking
- Object Fitting and Positioning
- CSS Filters
- 20. Media-Dependent Styles
- Defining Media-Dependent Styles
- Basic Media Queries
- Complex Media Queries
- Media feature descriptors
- New value types
- Responsive styling
- Paged Media
- Print Styles
- Differences between screen and print
- Defining the page size
- Page margins and padding
- Selecting page types
- Page-breaking
- Orphans and widows
- Page-breaking behavior
- Repeated elements
- Elements outside the page
- Print Styles
- Summary
- Defining Media-Dependent Styles
- A. Animatable Properties
- B. Basic Property Reference
- C. Color Equivalence Table
- Index