hr Etiketi

hr etiketi, ayırıcı yatay bir çizgi belirler. Bu etiketin avantajı, tek bir çizgi çizmek için gereksiz bloklar oluşturmaya gerek olmamasıdır. Kapanış etiketi gerektirmez.

Örnek

hr etiketinin nasıl çalıştığına bir bakalım:

html<hr>

Результат:

Örnek

CSS border-color özelliği ile çizginin rengini değiştirmeyi deneyelim:

html<hr style="border-color: red;">

Результат:

Örnek

Çizginin rengi, color özelliği ile de değiştirilebilir (bu durumda, hem color hem de border-color özellikleri aynı anda belirlenmişse - ikincisi önceliklidir):

html<hr style="color: red">

Результат:

Örnek

Şimdi çizginin rengini CSS border özelliği ile değiştirelim. Bu durumda çizginin çift kalınlıkta olacağına dikkat edin (çünkü hem üst hem de alt kenarlık belirledik):

html<hr style="border: 1px solid red;">

Результат:

Örnek

CSS border-top özelliği ile çizginin rengini değiştirmeyi deneyelim ve sadece üst kenarlığı belirleyelim. Artık çift çizgi olmayacak:

html<hr style="border-top: 1px solid red;">

Результат:

Örnek

CSS border-top özelliği ile, solid yerine dotted değerini belirleyerek noktalı bir çizgi yapalım:

html<hr style="border-top: 1px dotted red;">

Результат:

Örnek

CSS border-width özelliği ile çizginin kalınlığını artıralım:

html<hr style="border-width: 10px; border-color: red;">

Результат:

Örnek

Şimdi çizgiye height ile yükseklik ve border ile kenarlık ekleyelim. Kenarlık bu durumda üst ve alt olarak ikiye ayrılacak:

html<hr style="height: 10px; border: 1px solid red;">

Результат:

Ayrıca Bakınız