Web dasturlash fanidan mustaqil ishi

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