آموزش CSS به زبان ساده در قالب فیلم | دوره مقدماتی

آموزش CSS به زبان ساده در قالب فیلم | دوره مقدماتی

آموزش CSS | دوره مقدماتی

در این بخش دوره آموزش CSS به زبان ساده در قالب فیلم آموزشی را به فارسی و در سطح مقدماتی آماده کردیم به همراه سورس کد که در قالب ۱۰ بخش و در ۲٫۵ ساعت با کیفیت بالا تهیه شده است. کاربران در این آموزش CSS علاوه بر اینکه این زبان طراحی وب را فرا می گیرند، با نرم افزار PhpStorm نیز آشنا خواهند شد زیرا نرم افزار مورد استفاده در این طراحی PhpStorm است که یک برنامه قوی برای طراحی وب سایت می باشد. در ادامه به معرفی زبان CSS پرداخته و سرفصل های این فیلم آموزشی طراحی سایت همراه با بخش هایی از آموزش قرار گرفته است.

معرفی زبان CSS

به طور کلی یک صفحه وب شامل دو قسمت Client Side و Server Side می باشد. قسمت Client Side را می‌ توانی به سه قسمت اساسی تفکیک نمود. ساختار صفحه اولین قسمت بوده که بوسیله زبان HTML ساخته می ‌شود. شکل و شمایل و رنگ و لعاب صفحه دومین قسمت می باشد که در CSS مشخص می گردد و سوم قسمت نیز منطق برنامه در سمت کلاینت می باشد که با زبان ‌های اسکریپتی همچون جاوا اسکریپت مشخص می گردد. از این رو یادگیری CSS برای طراحی وب حائز اهمیت می باشد.

استایل دهی صفحات وب با زبان CSS

در زبان برنامه نویسی HTML می توانیم اجزای صفحات وب را ایجاد نماییم، اما ضعف مهم زبان HTML عدم توانایی آن در ایجاد رابط کاربری است. به منظور ساخت رابط کاربری برای صفحات HTML ، زبان برنامه ‌نویسی CSS که مخفیف شده Cascade Style Sheets می باشد، ایجاد شده است. زبان CSS یک مکمل برای زبان HTML بوده و سعی دارد تا خلاء‌ ها و نقاط ضعف زبان HTML برطرف سازد.  علاقمندان به طراحی صفحات وب با استفاده از زبان برنامه نویسی CSS می توانند قالب و استایل صفحات وب را یک بار طراحی نموده و در دفعات دلخواهی از آن استفاده نمایند.

برای مثال، در نظر بگیرید که یک وب‌ سایت ۱۵۰ صفحه ‌ای را با استفاده از زبان HTML طراحی نموده اید. پس از مدتی قصد دارید تا در بعضی از خصوصیات سایت تغییرات جزئی را ایجاد نمائید مثلا بخواید پس زمینه کمی تیره تر باشد. انجام این موضوع در گفتار راحت به نظر می رسد اما در عمل کمی متفاوت تر خواهد بود. مطمئنا تغییر یک خط کد در تمام ۱۵۰ صفحه ای که دارید بسیار زمان بر و دشوار خواهد بود.

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

فهرست سرفصل های دوره آموزش CSS

بخش اول: معرفی و آشنایی با CSS

  • معرفی CSS
  • ساختار دستورات CSS
  • گزینشگر های CSS
  • فایل CSS خارجی

بخش دوم: پس زمینه

  • استایل دهی پس زمینه (background-image ، background-color و …)

بخش سوم: متن

  • استایل دهی متن

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

  • استایل دهی فونت

بخش پنجم: آشنایی با برخی مفاهیم و خاصیت ها در CSS

  • مفهوم Box
  • مفهوم طول و عرض
  • خاصیت border
  • خاصیت outline
  • خاصیت margin
  • خاصیت padding

بخش ششم: خاصیت float  ،display  ، position ، تراز بندی

  • طریقه نمایش عناصر
  • تنظیم موقعیت عناصر
  • شناور کردن عنصر
  • ترازبندی عناصر

بخش هفتم: آموزش لیست ها ، لینک ها ، جداول

بخش هشتم: گزینشگرها ، شبه کلاس ، شبه عناصر ، گزینش براساس صفت

  • شبه کلاس‌ها
  • شبه عناصر
  • گزینش براساس صفت

بخش نهم: گالری تصویر ، شفاف سازی تصویر

  • ساخت گالری تصاویر
  • نحوه شفاف کردن تصویر

بخش دهم: طراحی واکنشگرا (طراحی واکنشگرای با CSS

  • رسانه‌های مختلف
  • استفاده از میدان دید
  • شبکه بندی
  • مدیا کوئری در طراحی واکنش گرای CSS
  • فریم ورک ها در طراحی واکنش گرا

پیش نمایش بخش های از آموزش طراحی وب با CSS

پیش نمایش بخش اول (11 دقیقه و 48 ثانیه - 32.9 مگابایت)لینک دانلود

پیش نمایش بخش چهارم (13 دقیقه و 49 ثانیه - 45.4 مگابایت)لینک دانلود

پیش نمایش بخش نهم (10 دقیقه و 31 ثانیه - 32.1 مگابایت)لینک دانلود

خوشحال خواهیم شد اگر نظر خودتون رو درباره این مطلب ثبت کنید

خطا!دکمه ریفریش را بزنید
    مشاهده لیست کامل
    مشاهده لیست کامل