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