آموزش CSS3

(0 بررسی)
280,000 تومان
webabsar-css3-category

پس از گذراندن دور آموزشی HTML متوجه شده اید که برای تعیین محل کدهای HTML، ابعاد، نوع و رنگ آن احتیاج به زبان CSS دارید.

CSS چیست؟

CSS یا صفحات استایل آبشاری (Cascading Style Sheets) جهت بهبود رابط کاربری توسط کنسرسیوم جهانی وب ( W3C ) به صورت استاندار تهیه شده تا تمامی مرورگرها از آن پشتیبانی کنند.

این زبان مانند زبان های نشانه گذاری بوده و به صورت آبشاری از بالا به پایین خوانده می شود .

CSS3:

جدیدترین ورژن زبان CSS می باشد که سعی شده بعضی از رفتار های واکنشی را پشتیبانی کند که احتمال می رود در آینده تمامی رفتارهای انیمیشنی یک وب سایت به این زبان محدود گردد.

ما در این مجموعه آموزشی سعی کرده ایم به ساده ترین روش تمامی پراپرتی ها و صفت های مربوط به این زبان و ریسپانسیو سازی را آموزش دهیم، همچنین مواردی که براساس تجربه کاری با آنها برخورد کرده ایم را در این دوره بعنوان نکته بیان می کنیم، مانند تداخل کدها ، کدنویسی سریع، حل مشکل ظاهری سایت در هنگام نمایش آن در دستگاه های مختلف مثل تلفن همراه .

**پس از اتمام این دوره یک طراح وب حرفه ای خواهید شد، البته این امر مستلزم تمرین و تلاش بسیار می باشد**

ریسپانسیو سازی:

در اصطلاح واکنش گرایی نیز گفته می شود یعنی سایت و یا نرم افزاری که طراحی می کنید در دستگاه های مختلف مثل موبایل، تبلت و دیگر دستگاه ها بدرستی نمایش داده شود.منظور از نمایش درست یعنی هنگام نمایش سایت در یک دستگاه مثل موبایل اسکرول افقی ایجاد نشود و همچنین متون قابل خواندن باشند.

در دوره آموزش css3 با تمامی مدیاکوئری ها آشنا شده و می توانید سایت و یا نرم افزار خود را برای تمامی دستگاه ها واکنش گرا کنید.

همانطور که در دوره قبلی سعی بر تولید دیکشنری جیبی برای HTML داشتیم در این دوره نیز یک دیکشنری جیبی برای زبان CSS خواهیم ساخت تا بتوانید در هر مکان و هر زمان، مطالب فراگرفته خود را مرور کرده و آن را ملکه ذهن خود کنید.

قابل ذکر است با ارسال دیدگاه های خود ما را در بهبود این دوره یاری فرمایید و تمامی بروزرسانی ها به صورت رایگان در اختیار شما عزیزان قرار خواهد گرفت.

سرفصل دوره جامع CSS3

مقدمه : تاریخچه  و معرفی css

  • تاریخچه
  • علت پیدایش زبان CSS

بخش اول :  ساختار و سینتکس CSS

بخش دوم : سلکتورها

  • توضیح انواع سلکتورهای CSS
  • کلاسها و المان های کاذب

بخش سوم : بهینه نویسی

  • نحوه ایجاد کامنت در CSS
  • اعتبارسنجی کدها

بخش چهارم :  روش های وارد کردن کدهای CSS به سند HTML

  • روش External
  • روش Internal
  • روش Inline
  • ترتیب اولویت اعمال شدن استایل
  • توضیح خاصیت!important

بخش پنجم : واحدهای اندازه گیری

  • واحدهای مطلق
  • واحدهای نسبی

بخش ششم : انواع روش های رنگ دهی در CSS

  • با استفاده از نام رنگ
  • با استفاده از روش rgb
  • با استفاده از روش rgba
  • با استفاده از روش hsl
  • با استفاده از روش hsla
  • با استفاده از روش هگزا دسیمال

بخش هفتم : قراردادن پس زمینه

  • تعیین رنگ پس زمینه با صفت background-color
  • تعیین تصویر برای پس زمینه با صفت background-image
  • تعیین نوع تکرار تصویر پس زمینه با صفت background-repeat
  • تعیین ثابت بودن یا اسکرول خوردن تصویر پس زمینه با صفت background-attachment
  • تعیین ناحیه ای که تصویر پس زمینه شروع می شود با صفت background-origin
  • تعیین ناحیه ای که پس زمینه آن را پوشش دهد با صفت background-clip
  • تعیین محل قرار گیری تصویر زمینه با صفت background-position
  • تعیین اندازه تصویر پس زمینه با صفت background-size
  • Shorthand نویسی این ویژگی ها با صفت background

بخش هشتم : باکس مدل

  • باکس مدل چیست؟
  • ایجاد مرز و ویژگی های آن
  • تعیین میزان ضخامت مرز (border-width)
  • تعیین استایل مرز (border-style)
  • تعیین رنگ مرز (border-color)
  • ادغام یا عدم ادغام دو مرز مجاور (border-collapse)
  • تعیین میزان انحنای گوشه های مرز (border-radius)
  • طرز استفاده از ویژگی های بالا برای یک یا دو یا سه یا چهار سمت
  • Shorthand نویسی این ویژگی ها (border)
  • توضیح فاصله بیرونی (margin)
  • توضیح فاصله درونی (padding)
  • ویژگی box-sizing

بخش نهم : عرض و ارتفاع

  • تعیین عرض عنصر (width)
  • تعیین بیشترین عرض ممکن برای عنصر (max-width)
  • تعیین کمترین عرض ممکن برای عنصر (min-width)
  • تعیین ارتفاع عنصر (height)
  • تعیین بیشترین ارتفاع ممکن برای عنصر (max-height)
  • تعیین کمترین ارتفاع ممکن برای عنصر (min-height)

بخش دهم : ویژگی Outline

  • تعیین میزان ضخامت outline (outline-width)
  • تعیین استایل outline (outline-style)
  • تعیین رنگ outline (outline-color)
  • تنظیم فاصله بین outline و border (outline-offset)
  • Shorthand نویسی این ویژگی ها (outline)

بخش یازدهم : استایل دهی متون

  • رنگ متن (color)
  • جهت متن (text-align)
  • زیرخط ،بالاخط و روخط دار کردن متن
  • تعیین زیرخط ،روخط و بالاخط و غیرفعال بودن (text-decoration-line)
  • تعیین رنگ خط (text-decoration-color)
  • تعیین استایل خط (text-decoration-style)
  • Shorthand نویسی این ویژگی ها (text-decoration)
  • تعیین بزرگ یا کوچک بودن (text-transform)
  • تعیین تورفتگی خط اول پاراگراف (text-indent)
  • تعیین فاصله بین حروف کلمات (letter-spacing)
  • تعیین فاصله بین کلمات (word-spacing)
  • تعیین فاصله و ارتفاع بین خطوط (line-height)
  • تعیین راست چین و چپ چین بودن (direction)
  • امکان شکستن متن و خاصیت تگ preرا به متن دادن (white-space)
  • تنظیم جایگاه عنصر از لحاظ عمودی (vertical-align)
  • ایجاد سایه در متون (text-shadow)
  • ویرایش متن سرریزشده (text-overflow)

بخش دوازدهم : فونت

  • مشخص کردن استایل متن (font-style)
  • نمایش حروف بزرگ به اندازه حروف کوچک (font-variant)
  • تعیین مقدار ضخامت متن (font-weight)
  • تعیین اندازه ی فونت (font-size)
  • مشخص کردن نوع فونت (font-family)
  • معرفی ویژگی font-face@
  • فونت آیکون

بخش سیزدهم : لیست ها

  • مشخص کردن نوع نشانگر آیتم های لیست (list-style-type)
  • تعیین مکان نشانگر آیتم های لیست (list-style-position)
  • فراخوانی تصویر جای نشانگر (list-style-image)

بخش چهاردهم : جداول

  • تنظیم مکان متنِ درون تگ caption (caption-side)
  • تنظیم عرض ارتفاع سلول ها نسبت به هم (table-layout)
  • قابلیت ریسپانسیو کردن جدول
  • ایجاد یک جدول مقایسه ای

بخش پانزدهم : نمایش محتوا هنگام سرریزشدن

  • منظور از سر ریز شدن محتوا چیست؟
  • تنظیم فقط در جهت عمودی (y-overflow)
  • تنظیم فقط در جهت افقی (x-overflow)

بخش شانزدهم : چگونگی نمایش عناصر

  • توضیح عناصر Inline و Block-level
  • ویژگی Display و Visibility

بخش هفدهم : تعیین موقعیت عناصر

  • ویژگی Position
  • ویژگی z-index

بخش هجدهم : ویژگی Float

  • منظور از حالت شناوری چیست؟
  • توضیح ویژگی Clear

بخش نوزدهم : تنظیم مقدار شفافیت

بخش بیستم : object-fit

بخش بیست و یک : تمرین

  • ایجاد سایت
  • ایجاد منوی عمودی
  • ایجاد منوی افقی
  • ایجاد منوی کشویی
  • ایجاد Dropdown Image
  • ایجاد منو با آیکون
  • ایجاد منو در فوتر سایت
  • ایجاد منوی ثابت
  • منوی آکاردونی
  • ایجاد مگا منو
  • ایجاد یک فروشگاه

بخش بیست و دوم : فرم ها

  • صفت های مورد استفاده در ساخت فرم ها
  • ایجاد فرم لاگین
  • ایجاد فرم لاگین با آیکون
  • ایجاد فرم عضویت یا ثبت نام
  • تغییر رنگ متن پیش فرض یا فیلد
  • تغییر رنگ متن Placeholder

بخش بیست و سوم : شمارنده ها در css

بخش بیست و چهارم : ایجاد سایه در css

بخش بیست و پنجم : افکت های متن

بخش بیست و ششم : Transforms

  • 2D Transforms
  • 3D Transforms

بخش بیست و هفتم : Transitions

  • ایجاد محصولات با حالت شناوری

بخش بیست و هشتم : انیمیشن

  • ایجاد دکمه جستجو بصورت انیمیشنی
  • ایجاد دکمه های انیمیشنی

بخش بیست و نهم : ایجاد Tooltip

بخش سی ام : تمرین

  • ایجاد انواع دکمه ها
  • ایجاد دکمه قبلی و بعدی
  • ایجاد صفحه بندی
  • عکس لرزشی

بخش سی و یکم : Multiple Columns

بخش سی و دوم : فلکسی باکس

بخش سی و سوم : حالت شبکه ای

  • منظور از گرید چیست ؟
  • ایجاد یک قالب وبلاگی

بخش سی و چهارم : ریسپانسیو سازی

  • مدیا کوئری

بخش سی و پنجم : اندازه های پیش فرض

  • اندازه و سایز پیش فرض هر کدام از تگ ها

بخش سی و ششم : تمرین

  • ایجاد آیکون بار
  • سایدبار ریسپانسیو
  • منوی ریسپانسیو
  • منو با لینک چپ و راست
  • منوی ثابت
  • منو در عکس
  • منوی کشویی
  • منوی کشویی ریسپانسیو منوی کشویی رو به بالا
  • مگا منو
  • منوی موبایل
  • ایجاد عکس بند انگشتی
  • ایجاد عکس ریسپانسیو
  • ایجاد عکس سه بعدی
  • ایجاد Breadcrumb Navigation یا نوار وضعیت
  • ایجاد image Grid
  • ایجاد Responsive Image Grid
  • ایجاد عکس کامل
  • ایجاد عکس بهمراه فرم لاگین
  • ایجاد Blurred Background Image
  • ایجاد دکمه لودینگ
  • ایجاد Notification Button
  • ایجاد دکمه تصویری
  • ایجاد قالب پارالکس
  • ایجاد checkboxes  و  radio buttonsرنگی
  • ایجاد دکمه سوییچ
  • ایجاد یک صفحه بصورت Timeline
  • ایجاد نوار مهارت یا Skill Bar
  • ایجاد حالت لودینگ
  • رتبه دهی
  • ایجاد صفحه لیست قیمت
  • ایجاد دایره توپر رنگی در لیست ها

ویژگی های دوره

  • درس 0
  • آزمونها 0
  • مدت زمان 50 ساعت
  • سطح مهارت همه سطوح
  • زبان فارسی
  • دانشجو 0
  • گواهی نامه خیر
  • ارزیابی بله
برنامه درسی خالی است

نظرات

میانگین امتیاز

0
0 امتیاز

جزئیات امتیاز

5 ستاره
0%
4 ستاره
0%
3 ستاره
0%
2 ستاره
0%
1 ستاره
0%
280,000 تومان

نظر بدهید