万本电子书0元读

万本电子书0元读

顶部广告

Mastering CSS电子书

售       价:¥

75人正在读 | 0人评论 9.8

作       者:Rich Finelli

出  版  社:Packt Publishing

出版时间:2017-10-06

字       数:35.5万

所属分类: 进口书 > 外文原版书 > 电脑/网络

温馨提示:此类商品不支持退换货,不支持下载打印

为你推荐

  • 读书简介
  • 目录
  • 累计评论(0条)
  • 读书简介
  • 目录
  • 累计评论(0条)
Rich Finelli's modern CSS training course, based on his bestselling Mastering CSS video, now available in a book. Master CSS from best practices to practical CSS coding. About This Book ? Learn CSS directly from Rich Finelli, author of the bestselling Mastering CSS training course ? From best practices to deep coding, Rich Finelli shares his CSS knowledge with you ? Rich Finelli covers the latest CSS updates with flexbox and works with retina devices Who This Book Is For This book is for web designers who wish to master the best practices of CSS in their web projects. You already know how to work with a web page, and want to use CSS to master website presentation. What You Will Learn ? Master fundamental CSS concepts like the anatomy of a rule set, the box model, and the differences between block and inline elements ? Employ flexbox to layout and align elements simply and cleanly ? Become proficient with CSS3 properties such as transitions, transforms, gradients, and animations ? Delve into modular, reusable, and scalable CSS for more organized and maintainable style sheets ? Understand media queries and other pillars of responsive web design ? Get creative with the @font-face property, Google Web Fonts, font services such as Typekit, as well as, icon fonts ? Understand the workflow for HiDPI (retina) devices using 2x images, SVG, and the srcset attribute In Detail Rich Finelli trains you in CSS deep learning and shows you the techniques you need to work in the world of responsive, feature-rich web applications. Based on his bestselling Mastering CSS training video, you can now learn with Rich in this book! Rich shares with you his skills in creating advanced layouts, and the critical CSS insights you need for responsive web designs, fonts, transitions, animations, and using flexbox. Rich begins your CSS training with a review of CSS best practices, such as using a good text editor to automate your authoring and setting up a CSS baseline. You then move on to create a responsive layout making use of floats and stylable drop-down menus, with Rich guiding you toward a modular-organized approach to CSS. Your training with Rich Finelli then dives into detail about working with CSS and the best solutions to make your websites work. You'll go with him into CSS3 properties, transforms, transitions, and animations. You’ll gain his understanding of responsive web designs, web fonts, icon fonts, and the techniques used to support retina devices. Rich expands your knowledge of CSS so you can master one of the most valuable tools in modern web design. Style and approach Let Rich Finelli train you in CSS! This book has a direct training style because it is based on Rich's bestselling Mastering CSS training course.
目录展开

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

累计评论(0条) 0个书友正在讨论这本书 发表评论

发表评论

发表评论,分享你的想法吧!

买过这本书的人还买过

读了这本书的人还在读

回顶部