Siz har bir element uchun bitta CSS sinfi bilan cheklanmaysiz.
Uslublar kaskadli jadvallari (CSS) siz ushbu elementga taalluqli atributlarga ulanish orqali elementning tashqi ko'rinishini aniqlash imkonini beradi. Bu atributlar yoki identifikator yoki sinf bo'lishi mumkin, va barcha atributlar kabi ular biriktirilgan elementlarga foydali ma'lumotni qo'shadilar. Elementga qaysi xususiyatni qo'shganingizga qarab, ushbu element va umuman veb-sayt uchun ko'rinish va his qilish uchun zarur bo'lgan ingl. Uslublarni qo'llash uchun CSS tanlovchisini yozishingiz mumkin.
ID-lar yoki sinflar CSS-qoidalar bilan ularga kirish uchun ishlayotgan bo'lsa-da, zamonaviy veb-dizayn uslublari qisman identifikatorlar bo'yicha sinflarni yoqlaydi, chunki ular kamroq aniq va umumiy ishlashga oson. Ha, siz hali ham identifikatorlardan foydalanadigan ko'plab saytlarni topasiz, lekin bu atributlar o'tmishdan ko'ra ko'proq qo'llaniladi, sinflar esa zamonaviy veb-sahifalarni egallagan.
CSS-dagi bir yoki bir nechta sinflar
Ko'pgina hollarda siz elementga bitta sinf atributini belgilashingiz mumkin, lekin aslida siz faqat bitta sinf bilan chegaralanmaysiz, ular sizning identifikatorlaringiz bilan. Element faqat bitta ID identifikatoriga ega bo'lishi mumkin bo'lsa-da, siz elementni bir nechta sinflarga bera olasiz va ba'zi holatlarda bu sizning sahifangizni yanada oson va juda moslashuvchan qiladi!
Biror elementga bir nechta dars tayinlashingiz kerak bo'lsa, qo'shimcha sinflarni qo'shishingiz va ularni atributingizdagi bo'sh joy bilan ajratib olishingiz mumkin.
Masalan, ushbu paragraf uchta sinfga ega:
pullquote featured left "> Bu xatboshilardagi matn bo'lishi mumkin
Bu paragraf tagida quyidagi uchta sinfni o'rnatadi:
- Pulluvat
- Tanlangan
- Chapdan
Ushbu sinfning har birining orasidagi bo'shliqlarga e'tibor bering. Bu bo'shliqlar ularni turli, individual sinflar sifatida belgilaydi. Shuning uchun ham sinf nomlari ulardagi bo'sh joylarga ega emas, chunki bu ularni alohida sinflar sifatida belgilaydi.
Misol uchun, "pullquote-featured-left" bo'sh joyidan foydalangan bo'lsangiz, u bitta sinf qiymati bo'lishi mumkin, ammo yuqoridagi misolda bu uch so'z bo'sh joy bilan ajratilgan bo'lib, ularni individual qiymat sifatida belgilaydi. Ushbu konsepsiyani sizning veb-sahifalaringizda qaysi sinfga tegishli qiymatlardan foydalanishi haqida qaror qabul qilishda tushunish muhimdir.
HTMLda sinflaringiz bor bo'lgandan keyin siz ularni CSS-da sinflar sifatida belgilashingiz va qo'shmoqchi bo'lgan uslublarni qo'llashingiz mumkin. Masalan.
.pullquote {...}
.featured {...}
p.left {...}
Ushbu misollarda, CSS deklaratsiyasi va qiymatlari juftlari bu moslamani mos keladigan selektorga qanday tatbiq etilishi kerakligi haqida gapiradi.
Eslatma - Agar siz ma'lum bir elementga sinfni qo'ygan bo'lsangiz (masalan, p.left), siz uni darslar ro'yxatining bir qismi sifatida ishlatishingiz mumkin; Lekin, faqatgina CSS-da ko'rsatilgan elementlarga ta'sir qiladi. Boshqacha aytganda, p.left uslubi faqat ushbu klassdagi paragraflarga qo'llaniladi, chunki siz selektor uni aslida «chap» sinf qiymati bilan paragrafga qo'llashni aytmoqdadir ». Bunga javoban, misoldagi boshqa ikkita tanlangan elementlar ma'lum bir elementni ko'rsatmaydi, shuning uchun ular o'sha sinf qiymatlarini ishlatadigan har qanday elementga murojaat qilishadi.
Ko'p siniflarning afzalliklari
Ko'plab sinflar ushbu element uchun butunlay yangi uslub yaratmasdan turib elementlarga maxsus effektlarni qo'shishni osonlashtirishi mumkin.
Masalan, elementlarni chapga yoki o'ngga tez surish imkoniyatiga ega bo'lishingiz mumkin. Chap va o'ngdagi ikkita kursni yozishingiz mumkin: chap; va float: o'ng; ular ichida. So'ngra, siz chap tomonga suzishingiz kerak bo'lgan elementni qo'llaganingizda, sinfni "chap" sinfiga qo'shishingiz mumkin.
Biroq bu erda yurish uchun yaxshi chiziq bor. Veb standartlari uslub va tuzilmaning ajratilishini belgilab qo'yishni unutmang. Uslublar CSS-da bo'lsa, HTML tizimi orqali tuziladi.
Agar sizning HTML hujjatingizda "qizil" yoki "chap" kabi sinf nomlari mavjud bo'lgan elementlar bilan to'ldirilsangiz, ular elementlarning nima bo'lishidan qat'i nazar, qanday qilib qarashlari kerakligini ko'rsatadigan ismlar bo'lib, siz bu chiziqni struktura va uslublar orasidan kesib o'tasiz. Shuning uchun men semantik bo'lmagan sinf nomlarini imkon qadar cheklashga harakat qilaman.
Bir nechta darslar, semantikalar va JavaScript
Bir nechta darslardan foydalanishning yana bir afzalligi shundaki, u sizga ko'proq interaktiv imkoniyatlarni beradi.
Mavjud elementlarga yangi sinflarni JavaScript-ni foydalanib, boshlang'ich sinflarni olib tashlamasdan qo'llashingiz mumkin. Shuningdek , elementlarning semantikasini aniqlash uchun sinflardan foydalanishingiz mumkin. Ya'ni, bu element nimani anglatishini aniqlash uchun qo'shimcha darslarni qo'shishingiz mumkin. Microformats bu qanday ishlaydi.
Bir nechta sinflarning kamchiliklari
Sizning elementlaringizda bir nechta sinflarni ishlatish uchun eng katta kamchilik, ular vaqtni ko'rish va boshqarishni biroz noqulay his qilishi mumkin. Biror elementga qanday uslub ta'sir qilayotganini aniqlash va agar bironta skript unga ta'sir qilsa, bu qiyin bo'lishi mumkin. Bugungi kunda mavjud bo'lgan ko'pgina ramkalar, masalan Bootstrap kabi, bir nechta sinflar bilan elementlardan og'ir foydalanishadi. Ehtiyot bo'lmasangiz, ushbu kod juda tez va tezkor ishlash uchun qiyinlashishi mumkin.
Agar siz bir nechta darslardan foydalanganda ham, siz bunday maqsadni ko'zlamasangiz ham, bir sinfning uslubini boshqa uslubni bekor qilish xavfini tug'dirasiz. Bu sizning uslublaringiz nima uchun kerak bo'lganda ham qo'llanilmayotganini tushunib yetish qiyin bo'lishi mumkin.
O'zingizning xususiyatlaringizdan xabardor bo'lishingiz kerak, hatto bu elementga qo'llaniladigan atributlar ham!
Chrome'da Webmaster vositasi kabi vositalardan foydalansangiz, sinflaringiz o'zingizning uslublaringizga qanday ta'sir qilayotganini osonroq ko'rishingiz va bu qarama-qarshi uslublar va atributlar muammosidan qochishingiz mumkin.
Jennifer Kryninning original maqolasi. Jeremy Girard tomonidan 8/7/17 yil tahrirlangan