جلسه ۰۴- ساختمان کد در css و اجزای آن

پس از آشنایی با 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 باشن.

نتیجه­‌گیری

در این مقاله یاد گرفتیم که:

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

امیدوارم این آموزش css براتون مفید بوده باشه. اگر سوالی، مشکلی، نکته، پیشنهاد، انتقادی و حتی درد و دلی داشتید، خیلی خیلی خوشحال میشیم که در بخش دیدگاه‌های پایگاه دانش میزفا ارسال کنید.

مدیر محتوا: علی اسمعیلی