Veb-saytlarni qurishda markaz rasmlari, matnlar va blok elementlari
Agar siz veb-saytlar yaratish usulini o'rganmoqchi bo'lsangiz, brauzer oynasida qanday narsalarni markazlashtirish haqida ma'lumot olishingiz kerak bo'lgan eng keng tarqalgan fokuslardan biri hisoblanadi. Bu sahifadagi rasmni markazlashtirishni anglatishi mumkin, yoki loyihaning bir qismi sifatida sarlavhalar kabi markazlashtirilgan matn bo'lishi mumkin.
Markazlangan tasvirlar yoki matnlarning yoki hatto butun veb-sahifangizdagi ushbu ingl. Ko'rinishni bajarishning to'g'ri usuli Cascading Style Sheets (CSS) dan foydalanishdir. Markazlashtirilgan xususiyatlarning aksariyati 1.0-versiyadan beri CSS-da bo'lib, ular CSS3-da va zamonaviy veb-brauzerlarda katta ishlaydi.
Veb-dizaynning ko'p jihatlari singari, veb-sahifadagi elementlarga CSS-dan foydalanishning ko'p usullari mavjud. Ushbu ingl. Ko'rinishga erishish uchun CSS-dan foydalanishning turli usullarini ko'rib chiqamiz.
HTMLda CSS elementlaridan foydalanishga umumiy nuqtai nazar
CSS-ning markazlashuvi veb-dizaynerlarni boshlash uchun qiyin bo'lishi mumkin, chunki ushbu vizual uslubni amalga oshirish uchun juda ko'p turli xil usullar mavjud. Har xil metodlar har qanday elementda ishlashning barcha usullarini ishlamasligini yaxshi biladigan yoki tajribali veb-ishlab chiquvchilar bo'lishi mumkin bo'lsa-da, turli xil metodlar qaysi usulni qo'llashni bilishlari kerakligini anglatadigan yangi veb-mutaxassislar uchun bu juda qiyin bo'lishi mumkin. Eng yaxshi narsa, bir necha yondashuvni tushunishdir. Ulardan foydalanishni boshlaganingizda, qanday hollarda eng yaxshi usulni bilib olasiz.
Yuqori darajadagi CSS-dan foydalanishingiz mumkin:
- Markaz matni
- Blok-darajali elementni (masalan, bo'linma)
- Rasmni ko'rsatish
- Vertikal ravishda blokni yoki tasvirni markazlashtirish
Ko'p (ko'p) yillar oldin veb-dizaynerlar markazga rasm va matnni ko'rsatish uchun
CSS bilan matnni markazlashtirish
Veb-sahifani markazlashtirishning eng oson yo'li matndir. Buni amalga oshirish uchun bilishingiz kerak bo'lgan yagona uslublar mavjud: text-align. Quyidagi CSS uslubini oling, masalan:
p.center {matn-align: markaz; }
CSS-ning ushbu satri bilan markaziy sinfi bilan yozilgan har bir paragraf ota-element ichida gorizontal ravishda markazlashtirilgan bo'ladi. Masalan, paragraf bir bo'linmada bo'lsa, ya'ni bu bo'linma bolasi degani bo'lsa, u
HTML-hujjatida qo'llaniladigan bu sinfning namunasi:
Ushbu matn markazlashtirilgan.
Matnni hizalanish xususiyati bilan matnni markazlashtirganda, u o'z tarkibidagi elementning markazida joylashganligini va to'liq sahifaning o'zida emasligini unutmang. Shuni ham yodda tutingki, markazlashtirilgan matn matnni katta bloklar uchun o'qish qiyin bo'lishi mumkin, shuning uchun bu uslubni ozgina foydalaning. Maqola yoki boshqa mazmun uchun teaser matn kabi sarlavhalar va kichik bloklar odatda markazlashtirilgan holda o'qilishi va nozik bo'lishi mumkin, lekin to'liq matnning o'zi kabi katta hajmdagi matnlar mazmun to'liq markaz bo'lsa, iste'mol qilish qiyin bo'ladi haqli. Yodingizda bo'lsin, veb-sayt matniga kelganda o'qiydiganlik doimo muhim !
CSS bilan tarkibiy bloklarni markazlashtirish
Bloklar sizning sahifangizda ma'lum bir kenglikga ega bo'lgan va blok darajadagi element sifatida yaratilgan har qanday elementlardir. Ko'pincha bu bloklar HTML
div.center {
margin: 0 avto;
eni: 80em;
}
Marj xususiyati uchun ushbu CSS steneri chap va o'ngdagi "auto" dan foydalanilsa, yuqori va pastki chetida chekkalari 0 ga teng bo'ladi. Bu, aslida mavjud bo'lgan har qanday joyni oladi va uni ko'rinish oynasining ikki tomoni o'rtasida teng ravishda ajratib, sahifani samarali ravishda markazlashtiradi.
Bu erda HTMLda qo'llaniladi:
lekin uning ichidagi matn hizalanadi.
Blokingiz ma'lum bir kenglikga ega bo'lgan ekan, o'z ichiga element o'z ichiga oladi. Bu blokdagi matnlar uning ichida markazlashtirilmaydi, aksincha, qoldiriladi. Bu shundan iboratki, veb-brauzerlardagi asl matnda matn chap-ashyoga asoslangan. Matn markazlashtirilgan bo'lishini xohlasangiz, bu usul bilan birga bo'linishni markazlashtirish uchun ilgari ko'rib chiqqan matnni moslash xususiyatidan foydalanishingiz mumkin.
CSS yordamida CSS-ni tasvirlash
Ko'pgina brauzerlar rasmlarni bir xil matnli hizalamak xususiyati yordamida markazlashtiradigan bo'lsa-da, xatboshiga qarasak, bu usulga tayanish yaxshi emas, chunki W3C tomonidan tavsiya etilmaydi. Tavsiya etilmaydi, chunki brauzerlarning kelajakdagi versiyalari ushbu usulni e'tibordan chetda qoldirish imkoniyatiga ega.
Tasvirni markazlashtirish uchun matnni aylantirishni ishlatish o'rniga brauzerda tasvirning blok-darajali element ekanligini tushuntirishingiz kerak. Shunday qilib, uni boshqa bloklar singari markazlashtira olasiz. Mana, buni amalga oshirish uchun CSS:
img.center {
displey: blok;
margin-left: auto;
margin-right: auto;
}
Va biz markazlashishni istagan tasvir uchun HTML:
Bundan tashqari, CSS-ni ishlatib moslamalarni markazlashtira olasiz (quyida ko'rib chiqing), lekin bu yondashuv tavsiya etilmaydi, chunki u siz HTML formatlashingizga ingl. Uslublar qo'shadi. Unutmangki, uslubni va strukturani ajratib olishni xohlaymiz, shuning uchun siz CSS-ning uslublarini HTML-kodingizga qo'shib qo'yasiz va shuning uchun uni iloji boricha yo'l qo'ymaslik kerak.
Elementlarni CSS bilan vertikal markazlashtirish
Ob'ektlarni vertikal markazlashtirish veb-dizayni uchun har doim qiyin bo'lgan, ammo CSS3 da CSS moslashuvchan qutisi joylashtirish modulining chiqarilishi bilan uni amalga oshirishning usullari mavjud.
Landshaft hizalama yuqorida ko'rsatilgan gorizontal hizalama singari ishlaydi. CSS xususiyati o'rta qiymat bilan vertikal-hizalanadi.
.vcenter {
vertikal-align: o'rta;
}
Ushbu yondashuvning salbiy tomoni shundaki, barcha brauzerlar CSS CSS-ni qo'llab-quvvatlamaydi, garchi bu yangi CSS-uslubiga ko'proq mos keladi! Darhaqiqat, bugungi kunda barcha zamonaviy brauzerlar ushbu CSS uslubini qo'llab-quvvatlamoqda. Bu sizning Flexbox bilan xavotirlanishingiz juda katta brauzer versiyasi bo'lishi mumkin degan ma'noni anglatadi.
Agar eski brauzerlar bilan bog'liq muammolar mavjud bo'lsa, W3C matnni quyidagi usul yordamida vertikal ravishda konteynerga markazlashtirishni tavsiya qiladi:
- Elementlarni div kabi o'z ichiga olgan element ichiga joylashtiriladi.
- Mavjud elementga minimal balandlikni o'rnating.
- Elementni bir jadval xujayrasi deb e'lon qilish.
- Vertikal hizalamayı "o'rta" ga sozlang.
Masalan, bu erda CSS:
.vcenter {
min balandlik: 12em;
displey: jadval-hujayra;
vertikal-align: o'rta;
}
Va bu erda HTML:
Ushbu matn qutiga vertikal holda joylashgan.
Portret markazlashtirilgan va eski Internet Explorer versiyalari
Internet Explorer (IE) ni markazlashtirishga majburlashning ba'zi usullari bor va shundan keyin faqat IE uslublarni ko'rib chiqishi uchun shartli izohlar ishlatiladi, biroq ular biroz noodatiy va chirkin. Yaxshi yangilik, Microsoftning yaqinda IE-ning eski versiyalarida qo'llab-quvvatlashni bekor qilish to'g'risidagi qarori bilan, brauzerlarning qo'llab-quvvatlanmaydigan brauzerlari tezlik bilan chiqib ketishi kerak, bu veb-dizaynerlar uchun CSS-ning FlexBox kabi zamonaviy yondashuvlaridan foydalanishni osonlashtiradi, bu esa barcha CSS-ni yaratadi, faqatgina markazlashtirmasdan, veb-dizaynerlar uchun yanada qulayroqdir.