目錄(256章)
倒序
- coverpage
- 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 更新時間：2021-07-08 09:46:53
推薦閱讀
- Vue 3移動Web開發與性能調優實戰
- 深入理解Bootstrap
- Mastering ServiceStack
- 征服RIA
- R大數據分析實用指南
- Android底層接口與驅動開發技術詳解
- 微服務從小白到專家：Spring Cloud和Kubernetes實戰
- NGINX Cookbook
- Building Machine Learning Systems with Python（Second Edition）
- 現代C++編程實戰：132個核心技巧示例（原書第2版）
- Python Programming for Arduino
- PHP Microservices
- Visual FoxPro數據庫程序設計
- Java網絡編程實用精解
- Learning RSLogix 5000 Programming
- HTML 5與CSS 3權威指南（第4版·上冊）
- Mastering High Performance with Kotlin
- Instant JRebel
- HTML+CSS+JavaScript前端開發（慕課版）
- 設計模式之禪
- Drupal 8 Module Development
- Visual Basic從入門到精通（第5版）
- 大學計算機應用基礎教程（第三版）
- Arduino Essentials
- 同構：編程中的數學
- 機器學習算法框架實戰：Java和Python實現
- 深入理解Java虛擬機：JVM高級特性與最佳實踐（第2版）
- C語言程序設計教程
- shell腳本基礎教程
- Vue.js從入門到項目實戰（升級版）
