در حال بارگذاری...

آموزش کامل CSS

از مفاهیم پایه تا تکنیک‌های پیشرفته، همه چیز را درباره زبان CSS بیاموزید.

CSS چیست؟

CSS مخفف Cascading Style Sheets است و برای استایل‌دهی به صفحات HTML استفاده می‌شود. CSS به شما امکان می‌دهد تا رنگ‌ها، فونت‌ها، فاصله‌ها، چیدمان و ظاهر کلی یک صفحه وب را کنترل کنید.

چرا CSS مهم است؟
بدون CSS، تمام صفحات وب فقط متن‌های ساده و بدون رنگ و زیبایی بودند. CSS به وب‌سایت‌ها زندگی، زیبایی و حس حرفه‌ای می‌دهد.

CSS با استفاده از سلکتورها (Selectors) و ویژگی‌ها (Properties) کار می‌کند. شما ابتدا یک عنصر را انتخاب می‌کنید و سپس ویژگی‌هایی مانند رنگ، اندازه و فاصله را به آن اعمال می‌کنید.

ساختار یک قانون CSS

هر قانون CSS از سه بخش اصلی تشکیل شده است:

  • سلکتور (Selector) — عنصری که می‌خواهید استایل دهید
  • ویژگی (Property) — ویژگی که می‌خواهید تغییر دهید
  • مقدار (Value) — مقدار جدید برای آن ویژگی
ساختار پایه CSS 
h1 {
    color: #1572B6;
    font-size: 32px;
    text-align: center;
}

سلکتورهای پرکاربرد CSS

در اینجا مهم‌ترین سلکتورهای CSS را به همراه توضیح مختصر و مثال آورده‌ام:

سلکتور توضیح مثال
* همه عناصر * { margin: 0; }
.class عناصر با کلاس مشخص .header { color: blue; }
#id عنصر با شناسه مشخص #main { width: 100%; }
element عناصر با تگ مشخص p { font-size: 16px; }
element.class عناصر با تگ و کلاس مشخص p.text { color: gray; }
, (کاما) گروه‌بندی چند سلکتور h1, h2, h3 { color: red; }
(space) عناصر فرزند div p { color: blue; }
> فرزند مستقیم div > p { color: green; }

ویژگی‌های پرکاربرد CSS

در اینجا مهم‌ترین ویژگی‌های CSS را به همراه توضیح مختصر آورده‌ام:

  • color — رنگ متن
  • background-color — رنگ پس‌زمینه
  • font-size — اندازه فونت
  • font-weight — ضخامت فونت
  • text-align — تراز متن
  • padding — فاصله داخلی
  • margin — فاصله خارجی
  • border — حاشیه
  • width — عرض
  • height — ارتفاع
  • display — نوع نمایش
  • position — موقعیت

سوالات متداول CSS

آیا CSS یک زبان برنامه‌نویسی است؟
خیر، CSS یک زبان استایل‌دهی است و برای زیباسازی صفحات استفاده می‌شود، نه برای منطق برنامه‌نویسی.
تفاوت CSS و CSS3 چیست؟
CSS3 نسخه جدیدتر CSS است که امکاناتی مانند Flexbox، Grid، انیمیشن‌ها و ترانزیشن‌ها را معرفی کرده است.
آیا برای یادگیری CSS نیاز به دانش قبلی دارم؟
بهتر است با HTML آشنا باشید، اما CSS را می‌توانید همزمان با HTML یاد بگیرید.
چقدر زمان برای یادگیری CSS نیاز است؟
با مطالعه منظم، می‌توانید مفاهیم پایه CSS را در حدود ۲ تا ۳ هفته یاد بگیرید.