درس دوم : نحو (Syntax) در CSS

نحو (Syntax) در CSS

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

Selector: به عنصر HTML اشاره می‌کند که می‌خواهید به آن استایل بدهید (مثلاً h1).
Declaration Block: حاوی یک یا چند اعلام است که با علامت سیمیکولون ; از هم جدا شده‌اند.
Property: نام ویژگی استایلی است که می‌خواهید تغییر دهید (مثل color).
Value: مقداری است که به ویژگی اختصاص می‌دهید (مثل blue).

در این مثال، تمام عناصر <p> مرکزچین شده و رنگ متن آن‌ها قرمز خواهد بود:

p {
  color: red;
  text-align: center;
}

خروجی کد بالا:

این پاراگراف تحت تاثیر CSS قرار گرفته است.

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

انتخاب‌گرهای ساده: انتخاب بر اساس نام، id یا کلاس.
انتخاب‌گرهای ترکیبی (Combinators): انتخاب بر اساس رابطه خاص بین عناصر.
انتخاب‌گرهای شبه‌کلاس (Pseudo-class): انتخاب بر اساس وضعیت یک عنصر (مثلاً وقتی موس روی آن است).
انتخاب‌گرهای شبه‌عنصر (Pseudo-elements): انتخاب بخشی از یک عنصر (مثلاً حرف اول یک پاراگراف).
انتخاب‌گرهای ویژگی (Attribute): انتخاب بر اساس یک ویژگی یا مقدار ویژگی خاص.

انتخاب‌گر id از ویژگی id یک عنصر HTML برای انتخاب یک عنصر مشخص استفاده می‌کند. id در یک صفحه باید منحصربه‌فرد باشد.

#para1 {
  text-align: center;
  color: blue;
}

خروجی انتخاب‌گر id:

متنی که با id=”para1″ استایل گرفته است.

انتخاب‌گر کلاس، عناصر HTML با یک کلاس مشخص را انتخاب می‌کند. برخلاف id، چند عنصر می‌توانند کلاس مشابه داشته باشند.

.center {
  text-align: center;
  color: green;
}

خروجی انتخاب‌گر class:

پاراگراف وسط‌چین سبز (هر دو از کلاس center استفاده کرده‌اند).

انتخاب‌گر عمومی (Universal Selector) تمام عناصر HTML موجود در صفحه را انتخاب می‌کند.

* {
  text-align: center;
  color: blue;
}

اگر چندین عنصر استایل یکسانی دارند، می‌توانید آن‌ها را با کاما (,) جدا کنید تا کد کوتاه‌تری داشته باشید:

h1, h2, p {
  text-align: center;
  color: red;
}

پایان فصل دوم

در درس بعدی یاد می‌گیریم «چگونه CSS را به پروژه اضافه کنیم» (Ineternal, External & Inline).