CSS tanlashda vergul uchun nima?

Nima uchun oddiy vergul kodlashni osonlashtiradi

CSS yoki Cascading Style Sheets, veb-dizayn sanoatining saytga ingl. Uslublar qo'shish uchun qabul qilingan usuli hisoblanadi. CSS bilan siz sahifa tartibini, ranglarini, tipografiyani , fon tasvirini va yana boshqa narsalarni nazorat qilishingiz mumkin. Asosan, agar bu ingl. Uslub bo'lsa, CSS bu uslublarni veb-saytingizga kiritish usulidir.

Agar hujjatga CSS uslubini qo'shsangiz, hujjat uzoqroq va ko'proq vaqtga cho'zila boshlaganini sezishingiz mumkin. Hatto bir hovuch sahifaga ega bo'lgan kichik sayt ham katta CSS fayli bilan yakunlanishi mumkin va ko'plab noyob kontentli sahifalari bo'lgan juda katta sayt juda katta CSS fayllariga ega bo'lishi mumkin. Bu, ingl. Ko'rinishlarni qanday o'zgartirish va sahifani turli ekranlarga ajratish uchun uslublar jadvallariga kiritilgan ko'plab ommaviy axborot so'rovlariga ega bo'lgan sezgir saytlar tomonidan murakkablashadi.

Ha, CSS fayllari uzoqlashishi mumkin. Bu sayt ishlashi va yuklab olish tezligi bilan bog'liq bo'lsa, bu katta muammo emas, chunki hatto uzoq CSS fayli juda kichik bo'lishi mumkin (chunki, bu, albatta, faqat matn hujjatidir). Shunga qaramay, har bir narsa sahifa tezlikiga kelganda hisobga olinadi, shuning uchun siz uslublar jadvalini yanada sog'lomroq qilishingiz mumkin, bu yaxshi fikr. Bu erda "vergul" stil sahifangizda juda qulay bo'lishi mumkin!

Commas va CSS

Vertikalizatorning CSS tanlovi sintaksisida qanday rol o'ynashi qiziq bo'lgan bo'lishi mumkin. Cümlelerde bo'lgani kabi, vergul kodlari emas, balki aniq - ayıraçlara olib keladi. CSS tanlagichidagi vergul bir nechta tanlovchini bir xil uslubda ajratadi.

Masalan, quyidagi CSS-ga qaraylik.

th {rangi: qizil; }
td {rangi: qizil; }
p.red {rangi: qizil; }
div # firstred {color: rad; }

Ushbu sintaksis yordamida sizga th tags, td teglar, paragraf teglarini sinfi qizil bilan istaysizmi va ID yorlig'i bilan div tegining barchasi tarzi rangi qizil bo'lishini xohlaysiz.

Bu juda yaxshi qabul qilinadigan CSS, lekin bu haqda yozish uchun ikkita muhim kamchilik mavjud:

Ushbu kamchiliklarni bartaraf qilish va CSS dosyanizni tartibga solish uchun biz verguldan foydalanishni xohlaymiz.

Ayrim selektorlarga spamlardan foydalanish

4 ta alohida CSS tanlovchisini va 4 ta qoidalarni yozish o'rniga, bu uslublarni bitta qoida xususiyatiga birlashtira olasiz. Bu qanday amalga oshiriladi:

th, td, p.red, div # firstred {rang: qizil; }

Vergul belgisi, asosan, "selector" so'zi bilan ishlaydi. Shunday qilib, bu t h belgilariga AND td teglar va xatboshilarning taglari uchun qizil rangli va div yorlig'i bilan identifikatsiya qilingan holda amal qiladi. Bu bizning oldimizda bo'lgan narsadir, lekin 4 CSS-qoidasiga ehtiyoj yo'q, bir nechta tanlovchiga ega bo'lgan yagona qoidamiz bor. Vektor tanlovda nima qilsa, bizga bitta qoidada bir nechta tanlovchiga ega bo'lish imkonini beradi.

Ushbu yondashuv nafaqat engilroq, balki toza CSS fayllari uchun ham, kelajakdagi yangilanishlarni ham osonlashtiradi. Endi rangi qizildan mavjatga o'zgartirishni xohlasangiz, biz faqat 4 ta uslub qoidalari o'rniga bitta joyda o'zgarishni amalga oshirishingiz kerak! Bu vaqtni butun CSS-dagi jamg'armani o'ylab ko'ring va bu sizni uzoq muddatda ikkala vaqt va makonni qanday qutqarishini ko'rishingiz mumkin!

Vaqtinchalik sintaksisi

Ba'zi odamlar CSS-ni har bir selektorni o'z satrida ajratish orqali o'qiy olishni afzal ko'rishadi, buning o'rniga yuqoridagi kabi bitta satrda yoziladi. Bu shunday qilish kerak edi:

th,
td,
p.red,
div # birinchi marta
{
rang: qizil;
}

Har bir selektordan keyin vergulni qo'yib, so'ngra keyingi tanlovni o'z satrini buzish uchun "Enter" dan foydalaning. Oxirgi tanlovdan so'ng vergulni qo'shmang.

Tanlovchilaringizning vergullarini ishlatib, siz kelajakda yangilanadigan yanada ixcham uslublar jadvalini yaratasiz va bugungi kunda o'qish osonroq!

Jennifer Kryninning original maqolasi. Jeremy Girard tomonidan 5/8/17 yil tahrirlangan