Χαιρετισμούς σε όλους τους αναγνώστες. Από καιρό σε καιρό, οι τεχνίτες αντιμετωπίζουν το πρόβλημα του πώς να φτιάξουν μια οριζόντια ή κάθετη γραμμή χρησιμοποιώντας HTML ή CSS. Αυτό θα σας πω σήμερα.

Γραμμές στο CSS

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

Και αυτό είναι που θα συμβεί ως αποτέλεσμα.

Οριζόντια και κάθετη γραμμή με χρήση css.

Οι γραμμές μπορούν να σχεδιαστούν στο CSS χρησιμοποιώντας τον τελεστή Border. Εάν χρειάζεστε απλώς ένα ορθογώνιο με σταθερό πλάτος πλαισίου, τότε μπορείτε απλά να χρησιμοποιήσετε αυτόν τον τελεστή και να του δώσετε μια τιμή. Για παράδειγμα περίγραμμα: 5px στερεό #000000; σημαίνει ότι τα περιγράμματα του μπλοκ έχουν πλάτος ίσο με 5 pixel μαύρου χρώματος.

Ωστόσο, εάν πρέπει να ορίσετε όχι όλα τα όρια, αλλά μόνο μερικά, τότε πρέπει να καθορίσετε ποια όρια χρειάζονται και τι αξία θα έχει το καθένα από αυτά. Αυτοί είναι οι χειριστές:

• border-top – ορίζει την τιμή του επάνω περιγράμματος
• border-bottom – ορίζει την τιμή του κάτω περιγράμματος
• border-left – ορίζει την τιμή του αριστερού περιγράμματος
• border-right – ορίζει την τιμή του δεξιού περιγράμματος.

Κάθετη και οριζόντια γραμμή σε HTML

Μπορείτε να δημιουργήσετε γραμμές στην ίδια την HTML. Για να το κάνετε αυτό, μπορείτε να χρησιμοποιήσετε την ετικέτα hr.

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

Αλλά σε αυτήν την ετικέτα μπορούν επίσης να δοθούν ορισμένες τιμές.

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

Χρησιμοποιώντας την ετικέτα hr, μπορείτε επίσης να ορίσετε μια κάθετη γραμμή. Αλλά σε αυτή την περίπτωση, θα πρέπει να καταφύγετε ξανά σε στυλ.

Σε αυτήν την περίπτωση, θα τραβηχτεί μια κατακόρυφη γραμμή ύψους εκατό εικονοστοιχείων, ενός εικονοστοιχείου πάχους και πέντε εικονοστοιχείων με εσοχή.

Συμπέρασμα.

Λοιπόν, τώρα ξέρετε πώς μπορείτε να ορίσετε μια κάθετη και οριζόντια γραμμή. Οι γραμμές μπορούν να οριστούν τόσο σε κανονικούς ιστότοπους με χρήση HTML όσο και σε ιστότοπο που χρησιμοποιεί ένα CMS, για παράδειγμα WordPress, αλλά σε αυτήν την περίπτωση, θα πρέπει να μεταβείτε σε λειτουργία HTML.

Λοιπόν, αν έχετε περισσότερες ερωτήσεις, ρωτήστε τις στα σχόλια.

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

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

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

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

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

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

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

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

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

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

Μοιάζει με αυτό. Για παράδειγμα, αν χρειαζόμαστε μήκος 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

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

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

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

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

Πριν εξετάσουμε τις πιο κοινές τεχνικές, θα ήθελα να θυμηθώ μια μικρή θεωρία. Τα στοιχεία της ιστοσελίδας χωρίζονται σε μπλοκ και ενσωματωμένα στοιχεία. Και η διαφορά μεταξύ τους είναι πολύ απλή - τα πεζά μπορούν να τοποθετηθούν σε μία γραμμή, αλλά τα μπλοκ όχι. Φυσικά, οι διαφορές δεν σταματούν εκεί, αλλά αυτή είναι η κύρια διαφορά. Τα μπλοκ μπορεί ήδη να έχουν επένδυση στο επάνω και στο κάτω μέρος (τα πεζά δεν έχουν) και μπορούν να εφαρμοστούν περισσότερες ιδιότητες σε αυτά.

Βασικοί τρόποι ευθυγράμμισης μπλοκ στο CSS

Δεν θα περιπλέκουμε τίποτα, υπάρχουν 3 κύριοι τρόποι:

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

Κάντε τα απαραίτητα στοιχεία μπλοκ-γραμμή. Αυτός είναι ένας ειδικός τύπος στον οποίο το στοιχείο διατηρεί τις ιδιότητές του, αλλά ταυτόχρονα επιτρέπει σε άλλα μπλοκ να βρίσκονται κοντά.

Κάντε τα στοιχεία να επιπλέουν χρησιμοποιώντας την ιδιότητα float.

Ας επικεντρωθούμε σε αυτές τις επιλογές. Δεν θα εξετάσουμε το Flexbox, την εμφάνιση πίνακα και άλλες πτυχές. Λοιπόν, ας πούμε ότι έχουμε 3 υπότιτλους.

Επικεφαλίδα 1

Επικεφαλίδα 2

Επικεφαλίδα 3

Φυσικά, όλες οι ιδιότητες css πρέπει να είναι γραμμένες σε ξεχωριστό αρχείο (style.css), το οποίο πρέπει να συνδεθεί με το έγγραφο html. Σε αυτό το αρχείο θα γράψω ένα μίνιμαλ στυλ για να φαίνονται απλά οι υπότιτλοι μας.

h3( φόντο: #EEDDCD; )

h3 ( φόντο : #EEDDCD;

Εδώ είναι στη σελίδα:

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

Ας το μετατρέψουμε σε γραμμές και ας προσθέσουμε αμέσως εσοχές. Για να γίνει αυτό, ο επιλογέας h3 πρέπει να προσθέσει τις ακόλουθες ιδιότητες:

οθόνη: inline; padding: 30px;

Υπάρχουν 2 κύρια προβλήματα που προκύπτουν κατά τη χρήση αυτής της τεχνικής. Το πρώτο είναι η ελάχιστη εσοχή. Σχηματίζεται λόγω του γεγονότος ότι στον κώδικα υπάρχει ένα κενό μεταξύ των μπλοκ, το οποίο σχηματίζει αυτή την εσοχή. Εάν αυτό το πρόβλημα χρειάζεται επίλυση, υπάρχουν 2 κύριες επιλογές:

Σε html, τοποθετήστε τον κώδικα των απαιτούμενων μπλοκ σε μία γραμμή χωρίς κενά

Προσθέστε ένα αρνητικό περιθώριο στα δεξιά -4 pixel. Τόσο χρειάζεται ένας χώρος.

Το δεύτερο πρόβλημα είναι ότι εάν τα στοιχεία έχουν διαφορετικά ύψη, ενδέχεται να προκύψουν προβλήματα οθόνης. Γενικά, η καλύτερη επιλογή είναι τα αιωρούμενα μπλοκ. Αντί για εμφάνιση: inline-block γράφουμε αυτό:

Μπλοκ σε μια γραμμή χρησιμοποιώντας το πλαίσιο

Θα πω αμέσως ότι εάν πρόκειται να χρησιμοποιήσετε οποιοδήποτε κανονικό πλαίσιο CSS (για παράδειγμα, Bootstrap), τότε όλα είναι πολύ πιο απλά. Όλος ο κώδικας CSS που είναι υπεύθυνος για τη διάταξη των στοιχείων έχει ήδη γραφτεί και το μόνο που έχετε να κάνετε είναι να ορίσετε τις σωστές κλάσεις. Για να το κάνετε αυτό, απλώς μάθετε το σύστημα πλέγματος και θα μπορείτε να δημιουργήσετε πρότυπα που ανταποκρίνονται σε πολλές στήλες χωρίς μεγάλη δυσκολία. Τουλάχιστον θα είναι πολύ πιο εύκολο από το να γράφεις css από την αρχή.

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

Για παράδειγμα, όταν θα πρέπει να έχετε 4 στήλες σε μεγάλες οθόνες, 3 σε μεσαίες οθόνες και 2 σε κινητά τηλέφωνα. Με τη βοήθεια πλαισίων όπως το Bootstrap, ή μάλλον με τη βοήθεια του πλέγματος του, η υλοποίηση αυτού μπορεί να διαρκέσει λίγα μόνο λεπτά .

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

Μπορείτε να μάθετε πώς να εργάζεστε με το πλαίσιο χρησιμοποιώντας . Η θεωρία εξηγείται εκεί, αλλά το πιο σημαντικό, υπάρχει πρακτική. Θα δημιουργήσετε 3 προσαρμοστικά πρότυπα και θα αποκτήσετε μια εξαιρετική εμπειρία που θα σας επιτρέψει να σχεδιάσετε ιστότοπους κατά παραγγελία ή για τον εαυτό σας. Και αν θέλετε να εξοικειωθείτε με τα πλεονεκτήματα και τις δυνατότητες του πλαισίου δωρεάν, σας προτείνω να διαβάσετε τη σειρά άρθρων μας για το Bootstrap, καθώς και για τον απλό σχεδιασμό διάταξης. Σας εύχομαι επιτυχία στο layout και γενικότερα στην κατασκευή ιστοσελίδων.

Για να τονίσουμε ορισμένα ιδιαίτερα σημαντικά στοιχεία του ιστότοπου, δεν θα ήταν κακό να χρησιμοποιήσετε όλα τα είδη στυλ και ιδιότητες CSS που παρέχονται για αυτό. Φυσικά, δεν χρειάζεται να ανησυχείτε πολύ για το κείμενο και να το επισημάνετε, για παράδειγμα, με έντονη γραφή ή πλάγια γραφή, να αλλάξετε το φόντο ή να δημιουργήσετε ένα πλαίσιο γύρω από το κείμενο. Αλλά μία από τις μεθόδους που παρουσιάζονται δεν είναι πάντα κατάλληλη. Ας υποθέσουμε ότι έχετε ένα κείμενο που πρέπει να χωριστεί λόγω των ιδιαιτεροτήτων του σημασιολογικού του φορτίου. Αυτό είναι όπου οι ιδιότητες HTML και CSS έρχονται στη διάσωση.

Πώς να δημιουργήσετε μια γραμμή σε κείμενο χρησιμοποιώντας CSS

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

- σύνορα-κορυφή– μια οριζόντια γραμμή που βρίσκεται πάνω από το κείμενο.

- σύνορα-δεξιά– μια κάθετη γραμμή που βρίσκεται στα δεξιά του κειμένου.

- σύνορο-κάτω– μια οριζόντια γραμμή που βρίσκεται κάτω από το κείμενο·

- σύνορα-αριστερά– κάθετη γραμμή που βρίσκεται στα αριστερά.

Πώς να δημιουργήσετε μια γραμμή σε html

Χρησιμοποιώντας τις ιδιότητες CSS, μπορείτε να καθορίσετε όλες τις απαραίτητες τιμές επεξεργάζοντας τον κώδικα HTML. Για να το κάνετε αυτό, πρέπει να μεταβείτε στο διοικητικό τμήμα του ιστότοπου. Επιλέξτε ένα από τα δημοσιευμένα υλικά, αλλάξτε το πρόγραμμα επεξεργασίας κειμένου σε λειτουργία επεξεργασίας κώδικα HTML και εισαγάγετε ιδιότητες CSS. Ένα δείγμα μπορείτε να δείτε παρακάτω.

Σύντομη περιγραφή εντολών

- πλάτος– μήκος γραμμής

- στερεός- συμπαγής γραμμή

- διάσπαρτος- διακεκομμένη γραμμή.

Για μια βαθύτερη κατανόηση των στυλ, προτείνω να διαβάσετε αυτό.

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

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

Ένα ευρύ φάσμα δυνατοτήτων με τις οποίες μπορείτε να φτιάξετε σχεδόν οποιαδήποτε γραμμή.

Εύκολη πραγματοποίηση όλων των απαραίτητων αλλαγών απευθείας στον κώδικα HTML. Αυτό απλοποιεί σημαντικά την εργασία για άπειρους κατασκευαστές τοποθεσιών.

Πώς να φτιάξετε μια ευθεία οριζόντια γραμμή χρησιμοποιώντας μια ετικέτα HTML

---

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

Χαρακτηριστικά ετικέτας

---

- πλάτος– είναι υπεύθυνος για το μήκος της γραμμής. Μπορεί να καθοριστεί είτε ως ποσοστό είτε σε pixel.

- Μέγεθος– πάχος γραμμής. Καθορίζεται σε pixel.

- χρώμα– καθορίζει το χρώμα της γραμμής.

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

Εργο

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

Λύση

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

Χρήση ετικέτας

---

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

---

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

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

---

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

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

HTML5 CSS 2.1 IE Cr Op Sa Fx

---

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

---

Το αποτέλεσμα αυτού του παραδείγματος φαίνεται στο Σχ. 1.

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