کتاب الکترونیکی JUMPSTART CSS

کتابی که مشاهده می کنید از انتشارات SitePoint است که به زبان انگلیسی منتشر شده است.

کتاب الکترونیکی JUMPSTART-CSS شامل 191 صفحه است که پس از ثبت نام رایگان، می توانید آن را در فرمت PDF دانلود نمایید.

سرفصل های کتاب

Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xi
Who Should Read This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xi
Conventions Used . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xi
Code Samples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xi
Tips, Notes, and Warnings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii
Supplementary Materials . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii
Want to take your learning further? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii
Acknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiv
Chapter 1 An Introduction to CSS . . . . . . . . . . . . . . . . . 1
The Sample Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
How are web pages built? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
What Is CSS? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
How do I include CSS in a web page? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Using Inline Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Using the <style> Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Using @import inside a <style> element . . . . . . . . . . . . . . . . . . . . 5
The Best Way: Using the <link> Element . . . . . . . . . . . . . . . . . . . . . 5
Introducing CSS Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Universal Selector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Element Type Selector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
ID Selector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Class Selector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Descendant Combinator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Child Combinator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
General Sibling Combinator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Adjacent Sibling Combinator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

Attribute Selector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Pseudo-class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Pseudo-element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Using Multiple Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
The Cascade and Specificity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Always Use Standards Mode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
A Skeleton for Our Sample Website . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Chapter 2 Layout Techniques . . . . . . . . . . . . . . . . . . . . . . 25
The Box Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Block versus Inline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Shorthand versus Longhand CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Float-based Layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
Clearing Floats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
Positioning in CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
Absolute and Relative Positioning . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
What about Responsive Web Design? . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
Using box-sizing for Intuitive Sizing . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Adding More Layout Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Floating the “Latest Recipes” Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Layout Styles for the Header . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Laying out the Promo Photo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Laying out the Footer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
Laying out the “Most Popular” Recipes . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
What’s the future of CSS Layouts? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Flexbox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Other New Layout Features . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
viChapter 3 Backgrounds, Borders, and
More . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Backgrounds . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Borders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Rounded Corners . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Values and Units . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
Px Units . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
Em Units . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
Rem Units . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Percentages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
Integers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
Keywords . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
Color Values . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
Transparency . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
The Opacity Property . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
RGBA and HSLA Colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
Opacity versus Color-based Transparency . . . . . . . . . . . . . . . . . . . . . . . . . 81
Other Values . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
Adding Shadows to Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
Adding a Shadow to the Header . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
Adding a Shadow below the Promo Image . . . . . . . . . . . . . . . . . . . . 84
Adding Shadows to Small Images . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
Adding Shadows to Buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
Adding the Divider Shadow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
What about text shadows? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
Chapter 4 Links, Text, and Custom Fonts . . . . . . 91
Styling Links and Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
viiChanging Link Color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
Using Custom Web Fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Using @font-face . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
Including the Different Font Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
Generating the Font Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
@font-face Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
Using Our New Fonts on RecipeFinder . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
Cleaning Things Up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
Styling the Footer Section . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
The line-height Property . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Adding Styles to Text in the Sidebar . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
Chapter 5 Getting Fancy . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
Hover Effects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
Transitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
Multiple Transitions on a Single Element . . . . . . . . . . . . . . . . . . . . 129
Vendor Prefixes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130
Transforms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
translate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
scale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
rotate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
skew . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
Multiple Transforms on a Single Element . . . . . . . . . . . . . . . . . . . . 133
Defining the Origin of a Transform . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
Combining Transitions and Transforms . . . . . . . . . . . . . . . . . . . . . . . . . . 134
Linear Gradients . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
Positions for Color Stops . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
Changing a Linear Gradient’s Direction . . . . . . . . . . . . . . . . . . . . . . 139
Adding Multiple Gradients on a Single Element . . . . . . . . . . . . . . 140
viiiAdding More Linear Gradients . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
Radial Gradients . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143
More Options for Radial Gradients . . . . . . . . . . . . . . . . . . . . . . . . . 144
Keyframe Animations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146
Graceful Degradation and Page Performance . . . . . . . . . . . . . . . . . . . . . 151
Other Cutting-edge Features . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
Making RecipeFinder Responsive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152
min- and max- Dimensions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152
Converting Pixels to Percentages . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
Fixing the Size of Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155
Adding Media Queries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
Adding the Viewport Meta Tag . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
Chapter 6 Debugging Your CSS . . . . . . . . . . . . . . . . . . . 161
Understand How CSS “Errors” Work . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162
CSS Comments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
Validating CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166
CSS Hacks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168
Reduced Test Cases . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168
Get Help Online . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169
Use Online Coding Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170
Test Your Layout Early in Multiple Browsers . . . . . . . . . . . . . . . . . . . . . . 170
Use Developer Tools and a Good Text Editor . . . . . . . . . . . . . . . . . . . . . . 171
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175