Οταν εσύ δημιουργήστε έναν ιστότοπο από το μηδέν, είναι έξυπνο να ξεκινήσετε με τα βασικά στυλ που ορίζονται. Είναι σαν να ξεκινάτε με έναν καθαρό καμβά και φρέσκα πινέλα. Ένα από τα πρώτα προβλήματα που αντιμετωπίζουν οι σχεδιαστές ιστοσελίδων είναι αυτό προγράμματα περιήγησης ιστού είναι όλα διαφορετικά. Το προεπιλεγμένο μέγεθος γραμματοσειράς είναι διαφορετικό από πλατφόρμα σε πλατφόρμα, η προεπιλεγμένη οικογένεια γραμματοσειρών είναι διαφορετική, ορισμένα προγράμματα περιήγησης ορίζουν περιθώρια και πλήρωση στην ετικέτα του σώματος, ενώ άλλα όχι, και ούτω καθεξής. Αντιμετωπίστε αυτές τις ασυνέπειες καθορίζοντας τα προεπιλεγμένα στυλ για τις ιστοσελίδες σας.
CSS και το σύνολο χαρακτήρων
Πρώτα πράγματα πρώτα, ορίστε το σύνολο χαρακτήρων των εγγράφων CSS σας utf-8. Ενώ είναι πιθανό ότι οι περισσότερες σελίδες που σχεδιάζετε είναι γραμμένες στα Αγγλικά, ορισμένες μπορεί να είναι τοπικές - προσαρμοσμένες για διαφορετικό γλωσσικό και πολιτιστικό πλαίσιο. Όταν είναι, το utf-8 απλοποιεί τη διαδικασία. Ρύθμιση του συνόλου χαρακτήρων στο
φύλλο εξωτερικού στυλ δεν θα έχει προτεραιότητα έναντι ενός HTTP κεφαλίδα, αλλά σε όλες τις άλλες καταστάσεις, θα το κάνει.Είναι εύκολο να ορίσετε το σύνολο χαρακτήρων. Για την πρώτη γραμμή του εγγράφου CSS γράψτε:
@charset "utf-8";
Με αυτόν τον τρόπο, εάν χρησιμοποιείτε διεθνείς χαρακτήρες στην ιδιότητα περιεχομένου ή ως ονόματα τάξης και ταυτότητας, το φύλλο στυλ θα συνεχίσει να λειτουργεί σωστά.
Στυλ του σώματος της σελίδας
Το επόμενο πράγμα που χρειάζεται ένα προεπιλεγμένο φύλλο στυλ είναι τα στυλ μηδέν περιθώρια, παραγέμισμα και περιθώρια. Αυτό διασφαλίζει ότι όλα τα προγράμματα περιήγησης τοποθετούν το περιεχόμενο στο ίδιο μέρος και δεν υπάρχουν κρυμμένοι χώροι μεταξύ του προγράμματος περιήγησης και του περιεχομένου. Για τις περισσότερες ιστοσελίδες, αυτό είναι πολύ κοντά στην άκρη για κείμενο, αλλά είναι σημαντικό να ξεκινήσετε από εκεί, ώστε οι εικόνες φόντου και τα τμήματα διάταξης να είναι σωστά ευθυγραμμισμένα.
html, σώμα {
περιθώριο: 0px;
επένδυση: 0px;
περίγραμμα: 0px;
}
Ορίστε το προεπιλεγμένο χρώμα προσκηνίου ή γραμματοσειράς σε μαύρο και το προεπιλεγμένο χρώμα φόντου σε λευκό. Ενώ αυτό πιθανότατα θα αλλάξει για τα περισσότερα σχέδια ιστοσελίδων, έχοντας αυτά τα τυπικά χρώματα στο σώμα και Ετικέτα HTML στην αρχή καθιστά τη σελίδα ευκολότερη στην ανάγνωση και την εργασία.
html, σώμα {
χρώμα: # 000;
φόντο: #fff;
}
Προεπιλεγμένα στυλ γραμματοσειράς
Το μέγεθος της γραμματοσειράς και η οικογένεια γραμματοσειρών είναι κάτι που αναπόφευκτα θα αλλάξει μόλις γίνει η σχεδίαση, αλλά ξεκινήστε με ένα προεπιλεγμένο μέγεθος γραμματοσειράς 1 τους και μια προεπιλογή οικογένεια γραμματοσειρών της Arial, της Γενεύης ή κάποιου άλλου γραμματοσειρά sans-serif. Η χρήση του ems διατηρεί τη σελίδα όσο το δυνατόν πιο προσβάσιμη και μια γραμματοσειρά sans-serif είναι πιο ευανάγνωστη στην οθόνη.
html, body, p, th, td, li, dd, dt {
γραμματοσειρά: 1em Arial, Helvetica, sans-serif;
}
Μπορεί να υπάρχουν και άλλα μέρη όπου μπορεί να βρείτε κείμενο, αλλά Π, ου, td, λι, δδ, και dt είναι μια καλή αρχή για τον ορισμό της βασικής γραμματοσειράς. Περιλαμβάνω HTML και σώμα για κάθε περίπτωση, αλλά πολλά προγράμματα περιήγησης παρακάμπτουν το επιλογές γραμματοσειράς εάν ορίζετε μόνο τις γραμματοσειρές σας για το HTML ή το σώμα.
Τίτλοι
Επικεφαλίδες HTML είναι σημαντικό να χρησιμοποιήσετε για να βοηθήσετε τον ιστότοπό σας να περιγράψει και να αφήσει τις μηχανές αναζήτησης να εμβαθύνουν στον ιστότοπό σας. Χωρίς στυλ, όλα είναι αρκετά άσχημα, ορίστε λοιπόν τα προεπιλεγμένα στυλ σε όλα αυτά και ορίστε την οικογένεια γραμματοσειρών και τα μεγέθη γραμματοσειρών για κάθε ένα.
h1, h2, h3, h4, h5, h6 {
font-family: Arial, Helvetica, sans-serif;
}
h1 {font-size: 2em; }
h2 {font-size: 1.5em; }
h3 {font-size: 1.2em; }
h4 {font-size: 1.0em; }
h5 {γραμματοσειρά: 0.9em; }
h6 {font-size: 0,8εκ. }
Μην ξεχάσετε τους συνδέσμους
Ο σχεδιασμός των χρωμάτων συνδέσμου είναι σχεδόν πάντα ένα κρίσιμο μέρος του σχεδιασμού, αλλά αν δεν τα ορίσετε στα προεπιλεγμένα στυλ, είναι πιθανό να ξεχάσετε τουλάχιστον μία από τις ψευδο-τάξεις. Ορίστε τα με κάποια μικρή παραλλαγή στο μπλε και, στη συνέχεια, αλλάξτε τα μόλις ορίσετε την παλέτα χρωμάτων για τον ιστότοπο.
Για να ορίσετε το συνδέσεις σε αποχρώσεις του μπλε, σετ:
- συνδέσεις ως μπλε
- επισκέφθηκαν συνδέσμους ως σκούρο μπλε
- αιωρήστε τους συνδέσμους ως γαλάζιο
- ενεργούς συνδέσμους όσο πιο ανοιχτό μπλε
Όπως φαίνεται σε αυτό το παράδειγμα:
a: σύνδεσμος {color: # 00f; }
α: επισκέφτηκε {color: # 009; }
a: αιωρηθείτε {color: # 06f; }
a: ενεργό {color: # 0cf; }
Διαμορφώνοντας τους συνδέσμους με ένα αρκετά αβλαβές χρωματικό συνδυασμό, διασφαλίζει ότι δεν θα ξεχάσετε κανένα από τα μαθήματα και επίσης θα τα κάνετε λίγο λιγότερο δυνατά από το προεπιλεγμένο μπλε, κόκκινο και μοβ.
Φύλλο πλήρους στυλ
Εδώ είναι το πλήρες φύλλο στυλ:
@charset "utf-8";
html, σώμα {
περιθώριο: 0px;
επένδυση: 0px;
περίγραμμα: 0px;
χρώμα: # 000;
φόντο: #fff;
}
html, body, p, th, td, li, dd, dt {
γραμματοσειρά: 1em Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: Arial, Helvetica, sans-serif;
}
h1 {font-size: 2em; }
h2 {font-size: 1.5em; }
h3 {font-size: 1.2em; }
h4 {font-size: 1.0em; }
h5 {γραμματοσειρά: 0.9em; }
h6 {font-size: 0,8εκ. }
a: σύνδεσμος {color: # 00f; }
α: επισκέφτηκε {color: # 009; }
a: αιωρηθείτε {color: # 06f; }
a: ενεργό {color: # 0cf; }