آموزش سی اس اس – طراحی وب سایت با CSS – مقدماتی

CSS چیست؟ 

CSS مخفف Cascading Style Sheets و یک زبان برنامه‌نویسی است که برای توصیف نحوه نمایش و طراحی صفحات وب استفاده می‌شود. این زبان مشخصات ظاهری اجزای صفحات وب مانند فونت، رنگ، اندازه، فاصله، نوع ترکیب‌ها، انیمیشن و… را تعیین می‌کند. بدون استفاده از CSS، صفحات وب به صورت خام و زشتی نمایش داده می‌شوند و برای ایجاد طرح بندی و ظاهر جذاب صفحات وب، CSS ابزاری بسیار قدرتمند است.

اهمیت یادگیری CSS چیست؟

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

زبان برنامه‌نویسی HTML به خوبی می‌‌تواند اجزای صفحه را ایجاد کند اما ضعف اصلی زبان HTML عدم توانایی ایجاد رابط کاربری است. برای ایجاد رابط کاربری برای صفحات HTML زبان برنامه‌نویسی CSS (Cascade Style Sheets) ایجاد گردید. این زبان مکملی برای HTML است و سعی در پر کردن خلاها و برطرف کردن نقاط ضعف زبان HTML دارد. CSS شما را قادر می‌‌سازد تا قالب و استایل صفحات وب‌سایت خود را یک‌ بار طراحی کرده و به دفعات استفاده کنید. برای واضح‌‌تر شدن ماجرا، یک مثال را بیان کنیم: در نظر بگیرید که وب‌سایتی با ۱۰۰ صفحه‌ را به زبان HTML طراحی کرده‌اید، حال بعد از گذشت مدتی تصمیم دارید تا برخی خصوصیات را کمی تغییر دهید مثلا رنگ پس‌زمینه را کمی تیره‌‌تر کنید. گفتن این حرف بسیار راحت است اما در عمل کمی بحث فرق می‌کند.

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

در این آموزش ببین چه چیزی یاد می‌گیریم؟ 

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

سرفصل‌ها

• فصل یکم: شروع کار با CSS
  • شروع کار با CSS و مقدمات آن
  • CSS را کجا و چطور بنویسیم؟
• فصل دوم: انتخابگرها (Selectors)
  • انتخابگرهای ساده
  • ترکیب انتخابگرها
• فصل سوم: رنگ‌ها در CSS
  • آشنایی با نام رنگ‌ها و سیستم رنگ‌دهی RGB
  • آشنایی با سایر سیستم‌های رنگ‌دهی
• فصل چهارم: پس‌زمینه و تنظیمات آن
  • پس‌زمینه در CSS
  • تنظیمات دقیق پس‌زمینه در CSS
• فصل پنجم: جعبه‌ها، کادرها و حاشیه‌ها
  • کادرها
  • حاشیه‌ها
  • سايزبندی عناصر، جعبه‌ها و تنظيمات بيشتر حاشيه‌ها
• فصل ششم: تنظيمات متن و بلاک‌های متنی
  • دستورات مربوط به تنظيم و تزئين Text و بلاک‌های متنی
  • نحوه نمايش لينک‌ها و تنظيمات آن‌ها
• فصل هفتم: استفاده از فونت‌ها در CSS
  • آشنايی با خانواده فونت‌ها در CSS
  • تغییر ظاهر فونت
  • فونت‌های گوگل
  • نمادها و آیکن‌های مبتنی بر فونت
• فصل هشتم: نمايش بلاک‌های متنی در صفحه
  • تعيين چينش عناصر و المان‌های صفحه
  • کنترل سرريزشدن بلاک‌های متنی و کار با خصوصيت Float
• فصل نهم: ليست‌ها و جداول در CSS
  • نحوه نمايش ليست‌ها
  • تنظيمات جداول
• فصل دهم: انتخابگرها، ترکيب‌کننده‌ها و جلوه‌های دوبعدی و سه‌بعدی
  • انتخابگرها و ترکيب‌کننده‌ها
  • جلوه‌های حرکتی در صفحه وب (خصوصیت Transition)
• فصل یازدهم: پویانمایی، طراحی و چینش
  • ایجاد پویانمایی در CSS
  • طراحی واکنشگرا (Media Query)
  • چینش صفحه با FlexBox

مفید برای

• طراحی سایت

محتوای این آموزش

۴ ساعت آموزش ویدئویی

فایل برنامه‌ها و پروژه‌ها

مدرس

محمد عبداللهی

دانشجوی دکتری تخصصی مهندسی کامپیوتر- نرم‌افزار و الگوریتم

مهندس محمد عبداللهی، دانشجوی دکتری تخصصی مهندسی کامپیوتر – نرم‌‌افزار و الگوریتم از دانشگاه شهید بهشتی تهران، به عنوان کارشناس فناوری اطلاعات معاونت فناوری‌های مالیاتی در سازمان امور مالیاتی کشور مشغول به فعالیت هستند. ایشان همچنین در زمینه پروژه‌های معماری سازمانی فعالیت دارند.

پیش‌ نیاز

آموزش طراحی وب با HTML – مقدماتی

نرم‌افزارهای مرتبط با آموزش

Visual Studio Code 1.28.2 – آموزش وابستگی به این نرم‌افزار ندارد.

98000 تومان – خرید نهایی کردن خرید مورد به سبد خرید اضافه شد