Ko'p yillar mobaynida CSS suzgichlari veb-sayt tartibini yaratishda juda muhim, ammo kerakli komponent bo'ldi. Agar sizning dizayningiz bir nechta ustunlar uchun chaqirilsa siz suyuqlikka o'tdingiz . Ushbu uslub bilan bog'liq muammo, veb-dizaynerlar / ishlab chiquvchilar murakkab saytlar tartibini yaratishda ko'rsatgan aql bovar qilmaydigan ixtirolariga qaramasdan, CSS bular bilan hech qachon ishlatilmasligi kerak edi.
Ko'p yillar mobaynida floats va CSS joylashuvi veb-dizayni uchun joyga ega ekanligiga ishonch hosil qilsa-da, CSS Grid va Flexbox kabi yana yangi tartiblash usullari endi veb-dizaynerlarga o'z saytlarini tartiblarini yaratishning yangi usullarini beradi. Ko'p salohiyatni aks ettiruvchi yana bir yangi layout uslubi CSS ko'p satrlari.
CSS ustunlari bir necha yillar atrofida bo'lgan, biroq eski brauzerlarda (asosan, Internet Explorerning eski versiyalari) qo'llab-quvvatlanmasligi ko'pgina veb-xodimlarni o'zlarining ishlab chiqarish ishlarida bunday uslublardan foydalanishga majbur qildi.
IE eski versiyalarining qo'llab-quvvatlashi tugagach, ba'zi veb-Dizaynerlar endi yangi CSS-layout imkoniyatlari, CSS ustunlari kiritilgan va bu yangi yondashuvlar bilan shamollatishdan ko'ra ko'proq nazoratga ega ekanliklarini topishgan.
CSS ustunlari asoslari
Uning nomi shuni ko'rsatadiki, CSS bir nechta ustunlar (shuningdek, CSS3 ko'p sxema rejasi sifatida ham tanilgan) tarkibni bir qator ustunlarga bo'lishga imkon beradi. Foydalanadigan eng asosiy CSS xususiyatlari:
- ustunlar soni
- ustun bo'shlig'i
Ustunlar soni uchun siz xohlagan ustunlar sonini aniqlaysiz. Ustun bo'shlig'i bu ustunlar orasidagi bo'shliq yoki masofa bo'lishi mumkin. Brauzer ushbu qadriyatlarni oladi va tarkibingizni siz ko'rsatgan ustunlar soniga teng ravishda ajratadi.
CSS-da bir nechta ustunlarning umumiy misoli, matn mazmuni blokini bir gazeta maqolasida ko'rgan narsangizga o'xshash bir nechta ustunlarga bo'linadi. Quyidagi HTML belgilaringizni ayting (masalan, maqsadlar uchun, men faqat bitta xatboshining boshini qo'yaman, amalda esa, ushbu belgida bir nechta paragraflar bo'lishi mumkinligini eslang):
Maqolaning sarlavhasi
Bu yerda juda ko'p matnli paragrafni tasavvur qiling ...
Agar siz ushbu CSS uslublarini yozsangiz:
.content {-moz-column-count: 3; -webkit-column-count: 3; ustunlar soni: 3; -moz-ustun bo'shligi: 30px; -webkit-column-gap: 30px; ustun bo'shligi: 30px; }Ushbu CSS qoida "kontent" bo'linmasini ular orasidagi 30 piksellik bo'shliq bilan 3 ta teng ustunga bo'linadi. Agar siz 3 ning o'rniga ikkita ustun kerak bo'lsa, bu qiymatni o'zgartirib, brauzer kontentni teng ravishda ajratish uchun ushbu ustunlarning yangi kengliklarini hisoblab chiqadi. Avvaliga sotuvchi-prefiks xususiyatlaridan foydalaning, keyin esa prefiks bo'lmagan deklaratsiyalardan foydalaning.
Bu shunga o'xshash, bu tarzda foydalanish, veb-sayt foydalanish uchun shubhali. Ha, bir nechta kontentni bir nechta ustunlarga bo'lishingiz mumkin, ammo bu Veb uchun eng yaxshi o'qish tajribasi bo'lmasligi mumkin, ayniqsa, bu ustunlar balandligi ekranning "kattaligi" dan pastroq bo'lsa.
O'quvchilar to'liq kontentni o'qish uchun yuqoriga va pastga aylanishlari kerak. Shunday bo'lsa-da, CSS ustunlarining asosiy qismi bu erda ko'rib turganingizdek osondir va u ba'zi xatlarning mazmunini ajratishdan ko'ra ko'proq narsani bajarish uchun ishlatilishi mumkin - bu, albatta, tartib uchun ishlatilishi mumkin.
CSS Ustunlari bilan tuzish
Sizda 3ta ustun kontenti bo'lgan kontent maydoni bo'lgan veb-sahifangiz borligini ayting. Bu juda odatiy veb-sayt tartibini va shu 3 ustunni qo'lga kiritish uchun, odatda, tarkibdagi bo'linmalarni aylantirasiz. CSS-ning bir nechta ustunlari bilan bu juda oson.
Bu erda ba'zi HTML namunalari:
So'nggi yangiliklar
Kontent bu erga boradi ...
Keyingi voqealar
Kontent bu yerga boradi ...
p>
Ushbu ko'p ustunlarni yaratish uchun CSS oldin ko'rgan narsalar bilan boshlanadi:
.content {-moz-column-count: 3; -webkit-column-count: 3; ustunlar soni: 3; -moz-ustun bo'shligi: 30px; -webkit-column-gap: 30px; ustun bo'shligi: 30px; } Endi brauzer ushbu kontentni bir xil bo'lishini istasa, shuning uchun agar ushbu bo'linmalarning mazmun uzunligi boshqacha bo'lsa, u brauzer aslida alohida bo'linishning tarkibini ajratib, uni bir ustunga qo'shib qo'shib, keyin boshqasiga davom eting (buni sinovdan o'tkazish va har bir bo'linmada turli xil tarkibiy qismlarni kiritish uchun ushbu kodni ishlatishingiz mumkin)!
Bu siz xohlamagan narsa emas. Ushbu bo'limlarning har biridan alohida ustun yaratishni istaysiz va sizning bo'linishingiz qanchalik katta yoki kichkina bo'lishidan qat'i nazar, siz uni hech qachon tark etmaslikni xohlaysiz. Bunga CSS-ning yana bir qatorini qo'shish orqali erishishingiz mumkin:
.content div {ekran: inline-blok; } Bu brauzer buni bir nechta sütunlara böldüğü kabi, "tarkib" ichidagi bo'linishlar buzilmasdan qolishga majbur qiladi. Bundan ham yaxshiroq, chunki bu erda hech qanday aniq bir kenglik bermadik, bu ustunlar brauzer qayta boyutlandıkça avtomatik ravishda qayta boyutlandırılır va ularga javob beruvchi veb-saytlar uchun ideal dastur. Ushbu "inline-block" uslubi yordamida, sizning 3 ta bo'linmaning har biri alohida tarkibiy qism bo'lib qoladi.
Ustun-kenglikdan foydalanish
Siz "column-count" dan foydalanishingiz mumkin bo'lgan boshqa xususiyat ham mavjud va sizning joylashuvingiz ehtiyojlariga qarab, saytingiz uchun yaxshi tanlov bo'lishi mumkin. Bu "ustun kengligi" dir. Avvalroq ko'rsatilgandek, bir xil HTML formatini ishlatib, buni biz CSS bilan amalga oshirishimiz mumkin:
.content {-moz-column-width: 500px; -webkit-column-width: 500px; ustunning kengligi: 500px; -moz-ustun bo'shligi: 30px; -webkit-column-gap: 30px; ustun bo'shligi: 30px; } .content div {displey: inline-block; } Buning ishlash usuli brauzer bu ustunning eng katta qiymati sifatida ushbu "ustunli kenglik" dan foydalanganligidir. Brauzer oynasi kengligi 500 pikseldan kam bo'lsa, bu 3 ta bo'linma bitta ustunda, boshqasining ustlaridan biri ko'rinadi. Bu mobil / kichik ekranlar uchun ishlatiladigan odatiy tartib.
Brauzer kengligi, ko'rsatilgan ustun bo'shliqlari bilan birga 2 ta ustunni joylashtirish uchun etarlicha katta bo'lganda, brauzer avtomatik ravishda bitta ustunli tartibdan ikki ustunga o'tadi. Ekran kengligini oshiring va nihoyat, o'z ustunida ko'rsatilgan 3 ta bo'linmaning har biri bilan 3 ta ustunli dizayn olasiz. Shunga qaramay, bu juda sezgir, ko'p qurilma bilan do'st layouts olishning ajoyib usuli va tartibni uslublarini o'zgartirish uchun ommaviy axborot so'rovlarini ishlatishingiz shart emas!
Boshqa ustun xususiyatlari
Bu erda ko'rsatilgan xususiyatlardan tashqari, sizning ustunlaringiz o'rtasida qoidalar yaratish imkonini beruvchi rang, uslub va kenglik qadriyatlari ham mavjud "ustun-qoidalar" uchun xususiyatlar mavjud. Sizning ustunlaringizni ajratib turadigan ba'zi bir chiziqlarga ega bo'lishni istasangiz, ular chegara o'rniga ishlatiladi.
Tajriba qilish vaqti
Ayni paytda, CSS ko'p satrlari tartibi juda yaxshi qo'llab-quvvatlanadi. Prefikslar yordamida veb-foydalanuvchilarning 94% dan ortig'i ushbu uslublarni ko'rish imkoniyatiga ega bo'ladi va qo'llab-quvvatlanmaydigan guruh Internet Explorer-ning juda eski versiyalari bo'lishi mumkin.
Ushbu qo'llab-quvvatlash darajasi hozirgi vaqtda CSS ustunlari bilan tajriba boshlashga va ishlab chiqarishga tayyor veb-saytlarda bu uslublarni joylashtirishga asos yo'q. O'zingizning tajribangizni ushbu maqolada keltirilgan HTML va CSS-dan foydalanib boshlashingiz va saytning joylashuvi ehtiyojlari uchun eng yaxshi nima qilishini ko'rish uchun turli qadriyatlar bilan o'ynashingiz mumkin.
Keyingi voqealar
Kontent bu yerga boradi ...
p>
Ushbu ko'p ustunlarni yaratish uchun CSS oldin ko'rgan narsalar bilan boshlanadi:
.content {-moz-column-count: 3; -webkit-column-count: 3; ustunlar soni: 3; -moz-ustun bo'shligi: 30px; -webkit-column-gap: 30px; ustun bo'shligi: 30px; }Endi brauzer ushbu kontentni bir xil bo'lishini istasa, shuning uchun agar ushbu bo'linmalarning mazmun uzunligi boshqacha bo'lsa, u brauzer aslida alohida bo'linishning tarkibini ajratib, uni bir ustunga qo'shib qo'shib, keyin boshqasiga davom eting (buni sinovdan o'tkazish va har bir bo'linmada turli xil tarkibiy qismlarni kiritish uchun ushbu kodni ishlatishingiz mumkin)!
Bu siz xohlamagan narsa emas. Ushbu bo'limlarning har biridan alohida ustun yaratishni istaysiz va sizning bo'linishingiz qanchalik katta yoki kichkina bo'lishidan qat'i nazar, siz uni hech qachon tark etmaslikni xohlaysiz. Bunga CSS-ning yana bir qatorini qo'shish orqali erishishingiz mumkin:
.content div {ekran: inline-blok; }Bu brauzer buni bir nechta sütunlara böldüğü kabi, "tarkib" ichidagi bo'linishlar buzilmasdan qolishga majbur qiladi. Bundan ham yaxshiroq, chunki bu erda hech qanday aniq bir kenglik bermadik, bu ustunlar brauzer qayta boyutlandıkça avtomatik ravishda qayta boyutlandırılır va ularga javob beruvchi veb-saytlar uchun ideal dastur. Ushbu "inline-block" uslubi yordamida, sizning 3 ta bo'linmaning har biri alohida tarkibiy qism bo'lib qoladi.
Ustun-kenglikdan foydalanish
Siz "column-count" dan foydalanishingiz mumkin bo'lgan boshqa xususiyat ham mavjud va sizning joylashuvingiz ehtiyojlariga qarab, saytingiz uchun yaxshi tanlov bo'lishi mumkin. Bu "ustun kengligi" dir. Avvalroq ko'rsatilgandek, bir xil HTML formatini ishlatib, buni biz CSS bilan amalga oshirishimiz mumkin:
.content {-moz-column-width: 500px; -webkit-column-width: 500px; ustunning kengligi: 500px; -moz-ustun bo'shligi: 30px; -webkit-column-gap: 30px; ustun bo'shligi: 30px; } .content div {displey: inline-block; }Buning ishlash usuli brauzer bu ustunning eng katta qiymati sifatida ushbu "ustunli kenglik" dan foydalanganligidir. Brauzer oynasi kengligi 500 pikseldan kam bo'lsa, bu 3 ta bo'linma bitta ustunda, boshqasining ustlaridan biri ko'rinadi. Bu mobil / kichik ekranlar uchun ishlatiladigan odatiy tartib.
Brauzer kengligi, ko'rsatilgan ustun bo'shliqlari bilan birga 2 ta ustunni joylashtirish uchun etarlicha katta bo'lganda, brauzer avtomatik ravishda bitta ustunli tartibdan ikki ustunga o'tadi. Ekran kengligini oshiring va nihoyat, o'z ustunida ko'rsatilgan 3 ta bo'linmaning har biri bilan 3 ta ustunli dizayn olasiz. Shunga qaramay, bu juda sezgir, ko'p qurilma bilan do'st layouts olishning ajoyib usuli va tartibni uslublarini o'zgartirish uchun ommaviy axborot so'rovlarini ishlatishingiz shart emas!
Boshqa ustun xususiyatlari
Bu erda ko'rsatilgan xususiyatlardan tashqari, sizning ustunlaringiz o'rtasida qoidalar yaratish imkonini beruvchi rang, uslub va kenglik qadriyatlari ham mavjud "ustun-qoidalar" uchun xususiyatlar mavjud. Sizning ustunlaringizni ajratib turadigan ba'zi bir chiziqlarga ega bo'lishni istasangiz, ular chegara o'rniga ishlatiladi.
Tajriba qilish vaqti
Ayni paytda, CSS ko'p satrlari tartibi juda yaxshi qo'llab-quvvatlanadi. Prefikslar yordamida veb-foydalanuvchilarning 94% dan ortig'i ushbu uslublarni ko'rish imkoniyatiga ega bo'ladi va qo'llab-quvvatlanmaydigan guruh Internet Explorer-ning juda eski versiyalari bo'lishi mumkin.
Ushbu qo'llab-quvvatlash darajasi hozirgi vaqtda CSS ustunlari bilan tajriba boshlashga va ishlab chiqarishga tayyor veb-saytlarda bu uslublarni joylashtirishga asos yo'q. O'zingizning tajribangizni ushbu maqolada keltirilgan HTML va CSS-dan foydalanib boshlashingiz va saytning joylashuvi ehtiyojlari uchun eng yaxshi nima qilishini ko'rish uchun turli qadriyatlar bilan o'ynashingiz mumkin.