درس اول : مقدمه

آموزش CSS: مقدمه (Introduction)

CSS مخفف کلمه Cascading Style Sheets به معنی «برگه‌های استایل آبشاری» است.

CSS چیست؟

  • CSS زبانی است که برای استایل‌دهی به یک وب‌سایت استفاده می‌شود.
  • CSS توصیف می‌کند که عناصر HTML چگونه باید روی صفحه نمایش، کاغذ یا در سایر رسانه‌ها نمایش داده شوند.
  • CSS کارهای زیادی را ذخیره می‌کند؛ به طوری که می‌تواند چیدمان چندین صفحه وب را به طور همزمان کنترل کند.
  • استایل‌دهی‌های خارجی (External stylesheets) در فایل‌های CSS ذخیره می‌شوند.

چرا از CSS استفاده می‌کنیم؟

CSS برای تعریف استایل‌های وب‌سایت شما، از جمله طراحی، چیدمان (Layout) و تغییرات نمایش برای دستگاه‌ها و اندازه‌های مختلف صفحه نمایش استفاده می‌شود.

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

یک مثال عملی (CSS Demo)

در اینجا می‌بینید که یک صفحه HTML واحد، با استایل‌های مختلف CSS چقدر متفاوت دیده می‌شود:

استایل ۱ (آبی)

تیتر آبی

یک متن ساده با تم آبی

استایل ۲ (قرمز)

تیتر قرمز

یک متن مورب با تم قرمز


CSS یک مشکل بزرگ را حل کرد!

HTML هرگز برای داشتن تگ‌هایی جهت فرمت‌بندی صفحه وب در نظر گرفته نشده بود. تگ‌هایی مثل <font> و ویژگی‌های رنگی در نسخه HTML 3.2 به آن اضافه شدند که باعث کابوس شدن طراحی وب برای توسعه‌دهندگان شد.

کنسرسیوم جهانی وب (W3C)، زبان CSS را ایجاد کرد تا استایل‌دهی را از تگ‌های ساختاری HTML جدا کند.

صرفه‌جویی در زمان با CSS

تعاریف استایل‌ها معمولاً در فایل‌های خارجی با پسوند .css ذخیره می‌شوند. با یک فایل استایل خارجی، شما می‌توانید ظاهر کل یک وب‌سایت را تنها با تغییر دادن یک فایل عوض کنید!

آماده یادگیری بخش بعدی هستید؟

در درس بعدی به بررسی «نحو و انتخاب‌گرها» می‌پردازیم.