ساختمان کد در css و اجزای آن

پس از آشنایی با CSS در فصل ۱ حالا در این بخش ساختار کد‌های CSS در فصل ۲ رو یاد می‌گیرید و با انتخاب‌کننده آشنا می‌شوید. در حال حاضر نیازی به درک کامل نوع استایل اعمال‌شده نیست چرا که در بخش‌های بعدی به‌طور گسترده انواع استایل‌های عناصر رو آموزش خواهیم داد. پس فقط به بخش­‌های مورد استفاده در یک دستور CSS، نحوه جدا کردن ویزگی ها، جایگاه ویژگی ها و بطور کلی ساختار دستور دقت کنید.

ساختمان کلی یک کد css به صورت زیر هست:

کدهای css از دو قسمت اصلی تشکیل شدند:

1. انتخاب‌کننده یا selector
2. قسمتی که بین { … } قرار می­گیرد و تعیین کننده نحوه نمایش در صفحه است.

Selector

یک کد css همیشه از انتخاب‌کننده شروع می‌شود. درواقع وظیفه­‌ی انتخاب‌کننده اینه که خصوصیات موردنظر که بین { … } نوشته شده را به یک عنصر اختصاص بدهد. برای مثال در اینجا، کد css ای رو داریم که خصوصیات رو به هر عنصر h1 ای که درون صفحه هست مربوط می­‌شود. h1، یک انتخاب‌کننده هست.

h1{ … }

انتخاب‌کننده می­تونه اشکال متفاوتی داشته باشد، مثل عناصر، کلاس‌­ها، آیدی­‌ها، انتخاب‌کننده­‌های گروهی، انتخاب‌کننده­‌های فرزندی و خانوادگی و …. که در آینده شرح خواهیم داد.

قسمتی بین { … }

قسمتی که بین { … } قرار می­گیره، تعیین‌کننده­‌ی نحوه نمایش انتخاب‌کننده در صفحه ما است. خود این قسمت از دو بخش “ویژگی” و “مقدار” تشکیل شده و می­‌تونه ویژگی‌­های مختلف رو همراه با مقادیر مربوط به اون­‌ها به انتخاب‌کننده اختصاص بدهد. برای مثال:

h1 { color : red ; }

این کد بیان می­‌کنه، رنگ تمام متن­‌هایی که داخل h1ها هستند، به رنگ قرمز تغییر کند.

حالا سه نکته رو با هم بررسی کنیم:

1. ما می‌­تونیم به هرتعداد که می­خواهیم، به انتخاب‌کننده، ویژگی اختصاص بدیم:

   h1 { color: red ; font-size: 10px ; text-align: center ; }

2. عموما برای راحتی کدنویسی، بهتر هست که کدها رو در خطوط جداگانه بنویسیم، یعنی:

   h1 {
   color: red;
   font-size: 10px;
   text-align: center;
    }

3. یک عنصر، نمی‌­تونه ویژگی تکراری داشته باشه، برای مثال، کد زیر اشتباهه:

   div { color: blue; color: black; }

حالا چند مثال رو با هم بررسی کنیم:

p {
color: black;
background-color: blue;
}

تمام پاراگراف­‌ها در صفحه، به رنگ مشکی ظاهر بشن و رنگ پس‌­زمینه اون­‌ها، آبی باشه.

span {
font-family: IranSansWeb;
opacity: 0.8
}

عناصر span در صفحه، دارای فونت IranSansWeb و شفافیت 0.8 باشند.