آموزش جامع و پروژه محور Css – قسمت اول

CSS یا Cascade Style Sheets یک زبان برنامه نویسی است که برای حل مشکلات و نواقص Html بوجود آمده است. در واقع Css یک زبان نشانه گذاری است که به ما اجازه می دهد تا ساختار صفحات وب را از چیدمان المان ها گرفته تا تغییر رنگ بندی و فونت ها را تغییر دهیم. آخرین نسخه ای که تاکنون از Css منتشر شده است Css3 می باشد که اکثر توسعه دهندگان از همین ورژن استفاده می کنند.

در این دوره چه مباحثی آموزش داده شده است؟

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

در مورد قوانین CSS، ارث بری و اولویت آنها به صورت کامل صحبت می کنیم. مبحث بسیار مهم Box Model به صورت کامل توضیح داده می شود. با خصیصه های متعددی از جمله float، box-shadow، border-redius و … آشنا خواهید شد و در انتها، در فصل چهارم این آموزش از همه آن چه در فصل های قبلی یاد گرفته اید را برای ساخت دو صفحه واقعی وب استفاده خواهید کرد.

سرفصل های دوره آموزش جامع و پروژه محور Css

• CSS چیست؟
• اضافه کردن CSS به صفحه
• اضافه کردن فونت های Google به صفحه
• انتخاب گرهای CSS
• اولویت قوانین در CSS
• ارث بری در CSS
• انتخاب گر های ترکیبی در CSS
• مفهوم Box Model
• مثال های Box Model
• استایل پیش فرض مرورگر
• خصیصه های کوتاه شده
• خصیصه width  و height
• Box Sizing در CSS
• اضافه کردن header به صفحه
• خصیصه display
• خصیصه های text-decoration و vertical-align
• استایل دهی به لینک ها
• Pseudo class در CSS
• Pseudo class  و  Pseudo elements
• ترکیب کردن دو قانون در CSS
• Font weight  و Border
• افزودن CTA-bottom
• اضافه کردن عکس پس زمینه
• فارسی سازی صفحه
• کلاس های چندگانه و انتخابگرهای ترکیبی
• انتخابگر Class یا ID
• !important
• :not()
• پشتیبانی مرورگرها

انجام پروژه تمرینی

• اضافه کردن استایل به قسمت پلن ها
• استایل دهی به پلن پیشنهادی و خصیصه box-shadow
• خصیصه border-radius  و استایل دهی به جزئیات پلن
• استایل دهی به جزئیات پلن
• کار بر روی دکمه های پلن
• آشنایی با outline  دکمه ها
• اضافه کردن  بخش جدید در پایین پلن
• استایل دهی به بخش اضافه شده
• اضافه کردن footer  به صفحه
• اضافه کردن یک صفحه جدید
• استایل دهی به صفحه جدید
• آشنایی با خصیصه float
• اصلاح hover
• در مرکز قراردادن پلن ها
• فارسی سازی صفحات

حاصل دوره

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

لینک قسمت دوم آموزش

آموزش جامع و پروژه محور Css – قسمت دوم