Πάρτε τα γεγονότα με αυτές τις συμβουλές
Όλα τα προγράμματα περιήγησης ιστού περιλαμβάνουν αυτό που είναι γνωστό ως "σφάλματα σφάλματος". Αυτά είναι στυλ που υπαγορεύουν την εμφάνιση και την αίσθηση των στοιχείων HTML ελλείψει άλλων πληροφοριών στυλ. Για παράδειγμα, σχεδόν σε κάθε πρόγραμμα περιήγησης το προεπιλεγμένο βλέμμα των υπερσυνδέσμων είναι ένα φωτεινό μπλε χρώμα με μια υπογράμμιση. Αυτός είναι ο τρόπος εμφάνισης αυτών των συνδέσμων εκτός αν τους πείτε να εμφανίζονται με διαφορετικό τρόπο.
Τα προεπιλεγμένα στυλ των προγραμμάτων περιήγησης μπορούν να είναι χρήσιμα, αλλά σε πολλές περιπτώσεις οι σχεδιαστές ιστοσελίδων θέλουν να καταργήσουν αυτά τα στυλ έτσι ώστε να μπορούν να ξεκινήσουν νωπά με στυλ που ελέγχουν 100%. Αυτό γίνεται χρησιμοποιώντας αυτό που είναι γνωστό ως "master style sheet".
Ένα κύριο φύλλο στυλ θα πρέπει να είναι το πρώτο φύλλο στυλ που καλείτε σε όλα τα έγγραφά σας. Χρησιμοποιείτε ένα κύριο φύλλο στυλ για να ξεκαθαρίσετε τις προεπιλεγμένες ρυθμίσεις του προγράμματος περιήγησης που μπορεί να προκαλέσουν προβλήματα στο σχεδιασμό διαδικτυακού περιγράμματος περιήγησης. Μόλις ξεκαθαρίσετε τα στυλ με ένα master style sheet, ο σχεδιασμός σας αρχίζει από την ίδια θέση σε όλα τα προγράμματα περιήγησης - όπως ένας καθαρός καμβάς για ζωγραφική.
Γενικές προεπιλογές
Το κύριο φύλλο στυλ σας θα πρέπει να ξεκινά με μηδενισμό των περιθωρίων, των παρεμβυσμάτων και των περιθωρίων στη σελίδα. Ορισμένοι φυλλομετρητές ιστού προεπιλογώνουν το σώμα του εγγράφου σε 1 ή 2 εικονοστοιχεία από τα περιθώρια του παραθύρου του προγράμματος περιήγησης. Αυτό διασφαλίζει ότι όλοι εμφανίζουν το ίδιο:
html, σώμα {margin: 0px; padding: 0px; σύνορα: 0px; }}Θέλετε επίσης να κάνετε τη γραμματοσειρά συνεπή. Βεβαιωθείτε επίσης ότι έχετε ρυθμίσει το μέγεθος της γραμματοσειράς σε 100 τοις εκατό ή 1 αι, ώστε η σελίδα σας να είναι προσβάσιμη, αλλά το μέγεθος εξακολουθεί να είναι συνεπές. Και βεβαιωθείτε ότι έχετε συμπεριλάβει το ύψος γραμμής.
σώμα {font: 1em / 1.25 Arial, Helvetica, sans-serif; }}Βασική μορφοποίηση
Οι επικεφαλίδες ή οι ετικέτες κεφαλίδας (H1, H2, H3, κ.λπ.) τυπικά έχουν προεπιλεγμένο χαρακτήρα με έντονο κείμενο με μεγάλα περιθώρια ή περιβλήματα γύρω τους. Με την εκκαθάριση του βάρους, των περιθωρίων και των παρεμβυσμάτων, εξασφαλίζετε ότι αυτές οι ετικέτες θα παραμείνουν ακόμη μεγαλύτερες (ή μικρότερες) από το κείμενο γύρω τους χωρίς να έχουν επιπλέον στυλ:
h1, h2, h3, h4, h5, h6 {περιθώριο: 0; padding: 0; γραμματοσειρά-βάρος: κανονική; γραμματοσειρά-οικογένεια: Arial, Helvetica, sans-serif; }}Ίσως θελήσετε να εξετάσετε το ενδεχόμενο ορισμού συγκεκριμένων μεγεθών, γραμματοσειρών και παρεμβυσμάτων στις ετικέτες με τίτλο, αλλά αυτό εξαρτάται πραγματικά από το στυλ του ιστότοπου που σχεδιάζετε και θα πρέπει να παραμείνει εκτός του φύλλου στυλ. Μπορείτε να προσθέσετε περισσότερα στυλ για αυτές τις επικεφαλίδες, όπως απαιτείται για το συγκεκριμένο σας σχέδιο.
Μορφοποίηση απλού κειμένου
Πέρα από τους τίτλους, υπάρχουν και άλλες ετικέτες κειμένου που πρέπει να είστε σίγουροι ότι θα καθαρίσετε. Ένα σύνολο που οι άνθρωποι συχνά ξεχνούν είναι οι ετικέτες κυττάρων πίνακα (TH και TD) και σχηματίζουν ετικέτες (SELECT, TEXTAREA και INPUT). Εάν δεν τα ορίσετε στο ίδιο μέγεθος με το κείμενο του κειμένου και των παραγράφων σας, ίσως να είστε απρόθυμα να εκπλαγείτε από το πώς τα χρησιμοποιούν τα προγράμματα περιήγησης.
p, th, td, li, dd, dt, ul, ol, blockquote, q, ακρωνύμιο, abbr, a, input, select, textarea {margin: 0; padding: 0; γραμματοσειρά: κανονικό κανονικό κανονικό 1em / 1.25 Arial, Helvetica, sans-serif; }}Είναι επίσης ωραίο να δώσετε στις προσφορές σας (BLOCKQUOTE και Q), τα ακρωνύμια και τις συντομεύσεις λίγο επιπλέον στυλ, ώστε να ξεχωρίζουν λίγο περισσότερο:
blockquote {περιθώριο: 1.25em; padding: 1.25em} q {στυλ γραμματοσειράς: πλάγια; } ακρωνύμιο, abbr {cursor: help; σύνορα-κάτω: 1px διακεκομμένη; }}Σύνδεσμοι και Εικόνες
Οι συνδέσεις είναι εύκολο να διαχειριστούν και να αλλάξουν από το προαναφερθέν φωτεινό μπλε υπογραμμισμένο κείμενο. Προτιμώ πάντα να υπογραμμίζονται οι σύνδεσμοί μου, αλλά αν το προτιμάτε διαφορετικά, μπορείτε να ορίσετε ξεχωριστά αυτές τις επιλογές. Επίσης, δεν συμπεριλαμβάνω χρώματα στο φύλλο στυλ, διότι αυτό εξαρτάται από το σχέδιο.
α, α: σύνδεσμος, α: επισκέφθηκε, α: ενεργός, a: hover {κείμενο-διακόσμηση: υπογράμμιση; }}Με τις εικόνες, είναι σημαντικό να απενεργοποιήσετε τα σύνορα. Ενώ τα περισσότερα προγράμματα περιήγησης δεν εμφανίζουν περίγραμμα γύρω από μια απλή εικόνα, όταν η εικόνα είναι συνδεδεμένη, τα προγράμματα περιήγησης ενεργοποιούν το περίγραμμα. Για να διορθώσετε αυτό:
img {σύνορα: none; }}Πίνακες
Ενώ οι πίνακες δεν χρησιμοποιούνται πλέον για σκοπούς διαμόρφωσης, ο ιστότοπός τους μπορεί να τις χρησιμοποιήσει για πραγματικά δεδομένα tabluar. Αυτή είναι μια ωραία χρήση των πινάκων HTML. Έχουμε ήδη βεβαιωθεί ότι το προεπιλεγμένο μέγεθος κειμένου είναι το ίδιο για τα κελιά του πίνακα σας, αλλά υπάρχουν μερικά άλλα στυλ που πρέπει να ορίσετε ώστε οι πίνακές σας να παραμείνουν οι ίδιες:
πίνακας {περιθώριο: 0; padding: 0; σύνορα: κανένα · }}Έντυπα
Όπως και με άλλα στοιχεία, θα πρέπει να καθαρίσετε τα περιθώρια και τα περιθώρια γύρω από τις φόρμες σας. Ένα άλλο πράγμα που θέλω να κάνω είναι να ξαναγράψω την ετικέτα φόρμας ως " inline " έτσι ώστε να μην προσθέτει επιπλέον χώρο όπου τοποθετείτε την ετικέτα στον κώδικα. Όπως και με άλλα στοιχεία κειμένου, ορίζω τις πληροφορίες γραμματοσειράς για επιλογή, textarea και εισαγωγή παραπάνω, έτσι ώστε να είναι το ίδιο με το υπόλοιπο κείμενο.
μορφή {περιθώριο: 0; padding: 0; οθόνη: inline; }}Είναι επίσης μια καλή ιδέα να αλλάξετε τον κέρσορα για τις ετικέτες σας. Αυτό βοηθά τους ανθρώπους να δουν ότι η ετικέτα θα κάνει κάτι όταν το κάνουν κλικ.
ετικέτα {δρομέας: δείκτης; }}Κοινές κατηγορίες
Για αυτό το μέρος του master style sheet, πρέπει να ορίσετε τάξεις που σας έχουν νόημα. Αυτά είναι μερικές από τις τάξεις που χρησιμοποιώ πιο συχνά. Σημειώστε ότι δεν έχουν ρυθμιστεί σε κάποιο συγκεκριμένο στοιχείο, έτσι μπορείτε να τα αντιστοιχίσετε σε ό, τι χρειάζεστε:
.clear {clear: αμφότερα. } .floatLeft {float: left? } .floatRight {float: right; } .textLeft {κείμενο-ευθυγράμμιση: αριστερά; } .textRight {text-align: right; } .textCenter {κείμενο-ευθυγράμμιση: κέντρο; } .textJustify {text-align: justify; } .blockCenter {εμφάνιση: μπλοκ; margin-left: auto; margin-right: auto; } / * θυμηθείτε να ορίσετε το πλάτος * / .bold {font-weight: bold; } .ital {font-style: italic; } .underline {κείμενο-διακόσμηση: υπογραμμή; } .noindent {περιθώριο-αριστερά: 0; padding-left: 0; } .nomargin {περιθώριο: 0; }. μη εμφάνιση {padding: 0; } .nobullet {style-list: none} λίστα-στυλ-εικόνα: κανένας; }}Θυμηθείτε ότι επειδή αυτές οι κλάσεις είναι γραμμένες πριν από οποιαδήποτε άλλα στυλ και είναι μόνο κλάσεις, είναι εύκολο να παρακάμψετε με πιο συγκεκριμένες ιδιότητες στυλ που εμφανίζονται αργότερα στον καταρράκτη . Αν διαπιστώσετε ότι έχετε ορίσει μια κοινή κλάση σε ένα στοιχείο και δεν έχει αποτέλεσμα, θα πρέπει να ελέγξετε για να βεβαιωθείτε ότι δεν υπάρχει κάποιο άλλο στυλ σε ένα από τα πιο πρόσφατα φύλλα στυλ που επηρεάζουν το ίδιο στοιχείο.
Το πλήρες φύλλο στυλ Master
/ * Παγκόσμια προεπιλογές * / html, body {margin: 0px; padding: 0px; σύνορα: 0px; } σώμα {font: 1em / 1.25 Arial, Helvetica, sans-serif; } / * Τίτλοι * / h1, h2, h3, h4, h5, h6 {περιθώριο: 0; padding: 0; γραμματοσειρά-βάρος: κανονική; γραμματοσειρά-οικογένεια: Arial, Helvetica, sans-serif; } / * Στυλ κειμένων * / p, th, td, li, dd, dt, ul, ol, blockquote, q, ακρωνύμιο, abbr, a, input, select, textarea {margin: 0; padding: 0; γραμματοσειρά: κανονικό κανονικό κανονικό 1em / 1.25 Arial, Helvetica, sans-serif; } blockquote {περιθώριο: 1.25em; padding: 1.25em} q {στυλ γραμματοσειράς: πλάγια; } ακρωνύμιο, abbr {cursor: help; σύνορα-κάτω: 1px διακεκομμένη; } μικρό {font-size: .85em; } μεγάλο {font-size: 1.2em; } / * Σύνδεσμοι και εικόνες * / α, α: σύνδεσμος, α: επισκέφθηκε, α: ενεργός, a: hover {κείμενο-διακόσμηση: } img {σύνορα: κανένας; } / * Πίνακες * / πίνακας {περιθώριο: 0; padding: 0; σύνορα: κανένα · } / * Έντυπα * / φόρμα {περιθώριο: 0; padding: 0; οθόνη: inline; } ετικέτα {cursor: pointer; } / * Κοινές κλάσεις * / .clear {clear: και οι δύο. } .floatLeft {float: left? } .floatRight {float: right; } .textLeft {κείμενο-ευθυγράμμιση: αριστερά; } .textRight {text-align: right; } .textCenter {κείμενο-ευθυγράμμιση: κέντρο; } .textJustify {text-align: justify; } .blockCenter {εμφάνιση: μπλοκ; margin-left: auto; margin-right: auto; } / * θυμηθείτε να ορίσετε το πλάτος * / .bold {font-weight: bold; } .ital {font-style: italic; } .underline {κείμενο-διακόσμηση: υπογραμμή; } .noindent {περιθώριο-αριστερά: 0; padding-left: 0; } .nomargin {περιθώριο: 0; }. μη εμφάνιση {padding: 0; } .nobullet {style-list: none} λίστα-στυλ-εικόνα: κανένας; }}Αρχικό άρθρο από την Jennifer Krynin. Επεξεργασμένο από τον Jeremy Girard στις 10/6/17