Κατά τη δημιουργία σελίδες HTMLο σχεδιασμός παίζει σημαντικό ρόλο. Ειδικά όταν μιλάμε για διάφορα σύμβολα και διακοσμητικό σχέδιο: αυτά τα μικρά πράγματα βοηθούν να γίνει η "γλώσσα" της σελίδας σας πιο προσιτή και ξεκάθαρη, επιπλέον αλλάζουν σημαντικά την αντίληψή της και εμφάνισηγενικά. Ένα από τα πιο σημαντικά στοιχεία σχεδίασης είναι η οριζόντια γραμμή και στη συνέχεια θα μάθουμε λεπτομερέστερα πώς να δουλεύουμε με αυτήν και πώς να κάνουμε μια οριζόντια γραμμή σε html.

Τι είναι η οριζόντια γραμμή και γιατί χρειάζεται

Η οριζόντια γραμμή στο html είναι ένα στοιχείο σχεδίασης σελίδας που εκτελεί έναν αριθμό λειτουργιών:

1. Διακοσμητικός. Βοηθά να προσθέσετε ελκυστικότητα στη σελίδα.
2. Διαίρεση. Συμβάλλει στον αποτελεσματικό διαχωρισμό πληροφοριών διαφορετικών σημασιών.
3. Τονίζοντας ή τονίζοντας. Θα επιστήσει την προσοχή των επισκεπτών της σελίδας στις απαραίτητες και πιο σημαντικές πληροφορίες.

Είναι η οριζόντια γραμμή που θεωρείται περισσότερο προσιτό τρόπογια την υλοποίηση μιας σειράς λειτουργιών. Είναι πολύ απλό στη δημιουργία και εξωτερικά φαίνεται πολύ κερδοφόρο. Με απλές αλλαγές στον κώδικα html, μπορείτε να ελέγξετε:

• μήκος;
• πλάτος;
• χαρακτηριστικά χρώματος?
• ευθυγράμμιση στη μία ή την άλλη άκρη.

Αξίζει να σημειωθεί ότι η οριζόντια γραμμή αναφέρεται σε στοιχεία μπλοκ. Αυτό σημαίνει ότι καταλαμβάνει μια νέα γραμμή στη σελίδα και το κείμενο που ακολουθεί θα εμφανίζεται παρακάτω.

Δημιουργία οριζόντιας γραμμής σε HTML

Μπορείτε να ορίσετε μια γραμμή χρησιμοποιώντας μια απλή ετικέτα - hr σε τριγωνικές αγκύλες. Είναι συντομογραφία του "Horisontal Rule" και ορίζει τις κλασικές εξωτερικές παραμέτρους. Διαφέρει από πολλά άλλα στο ότι δεν χρειάζεται ετικέτα κλεισίματος και μπορεί να υπάρχει ανεξάρτητα. Αλλαγή εξωτερικά χαρακτηριστικάΤο στοιχείο μπορεί να γίνει χρησιμοποιώντας πρόσθετες τιμές στην ετικέτα:

1. Μήκος. Εάν δεν θέλετε το μήκος της γραμμής να καλύπτει ολόκληρη τη σελίδα, τότε μπορείτε να ορίσετε το επιθυμητό μέγεθος σε pixel ή ποσοστά. Αυτό γίνεται με τη βοήθεια μιας πρόσθετης λέξης "πλάτος" στην ετικέτα και μια αριθμητική ένδειξη του μήκους που καθορίζεται μετά το σύμβολο "=" σε εισαγωγικά.

Μοιάζει με αυτό. Για παράδειγμα, εάν χρειαζόμαστε μήκος 100 pixel, ορίζουμε την εξής ετικέτα: hr width="100"

1. ευθυγραμμία. Η ευθυγράμμιση είναι δυνατή στα αριστερά ή στα δεξιά άκρα, καθώς και στο κέντρο. Αυτό το χαρακτηριστικόλειτουργεί μόνο αν έχετε ήδη ρυθμίσει παράμετρος πλάτους, καθώς δεν είναι δυνατή η ευθυγράμμιση μιας ολοσέλιδης γραμμής. Για τη στοίχιση, ορίζουμε ένα πρόσθετο χαρακτηριστικό στην ετικέτα "align" και προσθέτουμε μια κατεύθυνση σε αυτήν: κέντρο - για το κέντρο, αριστερά - για αριστερά και δεξιά - για τη δεξιά στοίχιση.

Η ολοκληρωμένη ετικέτα σε αυτήν την περίπτωση θα μοιάζει με αυτό. Για παράδειγμα, εάν θέλουμε να ορίσουμε την κεντρική στοίχιση για οριζόντια γραμμήΜε μήκος 150 pixel, η τελική ετικέτα θα μοιάζει με αυτό: hr align="center" width="150".

Σημειώστε ότι το "align", η μέτρηση για τη στοίχιση, έχει οριστεί σε 1, παρόλο που το χαρακτηριστικό εξαρτάται από τη μέτρηση του πλάτους.

1. Πλάτος. Προαιρετικά, μπορείτε επίσης να καθορίσετε ένα πλάτος, δημιουργώντας μια έντονη ή λεπτή υπογράμμιση. Αυτό το κριτήριο δεν εξαρτάται από τίποτα και μπορεί να χρησιμοποιηθεί ως ανεξάρτητο χωρίς να προσδιορίσετε το μήκος ή την ευθυγράμμιση. Για αυτό, χρησιμοποιούμε το χαρακτηριστικό size στην ετικέτα και μια αριθμητική τιμή ίση με το επιθυμητό πλάτος σε pixel. Ο αριθμός καθορίζεται σε εισαγωγικά μετά το χαρακτηριστικό μέγεθος και το σύμβολο "=".

Έτσι, αν θέλουμε να δημιουργήσουμε μια γραμμή με πλάτος 15 pixel, πρέπει να δημιουργήσουμε την παρακάτω ετικέτα: hr size="15".

1. Χρώμα. Ορίζεται επίσης ως ανεξάρτητος δείκτης. Για να το αλλάξετε, χρησιμοποιήστε το χαρακτηριστικό χρώματος σε συνδυασμό με το όνομα του χρώματος με τη μορφή κωδικού ή ενεργό αγγλική γλώσσα. Το χρώμα καθορίζεται σε εισαγωγικά μετά το σύμβολο "=".

Έτσι, η ετικέτα για την τυπική λευκή γραμμή μπορεί να γραφτεί με δύο τρόπους: hr color="#FFFFFF" ή hr color="white"

Το μαύρο χρώμα μπορεί να δημιουργηθεί χρησιμοποιώντας τον κωδικό #000000.

1. Αποταμιεύω σκιά. Εάν χρειάζεστε ένα στοιχείο που δεν περιέχει σκιά, τότε το χαρακτηριστικό noshade θα πρέπει να χρησιμοποιηθεί στην ετικέτα. Μπορεί να χρησιμοποιηθεί μόνο του ή σε συνδυασμό με άλλα στοιχεία. Η ετικέτα για την τυπική γραμμή που τη χρησιμοποιεί θα μοιάζει με αυτό: hr noshade

Δημιουργήστε μια οριζόντια γραμμή με βίντεο

Και αν θέλετε να λάβετε πληροφορίες σε πιο οπτική μορφή, τότε ανατρέξτε στο παρακάτω βίντεο, το οποίο περιγράφει λεπτομερώς τις δυνατότητες εργασίας με οριζόντια γραμμή.

Έχοντας καθορίσει τις απαιτούμενες διαστάσεις της οριζόντιας γραμμής, μπορείτε να τακτοποιήσετε τις σελίδες του ιστότοπου με τέτοιο τρόπο ώστε οι πληροφορίες να είναι δομημένες και οπτικά καλοσχηματισμένες. Αυτό διευκολύνει τους επισκέπτες να αντιληφθούν τις πληροφορίες που παρουσιάζονται και να διακρίνουν τον ιστότοπό σας από άλλους.

Γεια σε όλους! Σήμερα θα σας πω πώς χρησιμοποιώντας htmlκάντε μια οριζόντια γραμμή.

Στην πραγματικότητα, η ανάγκη δημιουργίας μιας οριζόντιας γραμμής προκύπτει αρκετά συχνά, για παράδειγμα, όταν χρειάζεται να διαχωρίσετε ένα μέρος του κειμένου από το άλλο.

οριζόντιες και κάθετες γραμμές με css

Μπορείτε να το κάνετε αυτό με το css. Για να γίνει αυτό, περικλείω το απαραίτητο τμήμα κειμένου σε ένα μπλοκ χρησιμοποιώντας την ετικέτα div και, στη συνέχεια, στο αρχείο style.css ή απευθείας στον κώδικα html, γράφουμε ιδιότητες για αυτό το μπλοκ για το επάνω ή το κάτω περίγραμμα χρησιμοποιώντας το περίγραμμα-top και σύνορα-κάτω. Εδώ είναι ένα παράδειγμα:

Σε αυτήν την περίπτωση, το διαμόρφωσα με css απευθείας από τον κώδικα html και έκανα το πάνω περίγραμμα μια συμπαγή γραμμή και το κάτω περίγραμμα μια διακεκομμένη γραμμή.

Δείτε πώς θα φαίνεται στη σελίδα:

Οριζόντια γραμμή με css.

Αυτή η μέθοδος έχει τα πλεονεκτήματά της:

• Ένα ευρύ φάσμα ρυθμίσεων που σας επιτρέπουν να ορίσετε σχεδόν κάθε τύπο γραμμής.
• Μπορείτε να δημιουργήσετε τόσο οριζόντια όσο και κάθετες γραμμές. Για να δημιουργήσετε κάθετες γραμμές, πρέπει να αλλάξετε το περίγραμμα-top σε περίγραμμα-αριστερά και περίγραμμα-κάτω σε περίγραμμα-δεξιά.

Τα μειονεκτήματα περιλαμβάνουν τον σχετικό όγκο του κώδικα.

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

---

.

οριζόντια γραμμή με ετικέτα html

---

Το πρώτο χαρακτηριστικό αυτής της ετικέτας είναι ότι δεν έχει ζευγοποιημένη τελική ετικέτα. Μπορεί να χρησιμοποιηθεί οπουδήποτε στον κώδικα html μεταξύ ετικετών και.

Αυτή η ετικέτα έχει τα ακόλουθα χαρακτηριστικά:

• Πλάτος- ορίζει το μήκος της οριζόντιας γραμμής μας σε pixel ή ποσοστά.
• χρώμα– καθορίζει το χρώμα της γραμμής.
• Ευθυγραμμίζω– ορίζει την ευθυγράμμιση της γραμμής στη δεξιά άκρη - δεξιά, στην αριστερή άκρη - αριστερά, στο κέντρο - κέντρο.
• Μέγεθος– πάχος γραμμής σε pixel.

Εδώ παράδειγμα html- κωδικός.

Μια εργασία

Κάντε μια οριζόντια γραμμή στη σελίδα.

Λύση

Οι οριζόντιες γραμμές είναι καλές για το διαχωρισμό ενός μπλοκ κειμένου από ένα άλλο. Μικρό κείμενο με οριζόντιες γραμμές πάνω και κάτω τραβάει περισσότερο την προσοχή του αναγνώστη παρά το κανονικό κείμενο.

Με ετικέτα

---

μπορείτε να σχεδιάσετε μια οριζόντια γραμμή, η εμφάνιση της οποίας εξαρτάται από τα χαρακτηριστικά που χρησιμοποιούνται, καθώς και από το πρόγραμμα περιήγησης. Η ετικέτα είναι ένα στοιχείο μπλοκ, επομένως η γραμμή ξεκινά πάντα με νέα γραμμή, και μετά από αυτό, όλα τα στοιχεία εμφανίζονται στην επόμενη γραμμή. Με πολλά χαρακτηριστικά ετικέτας

---

Η διαχείριση της γραμμής που δημιουργείται μέσω αυτής της ετικέτας είναι εύκολη. Εάν συνδέσετε επίσης τη δύναμη των στυλ, τότε η προσθήκη μιας γραμμής σε ένα έγγραφο μετατρέπεται σε μια απλή εργασία.

Προεπιλεγμένη γραμμή

---

εμφανίζεται με γκρι χρώμα και με εφέ έντασης. Αυτός ο τύπος γραμμής δεν ταιριάζει πάντα με το σχεδιασμό του ιστότοπου, επομένως η επιθυμία των προγραμματιστών να αλλάξουν το χρώμα και άλλες παραμέτρους της γραμμής μέσω στυλ είναι κατανοητή. Ωστόσο, τα προγράμματα περιήγησης έχουν διφορούμενες προσεγγίσεις σε αυτό το ζήτημα, εξαιτίας των οποίων θα πρέπει να χρησιμοποιήσετε πολλές ιδιότητες στυλ ταυτόχρονα. Συγκεκριμένα, παλαιότερες εκδόσεις του προγράμματος περιήγησης Internet Explorerη ιδιότητα χρώματος χρησιμοποιείται για το χρώμα γραμμής και τα υπόλοιπα προγράμματα περιήγησης χρησιμοποιούν την ιδιότητα χρώματος φόντου. Αλλά δεν είναι μόνο αυτό, φροντίστε να καθορίσετε το πάχος γραμμής (ιδιότητα ύψους) εκτός από το μηδέν και να αφαιρέσετε το πλαίσιο γύρω από τη γραμμή ορίζοντας την ιδιότητα περιγράμματος σε κανένα. Συνδυάζοντας όλες τις ιδιότητες για τον επιλογέα hr, έχουμε μια καθολική λύση για δημοφιλή προγράμματα περιήγησης (παράδειγμα 1).

Παράδειγμα 1. Οριζόντια γραμμή

HTML5 CSS 2.1 IE Cr Op Sa Fx

---

Συμβολοσειρά κειμένου

---

Αποτέλεσμα αυτό το παράδειγμαφαίνεται στο σχ. ένας.

Ρύζι. 1. Έγχρωμη οριζόντια γραμμή

οριζόντιες γραμμέςσχηματίζονται από μια μη ζευγαρωμένη (δεν χρειάζεται η ετικέτα κλεισίματος).

---

και μπορεί να είναι αρκετά μοναδικά σχεδιαστικά στοιχεία. Η διάταξη κειμένου με οριζόντιες γραμμές HTML θα δώσει στη σελίδα μια συγκεκριμένη λογική παρουσίασης κειμένου, καθώς και θα διευκολύνει τον αναγνώστη να επισημάνει τμήματα πληροφοριών που πρέπει να μελετηθούν διαδοχικά. Ετικέτα

---

μπορεί να σχηματίσει οριζόντιες γραμμές διαφορετικών χρωμάτων, πάχους και μηκών. Και για να γίνει αυτό είναι αρκετά απλό, όπως φαίνεται στα παρακάτω παραδείγματα.

Παρεμπιπτόντως, μπορείτε επίσης να χρησιμοποιήσετε ιδιότητες στυλ μπλοκ

και και