جلسه ۰۵ – selector در CSS

در جلسه­‌ی گذشته، ساختاربندی و اجزای تشکیل­‌دهنده‌­ی کد CSS رو خلاصه وار معرفی کردیم.

در این جلسه، اون­‌ها رو به صورت مفصل بررسی می‌­کنیم و یاد می‌گیریم!

منطق کدهای CSS

قبل از هرچیزی، باید منطق استفاده از دستورات CSS رو متوجه بشیم. منطقش بسیار سادست. با یک سوال بیاین شروع کنیم:

چطور یک انسان رو توصیف می‌کنیم؟

خب مثلا یک دوستی مثل بهرام، بینی قشنگی داره! چطور این موضوع رو توصیف می‌کنیم؟ مسلما با جمله ی زیر:

بهرام، بینی قشنگی داره

طبق فرم کلی‌ای که برای ساختار کدهای CSS گفته شد، می‌تونیم جمله ی بالا رو به این فرم بنویسیم:

Bahram{ nose: beautiful; }

در اینجا، کلمه “Bahram” یک انتخابگر یا selector هست. چون میگه ویژگی ها متعلق به چه کسی یا چیزی هستن.

کلمه “nose” یک ویژگی یا property از بهرام هست. یعنی شکل بینی بهرام.

و در نهایت کلمه “beautiful” یک مقدار یا value برای بینی بهرام هست. مقداری که میتونه کلمات زیبا، نازیبا و غیره رو در به داشته باشه.

در CSS هم دقیقا با اینطور منطقی، چه بسا ساده تر، سر و کار داریم! مراحل کار به شکل زیره:

1. یک عنصر از صفحه رو انتخاب کن.
2. ویژگی عنصر رو (قیافه اون رو! ) با مقادیر مختلف تغییر بده.

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

h1{ … }

حالا انتخابگر ها، فقط نام عناصر نیستن، بلکه می‌تونن انواع مختلفی داشته باشن.

ویژگی ها و چهره ی یک عنصر

حالا میون {…} چی باید قرار بدیم؟ چطور چهره ی عنصر رو مشخص کنیم؟ بسیار سادست، ما در CSS ویژگی ها و به تناسب با اون ویژگی ها، مقادیر مختلفی داریم. برای مثال، میخوایم رنگ عنصر h1 که انتخاب کردیم، قرمز باشه:

h1 { color : red ; }

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

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

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

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

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

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

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

div { color: blue; color: black; }

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

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

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

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

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

انواع selector در CSS

• عناصر
• کلاس ها
• آیدی ها
• انتخابگر کلی
• انتخاب‌کننده‌های گروهی ( در جلسات آینده یاد خواهیم گرفت )
• انتخاب‌کننده‌های پیشرفته ( در جلسات آینده یاد خواهیم گرفت )

عناصر

تا اینجا یاد گرفتیم که می­‌تونیم نام خود عناصر رو به جای selector یا انتخابگر قرار داده و توسط دستورات اون­‌ها رو تغییر بدیم. مانند:

h1 {
color: red ;
}

که باعث می­شه متن درون عنصر h1 به رنگ قرمز باشه.

بحث جدیدی که در مورد نه تنها عناصر، بلکه به­‌طور کلی در مورد انتخابگر­‌ها باید یاد بگیریم، بحث روابط ” فرزندی و خانوادگی ” هست!

برای یادگیری این بحث، نیازمند تسلط کافی و مناسب در HTML هستیم. همون­طور که می‌­دونیم، کدهای HTML با هم دارای رابطه فرزند و خانواده هستن. نکته این هست:

” اگر به عنصری،یک سری دستورات CSS اعمال شود، به فرزندان آن عنصر هم همان دستورات CSS اعمال می­‌شود “

کد زیر رو در نظر بگیرید.

<div>
<p> mizfa css </p>
<p> mizfa html </p>
<p> mizfa javascript </p>
</div>

همونطور که مشاهده می­شه، عناصر p، فرزند عنصر div به حساب میان. فرض کنیم کد CSS ما به شکل زیر باشه:

div {
color: blue;
}

نتیجه به فرم زیر خواهد بود:

از تکنیک فرزند خانواده در CSS، در آینده به وفور استفاده می‌کنید.

حالا سوالی که پیش میاد این هست: اگه ما ۵ پاراگراف داشته باشیم و فقط بخوایم به پاراگراف اول و سوم، رنگ قرمز رو اضافه کنیم، از چه کدی باید استفاده کنیم؟

این مشکل، با کلاس‌­ها رفع می­شه!

کلاس ها

کلاس­ ها زمانی به کار میرن که بخوایم به عناصر معدودی، دستورات CSS رو مرتبط کنیم. روش استفاده از کلاس ها به ترتیب زیر هست:

• در فایل HTML یک کلاس با نام دلخواه، برای عناصر موردنظر، تعریف می­‌کنیم. (برای اطلاعات بیشتر در رابطه با کلاس ها می توانید مقاله آشنایی با class ها میزفا را بخوانید.)
• در فایل CSS، قبل از نام کلاس یک نقطه ” . ” گذاشته و خصوصیات رو برای اون می­‌نویسیم.

برای مثال:

کد در فایل HTML

<p class="class-name"> mizfa css classes </p>

کد در فایل CSS

.class-name{
color: yellow;
}

خصوصیات ذکر شده در کد CSS تنها به عناصری اعمال می­‌شن که کلاس “class-name” رو دارا هستن.

یه مثال دیگه:

فایل HTML:

<ul>
<li class=”special”>Link1 </li>
<li>Link2 </li>
<li class=”special”>Link3 </li>
<li>Link4 </li>
<li class=”special”>Link5 </li>
</ul>

فایل CSS:

.special {
background-color: yellow ;
}

نتیجه:

آیدی­ ها

نحوه­‌ی استفاده از آیدی­‌ها در HTML و CSS به فرم زیر هست:

• در فایل HTML، برای عنصر موردنظر یک آیدی دلخواه انتخاب می­ کنیم.
• در فایل CSS، قبل از نام آیدی، هشتگ ( # ) قرار داده و ویژگی­‌ها رو برای عنصر مورد نظر تعریف می­‌کنیم.

مثال:

کد HTML:

<h1 id=” id-name “>Mizfa Id tutorial</h1>

کد CSS:

#id-name{
color: yellow;
}

تقریبا می­شه گفت که آیدی­‌ها شباهت بسیاری به کلاس­‌ها دارن. اما تفاوت­‌های مهمی هم دارن که اون هارو در جلسه آینده بررسی می‌کنیم.

انتخابگر کلی

انتخابگر کلی، انتخابگری هست که می‌تونه تمام عناصر موجود در صفحه رو با یک ویژگی معین تغییر بده. این انتخابگر با علامت * مشخص می‌شه.

به طور مثال در کد زیر، ما می‌گیم که فونت تمام نوشته های درون صفحه، باید b nazanin باشه:

*{
 font-family: b nazanin;
 
}

جمع بندی

در این مقاله به صورت کامل با انتخابگر ها آشنا شدیم، در جلسه آینده در رابطه با کلاس ها و آی دی ها و نحوه معرفی آن ها در CSS آشنا خواهید شد.

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

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