Başlıqlarını bəzəmək üçün Şriftlər, Sərhədlər və Şəkillərdən istifadə edin
Mövzular ən çox web səhifələrində yayılmışdır. Əslində, hər hansı bir mətn sənədində ən azı bir başlıq var, belə ki oxuduğunuz kitabın adını bilirsiniz. Bu başlıqlar h1, h2, h3, h4, h5 və h6 HTML başlıq elementləri ilə kodlanır.
Bəzi saytlarda başlıqların bu elementləri istifadə etmədən kodlaşdırdığını tapa bilərsiniz. Bunun əvəzinə, başlıqları paraqrafları onlara əlavə edilən xüsusi sinif xüsusiyyətləri və ya sinif elementləri olan bölmələrdən istifadə edə bilər. Bu yanlış tətbiq haqqında tez-tez eşitdiyim səbəbdir ki, dizayner "başlıqların görünüşünü sevməz". Default olaraq, başlıqlar qalın olaraq göstərilir və onlar ölçüsü daha böyükdür, xüsusən h1 və h2 elementləri, bir səhifənin mətninin qalan hissəsindən daha çox şrift ölçüsündə göstərilir. Bu yalnız bu elementlərin default görünüşüdür! CSS ilə, siz istəyə bilərsiniz baxın başlığı edə bilərsiniz! Şriftin ölçüsünü dəyişdirə, qalınlığı və daha çoxunu dəyişə bilərsiniz. Mövzular səhifənin başlıqlarını kodlaşdırmanın düzgün yoludur. Burada bəzi səbəblər var.
Niyə DIVs və Styling əvəzinə başlıq tags istifadə edin
Başlıq Tags kimi Axtarış Motorları
Mövzulardan istifadə etmək ən yaxşı səbəbdir və onları düzgün qaydada (yəni h1, sonra h2, sonra h3 və s.) Istifadə edin. Axtarış motorları başlıq etiketlərinə daxil olan mətnə ən yüksək ağırlıq verir, çünki o mətnə semantik bir dəyər var. Başqa sözlə, səhifə başlığınızı H1 etiketləyərək, axtarış mühərriki hörümçəsinə bu səhifənin # 1 odaklı olduğunu söyləyirsiniz. H2 başlıqları # 2 vurğu və s.
Başlıqlarınızı təyin etmək üçün istifadə etdiyiniz hansı dərsləri yadda saxlamaq lazım deyil
Bütün veb-səhifələrinizin qalın, 2em və sarı olan H1-ə malik olacağını bildiyiniz zaman, üslubunuzda bir dəfə təsvir edə bilərsiniz. 6 ay sonra, başqa bir səhifə əlavə edərkən, səhifənizin üstünə bir H1 etiketi əlavə etsəniz, əsas səhifəni təyin etmək üçün istifadə etdiyiniz stil kimliyini və ya sinifini tapmaq üçün digər səhifələrə qayıtmaq zorunda deyilsiniz başlıq və alt başlıqlar.
Onlar güclü bir səhifə təqdim edirlər
Mətnləri oxumaq asanlaşdırır. Ona görə ABŞ məktəblərinin əksəriyyəti tələbələrə kağız yazmadan əvvəl bir xülasə yazmağa öyrəddilər. Bir anahat formatında başlıq etiketlərindən istifadə etdikdə, mətniniz çox tez görünən aydın bir quruluşa malikdir. Üstəlik, bir xülasə vermək üçün səhifə konturunu nəzərdən keçirə bilən və bu kontur strukturu üçün başlıq etiketlərinə əsaslanan vasitələr var.
Sayfanız Stilleri Kapatmakla Hatta Söyleyecektir
Hər kəs stillərdən istifadə edə və ya istifadə edə bilməz (və bu # 1 -ə gəlir - axtarış motorları səhifənin məzmununu (mətnini) deyil, stillərdən deyil). Mövzulardan istifadə etsəniz, başlıqlarınız DIV etiketinin olmadığı məlumatları təmin etdiyiniz üçün səhifələrinizi daha əlçatan edirsiniz.
Ekran oxuculara və veb səhifəsinə daxil olmaq üçün faydalıdır
Başlıqların düzgün istifadə edilməsi sənədə mantıksal bir quruluş yaradır. Bu, ekran oxucunun sitenizi engelliler üçün erişilebilir hale getirebilmesi üçün, bir siteyi görme bozukluğu olan bir kullanıcıya "okumak" üçün istifadə edəcək.
Mövzularınızın mətni və fontunu tərtib edin
Mövzulardakı "böyük, cəsur və çirkin" problemdən uzaqlaşmanın ən asan yolu mətnin onları baxmaq istədikləri yolu tərtib etməkdir. Əslində, yeni bir veb saytında işləyərkən, adətən, h1, h2 və h3 üslubları paraqrafı yazıram. Mən adətən yalnız font ailəsi və ölçüsü / çəkisi ilə qalıram. Məsələn, bu yeni bir sayt üçün bir ön stil hesabatı ola bilər (bunlar yalnız istifadə edilə biləcək bəzi nümunə üslublarıdır):
bədən, html {margin: 0; padding: 0; } p {font: 1em Arial, Cenevrə, Helvetica, sans-serif; } h1 {font: qalın 2em "Times New Roman", Times, serif; } h2 {font: bold 1.5em "Times New Roman", Times, serif; } h3 {font: qalın 1.2em Arial, Cenevrə, Helvetica, sans-serif; }Başlığınızın şriftlərini dəyişdirə və ya mətn stilini və ya mətn rəngini dəyişdirə bilərsiniz. Bütün bunlar sizin "çirkin" başlığınızı daha canlı və dizaynınıza uyğun bir şey halına gətirəcək.
h1 {font: qalın italic 2em / 1em "Times New Roman", "MS Serif", "New York", serif; margin: 0; padding: 0; rəng: # e7ce00; }Sərhədlər başlıqlarını geyə bilər
Sərhədlər başlıqlarınızı yaxşılaşdırmaq üçün yaxşı bir yoldur. Sərhədləri əlavə etmək asandır. Ancaq sərhədləri sınamağı unutmayın - başlığınızın hər tərəfində bir sərhəd lazım deyil. Və yalnız düz qazma sərhədləri daha çox istifadə edə bilərsiniz.
h1 {font: qalın italic 2em / 1em "Times New Roman", "MS Serif", "New York", serif; margin: 0; padding: 0; rəng: # e7ce00; sərhədsiz: bərk # e7ce00 orta; sərhədsiz: dotted # e7ce00 incə; genişlik: 600px; }Bəzi maraqlı vizual üslubları təqdim etmək üçün nümunə başlığımın üst və altlıq sərhədini əlavə etdim. İstədiyiniz dizayn tərzinə nail olmaq istədiyinizi hər hansı bir şəkildə sərhədləri əlavə edə bilərsiniz.
Daha Pizazz üçün başlıqlarınıza fon şəkilləri əlavə edin
Bir çox veb səhifəsində başlıqlı bir başlıq bölməsi var - adətən site adı və bir qrafik. Dizaynerlərin əksəriyyəti bunu iki ayrı element hesab edir, ancaq sənə ehtiyac yoxdur. Qrafik yalnız başlığı bəzəyirsə, onda niyə başlıq üslublarına əlavə etmirsiniz?
h1 {font: qalın italic 3em / 1em "Times New Roman", "MS Serif", "New York", serif; background: #fff url ("fancyheadline.jpg") təkrar-x aşağı; padding: 0.5em 0 90px 0; text-align: mərkəzi; margin: 0; sərhəd altındakı: bərk # e7ce00 0.25em; rəng: # e7ce00; }Bu başlıqdakı hiylə mənim görüntüimin 90 piksel yüksək olduğunu bilirəm. Beləliklə 90px başlığının altına dolgu əlavə etdim (padding: 0.5 0 90px 0p;). Maraqlı, xətt boyu və padding ilə oynaya bilərsənsə, başlıq mətnini istədiyiniz yerdə tam olaraq göstərmək üçün.
Şəkilləri istifadə edərkən xatırlamaq bir şey ki, siz ekran ölçüsü və qurğulara əsasən dəyişən bir düzəlişlə əlaqəli bir veb saytınız varsa, siz başlığı həmişə eyni ölçüdə olmayacaq. Başlığınıza dəqiq bir ölçüyə ehtiyacınız varsa, bu problemə səbəb ola bilər. Bir başlıqda, bəzən görünə biləcəyi kimi, sərin şəkillərdən uzaqlaşmamaq səbəblərindən biridir.
Başlıqlarda Şəkil dəyişdirilməsi
Web dizaynerləri üçün başqa bir məşhur texnika, çünki bir qrafik başlıq yaratmaq və başlıq etiketinin mətni bu şəkil ilə əvəz etməyə imkan verir. Bu, həqiqətən, veb-dizaynerlərdən çox az sayda şriftə çıxış əldə etmiş və onların işində daha ekzotik şriftlərdən istifadə etmək istəmiş bir antiqued təcrübədir. Veb şriftlərin artması həqiqətən dizaynerlərin saytlara necə yanaşdığını dəyişdi. Mövzular indi yazılı şriftlərdən artıq ehtiyac duyulmayan müxtəlif şriftlər və şəkillərlə müəyyən edilə bilər. Bununla yanaşı, yalnız daha müasir təcrübələrə yenilənməmiş köhnə saytlarda başlıqların CSS şəkillərinin dəyişdirilməsini tapa bilərsiniz.
Jennifer Krynin tərəfindən hazırlanan əsər. Jeremy Girard 9/6/17 tarixində redaktə etdi