جستجو برای:
  • صفحه اصلی
  • دوره ها
    • حساب کاربری
    • سبد خرید
  • بلاگ
   
آکادمی راهکارینو
  • صفحه اصلی
  • فروشگاه
  • بلاگ
  • درباره ما
  • تماس با ما
0

ورود و ثبت نام

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

خانهفروشگاهکتاب الکترونیکیانتشارات SitePointکتاب الکترونیکی JUMPSTART CSS
کتاب الکترونیکی 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

برچسب: آموزش css آموزش طراحی سایت کتاب CSS وب دیزاین

درخواست مشاوره

برای کسب اطلاعات بیشتر درباره این دوره درخواست مشاوره خود را ارسال کنید و یا با ما در تماس باشید.

درخواست مشاوره
09026660220

نیاز به مشاوره دارید؟

در صورتی که نیاز به مشاوره دارید می توانید فرم را تکمیل نمایید و یا با ما در تماس باشید

درخواست مشاوره رایگان

دوره های مرتبط

MODERN-JAVASCRIPT

کتاب الکترونیکی MODERN JAVASCRIPT

MODERN JAVASCRIPT

کتاب الکترونیکی FULL STACK JAVASCRIPT DEVELOPMENT WITH MEAN

کتاب الکترونیکی FULL STACK JAVASCRIPT WITH MEAN

FULL STACK JAVASCRIPT DEVELOPMENT WITH MEAN

فیلم آموزشی شبه کلاس و شبه المنت [pseudo class & element] در CSS

فیلم آموزشی شبه کلاس و شبه المنت [pseudo] در CSS

آموزش شبه کلاس ها و شبه المنت ها در  CSS

نظرات

قوانین ثبت دیدگاه

  • دیدگاه های فینگلیش تایید نخواهند شد.
  • دیدگاه های نامرتبط به مطلب تایید نخواهد شد.
  • از درج دیدگاه های تکراری پرهیز نمایید.
  • امتیاز دادن به دوره فقط مخصوص دانشجویان دوره می باشد.
 

لغو پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

قیمت :

رایگان!

امتیاز
0 از 0 رأی
بدون امتیاز 0 رای
رایگان!
نوع دوره: کتاب الکترونیک
زبان: انگلیسی
فرمت کتاب: PDF
حجم فایل: 22 مگابایت
تعداد صفحه : 191
دسته: انتشارات SitePoint
درباره راهکاری نو

آکادمی “راهکاری‌نو” ارائه‌دهنده آموزش‌های آنلاین در زمینه طراحی و برنامه نویسی وب

دسترسی سریع
  • صفحه اصلی
  • بلاگ
  • دوره ها
  • تماس با ما
تماس با راهکارینو
  • ایران - تهران
  • rahkarino@outlook.com
نماد اعتماد الکترونیک
تمامی حقوق این سایت برای راهکاری‌نو محفوظ می باشد.

ورود

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت