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;
|
1 2 3 |
<hr /> |
Örneğin bir başlık ile yazı arasına hr etiketi ile yatay çizgi ekleyelim.
Html Kodları
|
1 2 3 4 5 6 7 |
<h2> Başlık </h2> <hr /> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> |
Tarayıcıdaki Görünümü
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ı
|
1 2 3 4 5 6 7 8 9 10 11 12 |
body { text-align: center; } hr { width: 60%; border-style: solid; color: cornflowerblue; border-width: 2px; } |
Görünümü
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.
