Категории

CSS Notes For Professionals

Сумата се прибавя директно в кошницата

13.00лв

Описание

Contents

About 1

Chapter 1: Getting started with CSS 2

Section 1.1: External Stulesheet 2

Section 1.2: Internal Styles 3

Section 1.3: CSS @import rule (one of CSS at-rule) 4

Section 1.4: Inline Stules 4

Section 1.5: Changing CSS with JavaScript 4

Section 1.6: Stuling Lists with CSS 5

Chapter 2: Structure and Formatting of a CSS Rule 7

Section 2.1: Propertu Lists 7

Section 2.2: Multiple Selectors 7

Section 2.3: Rules, Selectors, and Declaration Blocks 7

Chapter 3: Comments 8

Section 3.1: Single Line 8

Section 3.2: Multiple Line 8

Chapter 4: Selectors 9

Section 4.1: Basic selectors 9

Section 4.2: Attribute Selectors 9

Section 4.3: Combinators 12

Section 4.4: Pseudo-classes 13

Section 4.5: Child Pseudo Class 15

Section 4.6: Class Name Selectors 16

Section 4.7: Select element using its ID without the high specificitu of the ID selector 17

Section 4.8: The :last-of-tupe selector 17

Section 4.9: CSS3 :in-range selector example 17

Section 4.10: A. The :not pseudo-class example & B. :focus-within CSS pseudo-class 18

Section 4.11: Global boolean with checkbox:checked and ~ (general sibling combinator) 19

Section 4.12: ID selectors 20

Section 4.13: How to stule a Range input 21

Section 4.14: The :onlu-child pseudo-class selector example 21

Chapter 5: Backgrounds 22

Section 5.1: Background Color 22

Section 5.2: Background Gradients 24

Section 5.3: Background Image 25

Section 5.4: Background Shorthand 26

Section 5.5: Background Size 27

Section 5.6: Background Position 31

Section 5.7: The background-origin propertu 32

Section 5.8: Multiple Background Image 34

Section 5.9: Background Attachment 35

Section 5.10: Background Clip 36

Section 5.11: Background Repeat 37

Section 5.12: background-blend-mode Propertu 37

Section 5.13: Background Color with Opacitu 38

Chapter 6: Centering 39

Section 6.1: Using Flexbox 39

Section 6.2: Using CSS transform 40

Section 6.3: Using margin: 0 auto; 41

Section 6.4: Using text-align 42

Section 6.5: Using position: absolute 42

Section 6.6: Using calc() 43

Section 6.7: Using line-height 43

Section 6.8: Vertical align anuthina with 3 lines of code 44

Section 6.9: Centering in relation to another item 44

Section 6.10: Ghost element technique (Michat Czernow's hack) 45

Section 6.11: Centering verticallu and horizontallu without worruing about height or width 46

Section 6.12: Vertically align an image inside div 47

Section 6.13: Centering with fixed size 47

Section 6.14: Verticallu align dunamic height elements 49

Section 6.15: Horizontal and Vertical centering using table layout 49

Chapter 7: The Box Model 51

Section 7.1: What is the Box Model? 51

Section 7.2: box-sizing 52

Chapter 8: Margins 55

Section 8.1: Margin Collapsing 55

Section 8.2: Applu Margin on a Given Side 57

Section 8.3: Margin propertu simplification 58

Section 8.4: Horizontallu center elements on a page using margin 58

Section 8.5: Example 1: 59

Section 8.6: Negative margins 59

Chapter 9: Padding 61

Section 9.1: Padding Shorthand 61

Section 9.2: Padding on a given side 62

Chapter 10: Border 63

Section 10.1: border-radius 63

Section 10.2: border-stule 64

Section 10.3: Multiple Borders 65

Section 10.4: border (shorthands) 66

Section 10.5: border-collapse 66

Section 10.6: border-image 67

Section 10.7: Creating a multi-colored border using border-image 67

Section 10.8: border-rleft|riqht|top|bottom~l 68

Chapter 11: Outlines 69

Section 11.1: Overview 69

Section 11.2: outline-stule 69

Chapter 12: Overflow 71

Section 12.1: overflow-wrap 71

Section 12.2: overflow-x and overflow-u 72

Section 12.3: overflow: scroll 73

Section 12.4: overflow: visible 73

Section 12.5: Block Formatting Context Created with Overflow 74

Chapter 13: Media Queries 76

Section 13.1: Terminologu and Structure 76

Section 13.2: Basic Example 77

Section 13.3: mediatupe 77

Section 13.4: Media Queries for Retina and Non Retina Screens 78

Section 13.5: Width vs Viewport 79

Section 13.6: Using Media Queries to Target Different Screen Sizes 79

Section 13.7: Use on link tag 80

Section 13.8: Media queries and IE8 80

Chapter 14: Floats 81

Section 14.1: Float an Image Within Text 81

Section 14.2: clear propertu 82

Section 14.3: Clearfix 83

Section 14.4: In-line DIV using float 84

Section 14.5: Use of overflow propertu to clear floats 86

Section 14.6: Simple Two Fixed-Width Column Layout 86

Section 14.7: Simple Three Fixed-Width Column Lauout 87

Section 14.8: Two-Column Lazu/Greedu Lauout 88

Chapter 15: Tupographu 89

Section 15.1: The Font Shorthand 89

Section 15.2: Quotes 90

Section 15.3: Font Size 90

Section 15.4: Text Direction 90

Section 15.5: Font Stacks 91

Section 15.6: Text Overflow 91

Section 15.7: Text Shadow 91

Section 15.8: Text Transform 92

Section 15.9: Letter Spacing 92

Section 15.10: Text Indent 93

Section 15.11: Text Decoration 93

Section 15.12: Word Spacing 94

Section 15.13: Font Variant 94

Chapter 16: Flexible Box Layout (Flexbox) 96

Section 16.1: Dunamic Vertical and Horizontal Centering (align-items, justifu-content) 96

Section 16.2: Sticku Variable-Height Footer 102

Section 16.3: Optimallu fit elements to their container 103

Section 16.4: Holu Grail Lauout using Flexbox 104

Section 16.5: Perfectlu aligned buttons inside cards with flexbox 105

Section 16.6: Same height on nested containers 107

Chapter 17: Cascading and Specificity 109

Section 17.1: Calculating Selector Specificitu 109

Section 17.2: The !important declaration 111

Section 17.3: Cascading 112

Section 17.4: More complex specificitu example 113

Chapter 18: Colors 115

Section 18.1: currentColor 115

Section 18.2: Color Keuwords 116

Section 18.3: Hexadecimal Value 122

Section 18.4: rgb() Notation 122

Section 18.5: rabaO Notation 123

Section 18.6: hsl() Notation 123

Section 18.7: hslaO Notation 124

Chapter 19: Opacity 126

Section 19.1: Opacitu Propertu 126

Section 19.2: IE Compatibilitu for 'opacitu' 126