Η ετικέτα hr
Η ετικέτα hr ορίζει μια οριζόντια διαχωριστική
γραμμή. Το πλεονέκτημα της ετικέτας είναι ότι για να
σχεδιάσετε μια μοναδική γραμμή, δεν απαιτείται
δημιουργία περιττών μπλοκ. Δεν απαιτεί ετικέτα κλεισίματος.
Παράδειγμα
Ας δούμε πώς λειτουργεί η ετικέτα hr:
<hr>
:
Παράδειγμα
Ας προσπαθήσουμε να αλλάξουμε το χρώμα της γραμμής χρησιμοποιώντας
την ιδιότητα CSS border-color:
<hr style="border-color: red;">
:
Παράδειγμα
Το χρώμα της γραμμής μπορεί επίσης να αλλάξει και με την ιδιότητα
color
(στην περίπτωση αυτή, εάν έχουν οριστεί ταυτόχρονα και οι δύο ιδιότητες
color και border-color
- η δεύτερη έχει προτεραιότητα):
<hr style="color: red">
:
Παράδειγμα
Ας αλλάξουμε τώρα το χρώμα της γραμμής χρησιμοποιώντας
την ιδιότητα CSS border.
Παρατηρήστε ότι σε αυτήν την περίπτωση η γραμμή
θα γίνει διπλάσιας αξίας (καθώς ορίσαμε
σύνορα και πάνω και κάτω):
<hr style="border: 1px solid red;">
:
Παράδειγμα
Ας προσπαθήσουμε να αλλάξουμε το χρώμα της γραμμής χρησιμοποιώντας την ιδιότητα CSS
border-top,
και ας ορίσουμε μόνο το πάνω περίγραμμα. Τώρα
δεν θα υπάρχει διπλή γραμμή:
<hr style="border-top: 1px solid red;">
:
Παράδειγμα
Ας κάνουμε τη γραμμή σε μορφή στιγμών χρησιμοποιώντας
την ιδιότητα CSS border-top,
ορίζοντας την τιμή dotted αντί για solid:
<hr style="border-top: 1px dotted red;">
:
Παράδειγμα
Ας αυξήσουμε το πάχος της γραμμής χρησιμοποιώντας
την ιδιότητα CSS border-width:
<hr style="border-width: 10px; border-color: red;">
:
Παράδειγμα
Και τώρα ας προσθέσουμε ύψος height στη γραμμή
και περίγραμμα μέσω της border.
Το περίγραμμα σε αυτήν την περίπτωση θα χωριστεί σε πάνω και κάτω:
<hr style="height: 10px; border: 1px solid red;">
:
Δείτε επίσης
-
η ετικέτα
br,
που ορίζει αλλαγή γραμμής
