Yatay çizgi nasıl eklenir
İki içerik bloğunun arasına <hr> koy. Kapanış etiketi yoktur:
Varsayılan olarak çizgi kapsayıcısının tüm genişliğini kaplar, altında ve üstünde küçük bir margin vardır ve ince, gri bir inset kenarlık olarak çizilir (bir açık, bir koyu kenar).
<hr> horizontal rule, yani yatay çizgi anlamına gelir. HTML'de bir tematik ara demektir: bir bölümün içinde konu ya da sahne değişimi. Ekran okuyucular onu bir ayırıcı olarak duyurur. Yalnızca dekoratif bir çizgi istiyorsan (bir başlığın altında, bir kartın çevresinde), onu o element üzerinde bir CSS kenarlığıyla çiz.
CSS ile hr çizgisine stil vermek
Varsayılan görünüm kenarlıklardan gelir, bu yüzden bir <hr> elementine stil vermenin güvenilir yolu onları kaldırıp tek bir kenarlığı kendin çizmektir:
| Değiştirmek için | Kullan |
|---|---|
| Renk | border-top: 2px solid #2563eb (border: none sonrasında) |
| Kalınlık | O kenarlıktaki genişlik, örneğin 6px |
| Stil | solid, dashed, dotted, double |
| Uzunluk | width: 40%, ortalamak için ayrıca margin-inline: auto |
| Yuvarlak uçlar | Kenarlık yerine height + background + border-radius |
| Çevresindeki boşluk | margin |
Bir hr üzerinde yalnızca color: blue ayarlamak güncel tarayıcılarda çizgiyi değiştirir, ama varsayılan inset stili onu gölgeler ve 2px yüksekliğini korur. Kenarlığı sıfırlamak sana tam olarak istediğini verir.
Eski hr özellikleri
Eski kodlar etiketin kendisinde özellikler kullanır:
<hr size="4" width="50%" color="red" noshade align="left">
size, width, color, noshade ve align artık kullanılmıyor. Tarayıcılar eski sayfalar düzgün görünsün diye onları hâlâ uygular, ama geçersiz HTML'dirler ve sonradan değiştirmek daha zordur. Onları yukarıdaki CSS ile değiştir.
Ortasında yazı olan bir ayırıcı
İki giriş butonu arasındaki "or" çizgisi bir <hr> değildir (bir hr metin içeremez). Kelimenin iki yanına birer çizgi çizilen bir flex satırıdır:
::before ve ::after parçalarının her biri flex: 1 ile boş alanın yarısını alır ve bir üst kenarlık çizer. or yerine daha uzun bir kelime yaz, çizgiler sığacak şekilde kısalır.
Dikey çizgiler
<hr> etiketinin dikey bir sürümü yoktur. Dikey bir çizgiyi bir elementin bir kenarındaki kenarlıkla ya da bir flex satırının içindeki ince bir elementle çiz:
border-inline-start çizgiyi metnin başladığı kenara koyar; bu İngilizcede sol, Arapça ya da İbranicede sağ taraftır, yani yerleşim iki yönde de çalışır.
Sık yapılan hatalar
</hr>yazmak.<hr>boş bir elementtir.<hr>ya da<hr />yeterlidir.- Süs için
<hr>kullanmak. Ekran okuyucular her birini duyurur. Yalnızca görsel olan bir çizginin yeri CSS'tir. - Yalnızca
colorile stil vermek. Kenarlığıborder: noneile sıfırla veborder-topayarla. - Çizgi çizmek için
<br>ya da alt çizgi karakterleri kullanmak.<hr>ya da bir kenarlık kullan.<br>etiketinin ne işe yaradığını görmek için alt satıra geçme sayfasına bak. - Artık kullanılmayan özellikler kullanmak.
size,width,colorvenoshadedeğerlerini CSS'e taşı.
Sıkça Sorulan Sorular
HTML'de yatay çizgi nasıl eklenir?
Kendi satırında <hr> etiketini kullan. Kapanış etiketi olmayan boş bir elementtir ve kapsayıcısının tüm genişliği boyunca bir çizgi çizer.
hr çizgisinin rengi nasıl değiştirilir?
Varsayılan kenarlığı kaldır ve kendininkini çiz: hr { border: none; border-top: 2px solid #2563eb; }. Yalnızca color ayarlamak da rengi değiştirir, ama varsayılan inset stili onu gölgeli ve iki tonlu bırakır.
hr çizgisi nasıl kalınlaştırılır?
Kenarlık genişliğini ayarla: hr { border: none; border-top: 4px solid #111827; }. Eski eğitimlerdeki size özelliği tarayıcılarda hâlâ çalışır ama artık kullanılmıyor, bu yüzden CSS kullan.
hr neyin kısaltması?
Horizontal rule, yani yatay çizgi. Güncel HTML'de tematik bir ara anlamına gelir: paragraflar arasında bir konu ya da sahne değişimi. Ekran okuyucular onu bir ayırıcı olarak duyurur.
HTML'de dikey çizgi nasıl yapılır?
HTML'de dikey çizgi etiketi yoktur. Bir elementin bir kenarına kenarlık ekle, örneğin border-inline-start: 2px solid #e5e7eb, ya da bir flex satırının içinde arka plan rengi olan dar bir element kullan.
