Veb-sahifalarni HTML bilan yaratishni boshlagach siz o'lchov bilan ishlay boshlaysiz. Saytingizga qarashni xohlagan tarzda ko'rsatish uchun, siz yoki boshqa dizaynerlar yaratgan dizayni mos kelishi ehtimol, siz o'sha sahifadagi matn hajmini va sahifadagi boshqa elementlarni o'zgartirmoqchisiz. Buni amalga oshirish uchun siz HTML "o'lcham" yorlig'ini izlay boshlashingiz mumkin, ammo uni tezda topasiz.
HTML formatidagi yorliq HTMLda mavjud emas. Buning o'rniga, shriftlaringiz, rasmlaringiz yoki tartibingizning hajmini belgilash uchun Cascading Style Sheets-dan foydalaning. Aslida, sayt matniga yoki boshqa elementga kerakli har qanday ingl. O'zgartirishlar CSS tomonidan boshqarilishi kerak! HTML faqat tuzilish uchun.
HTML o'lchami uchun eng yaqin yorliq, aslida kattaligi xususiyati bo'lgan eski shrift yorlig'i. Ushbu tagni HTML-da joriy versiyalarda bekor qilinganligi va kelajakda brauzerlar tomonidan qo'llab-quvvatlanmasligi haqida ogohlantirilsin! HTMLda shrift turini ishlatmoqchi emassiz! Buning o'rniga HTML-ni o'lchash va veb-sahifangizga mos ravishda CSS-ni o'rganish kerak.
Shrift o'lchovlari
Shubhasiz, CSS bilan o'lchamlashning eng oson yo'li. Moreso faqat matnni o'lchashdan ko'ra, siz CSS bilan veb-sayt tipografiyasi haqida batafsilroq ma'lumotga ega bo'lishingiz mumkin. Siz shrift o'lchamini, rangi, sumkasi, vazni, etakchi va boshqa xususiyatlarini aniqlashingiz mumkin. Shrift yorlig'i bilan siz faqat o'lchamni aniqlab berasiz, so'ngra faqat har bir mijoz uchun farq qiluvchi brauzerning shrift hajmiga nisbatan raqam sifatida foydalanasiz.
Sizning xatbuzarini 12pt shrift hajmiga o'rnatish uchun shrift o'lchamining uslubini kiriting:
h3 {font-size = 24px; }Ushbu uslub headiing3 elementlarining shrift hajmini 24 pikselga o'rnatadi. Buni tashqi uslub sahifasiga qo'shishingiz mumkin va saytingizdagi barcha H3lar ushbu uslubdan foydalanishlari mumkin.
Matningizga qo'shimcha matn terish uslubi qo'shishni istasangiz, ularni ushbu CSS qoidasiga qo'shishingiz mumkin:
h3 {font-hajmi: 24px; rang: # 000; harflarning og'irligi: oddiy; }Bu faqat H3 uchun shrift hajmini belgilab qo'ymas ekan, rangni qora (bu # 000 kodi degan ma'noni anglatadi) belgilaydi va vaznni "normal" ga qo'yadi. Odatiy holatda, brauzerlar 1-6 sarlavhalarini qalin harflar bilan ko'rsatishadi, shuning uchun bu uslub bu standartni va aslida matnni "qalin" qilib qo'yadi.
Rasm o'lchamlari
Tasvirlar o'lchamlarini aniqlash qiyin bo'lishi mumkin, chunki aslida tasvirni qayta o'lchamoq uchun brauzerdan foydalanishingiz mumkin. Albatta, brauzer bilan tasvirlarni qayta o'lchamaslik yomon fikrdir, chunki sahifalar sekinroq ko'tarilishi va brauzerlar tez-tez kichraytirishi mumkin bo'lgan ishni bajarishadi va tasvirlar yomon ko'rinadi. Buning o'rniga, tasvirni qayta o'lchamlarini o'zgartirish uchun grafik dasturlardan foydalaning va veb-sahifangizdagi HTML formatidagi haqiqiy o'lchamlarini yozing.
Shriftlardan farqli o'laroq, tasvirlar o'lchamini aniqlash uchun HTML yoki CSS dan foydalanishi mumkin. Siz tasvirning balandligini va balandligini aniqlaysiz. HTMLdan foydalanganda siz rasmning o'lchamini faqat pikselda belgilashingiz mumkin. CSS-dan foydalansangiz, dyuym, santimetr va foizlarni o'z ichiga olgan boshqa o'lchovlardan foydalanishingiz mumkin. Ushbu so'nggi qiymat, foizlar sizning suratlaringiz sezgir bo'lgan veb-saytdagi kabi suyuq bo'lishi kerak bo'lsa juda foydalidir.
HTML yordamida tasvir hajmini aniqlash uchun img yorlig'ining balandligi va kengligi xususiyatlarini ishlating. Misol uchun, bu rasm 400x400 piksel kvadrat bo'ladi:
height = "400" width = "400" alt = "image" />CSS yordamida tasvir hajmini aniqlash uchun balandlik va kenglik uslubi xususiyatlaridan foydalaning. Siz tasvirni o'lchash uchun CSS-dan foydalanib bir xil tasvir:
style = "height: 400px; width: 400px;" alt = "image" />Yaratilgan o'lchamlar
Agar tartibda siz aniqlagan eng keng tarqalgan o'lcham kenglik bo'lsa va siz qaror qabul qilishingiz kerak bo'lgan birinchi narsa, aniq kenglik tartibini yoki sezgir veb-saytni ishlatishdan iborat. Boshqacha qilib aytganda, siz kengligi aniq piksel, dyuym yoki nuqta sifatida aniqlaysizmi? Yoki tartibning kengligini ems yoki foizlarni qo'llash uchun moslashuvchan bo'lishi kerakmi? Mizanpaj hajmini aniqlash uchun siz rasmdagi kabi kengligi va balandligi CSS xususiyatlaridan foydalanasiz.
Ruxsat etilgan kenglik:
style = "width: 600px;">Suyuqlik kengligi:
style = "width: 80%;">Sizning tartibingiz uchun kengliklarga qaror qilsangiz, o'quvchilaringiz foydalanishi mumkin bo'lgan turli brauzer kengliklarini va ulardan foydalanadigan turli xil qurilmalarni yodda tutish kerak. Shuning uchun bugungi kunda turli xil qurilmalar va ekran o'lchamlari asosida ularning tartibini va o'lchamlarini o'zgartiruvchi sezgir veb-saytlar eng yaxshi amaliyot standartidir.