Εάν χρειάζεστε να προσθέσετε οριζόντιες γραμμές διαμόρφωσης στις ιστοσελίδες σας, οι συνήθεις επιλογές σας περιλαμβάνουν την προσθήκη αρχείων εικόνας αυτών των γραμμών στη σελίδα σας, αλλά αυτό θα απαιτούσε από το πρόγραμμα περιήγησής σας να ανακτήσει και να φορτώσει αυτά τα αρχεία, τα οποία θα μπορούσαν να έχουν αρνητικό αντίκτυπο στον ιστότοπο εκτέλεση. Μπορείτε επίσης να χρησιμοποιήσετε την ιδιότητα των συνόρων CSS για να προσθέσετε περιγράμματα που λειτουργούν ως γραμμές είτε στο επάνω είτε στο κάτω μέρος ενός στοιχείου, δημιουργώντας αποτελεσματικά τη γραμμή διαχωριστή σας.
Ή - ακόμα καλύτερα - χρησιμοποιήστε το στοιχείο HTML για τον οριζόντιο κανόνα.
Το στοιχείο οριζόντιας διάταξης
Η προεπιλεγμένη εμφάνιση οριζόντιων γραμμών κανόνων δεν είναι ιδανική. Για να τα κάνετε πιο όμορφα, προσθέστε το CSS για να ρυθμίσετε την οπτική εμφάνιση αυτών των στοιχείων ώστε να είναι σύμφωνη με τον τρόπο που θέλετε ο ιστότοπός σας να φαίνεται.
Μια βασική ετικέτα HR εμφανίζεται με τον τρόπο που το πρόγραμμα περιήγησης θέλει να το εμφανίσει. Τα σύγχρονα προγράμματα περιήγησης εμφανίζουν τυπικά μη τυπωμένες ετικέτες HR με πλάτος 100 τοις εκατό, ύψος 2 εικονοστοιχείων και ένα τρισδιάστατο πλαίσιο με μαύρο χρώμα για τη δημιουργία της γραμμής.
Το πλάτος και το ύψος είναι συνεπείς μεταξύ των φυλλομετρητών
Τα μόνα στυλ που είναι συνεπείς σε όλα τα προγράμματα περιήγησης ιστού είναι το πλάτος και τα στυλ. Αυτά ορίζουν πόσο μεγάλη είναι η γραμμή. Αν δεν ορίσετε το πλάτος και το ύψος, το προεπιλεγμένο πλάτος είναι 100 τοις εκατό και το προεπιλεγμένο ύψος είναι 2 εικονοστοιχεία.
Σε αυτό το παράδειγμα, το πλάτος είναι 50 τοις εκατό του γονικού στοιχείου (σημειώστε ότι όλα αυτά τα παραδείγματα περιλαμβάνουν όλα τα γραμμικά στυλ.) Σε μια ρύθμιση παραγωγής, αυτά τα στυλ θα γραφτούν σε εξωτερικό φύλλο στυλ για ευκολία διαχείρισης σε όλες τις σελίδες σας.
style = "width: 50%;">
Και σε αυτό το παράδειγμα το ύψος είναι 2em: style = "height: 2em">> Στα σύγχρονα προγράμματα περιήγησης, το πρόγραμμα περιήγησης δημιουργεί τη γραμμή προσαρμόζοντας το περιθώριο. Επομένως, αν αφαιρέσετε το περίγραμμα με την ιδιότητα στυλ, η γραμμή θα εξαφανιστεί στη σελίδα. Όπως μπορείτε να δείτε (καλά, δεν θα δείτε τίποτα, καθώς οι γραμμές θα είναι αόρατες) σε αυτό το παράδειγμα: style = "border: none">>
Η προσαρμογή του μεγέθους, χρώματος και στυλ των συνόρων θα κάνει τη γραμμή να φαίνεται διαφορετική και θα έχει το ίδιο αποτέλεσμα σε όλα τα σύγχρονα προγράμματα περιήγησης. Για παράδειγμα, σε αυτήν την επίδειξη το περίγραμμα είναι κόκκινο, διακεκομμένο και πλάτος 1px: style = "border: 1px dashed # 000;">
Αλλά αν αλλάξετε το περίγραμμα και το ύψος, τα στυλ φαίνονται ελαφρώς διαφορετικά σε πολύ ξεπερασμένα προγράμματα περιήγησης από αυτά που χρησιμοποιούν τα σύγχρονα προγράμματα περιήγησης. Όπως βλέπετε σε αυτό το παράδειγμα, αν το δείτε σε IE7 και παρακάτω (ένα πρόγραμμα περιήγησης το οποίο είναι τρομακτικά παρωχημένο και δεν υποστηρίζεται πλέον από τη Microsoft), υπάρχει μια εσωτερική γραμμή που δεν εμφανίζεται στα άλλα προγράμματα περιήγησης (συμπεριλαμβανομένων των IE8 και επάνω) : style = "height: 1.5em; width: 25em; border: 1px solid # 000;">
Αυτά τα παλαιά προγράμματα περιήγησης στην πραγματικότητα δεν προκαλούν μεγάλη ανησυχία στον σχεδιασμό ιστοσελίδων σήμερα, δεδομένου ότι έχουν αντικατασταθεί σε μεγάλο βαθμό από πιο σύγχρονες επιλογές. Αντί ενός χρώματος, μπορείτε να ορίσετε μια εικόνα φόντου για τον οριζόντιο κανόνα σας έτσι ώστε να φαίνεται ακριβώς όπως θέλετε, αλλά εξακολουθεί να εμφανίζεται σημασιολογικά στο markup σας. Σε αυτό το παράδειγμα χρησιμοποιήσαμε μια εικόνα που αποτελείται από τρεις κυματιστές γραμμές. Θέτοντας την ως εικόνα φόντου χωρίς επανάληψη, δημιουργεί ένα διάλειμμα στο περιεχόμενο που μοιάζει σχεδόν όπως βλέπετε στα βιβλία: style = "height: 20px": background: #fff url (aa010307.gif) κέντρο περιστροφής χωρίς επανάληψη · border: none; "> Με το CSS3, μπορείτε επίσης να κάνετε τις γραμμές σας πιο ενδιαφέρουσες. Το στοιχείο HR είναι παραδοσιακά α οριζόντιος line, αλλά με την ιδιότητα μετασχηματισμού CSS, μπορείτε να αλλάξετε τον τρόπο εμφάνισής τους. Ένας αγαπημένος μετασχηματισμός στο στοιχείο HR είναι να αλλάξει η περιστροφή. Μπορείτε να περιστρέψετε το στοιχείο HR σας έτσι ώστε να είναι ελαφρώς διαγώνιος: hr {-moz-transform: περιστρέψτε (10deg);-webkit-transform: περιστρέψτε (10deg);-o-μετασχηματισμός: περιστροφή (10deg);-ms-μετασχηματισμός: περιστροφή (10deg);μετασχηματισμός: περιστροφή (10deg);}
Ή μπορείτε να την περιστρέψετε έτσι ώστε να είναι τελείως κάθετη: hr {-moz-transform: περιστρέψτε (90deg);-webkit-transform: περιστρέψτε (90deg);-o-μετασχηματισμός: περιστροφή (90deg);-ms-μετασχηματισμός: περιστροφή (90deg);μετασχηματισμός: περιστροφή (90deg);}
Θυμηθείτε ότι αυτή η τεχνική περιστρέφει το HR με βάση την τρέχουσα θέση του στο έγγραφο, οπότε ίσως χρειαστεί να προσαρμόσετε την τοποθέτηση για να το πάρετε εκεί όπου θέλετε. Δεν συνιστάται να χρησιμοποιείτε αυτό για να προσθέσετε κάθετες γραμμές σε ένα σχέδιο, αλλά είναι ένας τρόπος για να πάρετε ένα ενδιαφέρον αποτέλεσμα. Ένα πράγμα που κάνουν μερικοί άνθρωποι αντί να χρησιμοποιούν το στοιχείο HR είναι να βασίζονται στα όρια άλλων στοιχείων. Αλλά μερικές φορές ένα HR είναι πολύ πιο βολικό και πιο εύκολο στη χρήση από ό, τι προσπαθεί να δημιουργήσει σύνορα. Τα τετραγωνικά μοντέλα ορισμένων προγραμμάτων περιήγησης μπορούν να κάνουν ακόμα πιο δύσκολη τη δημιουργία ενός συνόρου. Η αλλαγή των συνόρων μπορεί να αποτελέσει πρόκληση
Κάντε μια διακοσμητική γραμμή με μια εικόνα φόντου
Μετασχηματισμός στοιχείων HR
Ένας άλλος τρόπος να λάβετε γραμμές στις σελίδες σας
