جلسه ۰۵ – 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

از تکنیک فرزند خانواده در 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 آشنا خواهید شد.

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

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

فیلم آموزشی asp.net core 2

نوید معدن نژاد
یک عدد دانشجوی مهندسی مکانیک، که راه رسیدن به رویاهاش رو تو علوم کامپیوتری پیدا می‌کنه و سعی می‌کنه هیچوقت از یادگیری دست نکشه!
آموزش CSS
پایین سرفصل های CSS هست، روی منم کلیک کنی میتونی ببینی.

فیلم آموزشی asp.net core 2

12 نظر

12 پاسخ

  1. تو قسمت style وقتی مینویسم
    فقط به اولی تغییرات اعمال میشه.
    و به خط های بعدی که class دادم اعمال نمیشه
    علت چیه ؟

  2. سلام . با موبایل انجام میدم.
    رنگ .ma عوض میشه
    اما رنگ .ba عوض نمیشه
    یه کد چند خطی هست ایرادش کجاست؟

    1. سلام محمود جان. کدای CSSات کامل نیفتاده. اگه بتونی کدارو تو یک فایل نوت پدی چیزی برامون بفرستی بهتر میتونیم بررسی کنیم. الان فقط استایلی که به ba. دادی مشخصه نه ma.

      1. سلام. ممنون از کمکت.
        بالاخره مشکلو حل کردم
        بعضی کلمات رو جا انداخته بودم مثل حرف u در بک گراند .
        باید بیشتر تمرین کنم .
        اگه سوالی بود حتما مزاحمتون میشم و پیام میدم .
        ممنون که وقت میزارید

        1. سلام محمود، خواهش ميكنم.
          خوشحالم كه تونستي مشكلت رو حل كني. بازم مشكلي بود ما همينجا منتظريم ?

  3. آموزش

    .ba{
    color:blue;
    {

    .ma{
    color:blue;
    {

    سلام امروز سه شنبه اس

    سایت برنامه نویسی

    سلام چرا روی تگ p رنگش ابی نمیشه ؟
    فقط h اعمال میشه

    1. سلام محمود. کد های HTMLات نیومدن، نمیشه درست بررسی کرد. از کدات عکس بفرست لطفا

    1. سلام جمشید.
      خوشحالم از حضورت و ممنونم که نظر ارسال کردی.

  4. با سلام و تشکر از شما
    طبق تصویر زیر کلمات و جملات لینک داده شده هم رنگی شدند و هم با هاور کردن زیرشون خطی کشیده میشه.
    از چه کدی میتونیم استفاده کنم؟

    1. سلام علی جان. برای انجام این کار کلی راه متفاوت و باحال وجود داره. من الان یه کد برات اماده کردم که بررسی کنی:
      https://codepen.io/mizfa/pen/PozMrMJمعمولا منطق کلی این کار به این شکله. اما میتونی از انتخابگر هایی مثل before و after هم استفاده کنی. یا حتی از تگ hr استفاده کنی.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید. Drop file here

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=