درس ۶: مقدمات CSS

یادگیری مبانی CSS و استایل‌دهی صفحات وب

پیشرفت درس ۶ از ۲۰ درس

CSS چیست؟

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

مزایای استفاده از CSS:

  • جداسازی محتوا از ظاهر: HTML برای ساختار، CSS برای ظاهر
  • کنترل بهتر: کنترل دقیق‌تر بر ظاهر عناصر
  • سازگاری: پشتیبانی از انواع دستگاه‌ها و اندازه‌های صفحه
  • نگهداری آسان: تغییر ظاهر کل سایت با تغییر یک فایل
  • بارگذاری سریع‌تر: کاهش حجم کد HTML

روش‌های اضافه کردن CSS

سه روش اصلی برای اضافه کردن CSS به صفحات HTML وجود دارد:

۱. CSS درون‌خطی (Inline CSS):

استایل مستقیماً در ویژگی style عنصر HTML نوشته می‌شود:

<p style="color: red; font-size: 18px;">متن قرمز</p>

۲. CSS داخلی (Internal CSS):

استایل‌ها در تگ <style> داخل <head> نوشته می‌شوند:

<head>
  <style>
    p {
      color: red;
      font-size: 18px;
    }
  </style>
</head>

۳. CSS خارجی (External CSS):

استایل‌ها در فایل جداگانه نوشته و با تگ <link> به HTML متصل می‌شوند:

<head>
  <link rel="stylesheet" href="styles.css">
</head>

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

هر قانون CSS شامل دو بخش اصلی است: انتخابگر (Selector) و بلوک اعلان (Declaration Block):

ساختار کلی:

selector {
  property: value;
  property: value;
}

مثال:

h1 {
  color: blue;
  font-size: 24px;
  text-align: center;
}

اجزای قانون CSS:

  • انتخابگر (h1): مشخص می‌کند کدام عناصر استایل‌دهی شوند
  • ویژگی (color): نوع استایل که اعمال می‌شود
  • مقدار (blue): مقدار ویژگی
  • اعلان: ترکیب ویژگی و مقدار
  • بلوک اعلان: مجموعه اعلان‌ها داخل آکولاد

انواع انتخابگرها

انتخابگرها روش‌هایی برای انتخاب عناصر HTML هستند که می‌خواهیم استایل‌دهی کنیم:

انتخابگرهای اصلی:

  • انتخابگر عنصر: p { } - همه عناصر p
  • انتخابگر کلاس: .my-class { } - عناصر با class="my-class"
  • انتخابگر شناسه: #my-id { } - عنصر با id="my-id"
  • انتخابگر جهانی: * { } - همه عناصر
  • انتخابگر ویژگی: [type="text"] { } - عناصر با ویژگی خاص

انتخابگرهای ترکیبی:

  • فرزند مستقیم: div > p { }
  • نسل: div p { }
  • برادر مجاور: h1 + p { }
  • برادر عمومی: h1 ~ p { }

تمرین عملی: مقدمات CSS

در ادامه، مثالی از استفاده از CSS برای استایل‌دهی صفحه HTML را مشاهده می‌کنید. کد را ویرایش کرده و تأثیرات مختلف را ببینید:

اولویت‌بندی در CSS (Cascade)

وقتی چندین قانون CSS برای یک عنصر تعریف شود، مرورگر باید تصمیم بگیرد کدام قانون اعمال شود. این فرآیند Cascade نامیده می‌شود.

ترتیب اولویت (از بالا به پایین):

  1. !important: بالاترین اولویت
  2. Inline styles: style="..."
  3. IDs: #my-id
  4. Classes: .my-class
  5. Elements: p, div, h1

محاسبه Specificity:

هر انتخابگر امتیازی دارد:

  • Inline styles: 1000 امتیاز
  • IDs: 100 امتیاز
  • Classes, attributes, pseudo-classes: 10 امتیاز
  • Elements: 1 امتیاز

مثال:

/* Specificity: 1 */
p { color: red; }

/* Specificity: 10 */
.text { color: blue; }

/* Specificity: 100 */
#title { color: green; }

/* Specificity: 111 */
#title.text p { color: purple; }

واحدهای اندازه‌گیری در CSS

CSS واحدهای مختلفی برای تعریف اندازه‌ها ارائه می‌دهد:

واحدهای مطلق:

  • px (پیکسل): واحد پایه برای صفحه نمایش
  • pt (پوینت): 1/72 اینچ، برای چاپ
  • cm, mm, in: واحدهای فیزیکی

واحدهای نسبی:

  • em: نسبت به اندازه فونت عنصر والد
  • rem: نسبت به اندازه فونت root (html)
  • %: درصدی از عنصر والد
  • vw, vh: درصدی از عرض/ارتفاع viewport
  • vmin, vmax: کوچک‌ترین/بزرگ‌ترین بعد viewport

مثال‌ها:

/* واحدهای مختلف */
.box1 { width: 200px; }      /* 200 پیکسل */
.box2 { width: 50%; }        /* 50% عرض والد */
.box3 { font-size: 1.5em; }  /* 1.5 برابر فونت والد */
.box4 { height: 100vh; }     /* تمام ارتفاع صفحه */

رنگ‌ها در CSS

CSS روش‌های مختلفی برای تعریف رنگ ارائه می‌دهد:

روش‌های تعریف رنگ:

  • نام رنگ: red, blue, green
  • Hex: #ff0000, #00ff00
  • RGB: rgb(255, 0, 0)
  • RGBA: rgba(255, 0, 0, 0.5)
  • HSL: hsl(0, 100%, 50%)
  • HSLA: hsla(0, 100%, 50%, 0.5)

مثال‌ها:

/* روش‌های مختلف تعریف رنگ قرمز */
.red1 { color: red; }
.red2 { color: #ff0000; }
.red3 { color: rgb(255, 0, 0); }
.red4 { color: rgba(255, 0, 0, 1); }
.red5 { color: hsl(0, 100%, 50%); }

تمرین‌های عملی

برای تسلط بیشتر بر مطالب این درس، تمرین‌های زیر را انجام دهید:

تمرین ۱: استایل‌دهی متن

صفحه‌ای ایجاد کنید و با CSS رنگ، اندازه و فونت متن‌ها را تغییر دهید.

تمرین ۲: کار با کلاس‌ها

کلاس‌های مختلف تعریف کنید و آن‌ها را به عناصر مختلف اعمال کنید.

تمرین ۳: انتخابگرهای ترکیبی

از انتخابگرهای ترکیبی برای استایل‌دهی عناصر خاص استفاده کنید.

تمرین ۴: اولویت‌بندی

قوانین CSS متضاد تعریف کنید و ببینید کدام اعمال می‌شود.

نکات مهم و بهترین شیوه‌ها

بهترین شیوه‌ها:

  • از CSS خارجی استفاده کنید
  • نام‌های کلاس معنادار انتخاب کنید
  • از !important کمتر استفاده کنید
  • کد CSS را سازمان‌دهی کنید
  • از واحدهای نسبی استفاده کنید

نکات مهم:

  • CSS حساس به حروف کوچک و بزرگ نیست
  • فاصله‌ها در CSS اهمیت ندارند
  • نقطه‌ویرگول در انتهای هر اعلان ضروری است
  • کامنت‌ها با /* */ نوشته می‌شوند
  • ترتیب قوانین CSS مهم است

اشتباهات رایج:

  • فراموش کردن نقطه‌ویرگول
  • اشتباه در نام ویژگی‌ها
  • استفاده بیش از حد از !important
  • عدم سازمان‌دهی کد CSS
  • استفاده نادرست از انتخابگرها

ادامه یادگیری

در درس بعدی با مدل جعبه (Box Model) در CSS آشنا خواهید شد.

درس قبلی: HTML معنایی درس بعدی: مدل جعبه