CSS xususiyatlarini organish uchun yaxshiroq yo'llar

Assalomu Alleykum!!!
📌Mening ismim Asadbek😎 va men 15 yoshdaman. Ushbu maqolada selektor qanday yozilishi kerakligi haqida emas, balki selektor ichidagi xususiyatlar qanday yozilishi kerakligi ta'kidlangan.

Super Marketda mahsulotlar qanday tartibga solinganiga e'tibor berdingizmi? Sovunlar, shampunlar va badan losonlari birgalikda joylashtirilgan. Guruch, bug'doy va Dhall mahsulotlari doimo birgalikda guruhlangan. Xuddi shunday, biz qanday xususiyatlarni selektor ichida yozish kerakligini tartibga solish orqali CSS yozishimiz kerak.

Quyidagi CSS-klass tanlov kartasining "kartasi" ga qarang. Ushbu selektor albatta DOM-da toza chiqishga olib keladi. Lekin xususiyatlar selektor ichida qanday yozilganiga e'tibor berasizmi?

Ha! Siz buni taxmin qildingiz. Xususiyatlarni yozish usulida tartib yoki guruhlash mavjud emas.

Shriftning o'lchami birinchi qatorda, shriftning vazni o'rtada, shrift oilasi esa oxirida. Bu xuddi shu toifadagi mahsulotlarning Super Marketdagi turli joylarga joylashtirilishiga o'xshashdir (Dhall buyumlari bilan sovunlar, Sabzavotlar bilan shampunlar va boshqalar).

Dasturchi sifatida men har xil vaqtlarda bir nechta xususiyatlarni sinab ko'rmoqchiman. Bunday holda, barcha xususiyatlarning birgalikda guruhlanganligiga qanday ishonch hosil qilishim mumkin?Ko'pchiligingizda bu savol tug'iladi, to'g'rimi?Javob juda oddiy. Siz aslida uni o'zingizning oqimingiz bilan qurishga harakat qilmoqdasiz, lekin sizning kodingiz tartibli va tartibli ko'rinishi uchun xususiyatlarni tegishli guruhlarga joylashtirishingiz kerak edi. Yozishning bunday usuli, albatta, amaliyotga to'g'ri keladi.Keyinchalik, bu sizga va sizning hamkasblaringizga o'zlarining xususiyatlarini osongina aniqlash va aniqlashga yordam beradi.Nega bezovta qilishim kerak - menda disk raskadrovka uchun inspektorim bor! 😔😔

Qani boshladik!

"Karta" tanlagichidan biz avval kartani chizishimiz kerakligini tushunamiz (odatda karta to'rtburchaklar yoki to'rtburchaklar qutiga o'xshaydi). Qutini chizish uchun uning o'lchamlarini bilish kerak. CSS-da o'lchovlar kenglik va balandlik xususiyatlariga ega. Shuning uchun kenglik va balandlikdan boshlash yaxshidir.

1-qadam: o'lchov xususiyatlarini yozing

Keyinchalik, kenglik va balandlik bilan bir qatorda, margin, padding, chegara kabi boshqa namunaviy xususiyatlarni qo'shing. Keling, chegara qanday ko'rinishga ega ekanligi bilan chegaraviy radiusni guruh qilaylik.

2-qadam: yozish qutisi modelining xususiyatlari

Boshqa xususiyatlar

kontur - chegaraga o'xshash.

quti o'lchami

Min-kenglik va kenglikdan keyin maksimal-kengliklarga guruhlang.

Min balandligi va balandlikdan keyin maksimal balandlikni guruhlang.

Soxta tanlagichlar oldin va keyin bo'lsa, ushbu stek bilan tarkibga ega bo'lishni afzal ko'ring.

Endi biz kartani o'lchamlari va bo'sh joylari bilan tayyorladik. Ekranda joylashtirish uchun biz brauzerni xabardor qilishimiz kerak. Odatda kartaning joylashishi, joylashishi va ekranning xususiyatlari bilan belgilanadi.

Shunday qilib, kartani chizishdan oldin, kartani DOM-ga qanday qo'yish kerakligini yozsak ham yaxshi bo'ladi.

Avval qaysi birini yozishim kerak? holat yoki suzuvchi yoki displeymi?

Avval pozitsiya mutlaq yoki sobit bo'lsa, avval pozitsiyani yozishni afzal ko'ring. Ikkala holatda ham, element DOM oqimidan tashqariga chiqariladi va shuning uchun uni qaerga joylashtirmoqchi ekanligimiz haqida brauzerga aytib berish yaxshiroqdir.

Agar joylashuv nisbiy yoki yopishqoq bo'lsa, avval float yozishni afzal ko'ring.

Agar ekran yo'q bo'lsa, avval displeyni yozishni afzal ko'ring. Bunday holda, brauzer DOM-ga hech narsa chizmasligi kerak emas.

3-qadam: Joylashtirish xususiyatlarini yozish (Lavozim | Float | Displey)

Boshqa xususiyatlar

Pozitsiya xususiyatidan keyin yuqoriga, chapga, pastga yoki o'ngga yozing.

Pozitsion xususiyatdan keyin z-indeksini yozing.

ko'rinishi - displeyga o'xshash.

Ko'rsatish holatida: egilgandan so'ng, displeydan keyin egiluvchanlik xususiyatlarini qo'shing, egiluvchan yo'nalish, egiluvchan o'rash, oqlash-tarkib va boshqalar.

Keyin, fon, box-soya kabi taqdimot xususiyatlarini qo'shaylik. Ular birlashtirilishi mumkin, chunki ular elementga ko'rinishni qo'shish uchun javobgardir.

4-qadam: Tashqi ko'rinish xususiyatlarini yozing (Fon | Box-soya)

Matn bilan bog'liq xususiyatlarni qo'shish vaqti keldi. Matnni yozish uchun biz ishlatadigan shrift haqida so'zlab berishimiz kerak. Shunday qilib, avval shrift xususiyatlarini yozaylik.

Shriftlardan keyin biz matnni rang, chiziq bo'yi, harflar oralig'i, matnni tekislash va h.k. kabi boshqa xususiyatlarni ham qo'shishimiz mumkin.

5-qadam: Shrift va matn xususiyatlarini yozish

Boshqa xususiyatlar

Shriftning barcha xususiyatlarini birgalikda guruhlashni afzal ko'ring.

Matnni tekislash, matnni bezatish, matn soyasi va matnni o'zgartirish kabi barcha matn xususiyatlarini birlashtirishni afzal ko'ring.

Bu erda oq oraliq, word-wrap, word-break va boshqalarni afzal ko'ring

foydalanuvchi tanlash

Va birinchisi, selektorga transformatsiya, o'tish va animatsiya xususiyatlarini qo'shaylik.

6-qadam: Transformatsiya va animatsiya xususiyatlarini yozing6-qadam: Transformatsiya va animatsiya xususiyatlarini yozingvv

Va nihoyat, biz boshqa xususiyatlarni qo'shishimiz mumkin: toshib ketish, shaffoflik va hokazo, ularni oxirida biron bir guruh ostiga qo'shib bo'lmaydi.

Selektorda xossalarni tartibga solish

Agar biz har bir selektor ostida CSS xususiyatlarini shunga o'xshash tarzda tashkil qilishga harakat qilsak, o'qish oson bo'ladi. Kelajakda boshqa mulk qo'shish kerak bo'lganda, biz uni joylashtirish uchun kerakli joyni topishga majbur bo'lamiz. Shunday qilib, biz aniq CSS faylimizni o'qilishini va saqlashini ta'minlashimiz mumkin.

O'qiganingiz uchun rahmat. Bu yordam beradi deb umid qilaman! Dastrurlashdan aslo to'xtamang va shu ruxda davom eting, zero sizda katta imkon mavjud, uni esa qo'ldan boy bermasligimiz lozim!