Mastering CSS电子书

Title Page

Copyright

Mastering CSS

Credits

About the Author

www.PacktPub.com

Why subscribe?

Customer Feedback

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Downloading the color images of this book

Errata

Piracy

Questions

CSS Foundations

The anatomy of a rule set and the three types of style sheets

Dissecting a rule set

External style sheets

Embedded style sheets

Inline style sheets

The box model and block versus inline elements

The box model

Block level elements versus inline elements

Summary

Ramping Up

Text editors

Snippets

Multiple cursors

Syntax highlighting

Code suggestion

CSS reset

Loading Eric Meyer's CSS reset

Examining the CSS reset

Customizing the CSS reset

Chrome DevTools

How to open developer tools

Changing CSS inside the inspector

Using the console to find errors

Renaming elements — classes and IDs

Classes

Classifying multiple elements

IDs

Should we use classes or IDs?

Descendant selectors

Parent, child, and sibling elements

Creating descendant selectors

Calculating the weight of selectors

BEM

Summary

Creating a Page Layout with Floats

Float introduction–flowing text around images

The Shark movies page

The original purpose of floats

Using the clear property to solve basic problems with floats

Creating a multicolumn layout

Centering an element

Floating columns

Targeting .column using a pseudo class

Collapsed containers

Solving the problems of floats

Using the clear method

Using overflow property with hidden value

The float method

Clearfix hack

Summary

Creating Buttons with Modular, Reusable CSS Classes, and CSS3

Creating buttons with modular CSS

Different button types

Building standard buttons

Multiple classes

Changing the width of the buttons

Changing the border and font colors of the buttons

Positioning the button

Specificity rules

The weights of different selectors

The !important declaration

The universal selector

Reality of the point system

Transitions

Creating a hover state

Using the transition property

Vendor prefixes

Transforms

Applying a scale to our button

Using the translate function

Using the rotate value

Adding vendor prefixes and :focus states

Styling the call-to-action button

Adding the HTML

Positioning using CSS

Styling the button

Gradients

Using the ultimate CSS gradient generator

The CSS output of the ultimate gradient generator

Summary

Creating the Main Navigation and Drop-Down Menu

Starting the navigation

The semantic HTML for building a menu

Using CSS to style the navigation

Using pseudo classes

The first child

The last child

nth-child pseudo class

nth-of-type pseudo class

Absolute positioning

Absolutely positioning the shark

Using fixed positioning for the nav bar

Building the drop-down menu

Creating the basic HTML list

Styling the dropdown

Fixing the hover state

Hiding the drop-down menu using the off-screen hidden technique

CSS animations (part 1)

Defining the animation name, duration, and timing function

Setting additional keyframes

Vendor prefixes

CSS animations (part 2)

Animation delay, iteration-count, and fill-mode

animation-fill-mode

Using the animation shorthand

Vendor prefixes

Additional info on animations

Finalizing the navigation

Fixing the Z index issue

Adding box-shadow

Summary

Becoming Responsive

Fluid grids

Converting pixels to percentages

Calculating percentage widths

Changing padding to a percentage

A fluid grid on the shark movies page

Flexible images

The octopus, crab, and whale images

The shark image

Shrinking images on the shark movies page

Media queries

Anatomy of a media query

Considering iPads and other tablet dimensions

Adding our three columns to the media query

The mobile-first approach

Solving the navigation problem

Mobile menu

Styling the mobile nav in its open state

Adding the hamburger menu icon

Hiding the menu

Using jQuery to trigger the menu on a click

Viewport meta tag

Testing our responsive design on a mobile device

The anatomy of the viewport meta tag

Summary

Web Fonts

The @font-face property

Adding font files directly to the site

Defining and applying new fonts in our CSS

@font-face: a little tricky business

Making it work in all browsers

Google Web Fonts

Finding Google Fonts

Applying fonts in CSS

Adobe Typekit

Selecting fonts from Typekit

Adding fonts to the site

Icon fonts

Building the footer

Downloading a free icon font from the ZURB Foundation

Adding the icon font to our website

Styling icon fonts

Summary

Workflow for HiDPI Devices

2x images

Creating a retina size image (2x)

Sizing down the 2x image using CSS

Checking the image quality on a retina device

Background images

Targeting the seaweed in the footer

Media query for device pixel ratio

Serving the 2x image only to retina devices

Scalable Vector Graphic (SVG)

Saving an Illustrator file as an SVG

Adding the SVG file as a background image

Adding the SVG as a regular ol' <img>

You can't stop SVG's, you can only hope to constrain them!

Using an inline SVG

Source set attribute (srcset)

What is srcset?

Adding a set of images to srcset

Testing the image set

Simplifying the srcset attribute

Browser support

Using the W descriptor and sizes attribute of the srcset attribute

Summary

Flexbox, Part 1

Overview of the flexible box layout module

Flex terminology

Flex container and flex items

Main size and cross size

Main axis and cross axis

Justify-content and align-items

From floats to flexbox

Removing float-related properties from the columns section

Turning on flexbox using display: flex

Changing the flex-direction

Browser shrinking

Understanding flex-grow, flex-basis, flex-shrink, and flex

Using flex-grow

Using flex-basis

Using flex-shrink

Using the flex shorthand

More layout, more positioning

Using the justify-content property

Nesting Flexboxes

Using automatic margins

Summary

Flexbox, Part 2

Building the product listing

Using align-items

Using the align-self Flexbox property

Using flex-wrap and align-content

Using flex-wrap

Using align-content

Using the flex-flow shorthand

Changing the display order of flex items

Accessibility impact

Vendor prefixes

Autoprefixer

Gulp

Flexbox homework assignment

Summary

Wrapping Up

The next steps

CSS preprocessors

Variables

Mixins

SASS nesting

Creating and importing partial files with SASS

JavaScript and jQuery

Conclusion and links

The box model and block versus inline elements

Floats

Modular CSS

CSS3

Creating the navigation

Making the site responsive

Web fonts

HiDPI devices

Flexbox

Final tidbit of advice: Audio Podcasts are terrific

Summary