در اولین قسمت از آموزش CSS، با مقدماتی از زبان CSS آشنا می شیم، مثلاً این که چرا به این زبان احتیاج داریم و CSS چطور می تونه در صفحاتی که با استفاده از زبان HTML ساختیم، تغییراتی ایجاد کنه. همچنین با ساده ترین روش اضافه کردن کد CSS به کد HTML هم آشنا می شیم که به اون روش inline گفته می شه.

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

برای این که کار برنامه نویس در نوشتن کد CSS راحت تر باشه، مفهومی به نام کلاس (Class) معرفی می شه که باعث می شه مجبور نباشیم برای هر عنصر به طور جداگانه کد CSS بنویسیم و استایل (Style) اضافه کنیم. به این ترتیب، حجم کد هم به طور قابل توجهی کاهش پیدا می کنه.

یکی از پر استفاده ترین کاربردهای CSS، تغییر دادن اندازه (Font Size) و خانواده فونت (Font Family) در متن های صفحاته که تاثیر زیادی هم در زیبایی وب سایت داره. بعد از تماشای این قسمت از آموزش زبان CSS، توانایی این رو پیدا می کنین که برای بخش های مختلف صفحه، فونت های متفاوت با اندازه های دلخواه و مختلفی رو در نظر بگیرین.

در ادامه قسمت قبل از آموزش زبان CSS که به تخصیص دادن فونت (Font) به متون مختلف وب سایت پرداخته شد، در این قسمت یاد می گیریم که چطور می تونیم فونت های جدیدی رو به وب سایت اضافه کنیم تا مجبور نباشیم همیشه از فونت های تکراری استفاده کنیم!

طبق چیزی که در آموزش HTML دیدیم، ما کنترلی بر روی اندازه عناصر در کد HTML نداریم. اما در کد CSS می تونیم عرض عناصر رو به دلخواه تغییر بدیم. در این قسمت از آموزش CSS، یاد می گیریم که چطور می تونیم برای هر عنصر، مقدار عرض یا Width رو به دلخواه تغییر بدیم.

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

عناصر و یا بخش های مختلف صفحه که در کد HTML مشخص شده اند، می تونن رنگ پس زمینه داشته باشن. برای اضافه کردن این رنگ به صفحه یا عنصر مورد نظر، احتیاج به ویژگی Background Color یا همون رنگ پس زمینه داریم که در این قسمت از آموزش زبان CSS با اون آشنا می شیم.

برای یادگیری این قسمت از آموزش زبان CSS، لازمه که با ویژگی Border یا کادر که کمی پیش تر معرفی کردیم، آشنایی داشته باشین. در این قسمت یاد می گیریم که علاوه بر کادر، دو ویژگی دیگه به نام Margin و Padding وجود دارن که فاصله عناصر با همدیگه و حتی با کادر (Border) خودشون رو تعیین می کنن. یادگیری این قسمت بسیار مهمه پس از دستش ندید!

علاوه بر این که می تونیم با استفاده از تعریف کلاس (Class) و یا استفاده از شناسه (ID)، عنصری رو انتخاب کنیم و برای اون کد CSS بنویسیم، روش دیگه ای هم وجود داره که با استفاده از نوع ویژگی (Attribute Type) میشه عناصر رو انتخاب کرد و کد CSS به اون اضافه کرد که در این قسمت از آموزش زبان CSS با اون آشنا می شیم و متوجه می شیم که کجا کاربرد داره.

در قسمت تعیین اندازه فونت (Font Size) دیدیم که می تونیم با استفاده از مقادیر مطلق مثل پیکسل (Pixel)، اندازه فونت رو در زبان CSS تعیین کنیم. اما نوع دیگری از تعیین اندازه فونت وجود داره که می تونیم از مقادیر نسبی استفاده کنیم. در این قسمت از آموزش زبان CSS، با یکی از راه های تعیین نسبی اندازه فونت که به نام مقدار EM شناخته می شه، آشنا می شیم.

در قسمت قبل از آموزش زبان CSS، یاد گرفتیم که چطور می تونیم از مقدار نسبی EM برای تعیین اندازه فونت در زبان CSS استفاده کنیم که بر خلاف استفاده از پیکسل (Pixel)، احتیاجی به اندازه مطلق نداره. در این قسمت با نوع دیگری از این مقادیر نسبی به نام REM آشنا می شیم.

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

تا به جای این آموزش های زبان CSS، در خیلی از ویژگی ها از رنگ استفاده کنیم و برای تعیین رنگ، تنها از نام رنگ استفاده می کردیم. در این روش، تنها رنگ های محدودی داریم که می تونیم از اون ها استفاده کنیم. برای این که تعداد رنگ های مورد استفاده مون رو چندین برابر کنیم، می تونیم از کدهای RGB و یا هگزادسیمال (Hexadecimal) استفاده کنیم که در این قسمت از آموزش زبان CSS، با اون ها آشنا می شیم.

شاید به نظرتون عجیب باشه، اما در زبان CSS هم امکان تعریف کردن متغیر (Variable) وجود داره! برای این که مجبور نباشین یک اندازه یا کد یک رنگ رو همیشه به خاطر داشته باشین و بنویسین، می تونین یک بار به عنوان متغیر اون رو تعریف کنین و همیشه ازش استفاده کنین! در این قسمت از آموزش CSS با نحوه انجام این کار آشنا می شیم.

گاهی اوقات پیش میاد که مرورگر نمی تونه متوجه کد CSS ما بشه. برای مثال، در مرورگر اینترنت اکسپلورر (Internet Explorer)، امکان استفاده از متغیرها که در قسمت قبل از آموزش زبان CSS دیدیم، وجود نداره. در این ویدیو به این می پردازیم که در چنین شرایطی، چه اتفاقی می افته و برای رفع این مشکل چه کاری می تونیم انجام بدیم.

برای یادگیری این قسمت از آموزش زبان CSS، سعی کنین حتماً قسمت های مربوط به ارث بری (Inheritance) و متغیرها (Variables) رو به خوبی یاد بگیرین؛ چون در این قسمت به قوانین ارث بری در متغیرها پرداخته می شه.

همونطور که در قسمت آموزش تعیین عرض عناصر دیدیم، در CSS می تونیم با استفاده از ویژگی Width، عرض عناصر رو به اندازه دلخواه تغییر بدیم. در این قسمت از آموزش زبان CSS یاد می گیریم که این اندازه می تونه نسبی باشه و استفاده از درصد هم ممکنه. در نتیجه می تونیم دو بخش از صفحه رو طوری کنار هم قرار بدیم که هر کدوم برای مثال نصف صفحه رو اشغال کنن. هم چنین یاد می گیریم که چطور می تونیم نوشته ها رو با استفاده از ویژگی Text Align، راست چین، وسط چین و یا چپ چین کنیم.

تعیین فونت و Align (راست چین، وسط چین و چپ چین)، تنها ویژگی هایی از متن نیستن که توسط ما قابل تغییرن! ویژگی های متعدد دیگه ای هم برای متن وجود دارن که در این قسمت از آموزش زبان CSS با اون ها آشنا می شیم.

همونطور که در قسمت های قبل دیدیم، در زبان CSS این امکان رو داریم که دور عناصر، یک کادر تعیین کنیم. ویژگی دیگه ای در CSS وجود داره به نام Box Shadow که با استفاده از اون می تونیم به این کادر، سایه بدیم و ظاهر اون رو زیباتر کنیم. در این قسمت با این ویژگی و جزئیاتش به طور کامل آشنا می شیم.

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

در این قسمت از آموزش CSS، علاوه بر ذکر چند نکته درباره آموزش قبل، به ویژگی Text Transform می پردازیم و این که چطور می تونه به ما کمک کنه در متن ها تغییراتی ایجاد کنیم.

در آموزش HTML، با تیترها (Headings) آشنا شدیم که شامل تگ های h1 تا h6 می شدن. حالا در آموزش زبان CSS، یاد می گیریم که می تونیم اندازه این تیترها و میزان پررنگ بودن اون ها (Bold) رو به دلخواه تعیین کنیم و حتی رنگ پس زمینه اون ها رو تغییر بدیم.

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

حتما تا به حال این ویژگی رو در وب سایت ها دیدین که زمانی که نشانه گر ماوس روی قسمت خاصی از صفحه که میره، اتفاق خاصی میفته یا رنگ یک متن یا دکمه تغییر می کنه. این ویژگی با استفاده از Hover قابل انجامه که در این قسمت از آموزش زبان CSS با اون آشنا می شیم.

در این قسمت از آموزش CSS، شروع به معرفی یکی از مهم ترین مباحث در CSS می پردازیم و اون هم نحوه قرار گرفتن عناصر صفحه در کنار هم هست. با ویژگی Position آشنا می شیم که مقادیر مختلفی می تونه داشته باشه. در این ویدیو ، دو مقدار Static و Relative رو معرفی می کنیم.

در ادامه قسمت قبل، به مبحث چگونگی قرارگیری عناصر در کنار هم می پردازیم. در این قسمت از آموزش CSS، با مقدار Absolute برای ویژگی Position آشنا می شیم و متوجه می شیم که چطور می تونه نحوه جاگیری عناصر رو تغییر بده.

در ادامه دو قسمت قبل، به نحوه قرارگیری عناصر در کنار همدیگه می پردازیم. در این قسمت از آموزش CSS با مقدار Fixed و Sticky برای ویژگی Position آشنا می شیم و متوجه می شیم که این مقادیر چطور می تونن چیدمان عناصر در کنار همدیگه رو تغییر بدن.

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

در این قسمت از آموزش زبان CSS، با استفاده از یک مثال، به طور دقیق تر با ویژگی Float آشنا می شیم و نحوه کار با اون رو به صورت عملی یاد می گیریم.

در ادامه ویدیوی قبل از آموزش زبان CSS، به ذکر مثال دیگه ای از ویژگی Float می پردازیم و کار با اون رو به طور دقیق تر و عملی تر یاد می گیریم.

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

در قسمت های قبل، راه هایی برای منتقل کردن عناصر به وسط صفحه معرفی کردیم. در این قسمت از آموزش CSS یاد می گیریم که با استفاده از قرار دادن مقدار Auto برای ویژگی Margin، عناصر رو در وسط صفحه قرار بدیم.

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

در این قسمت از آموزش زبان CSS یاد می گیریم که چطور می تونیم یک الگوی Gradient خطی (Linear Gradient) رو تکرار کنیم تا کل عنصر رو پر کنه و الگوهای جدیدی خلق بشه.

در این قسمت، نحوه قرار دادن یک عکس به عنوان پس زمینه عناصر رو یاد می گیریم. این کار با استفاده از آدرس عکس در اینترنت (URL) هم امکان پذیره. این کار خیلی به ما کمک می کنه که صفحاتمون از یکنواختی در بیان، پس این قسمت از آموزش CSS رو از دست ندین!

سخن **پایانی** در مورد دوره css