CSS (Cascading Style Sheets) یکی از اصلی‌ترین فناوری‌ها در طراحی وب است که به شما امکان می‌دهد تا ظاهر و طراحی وب‌سایت‌ها را کنترل و بهبود بخشید. این دوره جامع، شما را از مبانی CSS به سمت مفاهیم پیشرفته‌تر هدایت می‌کند، به طوری که بتوانید وب‌سایت‌هایی زیبا، مدرن و واکنش‌گرا بسازید.

در این دوره، شما با مبانی CSS آشنا می‌شوید، از جمله انتخابگرها، رنگ‌ها، فونت‌ها و واحدهای اندازه‌گیری. سپس به سراغ مفاهیم پیشرفته‌تری مانند مدل جعبه‌ای (Box Model)، موقعیت‌دهی عناصر (Positioning)، Flexbox، Grid، و ایجاد انیمیشن‌ها می‌رویم. در نهایت، شما قادر خواهید بود وب‌سایت‌هایی بسازید که در هر دستگاهی، از موبایل تا دسکتاپ، به زیبایی و بدون نقص نمایش داده شوند.

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

آشنایی با HTML

تمایل به یادگیری و توسعه مهارت‌های طراحی وب و کار با CSS

علاقه به طراحی وب

درک اولیه از نحوه کارکرد اینترنت و مرورگرها

آشنایی با مفاهیم پایه‌ای اینترنت

تمایل به ایجاد طرح‌های زیبا و هنری در صفحات وب

علاقه به هنر و زیبایی‌شناسی

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

از مبتدی تا حرفه‌ای؛ تسلط کامل بر CSS

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

آموزش جامع CSS - طراحی زیبا و حرفه‌ای صفحات وب

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

مقدمه

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

style tag

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

class

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

font size and family

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

importing fonts from google

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

Width Property

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

borders

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

background

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

Margin and Padding

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

Attribute Type Selector

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

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

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

inheritance

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

Hexadecimal and RGB Color Codes

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

variables

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

Browser Fallbacks

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

Variable Inheritance

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

Width Percentage and Text Align

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

Text Properties

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

box shadow

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

Width ercentage

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

text transform

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

Heading Font Sizes and Backgrounds

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

Line Height

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

hover

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

Static and Relative Positions

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

Absolute Position

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

Fixed and Sticky Position

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

Float

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

Float (Example)

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

Float (Example-2)

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

Z Index

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

Centering Using Auto Margin

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

Linear Gradient

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

Repeating Linear Gradient

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

Background Image Using URL

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