cssطراحی سایت

جلسه ۲۰: نگاهی گذرا به انتخابگرهای CSS در CSS

webآگوست 14, 2021
۰

نگاهی گذرا به انتخابگرهای CSS: انتخابگرها را تایپ کنید

ما تمام چیزهایی که تاکنون آموخته ایم را برای ساختن چیزهای جالب جمع خواهیم کرد. خوب ، خیلی جالب نیست ، اما گام خوبی در جهت ساختن چیزهای شگفت انگیز دیگر است.
موارد زیر را بیان خواهیم کرد

  • انتخاب عنصر
  • انتخابگر کلاس
  • شناسه
  • گروه بندی انتخاب کنندگان

نگاهی به نشانه گذاری زیر بیندازید:

<html>
  <head></head>
  <body>
    <h1> I am a header </h1>
    <p class=”info”>Some vital info</p>
    <p id=”warning”>Dont do this!</p>
    <p class=”info”>Some other vital info – really?</p>
    <p class=”primary”>Basic texts</p>
  </body>
</html>

آنجا چه خبر است؟

 

توضیحات:

خط ۴ در اصل یک هدر h1 به صفحه اضافه می کند.
خط ۵ یک پاراگراف با یک کلاس info اضافه می کند
خط ۶ نیز یک پاراگراف اضافه می کند. این بار با شناسه warning
خط ۷ نیز بسیار ساده است. میتونی بفهمی؟ می گوید: “یک پاراگراف با کلاس info اضافه کنید”
خط ۸ همچنین یک پاراگراف به صفحه اضافه می کند اما با یک کلاس primary

اکنون ما در یک صفحه هستیم. در انتهای این درس مارک گذاری را همانطور که در زیر نشان داده شده است فرم داده اید:

<html>
  <head></head>
  <body>
    <h1> I am a header </h1>
    <p class=”info”>Some vital info</p>
    <p id=”warning”>Dont do this!</p>
    <p class=”info”>Some other vital info – really?</p>
    <p class=”primary”>Basic texts</p>
  </body>
</html>
body {
  background-color: #ccc;
}
h1 {
  color: black;
}
.info {
  color: white;
}
.primary {
  color: green;
}
#warning {
  color: red
}
.info,
.primary {
  background-color: black
}

 

صادقانه بگویم ، من می دانم که این زیبا نیست. اما به من اعتماد کنید ، چیزهای اساسی زیادی وجود دارد که می توانید در این راه انتخاب کنید.

بدون یادگیری راه رفتن نمی توانید پرواز کنید ، درست است؟

بیایید با CSS راه برویم. ما به زودی پرواز خواهیم کرد!

انتخاب عنصر

اگر نگاهی به html طرح بالا بیندازید ، متوجه می شوید که در اینجا چند عنصر داریم.

h1 ، body و p همه عناصر هستند. آیا به یاد دارید که چگونه عناصر انتخاب و استایل می شوند؟ در زیر مثالی آورده شده است:

body {
  background-color: #ccc;
}

در کد بالا ، عنصر body انتخاب و سبک می شود. بدنه می تواند جایگزین هر عنصر دیگر html شود.

بیایید نگاهی به انتخابگرهای خاص در CSS بیاندازیم.

 

انتخاب کلاس

اگر از html به وضوح به یاد داشته باشید ، می توان یک نام کلاس واحد را بر روی چندین عنصر اعمال کرد. در مثال ابتدای این درس ، موارد زیر را ادائه داریم:

 <p class=”info”>Some vital info</p>
 <p class=”info”>Some other vital info – really?</p>
 <p class=”primary”>Basic texts</p>

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

.info {
  color: white;
}

شما باید ابتدا یک کلاس را انتحاب نمایید. سپس کلاس انتخاب شده را به هر روشی که دوست دارید استایل دهید.

رنگ اعلامیه واحد: اکنون سفید برای هر عنصر با نام کلاس ، info اعمال می شود.

شناسه ID

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

بنابراین چگونه می توان Id را در CSS انتخاب کرد؟

#warning {
  color: red;
}

شما علامت # قبل از نام شناسه را اضافه می کنید.

اگر این موارد برای شما کاملاً جدید است ، نگران نباشید. با برخی از تمرینات ، این کار را فرا خواهید گرفت.

 

انتخاب گروه ها

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

به عنوان مثال ، ممکن است بخواهید عناصر دارای نام کلاس ، info و primary از رنگ مشکی یکسانی برخوردار باشند.

اولین انتخاب شما ممکن است این باشد:

.info {
  background-color: black;
}
.primary {
  background-color: black;
}

بله جواب می دهد اما روش بهتری برای گروه بندی عناصر در CSS وجود دارد.

نگاهی بیاندازید:

.info,
.primary {
  background-color: black;
}

فقط یک ویرگول اضافه کنید و همانطور که در بالا مشاهده کردید می توانید انتخابگرهای چندتایی را گروه بندی کنید.

webآگوست 14, 2021
۰
تصویر web

web

نوشته های مشابه

جلسه ۳۱: درصدها در CSS

آگوست 16, 2021

جلسه ۱۱: Node.js در طراحی سایت

آگوست 13, 2021

جلسه ۴۲: تراز بندی متن + اندازه در CSS

آگوست 17, 2021

جلسه ۷۰: ترکیب CSS Grid با Flexbox در CSS

آگوست 25, 2021

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا