Sarlavhalarni bezash uchun fontlar, chekka va rasmlardan foydalaning
Sarlavhalar ko'pchilik veb-sahifalarida keng tarqalgan. Darhaqiqat, har qanday matn hujjatida kamida bitta nom var, shuning uchun siz o'qiyotgan narsangizning nomini bilasiz. Ushbu sarlavhalar h1, h2, h3, h4, h5 va h6 HTML sarlavhasi elementlari yordamida kodlangan.
Ba'zi saytlarda, ushbu elementlarni ishlatmasdan, sarlavhalar kodlangan bo'lishi mumkin. Buning o'rniga, sarlavhalar paragraflarni ularga qo'shilgan o'ziga xos sinf atributlari yoki sinf elementlariga bo'linadigan qismlardan foydalanishlari mumkin. Men ushbu noto'g'ri amaliyot haqida tez-tez eshitganimning sababi dizaynerning "bosh satrlarni yoqtirmasligidir". Odatiy bo'lib, sarlavhalar qalin ko'rinishda ko'rsatiladi va ular kattaligi kattaroqdir, ayniqsa, h1 va h2 elementlari, sahifadagi matnning qolgan qismidan ancha katta shrift hajmida ko'rsatiladi. Yodda tuting, bu faqat ushbu elementlarning asl ko'rinishi! CSS-da, siz xohlagan narsalarni saralashingiz mumkin! Siz shrift o'lchamini o'zgartirishingiz mumkin, qalin va ko'proq narsani olib tashlashingiz mumkin. Sarlavha - sahifa sarlavhalarini kodlashning to'g'ri usuli. Bu erda ba'zi sabablar bor.
Nima uchun DIV va uslubdan ko'ra teglar nomini ishlatish kerak
Sarlavha teglari kabi qidirish motorlar
Bu sarlavhalarni ishlatish uchun eng yaxshi sababdir va ularni to'g'ri tartibda ishlatish (ya'ni, h1, keyin h2, keyin h3 va hk). Qidiruv mexanizmlari bosh satrlari ichiga kiritilgan matnlarga eng yuqori darajadagi vaznni beradi, chunki u matn uchun semantik qiymat mavjud. Boshqacha qilib aytganda, sahifa sarlavhasini H1 etiketleyerek, qidiruvi o'rgimchaklari, sahifaning # 1 markazida ekanligini bildirasiz. H2 sarlavhalari 2-darajali ahamiyatga ega va boshqalar.
Sizning sarlavhalaringizni belgilashda foydalanadigan qaysi mashg'ulotlar esingizdami?
Barcha veb-sahifalaringiz qalin, 2-darajali va sariq rangli H1ga ega bo'lishini bilganingizda, u sizning stil sahifangizda bir marta va belgilanishi mumkin. 6 oydan so'ng, siz boshqa sahifani qo'shgandan so'ng, siz o'z sahifangizning yuqori qismiga H1 yorlig'i qo'shasiz, boshqa sahifalarga qaytib borishingiz shart emas, shuning uchun siz asosiy kimligini aniqlash uchun qanday uslub identifikatori yoki sinfini ishlatgansiz sarlavha va pastki rahbarlar.
Ular mustahkam sahifa ko'rinishini beradi
Qisqacha matnlar matnni o'qishni osonlashtiradi. Aynan shuning uchun AQSh maktablarining aksariyati talabalarni qog'ozni yozishdan oldin, o'zlarining konstruktsiyasini yozishga o'rgatishdi. Agar anahat formatida teglarni ishlatsangiz, matningiz juda tezkor ko'rinadigan aniq tuzilishga ega. Bundan tashqari, sarlavhani taqdim etish uchun sahifa konturini ko'rib chiqadigan va ular anahat strukturasi uchun teglarga tayanadigan vositalar mavjud.
Sizning sahifangiz uslublarni o'zgartirib yuboradi
Har bir kishi stsenariy jadvallarini ko'rishi yoki ishlatishi mumkin emas (va bu # 1 ga qaytib keladi - qidiruv tizimlari uslub sahifalarini emas, balki sizning sahifaning mazmunini (matnini) ko'rishi mumkin). Agar siz teglaringizdan foydalansangiz, siz sahifalarni yanada qulayroq qilishingiz mumkin, chunki sarlavhalar DIV yorlig'i kelmasligi haqida ma'lumot beradi.
Displey o`quvchilari va veb-saytlarga kirish uchun foydali bo`ladi
Sarlavhalarni to'g'ri ishlatish hujjatga mantiqiy asos yaratadi. Ekranni o'qiydiganlar bu saytni "ko'rishni" ko'rish nogironligi bo'lgan foydalanuvchiga kiritadi, bu sizning saytingiz nogironlar uchun qulaydir.
Sizning sarlavhalaringizning matnini va harflarini tarbiya qiling
Sarlavha teglaridagi "katta, jasur va yomon" muammodan uzoqlashishning eng oson usuli - matnni siz xohlagan uslubda tarbiyalashdir. Aslida, yangi veb-saytda ishlayotganimda, odatda, xat, h1, h2 va h3 stillarini birinchi marta yozaman. Men odatda shrift oilasi va hajmi / vazni bilan biriktiraman. Misol uchun, bu yangi sayt uchun oldingi uslublar varag'i bo'lishi mumkin (ular ishlatilishi mumkin bo'lgan ba'zi misol tarzi):
body, html {margin: 0; padding: 0; } p {font: 1em Arial, Jeneva, Helvetica, sans-serif; } h1 {font: bold 2em "Times New Roman", Times, serif; } h2 {font: bold 1.5em "Times New Roman", Times, serif; } h3 {font: bold 1.2em Arial, Jeneva, Helvetica, sans-serif; }Siz sarlavhangizning shriftlarini o'zgartirishingiz yoki matn uslubini yoki hatto matn ranligini o'zgartirishingiz mumkin. Bularning barchasi sizning "yomon" sarlavhangizni yanada jonli va dizayningizga mos ravishda o'zgartiradi.
h1 {font: qalin kursiv 2em / 1em "Times New Roman", "MS Serif", "Nyu-York", serif; margin: 0; padding: 0; rang: # e7ce00; }Chegaralar bosh kiyimlarini kiyinishi mumkin
Chegaralar sizning sarlavhalaringizni yaxshilashning ajoyib usuli. Chegaralar qo'shilishi oson. Lekin chegaralarni sinashni unutmang - sarlavhangizning har bir tomoniga chekka kerak emas. Va faqat aniq zerikarli chegara ortiq foydalanishingiz mumkin.
h1 {font: qalin kursiv 2em / 1em "Times New Roman", "MS Serif", "Nyu-York", serif; margin: 0; padding: 0; rang: # e7ce00; chegara yuqori: qattiq # e7ce00 muhiti; chegara pastki: nuqta # e7ce00 yupqa; kengligi: 600px; }Ba'zi qiziqarli ingl. Uslublar bilan tanishish uchun namunali sarlavhaga yuqori va quyi chegarani qo'shdim. Siz istagan dizayn uslubiga erishmoqchi bo'lgan har qanday tarzda chegaralarni qo'shishingiz mumkin.
Bundan ham ko'proq Pizazz uchun fon rasmlarini sizning sarlavhalaringizga qo'shing
Ko'pgina veb-saytlar sahifaning yuqori qismidagi sarlavha qismini o'z ichiga oladi - bu odatda sayt nomi va grafik. Dizaynerlarning ko'pchiligi buni ikki alohida element deb o'ylaydi, lekin siz bunga hojat yo'q. Agar grafik faqatgina sarlavhani bezash uchun bo'lsa, unda nima uchun uni sarlavha uslubiga qo'shmaysiz?
h1 {font: qalin kursiv 3em / 1em "Times New Roman", "MS Serif", "Nyu-York", serif; fon: #fff url ("fancyheadline.jpg") takroriy-x pastki qismida; padding: 0.5em 090px 0; matnni aylantirish: markaz; margin: 0; chegara pastki: qattiq # e7ce00 0.25em; rang: # e7ce00; }Ushbu sarlavhadagi hiyla-nadirki, men tasvirni 90 piksel balandligidan bilaman. Shuning uchun men 90px sarlavhasining pastki qismiga to'ldirishni qo'shdim (to'ldirish: 0.5 0 90px 0p;). Sarlavha matni siz xohlagan joyda ko'rsatish uchun chekkalari, satr balandligi va padding bilan o'ynashingiz mumkin.
Tasvirlardan foydalanganda eslash kerak bo'lgan narsa, ekran o'lchamlari va qurilmalariga asoslangan o'zgarishlarga ega bo'lgan veb-saytga ega bo'lishingiz kerak (agar kerak bo'lsa), sarlavha har doim bir xil o'lchamga ega bo'lmaydi. Agar nomingiz aniq hajmga ega bo'lsa, bu muammolarga olib kelishi mumkin. Buning sabablaridan biri, umuman, sarlavha ostidagi fon rasmlarini, ba'zan qarashga yaraydigan salqin narsalardan qochishim.
Yangiliklar sarlavhalarini almashtirish
Bu veb-dizaynerlar uchun boshqa mashhur texnika, chunki siz grafikli sarlavhani yaratishingiz va ushbu tasvir bilan sarlavhaning matnini o'zgartirishingiz mumkin. Bu haqiqatan ham veb-dizaynerlar juda kam shriftlarga kirishgan va o'z ishlarida ko'proq ekzotik shriftlardan foydalanishni istagan antiqa amaliyotdir. Veb-shriftlarning ko'tarilishi, dizaynerlar saytlarga qanday yaqinlashayotganini o'zgardi. Endi sarlavhalar endi keng ko'lamli shriftlar va tasvirlarga o'rnatilishi mumkin. Shu sababli, eski veb-saytlardagi yangiliklar uchun yangilangan CSS-lar tasvirini faqat zamonaviyroq ilovalarga yangilamagan holda topishingiz mumkin.
Jennifer Kryninning original maqolasi. Jeremy Girard tomonidan 9/6/17 yil tahrirlangan