CSSNotesForProfessionals.pdf
(
3327 KB
)
Pobierz
Notes for Professionals
CSS
CSS
Notes for Professionals
of professional hints and tricks
200+ pages
GoalKicker.com
Free Programming Books
Disclaimer
This is an unocial free book created for educational purposes and is
not aliated with ocial CSS group(s) or company(s).
All trademarks and registered trademarks are
the property of their respective owners
Contents
About
................................................................................................................................................................................... 1
Chapter 1: Getting started with CSS
.................................................................................................................... 2
Section 1.1: External Stylesheet
..................................................................................................................................... 2
Section 1.2: Internal Styles
............................................................................................................................................ 3
Section 1.3: CSS @import rule (one of CSS at-rule)
................................................................................................... 4
Section 1.4: Inline Styles
................................................................................................................................................. 4
Section 1.5: Changing CSS with JavaScript
................................................................................................................. 4
Section 1.6: Styling Lists with CSS
................................................................................................................................. 5
Chapter 2: Structure and Formatting of a CSS Rule
.................................................................................. 7
Section 2.1: Property Lists
............................................................................................................................................. 7
Section 2.2: Multiple Selectors
...................................................................................................................................... 7
Section 2.3: Rules, Selectors, and Declaration Blocks
............................................................................................... 7
Chapter 3: Selectors
.................................................................................................................................................... 8
Section 3.1: Basic selectors
........................................................................................................................................... 8
Section 3.2: Attribute Selectors
.................................................................................................................................... 8
Section 3.3: Combinators
............................................................................................................................................ 11
Section 3.4: Pseudo-classes
....................................................................................................................................... 12
Section 3.5: Child Pseudo Class
.................................................................................................................................. 14
Section 3.6: Class Name Selectors
............................................................................................................................. 15
Section 3.7: Select element using its ID without the high specificity of the ID selector
........................................ 16
Section 3.8: The :last-of-type selector
....................................................................................................................... 16
Section 3.9: CSS3 :in-range selector example
.......................................................................................................... 16
Section 3.10: A. The :not pseudo-class example & B. :focus-within CSS pseudo-class
......................................... 17
Section 3.11: Global boolean with checkbox:checked and ~ (general sibling combinator)
.................................. 18
Section 3.12: ID selectors
............................................................................................................................................. 19
Section 3.13: How to style a Range input
.................................................................................................................. 20
Section 3.14: The :only-child pseudo-class selector example
................................................................................. 20
Chapter 4: Backgrounds
......................................................................................................................................... 21
Section 4.1: Background Color
................................................................................................................................... 21
Section 4.2: Background Gradients
........................................................................................................................... 23
Section 4.3: Background Image
................................................................................................................................. 24
Section 4.4: Background Shorthand
.......................................................................................................................... 25
Section 4.5: Background Size
..................................................................................................................................... 26
Section 4.6: Background Position
.............................................................................................................................. 30
Section 4.7: The background-origin property
.......................................................................................................... 31
Section 4.8: Multiple Background Image
.................................................................................................................. 33
Section 4.9: Background Attachment
....................................................................................................................... 34
Section 4.10: Background Clip
.................................................................................................................................... 35
Section 4.11: Background Repeat
............................................................................................................................... 36
Section 4.12: background-blend-mode Property
..................................................................................................... 36
Section 4.13: Background Color with Opacity
........................................................................................................... 37
Chapter 5: Centering
................................................................................................................................................. 38
Section 5.1: Using Flexbox
........................................................................................................................................... 38
Section 5.2: Using CSS transform
.............................................................................................................................. 39
Section 5.3: Using margin: 0 auto;
............................................................................................................................. 40
Section 5.4: Using text-align
....................................................................................................................................... 41
Section 5.5: Using position: absolute
......................................................................................................................... 41
Section 5.6: Using calc()
............................................................................................................................................. 42
Section 5.7: Using line-height
..................................................................................................................................... 42
Section 5.8: Vertical align anything with 3 lines of code
......................................................................................... 43
Section 5.9: Centering in relation to another item
................................................................................................... 43
Section 5.10: Ghost element technique (Michał Czernow's hack)
........................................................................... 44
Section 5.11: Centering vertically and horizontally without worrying about height or width
............................... 45
Section 5.12: Vertically align an image inside div
..................................................................................................... 46
Section 5.13: Centering with fixed size
....................................................................................................................... 46
Section 5.14: Vertically align dynamic height elements
.......................................................................................... 48
Section 5.15: Horizontal and Vertical centering using table layout
........................................................................ 48
Chapter 6: The Box Model
...................................................................................................................................... 50
Section 6.1: What is the Box Model?
.......................................................................................................................... 50
Section 6.2: box-sizing
................................................................................................................................................ 51
Chapter 7: Margins
..................................................................................................................................................... 54
Section 7.1: Margin Collapsing
.................................................................................................................................... 54
Section 7.2: Apply Margin on a Given Side
............................................................................................................... 56
Section 7.3: Margin property simplification
.............................................................................................................. 57
Section 7.4: Horizontally center elements on a page using margin
...................................................................... 57
Section 7.5: Example 1:
................................................................................................................................................ 58
Section 7.6: Negative margins
................................................................................................................................... 58
Chapter 8: Padding
.................................................................................................................................................... 60
Section 8.1: Padding Shorthand
................................................................................................................................. 60
Section 8.2: Padding on a given side
........................................................................................................................ 61
Chapter 9: Border
....................................................................................................................................................... 62
Section 9.1: border-radius
........................................................................................................................................... 62
Section 9.2: border-style
............................................................................................................................................. 63
Section 9.3: Multiple Borders
...................................................................................................................................... 64
Section 9.4: border (shorthands)
............................................................................................................................... 65
Section 9.5: border-collapse
...................................................................................................................................... 65
Section 9.6: border-image
.......................................................................................................................................... 66
Section 9.7: Creating a multi-colored border using border-image
........................................................................ 66
Section 9.8: border-[left|right|top|bottom]
............................................................................................................... 67
Chapter 10: Outlines
.................................................................................................................................................. 68
Section 10.1: Overview
................................................................................................................................................. 68
Section 10.2: outline-style
........................................................................................................................................... 68
Chapter 11: Overflow
................................................................................................................................................. 70
Section 11.1: overflow-wrap
......................................................................................................................................... 70
Section 11.2: overflow-x and overflow-y
.................................................................................................................... 71
Section 11.3: overflow: scroll
........................................................................................................................................ 72
Section 11.4: overflow: visible
...................................................................................................................................... 72
Section 11.5: Block Formatting Context Created with Overflow
.............................................................................. 73
Chapter 12: Media Queries
...................................................................................................................................... 75
Section 12.1: Terminology and Structure
................................................................................................................... 75
Section 12.2: Basic Example
....................................................................................................................................... 76
Section 12.3: mediatype
.............................................................................................................................................. 76
Section 12.4: Media Queries for Retina and Non Retina Screens
........................................................................... 77
Section 12.5: Width vs Viewport
................................................................................................................................. 78
Section 12.6: Using Media Queries to Target Dierent Screen Sizes
..................................................................... 78
Section 12.7: Use on link tag
....................................................................................................................................... 79
Section 12.8: Media queries and IE8
.......................................................................................................................... 79
Chapter 13: Floats
....................................................................................................................................................... 80
Section 13.1: Float an Image Within Text
................................................................................................................... 80
Section 13.2: clear property
........................................................................................................................................ 81
Section 13.3: Clearfix
.................................................................................................................................................... 82
Section 13.4: In-line DIV using float
............................................................................................................................ 83
Section 13.5: Use of overflow property to clear floats
............................................................................................. 85
Section 13.6: Simple Two Fixed-Width Column Layout
............................................................................................ 85
Section 13.7: Simple Three Fixed-Width Column Layout
......................................................................................... 86
Section 13.8: Two-Column Lazy/Greedy Layout
...................................................................................................... 87
Chapter 14: Typography
......................................................................................................................................... 88
Section 14.1: The Font Shorthand
............................................................................................................................... 88
Section 14.2: Quotes
.................................................................................................................................................... 89
Section 14.3: Font Size
................................................................................................................................................. 89
Section 14.4: Text Direction
......................................................................................................................................... 89
Section 14.5: Font Stacks
............................................................................................................................................ 90
Section 14.6: Text Overflow
......................................................................................................................................... 90
Section 14.7: Text Shadow
.......................................................................................................................................... 90
Section 14.8: Text Transform
...................................................................................................................................... 91
Section 14.9: Letter Spacing
........................................................................................................................................ 91
Section 14.10: Text Indent
............................................................................................................................................ 92
Section 14.11: Text Decoration
..................................................................................................................................... 92
Section 14.12: Word Spacing
....................................................................................................................................... 93
Section 14.13: Font Variant
.......................................................................................................................................... 93
Chapter 15: Flexible Box Layout (Flexbox)
..................................................................................................... 95
Section 15.1: Dynamic Vertical and Horizontal Centering (align-items, justify-content)
...................................... 95
Section 15.2: Sticky Variable-Height Footer
........................................................................................................... 101
Section 15.3: Optimally fit elements to their container
.......................................................................................... 102
Section 15.4: Holy Grail Layout using Flexbox
........................................................................................................ 103
Section 15.5: Perfectly aligned buttons inside cards with flexbox
........................................................................ 104
Section 15.6: Same height on nested containers
.................................................................................................... 106
Chapter 16: Cascading and Specificity
........................................................................................................... 108
Section 16.1: Calculating Selector Specificity
.......................................................................................................... 108
Section 16.2: The !important declaration
................................................................................................................ 110
Section 16.3: Cascading
............................................................................................................................................ 111
Section 16.4: More complex specificity example
.................................................................................................... 112
Chapter 17: Colors
.................................................................................................................................................... 114
Section 17.1: currentColor
.......................................................................................................................................... 114
Section 17.2: Color Keywords
................................................................................................................................... 115
Section 17.3: Hexadecimal Value
............................................................................................................................. 121
Section 17.4: rgb() Notation
...................................................................................................................................... 121
Section 17.5: rgba() Notation
.................................................................................................................................... 122
Section 17.6: hsl() Notation
....................................................................................................................................... 122
Section 17.7: hsla() Notation
..................................................................................................................................... 123
Chapter 18: Opacity
................................................................................................................................................. 125
Section 18.1: Opacity Property
.................................................................................................................................. 125
Section 18.2: IE Compatibility for `opacity`
.............................................................................................................. 125
Chapter 19: Length Units
....................................................................................................................................... 126
Section 19.1: Creating scalable elements using rems and ems
............................................................................ 126
Section 19.2: Font size with rem
............................................................................................................................... 127
Section 19.3: vmin and vmax
.................................................................................................................................... 128
Section 19.4: vh and vw
............................................................................................................................................. 128
Section 19.5: using percent %
................................................................................................................................... 128
Chapter 20: Pseudo-Elements
............................................................................................................................ 130
Section 20.1: Pseudo-Elements
................................................................................................................................ 130
Section 20.2: Pseudo-Elements in Lists
................................................................................................................... 130
Chapter 21: Positioning
.......................................................................................................................................... 132
Section 21.1: Overlapping Elements with z-index
.................................................................................................... 132
Section 21.2: Absolute Position
................................................................................................................................. 133
Section 21.3: Fixed position
....................................................................................................................................... 134
Section 21.4: Relative Position
.................................................................................................................................. 134
Section 21.5: Static positioning
................................................................................................................................. 134
Chapter 22: Layout Control
................................................................................................................................. 136
Section 22.1: The display property
.......................................................................................................................... 136
Section 22.2: To get old table structure using div
................................................................................................. 138
Chapter 23: Grid
........................................................................................................................................................ 140
Section 23.1: Basic Example
..................................................................................................................................... 140
Chapter 24: Tables
.................................................................................................................................................. 142
Section 24.1: table-layout
......................................................................................................................................... 142
Section 24.2: empty-cells
......................................................................................................................................... 142
Section 24.3: border-collapse
.................................................................................................................................. 142
Section 24.4: border-spacing
................................................................................................................................... 143
Section 24.5: caption-side
........................................................................................................................................ 143
Chapter 25: Transitions
......................................................................................................................................... 144
Section 25.1: Transition shorthand
........................................................................................................................... 144
Section 25.2: cubic-bezier
......................................................................................................................................... 144
Section 25.3: Transition (longhand)
........................................................................................................................ 146
Chapter 26: Animations
......................................................................................................................................... 147
Section 26.1: Animations with keyframes
................................................................................................................ 147
Section 26.2: Animations with the transition property
.......................................................................................... 148
Section 26.3: Syntax Examples
................................................................................................................................ 149
Section 26.4: Increasing Animation Performance Using the `will-change` Attribute
.......................................... 150
Chapter 27: 2D Transforms
................................................................................................................................. 151
Section 27.1: Rotate
................................................................................................................................................... 151
Section 27.2: Scale
.................................................................................................................................................... 152
Section 27.3: Skew
..................................................................................................................................................... 152
Section 27.4: Multiple transforms
............................................................................................................................ 152
Section 27.5: Translate
............................................................................................................................................. 153
Section 27.6: Transform Origin
................................................................................................................................ 154
Chapter 28: 3D Transforms
................................................................................................................................. 155
Section 28.1: Compass pointer or needle shape using 3D transforms
................................................................ 155
Section 28.2: 3D text eect with shadow
................................................................................................................ 156
Section 28.3: backface-visibility
............................................................................................................................... 157
Section 28.4: 3D cube
............................................................................................................................................... 158
Chapter 29: Browser Support & Prefixes
...................................................................................................... 160
Section 29.1: Transitions
........................................................................................................................................... 160
Section 29.2: Transform
........................................................................................................................................... 160
Chapter 30: Normalizing Browser Styles
..................................................................................................... 161
Plik z chomika:
Rivit
Inne pliki z tego folderu:
Elaine Rich - Automata, Computability and Complexity.pdf
(112238 KB)
HaskellNotesForProfessionals.pdf
(1943 KB)
MicrosoftSQLServerNotesForProfessionals.pdf
(2705 KB)
MATLABNotesForProfessionals.pdf
(2886 KB)
GitNotesForProfessionals.pdf
(2546 KB)
Inne foldery tego chomika:
Android
Filmy
Gry PC PSX + CRACKI
Muzyka
Programy
Zgłoś jeśli
naruszono regulamin