Sinflar va identifikatorlar CSS-ni uzaytirishga yordam beradi
Bugungi veb-saytlarni yaratish veb-saytlarni CSS-ni chuqur tushunishni talab qiladi (uslublar kaskadli jadvallari). Bu siz brauzer oynasida qanday qilib joylashishini aniqlash uchun veb-sayt beradigan ko'rsatmalar. Veb-sahifangizning ko'rinishini va hisini yaratadigan HTML-hujjatga bir nechta "jihozlardan" foydalanasiz.
Yuqorida aytib o'tilgan uslublarni hujjat bo'ylab qo'llashning ko'plab usullari mavjud, lekin ko'pincha ushbu hujjatdagi ba'zi elementlarga uslubni qo'llashni xohlaysiz, lekin bu elementning barcha nusxalarini emas.
Bundan tashqari, har bir alohida misol uchun uslub qoidasini takrorlamasdan, hujjatdagi bir nechta elementlarga qo'llashingiz mumkin bo'lgan uslubni yaratmoqchi bo'lishingiz mumkin. Ushbu kerakli uslublarga erishish uchun sinf va identifikatorning HTML atributlarini ishlatasiz. Bu atributlar deyarli har bir HTML tagiga qo'llanilishi mumkin bo'lgan global atributlardir .Bu sizning hujjatingizdagi bo'linishlar, paragraflar, havolalar, ro'yxatlar yoki HTMLning boshqa qismlarini uslublashni xohlaysizmi, degan ma'noni anglatadi. Bu vazifani bajarishingizga yordam bering!
Sinf tanlash
Sinf ko`rsatgichi sizda bir nechta uslubni bir xil element yoki tagga hujjat qo'yishga imkon beradi. Misol uchun, sizning matningizning ba'zi bo'limlari hujjatning qolgan qismidan boshqa rangda chaqirilgan bo'lishi mumkin. Ushbu ta'kidlangan bo'limlar siz sahifada o'rnatgan "ogohlantirish" bo'lishi mumkin. Siz xatlarni quyidagi kabi sinflarga belgilashingiz mumkin:
p {rang: # 0000ff; }
p.alert {rangi: # ff0000; }
Bu uslublar barcha xatboshlar rangini ko'k (# 0000ff) ga o'rnatadi, lekin "alert" ning sinf atributiga ega bo'lgan har qanday xat qizil (#ff0000) shaklida amalga oshiriladi. Buning sababi, sinf xususiyati faqat bitta tag tanlash vositasidan foydalanadigan birinchi CSS qoidasiga qaraganda yuqori o'ziga xoslikga ega.
CSS bilan ishlashda, aniqroq qoida kamroq aniqlangan ma'lumotlarni bekor qiladi. Shunday qilib, bu misolda, umumiy qoidalar barcha xatboshilardagi rangni belgilaydi, ammo faqat ba'zi xatlarni belgilashni bekor qiladigan ikkinchi, o'ziga xos qoida.
Buni qanday qilib ba'zi HTML formatlashda ishlatish mumkin:
Ushbu paragraf ko'k ko'rsatiladi, bu sahifa uchun standart hisoblanadi.
Bu xat ham ko'k rangda bo'ladi.
Va bu paragraf qizil ko'rinadi, chunki sinf xususiyati elementni tanlash uslubidan standart ko'k rangni o'zgartiradi.
Ushbu misolda "p.alert" uslubi faqat "alert" sinfidan foydalanadigan xat elementlariga qo'llaniladi. Agar siz ushbu klassni bir nechta HTML elementlardan foydalanishni xohlasangiz, HTML elementni faqat (Faqat vaqtni (.) ni joyidan ajratib qo'ying), shunga o'xshash:
.alert {fon-rang: # ff0000;}
Bu sinf endi kerakli elementga ega. "Alert" ning sinfning atribut qiymati bo'lgan HTML-dagi biron bir parcha endi bu uslubni oladi. Quyidagi HTML-da biz "ogohlantirish" sinfidan foydalanadigan ikkala xat va 2-darajali sarlavhaga egamiz. Ularning ikkalasi ham biz ko'rsatgan CSS-ga asoslangan qizil rangga ega bo'ladi.
Ushbu xat qizil rangda yozilgan.
Va bu h2 ham qizil bo'ladi.
Bugungi kunda veb-saytlardagi sinf attributes ko'pincha elementlarda ishlatiladi, chunki ular identifikatorlarning o'ziga xoslik nuqtai nazaridan ishlashlari osonroq. Mavjud HTML-sahifalarni sinfning atributlari bilan to'ldirish uchun topasiz, ularning ba'zilari hujjatda bir necha marta takrorlangan va faqatgina bir marta paydo bo'lishi mumkin bo'lgan boshqalar.
ID tanlovchilar
ID tanlagichi sizga etiket yoki boshqa HTML elementi bilan bog'lamasdan ma'lum bir uslubga nom berishga imkon beradi. Hodisalar haqidagi ma'lumotni o'z ichiga olgan HTML belgilaringizdagi bo'linishingiz borligini ayting.
Ushbu bo'limga "voqea" identifikatorini berishingiz mumkin. Agar siz ushbu bo'linishni 1 piksel keng qora chegara bilan belgilashni istasangiz, shunday ID kodini yozasiz:
#event {border: 1px qattiq # 000; }
ID tanlovchilar bilan muammo shundaki, ular HTML hujjatida takrorlanishi mumkin emas. Ular noyob bo'lishi kerak (saytingizning bir necha sahifasida bir xil identifikatordan foydalanishingiz mumkin, lekin har bir HTML hujjatida faqat bir marta foydalanishingiz mumkin). Shunday qilib, ushbu chegarani talab qiladigan 3ta voqeangiz bo'lsa, ularga "event1", "event2" va "event3" identifikatorlari va ularning har biriga uslubiy atributlarni berishingiz kerak. Shu sababli, yuqorida aytilgan "voqea" xususiyati bilan foydalanish va ularni bir vaqtning o'zida takrorlash osonroq bo'ladi.
ID identifikatorlari bilan boshqa muammo, ularning sinfning atributlaridan ko'ra ko'proq o'ziga xosligi bor. Ya'ni oldindan o'rnatilgan uslubni bekor qiluvchi CSS-ga ega bo'lishingiz kerak bo'lsa, ID larga nisbatan juda ko'p ishongan bo'lsangiz, buni qilish qiyin bo'lishi mumkin. Shu sababli ko'plab veb-ishlab chiquvchilari, agar bu qiymatni bir marta ishlatish niyatida bo'lsa ham, ularning deyarli barcha uslublari uchun kamroq o'ziga xos sinf atributlariga o'girilgan bo'lsa ham, ularni belgilashda identifikatorlardan foydalanishdan qochib ketgan.
Identifikatorlari o'ynashni boshlagan maydon - sahifa ichidagi ulanishlarni o'z ichiga olgan sahifa yaratish bo'lsangiz. Misol uchun, paralaks uslubidagi veb-saytingiz mavjud bo'lsa, u sahifaning turli qismlariga "o'tish" bilan bog'langan bir sahifadagi barcha tarkibni o'z ichiga oladi. Bu, identifikatorlari va ushbu ulanishlarni ishlatadigan matn havolalari yordamida amalga oshiriladi.
Siz # belgisi oldidagi ushbu xususiyatning havolaning href atributiga quyidagi qiymatini qo'shishingiz mumkin:
Bu havola
Chertganingizda yoki tegilganingizda, ushbu havola ushbu ID xususiyati bo'lgan sahifaning qismiga o'tadi. Agar sahifada hech qanday element bu ID qiymatini ishlatmasa, aloqa hech narsa qilmaydi.
Esda tutingki, agar siz sahifada sahifada ulanishni yaratmoqchi bo'lsangiz, ID identifikatorlaridan foydalanish talab qilinadi, ammo siz hali ham umumiy CSS uslublash maqsadlari uchun sinflarga murojaat qilishingiz mumkin. Bugungi kunda bu sahifalarni qanday qilib qayd etmoqdaman - sinf sinchkovlik bilan imkon qadar ko'proq foydalanganman va faqat CSS uchun kanca sifatida emas, balki sahifada havola sifatida harakat qilish uchun atributlarga kerakli identifikatorlarga murojaat qildim.
Jennifer Kryninning original maqolasi. Jeremy Girard tomonidan 8/9/17 yil tahrirlangan