Η ετικέτα hr

Η ετικέτα hr ορίζει μια οριζόντια διαχωριστική γραμμή. Το πλεονέκτημα της ετικέτας είναι ότι για να σχεδιάσετε μια μοναδική γραμμή, δεν απαιτείται δημιουργία περιττών μπλοκ. Δεν απαιτεί ετικέτα κλεισίματος.

Παράδειγμα

Ας δούμε πώς λειτουργεί η ετικέτα hr:

html<hr>

Результат:

Παράδειγμα

Ας προσπαθήσουμε να αλλάξουμε το χρώμα της γραμμής χρησιμοποιώντας την ιδιότητα CSS border-color:

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

Результат:

Παράδειγμα

Το χρώμα της γραμμής μπορεί επίσης να αλλάξει και με την ιδιότητα color (στην περίπτωση αυτή, εάν έχουν οριστεί ταυτόχρονα και οι δύο ιδιότητες color και border-color - η δεύτερη έχει προτεραιότητα):

html<hr style="color: red">

Результат:

Παράδειγμα

Ας αλλάξουμε τώρα το χρώμα της γραμμής χρησιμοποιώντας την ιδιότητα CSS border. Παρατηρήστε ότι σε αυτήν την περίπτωση η γραμμή θα γίνει διπλάσιας αξίας (καθώς ορίσαμε σύνορα και πάνω και κάτω):

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

Результат:

Παράδειγμα

Ας προσπαθήσουμε να αλλάξουμε το χρώμα της γραμμής χρησιμοποιώντας την ιδιότητα CSS border-top, και ας ορίσουμε μόνο το πάνω περίγραμμα. Τώρα δεν θα υπάρχει διπλή γραμμή:

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

Результат:

Παράδειγμα

Ας κάνουμε τη γραμμή σε μορφή στιγμών χρησιμοποιώντας την ιδιότητα CSS border-top, ορίζοντας την τιμή dotted αντί για solid:

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

Результат:

Παράδειγμα

Ας αυξήσουμε το πάχος της γραμμής χρησιμοποιώντας την ιδιότητα CSS border-width:

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

Результат:

Παράδειγμα

Και τώρα ας προσθέσουμε ύψος height στη γραμμή και περίγραμμα μέσω της border. Το περίγραμμα σε αυτήν την περίπτωση θα χωριστεί σε πάνω και κάτω:

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

Результат:

Δείτε επίσης