CSS: The Missing Manual. 4th Edition - Helion
ebook
Autor: David Sawyer McFarlandISBN: 978-14-919-1801-2
stron: 718, Format: ebook
Data wydania: 2015-08-13
Księgarnia: Helion
Cena książki: 126,65 zł (poprzednio: 147,27 zł)
Oszczędzasz: 14% (-20,62 zł)
Tagi: CSS
CSS lets you create professional-looking websites, but learning its finer points can be tricky—even for seasoned web developers. This fully updated edition provides the most modern and effective tips, tricks, and tutorial-based instruction on CSS available today. Learn how to use new tools such as Flexbox and Sass to build web pages that look great and run fast on any desktop or mobile device. Ideal for casual and experienced designers alike.
The important stuff you need to know:
- Start with the basics. Write CSS-friendly HTML, including the HTML5 tags recognized by today’s browsers.
- Design for mobile devices. Create web pages that look great when visitors use them on the go.
- Make your pages work for you. Add animations that capture the imagination, and forms that get the job done.
- Take control of page layouts. Use professional design techniques such as floats and positioning.
- Make your layouts more flexible. Design websites with Flexbox that adjust to different devices and screen sizes.
- Work more efficiently. Write less CSS code and work with smaller files, using Syntactically Awesome Stylesheets (Sass).
Osoby które kupowały "CSS: The Missing Manual. 4th Edition", wybierały także:
- Zosta 148,98 zł, (59,59 zł -60%)
- LESS. Kurs video. Poziom pierwszy. Jak usprawnić pracę z CSS 89,00 zł, (35,60 zł -60%)
- CSS i SASS. Kurs video. Praktyczny projekt nowoczesnego dashboardu 99,00 zł, (44,55 zł -55%)
- CSS3. Kurs video. Poziom pierwszy. Nowoczesne i stylowe strony WWW 59,00 zł, (26,55 zł -55%)
- Sass od podstaw. Kurs video. Budowa kompleksowej strony w oparciu o metodologię BEM 47,93 zł, (22,05 zł -54%)
Spis treści
CSS: The Missing Manual. 4th Edition eBook -- spis treści
- CSS: The Missing Manual
- The Missing Credits
- About the Author
- About the Creative Team
- Acknowledgments
- The Missing Manual Series
- Introduction
- What Is CSS?
- What You Need to Know
- HTML: The Barebones Structure
- Document Types
- How HTML Tags Work
- HTML5: More Tags to Choose From
- Software for CSS
- Free Programs
- Commercial Software
- About This Book
- About the Outline
- The Very Basics
- AboutTheseArrows
- About the Online Resources
- Living Examples
- About MissingManuals.com
- Errata
- Safari Books Online
- 1. CSS Basics
- 1. HTML and CSS
- HTML: Past and Present
- HTML Past: Whatever Looked Good
- HTML Present: Scaffolding for CSS
- Writing HTML for CSS
- Think Structure
- More HTML Tags to Keep in Mind
- Understanding the <div> and <span> Tags
- Additional Tags in HTML5
- Keep Your Layout in Mind
- HTML to Forget
- Tips to Guide Your Way
- The Importance of the Doctype
- How CSS Works
- HTML: Past and Present
- 2. Creating Styles and Style Sheets
- Anatomy of a Style
- Understanding Style Sheets
- Internal or ExternalHow to Choose
- Internal Style Sheets
- External Style Sheets
- Tutorial: Creating Your First Styles
- Creating an Inline Style
- Creating an Internal Style Sheet
- Creating an External Style Sheet
- 3. Selectors: Identifying What to Style
- Type Selectors: Styling HTML Tags
- Class Selectors: Pinpoint Control
- One Tag, Multiple Classes
- ID Selectors: Specific Page Elements
- Styling Groups of Tags
- Constructing Group Selectors
- The Universal Selector (Asterisk)
- Styling Tags Within Tags
- The HTML Family Tree
- Building Descendant Selectors
- Creating Modules
- Pseudo-Classes and Pseudo-Elements
- Styles for Links
- Styling Paragraph Parts
- More Pseudo-Classes and Pseudo-Elements
- :Focus
- :Before
- :After
- ::Selection
- Attribute Selectors
- Child Selectors
- :First-Child
- :First-Child
- :Last-Child
- :Only-Child
- :Nth-Child
- Child Type Selectors
- :First-of-Type
- :Last-of-Type
- :Nth-of-Type
- :First-Child
- Siblings
- The :target Selector
- The :not() Selector
- Tutorial: Selector Sampler
- Creating a Group Selector
- Creating and Applying an ID Selector
- Creating and Applying a Class Selector
- Creating a Descendant Selector
- Finishing Touches
- 4. Saving Time with Style Inheritance
- What Is Inheritance?
- How Inheritance Streamlines Style Sheets
- The Limits of Inheritance
- Tutorial: Inheritance
- A Basic Example: One Level of Inheritance
- Using Inheritance to Restyle an Entire Page
- Inheritance In Action
- 5. Managing Multiple Styles: The Cascade
- How Styles Cascade
- Inherited Styles Accumulate
- Nearest Ancestor Wins
- The Directly Applied Style Wins
- One Tag, Many Styles
- Specificity: Which Style Wins
- The Tiebreaker: Last Style Wins
- Controlling the Cascade
- Changing the Specificity
- Selective Overriding
- Avoiding Specificity Wars
- Starting with a Clean Slate
- Tutorial: The Cascade in Action
- Resetting CSS and Styling from Scratch
- Creating a Hybrid Style
- Overcoming Conflicts
- How Styles Cascade
- 1. HTML and CSS
- 2. Applied CSS
- 6. Formatting Text
- Using Fonts
- Choosing a Common Font
- Serif Fonts
- Sans-Serif Fonts
- Monospaced and Fun Fonts
- Additional Fonts to Consider
- Choosing a Common Font
- Using Web Fonts
- Font File Types
- Legal Issues with Web Fonts
- Finding Web Fonts
- Generating Multiple Font Formats
- Using the @font-face Directive
- Creating Styles Using Web Fonts
- Dealing with Bold and Italic Font Variants
- The Easy Way to Add Bold and Italic
- Adding Bold and Italic and Supporting Internet Explorer 8
- Discovering Google Web Fonts
- Finding and Selecting Fonts
- Using Google Fonts
- Adding Color to Text
- Hexadecimal Color Notation
- Rgb
- Rgba
- Hsl and Hsla
- Hexadecimal Color Notation
- Changing Font Size
- Using Pixels
- Using Keywords, Percentages, and Ems
- Keywords
- Percentages
- Ems
- Rems
- Formatting Words and Letters
- Italicizing and Bolding
- Capitalizing
- Small Caps
- Decorating
- Letter and Word Spacing
- Adding Text Shadow
- Formatting Entire Paragraphs
- Adjusting the Space Between Lines
- Line Spacing by Pixel, Em, or Percentage
- Line Spacing by Number
- Aligning Text
- Indenting the First Line and Removing Margins
- First-Line Indents
- Controlling Margins between Paragraphs
- Formatting the First Letter or First Line of a Paragraph
- Adjusting the Space Between Lines
- Styling Lists
- Types of Lists
- Positioning Bullets and Numbers
- Graphic Bullets
- Tutorial: Text Formatting in Action
- Setting Up the Page
- Formatting the Headings and Paragraphs
- Formatting Lists
- Fine-Tuning with Classes
- Adding the Finishing Touches
- Using Fonts
- 7. Margins, Padding, and Borders
- Understanding the Box Model
- Controlling Space with Margins and Padding
- Margin and Padding Shorthand
- Colliding Margins
- Removing Space with Negative Margins
- Inline, Block, and Other Display Settings
- Adding Borders
- Border Property Shorthand
- Formatting Individual Borders
- Coloring the Background
- Creating Rounded Corners
- Adding Drop Shadows
- Determining Height and Width
- Calculating a Boxs Actual Width and Height
- Redefining Box Width with Box-Sizing
- Controlling the Tap with the Overflow Property
- Maximum and Minimum Heights and Widths
- Wrapping Content with Floating Elements
- Backgrounds, Borders, and Floats
- Stopping the Float
- Tutorial: Margins, Backgrounds, and Borders
- Controlling Page Margins and Backgrounds
- Adjusting the Space Around Tags
- Building a Sidebar
- Going Further
- 8. Adding Graphics to Web Pages
- Discovering CSS and the <img> Tag
- Adding Background Images
- Controlling Repetition
- Positioning a Background Image
- Keywords
- Precise Values
- Percentage Values
- Fixing an Image in Place
- Defining the Origin and Clipping for a Background
- Scaling Background Images
- Using Background Property Shorthand
- Using Multiple Background Images
- Utilizing Gradient Backgrounds
- Linear Gradients
- Color Stops
- Internet Explorer Support
- Repeating Linear Gradients
- Radial Gradients
- Repeating Radial Gradients
- Linear Gradients
- Tutorial: Enhancing Images
- Framing an Image
- Tutorial: Creating a Photo Gallery
- Adding Drop Shadows
- Tutorial: Using Background Images
- Adding an Image to the Page Background
- Replacing Borders with Graphics
- Using Graphics for Bulleted Lists
- Giving the Sidebar Personality
- 9. Sprucing Up Your Sites Navigation
- Selecting Which Links to Style
- Understanding Link States
- Targeting Particular Links
- Grouping links with descendant selectors
- Styling Links
- Underlining Links
- Creating a Button
- Using Graphics
- Building Navigation Bars
- Using Unordered Lists
- Vertical Navigation Bars
- Horizontal Navigation Bars
- Using Display: Inline and Display: Inline-Block
- Using Floats for Horizontal Navigation
- CSS-Style Preloading Rollovers
- Styling Particular Types of Links
- Links to Other Websites
- Email Links
- Links to Specific Types of Files
- Tutorial: Styling Links
- Basic Link Formatting
- Adding a Background Image to a Link
- Highlighting Different Links
- Tutorial: Creating a Navigation Bar
- Adding Rollovers and Creating You Are Here Links
- From Vertical to Horizontal
- Selecting Which Links to Style
- 10. CSS Transforms, Transitions, and Animations
- Transforms
- Rotate
- Scale
- Translate
- Skew
- Multiple Transformations
- Origin
- Transitions
- Adding a Transition
- Transition Timing
- Delaying a Transitions Start
- Transition Shorthand
- Animations
- Defining Keyframes
- Applying an Animation
- Timing the Animation
- Finishing the Animation
- Animation Shorthand
- Pausing an Animation
- Animating on Hover
- Tutorial
- Adding an Animation
- Transforms
- 11. Formatting Tables and Forms
- Using Tables the Right Way
- Styling Tables
- Adding Padding
- Adjusting Vertical and Horizontal Alignment
- Creating Borders
- Styling Rows and Columns
- Styling Forms
- HTML Form Elements
- Laying Out Forms Using CSS
- Tutorial: Styling a Table
- Tutorial: Styling a Form
- 6. Formatting Text
- 3. CSS Page Layout
- 12. Introducing CSS Layout
- Types of Web Page Layouts
- How CSS Layout Works
- The <div> Tag
- HTML5 Sectioning Elements
- Techniques for CSS Layout
- Layout Strategies
- Start with Your Content
- Mobile First
- Start with a Sketch
- Identify the Boxes
- Go with the Flow
- Remember Background Images
- Pieces of a Puzzle
- Layering Elements
- Dont Forget Margins and Padding
- 13. Building Float-Based Layouts
- Applying Floats to Your Layouts
- Floating All Columns
- Floats Within Floats
- Overcoming Float Problems
- Clearing and Containing Floats
- Creating Full-Height Columns
- Preventing Float Drops
- Preventing Float Drops With Box-Sizing
- Tutorial: Multiple-Column Layouts
- Structuring the HTML
- Creating the Layout Styles
- Adding Another Column
- Adding Some Breathing Room
- Fixing the Width
- Mixing Liquid and Fixed Design
- Applying Floats to Your Layouts
- 14. Positioning Elements on a Web Page
- How Positioning Properties Work
- Setting Positioning Values
- When Absolute Positioning Is Relative
- When (and Where) to Use Relative Positioning
- Stacking Elements
- Hiding Parts of a Page
- Powerful Positioning Strategies
- Positioning Within an Element
- Breaking an Element Out of the Box
- Creating CSS-Style Frames Using Fixed Positioning
- Tutorial: Positioning Page Elements
- Enhancing a Page Banner
- Placing Captions on the Photos
- How Positioning Properties Work
- 15. Responsive Web Design
- Responsive Web Design Basics
- Setting Up a Web Page for RWD
- Media Queries
- Strategies for Using Media Queries
- Creating Breakpoints
- Desktop First or Mobile First?
- Creating Media Queries
- Including Queries Inside a Style Sheet
- A Basic Style Sheet Structure
- Mobile First
- Flexible Grids
- The Importance of HTML Source Order
- Reset the Box Model
- Converting Fixed Width to Flexible Grids
- Fluid Images
- The Downside of Fluid Images
- Videos and Flash
- Responsive Web Design Tutorial
- Changing the HTML Source Order
- Fluid Images
- Adding Styles for Tablet Screens
- Adding Phone Styles
- 16. Using a CSS Grid System
- How Grids Work
- Structuring Your HTML for Grids
- Using the Skeleton Grid System
- Creating and Naming Columns
- Creating Full Width Sections
- Styling Buttons
- Mobile First
- Tutorial: Using a Grid System
- Adding a Grid
- Adding Style
- The Mobile Design
- Styling a Breakpoint
- 17. Modern Web Layout with Flexbox
- Introducing Flexbox
- Flexbox Basics
- Flex Container Properties
- Flex-Flow
- Justify-content
- Align-items
- Align-content
- Flex Item Properties
- The Order Property
- Align-self
- Mini-Tutorial: Auto Margins for Flex Items
- Flex
- Digging into the Math
- Returning to the Flex-Shrink Property
- Wrapping Flex Items
- The Bottom Line
- Tutorial: Build a Flexbox Layout
- Styling the Navigation Bar
- Adding Three Columns
- Formatting the Footer
- Changing the Navigation Bar for Mobile
- Introducing Flexbox
- 12. Introducing CSS Layout
- 4. Advanced CSS
- 18. Improving Your CSS Habits
- Adding Comments
- Organizing Styles
- Name Classes Clearly
- Name Classes by Purpose Not Appearance
- Dont Use Names Based on Position
- Avoid Cryptic Names
- Dont Repeat Yourself
- Use Multiple Classes to Save Time
- Use Shorthand Properties
- Grouping Related Styles
- Using Comments to Separate Style Groups
- Using Multiple Style Sheets
- Name Classes Clearly
- Eliminating Browser Style Interference
- Using Descendant Selectors
- Compartmentalize Your Pages
- Identify the Body
- 19. More Powerful Styling with Sass
- What is Sass?
- Installing Sass
- Installing Sass on Windows
- Installing Sass on Mac
- Sass Basics
- Organizing Your Files
- Converting Your Current Site to Sass
- Running Sass
- Organizing Your Styles with Sass Partials
- Creating and Using Sass Partials
- Organizing Your Sass Partial Files
- Sass Variables
- Organizing Your Sass Variables
- Common Uses for Sass Variables
- Nesting Selectors
- Referencing the Parent Selector
- Multiple Levels of Nesting
- Inheriting (or Extending) Properties
- Extending With Placeholder Selectors
- Only Extend Related Elements
- Mixins
- Creating a Mixin
- Using a Mixin
- Giving Mixins Information
- Inserting Variables into Text
- Passing More Information and Optional Values to Mixins
- Working with Media Queries
- Creating Media Query Mixins
- Setting Breakpoint Variables.
- Creating the Media Query Mixins
- Using the Media Query Mixins
- Creating Media Query Mixins
- Troubleshooting with CSS Source Maps
- 18. Improving Your CSS Habits
- 5. Appendixes
- A. CSS Property Reference
- CSS Values
- Colors
- Keywords
- RGB Values
- Lengths and Sizes
- Pixels
- Ems
- Percentages
- Rems
- Vh
- Vw
- Vmin
- Vmax
- Keywords
- URLs
- Colors
- Text Properties
- color (inherited)
- font (inherited)
- font-family (inherited)
- font-size (inherited)
- font-style (inherited)
- font-variant (inherited)
- font-weight (inherited)
- letter-spacing (inherited)
- line-height (inherited)
- text-align (inherited)
- text-decoration (inherited)
- text-indent (inherited)
- text-shadow (inherited)
- text-transform (inherited)
- vertical-align
- white-space
- word-spacing (inherited)
- List Properties
- list-style (inherited)
- list-style-image (inherited)
- list-style-position (inherited)
- list-style-type (inherited)
- Padding, Borders, and Margins
- box-shadow
- border
- border-radius
- border-top, border-right, border-bottom, border-left
- border-color
- border-top-color, border-right-color, border-bottom-color, border-left-color
- border-style
- border-top-style, border-right-style, border-bottom-style, border-left-style
- border-width
- border-top-width, border-right-width, border-bottom-width, border-left-width
- box-sizing
- outline
- outline-color
- outline-style
- outline-width
- padding
- padding-top
- padding-right
- padding-bottom
- padding-left
- margin
- margin-top
- margin-right
- margin-bottom
- margin-left
- Backgrounds
- background
- background-attachment
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-repeat
- background-size
- Page Layout Properties
- bottom
- clear
- clip
- display
- float
- height
- left
- max-height
- max-width
- min-height
- min-width
- overflow
- position
- right
- top
- visibility
- width
- z-index
- Animation, Transform and Transition Properties
- @keyframes
- animation
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
- animation-fill-mode
- animation-play-state
- transform
- transform-origin
- transition
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
- Table Properties
- border-collapse
- border-spacing
- caption-side
- empty-cells
- table-layout
- Miscellaneous Properties
- content
- cursor
- opacity
- orphans
- page-break-inside
- widows
- CSS Values
- B. CSS Resources
- References
- World Wide Web Consortium (W3C)
- Other Online References
- CSS Help
- Discussion Boards
- CSS Tips, Tricks, and Advice
- CSS Navigation
- Tutorials
- Online Examples
- CSS Layout
- Showcase Sites
- References
- A. CSS Property Reference
- Index
- About the Author
- Copyright