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

نگاهی گذرا به انتخابگرهای CSS
: انتخابگرها را تایپ کنید
ما تمام چیزهایی که تاکنون آموخته ایم را برای ساختن چیزهای جالب جمع خواهیم کرد. خوب ، خیلی جالب نیست ، اما گام خوبی در جهت ساختن چیزهای شگفت انگیز دیگر است.
موارد زیر را بیان خواهیم کرد
- انتخاب عنصر
- انتخابگر کلاس
- شناسه
- گروه بندی انتخاب کنندگان
نگاهی به نشانه گذاری زیر بیندازید:
آنجا چه خبر است؟
توضیحات:
خط ۴ در اصل یک هدر h1
به صفحه اضافه می کند.
خط ۵ یک پاراگراف با یک کلاس info
اضافه می کند
خط ۶ نیز یک پاراگراف اضافه می کند. این بار با شناسه warning
خط ۷ نیز بسیار ساده است. میتونی بفهمی؟ می گوید: “یک پاراگراف با کلاس info
اضافه کنید”
خط ۸ همچنین یک پاراگراف به صفحه اضافه می کند اما با یک کلاس primary
اکنون ما در یک صفحه هستیم. در انتهای این درس مارک گذاری را همانطور که در زیر نشان داده شده است فرم داده اید:
صادقانه بگویم ، من می دانم که این زیبا نیست. اما به من اعتماد کنید ، چیزهای اساسی زیادی وجود دارد که می توانید در این راه انتخاب کنید.
بدون یادگیری راه رفتن نمی توانید پرواز کنید ، درست است؟
بیایید با CSS
راه برویم. ما به زودی پرواز خواهیم کرد!
انتخاب عنصر
اگر نگاهی به html
طرح بالا بیندازید ، متوجه می شوید که در اینجا چند عنصر داریم.
h1
، body و p
همه عناصر هستند. آیا به یاد دارید که چگونه عناصر انتخاب و استایل می شوند؟ در زیر مثالی آورده شده است:
در کد بالا ، عنصر body
انتخاب و سبک می شود. بدنه می تواند جایگزین هر عنصر دیگر html
شود.
بیایید نگاهی به انتخابگرهای خاص در CSS
بیاندازیم.
انتخاب کلاس
اگر از html
به وضوح به یاد داشته باشید ، می توان یک نام کلاس واحد را بر روی چندین عنصر اعمال کرد. در مثال ابتدای این درس ، موارد زیر را ادائه داریم:
انتخاب کلاسها در CSS
، اینگونه انجام می شود:
شما باید ابتدا یک کلاس را انتحاب نمایید. سپس کلاس انتخاب شده را به هر روشی که دوست دارید استایل دهید.
رنگ اعلامیه واحد: اکنون سفید برای هر عنصر با نام کلاس ، info
اعمال می شود.
شناسه ID
بر خلاف کلاسهایی که ممکن است در بیشتر عناصر ممکن اعمال شود ، شناسه مختص یک عنصر است.
بنابراین چگونه می توان Id
را در CSS
انتخاب کرد؟
شما علامت #
قبل از نام شناسه را اضافه می کنید.
اگر این موارد برای شما کاملاً جدید است ، نگران نباشید. با برخی از تمرینات ، این کار را فرا خواهید گرفت.
انتخاب گروه ها
ما دیده ایم که چگونه عناصر ، کلاسها و شناسه ها را به صورت جداگانه هدف قرار دهیم. اگر بخواهید همان اعلامیه CSS
را برای ۲ کلاس مختلف اعمال کنید ، چه می کنید؟
به عنوان مثال ، ممکن است بخواهید عناصر دارای نام کلاس ، info
و primary
از رنگ مشکی یکسانی برخوردار باشند.
اولین انتخاب شما ممکن است این باشد:
بله جواب می دهد اما روش بهتری برای گروه بندی عناصر در CSS
وجود دارد.
نگاهی بیاندازید:
فقط یک ویرگول اضافه کنید و همانطور که در بالا مشاهده کردید می توانید انتخابگرهای چندتایی را گروه بندی کنید.