Html Sayfalarına Yatay Çizgi Ekleme – hr Etiketi

Bu yazımızda Html sayfalarımızı tasarlarken bazı durumlarda kullanma ihtiyacı duyduğumuz etiketlerden olan hr etiketi kullanımına bakacağız. Hr etiketi, Html sayfalarımızda içerikleri birbirinden ayırmak için yatay çizgi oluşturmamızı sağlar.

Kullanımı şu şekildedir;

Örneğin bir başlık ile yazı arasına hr etiketi ile yatay çizgi ekleyelim.

Tarayıcıdaki Görünümü

hr-etiketi

Gördüğünüz gibi başlık ile yazı arasında yatay bir çizgi oluştu. Hr etiketi ile eklenen yatay çizgi bulunduğu alanı yatayda 100% kaplar. Aşağıdan ve yukardan da belli bir miktar boşluk oluşturulur.

 ⇒  Html etiketlerinin varsayılan olarak gelen Css değerleri vardır. Hr etiketinin varsayılan Css değerleri şunlardır;

  • display: block;
  • margin-top: 0.5em;
  • margin-bottom: 0.5em;
  • margin-left: auto;
  • margin-right: auto;
  • border-style: inset;
  • border-width: 1px;

Diğer Html etiketlerinin varsayılan Css değerlerini öğrenmek istiyorsanız Css Dersleri 44 – Tüm Html Etiketleri için Varsayılan Css Değerleri yazımı okuyabilirsiniz.

 ⇒  Hr etiketi ile eklediğimiz yatay çizginin varsayılan olarak gelen Css değerlerini Css kodları yazarak değiştirebiliriz. Böylece yatay çizgileri tasarımlarımıza uygun hale getirmiş oluruz.

Örneğin yukardaki kodlar üzerinde bir kaç Css kodu uygulayarak yatay çizgiye farklı bir görünüm verelim.

Css kodları

Görünümü

html-yatay-cizgi

Css kodları ile yatay çizginin kalınlığını, rengini, genişliğini değiştirerek daha güzel bir görünüm elde ettik.

 ⇒  Hr etiketini tüm tarayıcılar desteklemektedir.

Html sayfalarında dikey çizgi nasıl oluşturulur öğrenmek istiyorsanız Html ve Css ile Dikey Çizgi Nasıl Yapılır? yazımı okuyabilirsiniz.

Umarım sizin için faydalı bir yazı olmuştur.

Yeni bir yazımda görüşmek üzere.

Yorum Yazın