Skip to content

CSS ile Süslü Başlıklar Yapın

11 de Mayıs de 2021

Başlıklar çoğu web sayfasında yaygındır. Aslında, hemen hemen her metin dokümanı en az bir başlığa sahip olma eğilimindedir, böylece okuduğunuz şeyin başlığını bilirsiniz. Bu başlıklar, HTML başlık öğeleri (h1, h2, h3, h4, h5 ve h6) kullanılarak kodlanmıştır. Bazı sitelerde, başlıkların bu unsurları kullanmadan kodlandığını görebilirsiniz. Bunun yerine, başlıklar, kendilerine eklenmiş belirli sınıf özniteliklerine sahip paragrafları veya sınıf öğeleri içeren bölümleri kullanabilir. Bu yanlış uygulamayı sık sık duymamızın nedeni, tasarımcının “başlıkların görünüşünü beğenmemesidir”. Varsayılan olarak, başlıklar kalın görüntülenir ve boyutları daha büyüktür, özellikle sayfanın metninin geri kalanından çok daha büyük yazı tipi boyutunda görüntülenen h1 ve h2 öğeleri. Bunun, bu öğelerin yalnızca varsayılan görünümü olduğunu unutmayın! CSS ile başlıkların istediğiniz gibi görünmesini sağlayabilirsiniz! Yazı tipi boyutunu değiştirebilir, kalın olanı kaldırabilir ve çok daha fazlasını yapabilirsiniz. Başlıklar, bir sayfanın başlıklarını kodlamanın uygun yoludur. İşte nedenlerinden bazıları.

Bölümler Yerine Başlık Etiketlerini Neden Kullanmalı?

Bu, başlıkları kullanmak ve bunları doğru sırayla kullanmak için en iyi nedendir (örn. H1, sonra h2, sonra h3, vb.). Arama motorları, başlık etiketlerinde yer alan metne en yüksek ağırlığı verir çünkü bu metnin anlamsal bir değeri vardır. Başka bir deyişle, sayfa başlığınızı H1 olarak etiketleyerek, arama motoru örümceğine sayfanın 1 numaralı odak noktası olduğunu söylersiniz. H2 başlıklarının # 2 vurgusu vardır ve bu böyle devam eder.

Başlıklarınızı Tanımlamak İçin Kullandığınız Sınıfları Hatırlamanız Gerekmiyor

Tüm Web sayfalarınızın kalın, 2em ve sarı olan bir H1’e sahip olacağını bildiğinizde, bunu stil sayfanızda bir kez tanımlayabilir ve tamamlayabilirsiniz. 6 ay sonra, başka bir sayfa eklediğinizde, sayfanızın üstüne bir H1 etiketi eklemeniz yeterlidir, ana sayfayı tanımlamak için hangi stil kimliğini veya sınıfı kullandığınızı öğrenmek için diğer sayfalara geri dönmeniz gerekmez. başlık ve alt başlıklar.

Güçlü Bir Sayfa Taslağı Sağlayın

Anahatlar, metnin okunmasını kolaylaştırır. Bu nedenle ABD okullarının çoğu, öğrencilere kağıdı yazmadan önce bir taslak yazmayı öğretti. Başlık etiketlerini bir anahat biçiminde kullandığınızda, metniniz çok hızlı bir şekilde görünen net bir yapıya sahip olur. Ayrıca, bir özet sağlamak için sayfa taslağını gözden geçirebilen araçlar vardır ve bunlar, ana hat yapısı için başlık etiketlerine dayanır.

Sayfanız Stiller Kapalı Olsa Bile Anlam Kazandıracak

Herkes stil sayfalarını görüntüleyemez veya kullanamaz (ve bu, # 1’e geri döner – arama motorları, stil sayfalarını değil, sayfanızın içeriğini (metnini) görüntüler). Başlık etiketleri kullanıyorsanız, başlıklar bir DIV etiketinin sağlamayacağı bilgiler sağladığı için sayfalarınızı daha erişilebilir hale getirmiş olursunuz.

Ekran Okuyucular ve Web Sitesi Erişilebilirliği İçin Yararlıdır

Başlıkların doğru kullanımı, bir belge için mantıksal bir yapı oluşturur. Bu, ekran okuyucuların bir siteyi görme bozukluğu olan bir kullanıcıya “okumak” için kullanacağı ve sitenizi engelli kişiler için erişilebilir hale getireceği şeydir.

Başlıklarınızın Metnini ve Yazı Tipini Biçimlendirin

Başlık etiketlerinin “büyük, kalın ve çirkin” sorunundan uzaklaşmanın en kolay yolu, metni istediğiniz gibi şekillendirmektir. Aslında, yeni bir web sitesinde çalışırken, genellikle ilk olarak paragraf, h1, h2 ve h3 stillerini yazmak en iyisidir. Sadece yazı tipi ailesi ve boyutu / ağırlığı ile devam edin. Örneğin, bu yeni bir site için bir ön stil sayfası olabilir (bunlar sadece kullanılabilecek bazı örnek stillerdir): Başlığınızın yazı tiplerini değiştirebilir veya metin stilini ve hatta metin rengini değiştirebilirsiniz. Tüm bunlar “çirkin” başlığınızı daha canlı ve tasarımınıza uygun bir şeye dönüştürecektir.

Sınırlar Manşetleri Giydirebilir

Kenarlıklar, başlıklarınızı iyileştirmenin harika bir yoludur ve eklenmesi kolaydır. Ancak sınırları denemeyi unutmayın – başlığınızın her iki tarafında bir kenarlığa ihtiyacınız yok. Ve basit, sıkıcı sınırlardan daha fazlasını kullanabilirsiniz. Bazı ilginç görsel stilleri tanıtmak için örnek başlığımıza bir üst ve alt kenarlık ekledik. İstediğiniz tasarım stiline ulaşmak için dilediğiniz şekilde bordür ekleyebilirsiniz.

Daha Fazla Pizazz için Başlıklarınıza Arka Plan Resimleri Ekleyin

Çoğu Web sitesinde, sayfanın üst kısmında bir başlık içeren bir başlık bölümü vardır – tipik olarak site başlığı ve bir grafik. Çoğu tasarımcı bunu iki ayrı öğe olarak düşünür, ancak buna gerek yoktur. Grafik sadece başlığı süslemek için oradaysa, neden onu başlık stillerine eklemiyorsunuz? Bu başlığın püf noktası, resmimizin 90 piksel uzunluğunda olduğunu bilmemizdir. Bu nedenle, 90 piksellik başlığın altına dolgu ekledik (dolgu: 0,5 0 90px 0p;). Başlık metninin tam olarak istediğiniz yerde görüntülenmesini sağlamak için kenar boşlukları, satır yüksekliği ve dolgu ile oynayabilirsiniz. Resimleri kullanırken hatırlanması gereken bir şey, ekran boyutlarına ve cihazlara göre değişen bir düzene sahip duyarlı bir web siteniz varsa (yapmanız gerekir), başlığınızın her zaman aynı boyutta olmayacağıdır. Başlığınızın tam boyutta olmasına ihtiyacınız varsa, bu sorunlara neden olabilir. Bazen görünebildikleri kadar havalı bir başlıkta arka plan resimlerinden genellikle kaçınmamızın nedenlerinden biri de budur.

Başlıklarda Görsel Değiştirme

Bu, Web tasarımcıları için bir başka popüler tekniktir çünkü grafiksel bir başlık oluşturmanıza ve başlık etiketi metnini bu resimle değiştirmenize olanak tanır. Bu, gerçekte, çok az yazı tipine erişimi olan ve çalışmalarında daha egzotik yazı tipleri kullanmak isteyen web tasarımcılarının eskimiş bir uygulamasıdır. Web yazı tiplerinin yükselişi, tasarımcıların sitelere yaklaşımını gerçekten değiştirdi. Başlıklar artık çok çeşitli yazı tiplerinde ayarlanabilir ve bu yazı tiplerinin gömülü olduğu görseller artık gerekli değildir. Bu nedenle, daha modern uygulamalara henüz güncellenmemiş eski sitelerdeki başlıkların yerine yalnızca CSS resimlerini bulacaksınız.

Jeremy Girard tarafından düzenlendi