目錄(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
推薦閱讀
- 深入理解Android（卷I）
- Spring技術內幕：深入解析Spring架構與設計
- 零基礎學Scratch少兒編程：小學課本中的Scratch創意編程
- Learn React with TypeScript 3
- 西門子S7-200 SMART PLC編程從入門到實踐
- 軟件測試實用教程
- Android開發三劍客：UML、模式與測試
- Access 2010中文版項目教程
- Internet of Things with ESP8266
- Azure Serverless Computing Cookbook
- 零代碼實戰：企業級應用搭建與案例詳解
- Python自然語言理解：自然語言理解系統開發與應用實戰
- C# 7.0本質論
- Mastering Unity 2017 Game Development with C#（Second Edition）
- 計算機應用基礎
- JavaScript全棧開發
- Splunk Developer's Guide（Second Edition）
- 匯編語言程序設計
- 亮劍Java Web項目開發案例導航
- Web測試囧事
- 天天學敏捷：Scrum團隊轉型記
- Mastering jQuery UI
- C語言開發手冊
- XML實用教程
- C/C++程序設計（第3版）
- JavaScript忍者秘籍（第2版）
- Android：Game Programming
- C++17 STL Cookbook
- 系統辨識理論及Matlab仿真
- Jenkins 2權威指南
