Σε αυτό το άρθρο
Όταν δημιουργείτε έναν ιστότοπο από την αρχή, είναι έξυπνο να ξεκινήσετε με τα βασικά στυλ που ορίζονται. Είναι σαν να ξεκινάτε με έναν καθαρό καμβά και φρέσκα πινέλα. Ένα από τα πρώτα προβλήματα που αντιμετωπίζουν οι σχεδιαστές ιστοσελίδων είναι ότι τα προγράμματα περιήγησης ιστού είναι όλα διαφορετικά. Το προεπιλεγμένο μέγεθος γραμματοσειράς είναι διαφορετικό από πλατφόρμα σε πλατφόρμα, η προεπιλεγμένη οικογένεια γραμματοσειρών είναι διαφορετική, ορισμένα προγράμματα περιήγησης ορίζουν περιθώρια και πλήρωση στην ετικέτα του σώματος, ενώ άλλα όχι, και ούτω καθεξής. Αντιμετωπίστε αυτές τις ασυνέπειες καθορίζοντας τα προεπιλεγμένα στυλ για τις ιστοσελίδες σας.
CSS και το σύνολο χαρακτήρων
Πρώτα πράγματα πρώτα, ορίστε το σύνολο χαρακτήρων των εγγράφων CSS σας utf-8. Ενώ είναι πιθανό ότι οι περισσότερες σελίδες που σχεδιάζετε είναι γραμμένες στα Αγγλικά, ορισμένες μπορεί να είναι τοπικές – προσαρμοσμένες για διαφορετικό γλωσσικό και πολιτιστικό πλαίσιο. Όταν είναι, το utf-8 απλοποιεί τη διαδικασία. Η ρύθμιση του συνόλου χαρακτήρων στο εξωτερικό φύλλο στυλ δεν θα έχει προτεραιότητα έναντι μιας κεφαλίδας HTTP, αλλά σε όλες τις άλλες περιπτώσεις, θα γίνει. Είναι εύκολο να ορίσετε το σύνολο χαρακτήρων. Για την πρώτη γραμμή του εγγράφου CSS γράψτε: @charset «utf-8»;
Με αυτόν τον τρόπο, εάν χρησιμοποιείτε διεθνείς χαρακτήρες στην ιδιότητα περιεχομένου ή ως ονόματα τάξεων και αναγνωριστικών, το φύλλο στυλ θα εξακολουθήσει να λειτουργεί σωστά.
Στυλ του σώματος της σελίδας
Το επόμενο πράγμα που χρειάζεται ένα προεπιλεγμένο φύλλο στυλ είναι στυλ για μηδενισμό περιθωρίων, γεμίσματος και περιγραμμάτων. Αυτό διασφαλίζει ότι όλα τα προγράμματα περιήγησης τοποθετούν το περιεχόμενο στο ίδιο μέρος και δεν υπάρχουν κρυμμένοι χώροι μεταξύ του προγράμματος περιήγησης και του περιεχομένου. Για τις περισσότερες ιστοσελίδες, αυτό είναι πολύ κοντά στην άκρη για κείμενο, αλλά είναι σημαντικό να ξεκινήσετε από εκεί, ώστε οι εικόνες φόντου και τα τμήματα διάταξης να είναι σωστά ευθυγραμμισμένα. html, σώμα {
περιθώριο: 0px;
επένδυση: 0px;
περίγραμμα: 0px;
}
Ορίστε το προεπιλεγμένο χρώμα προσκηνίου ή γραμματοσειράς σε μαύρο και το προεπιλεγμένο χρώμα φόντου σε λευκό. Αν και αυτό πιθανότατα θα αλλάξει για τα περισσότερα σχέδια ιστοσελίδων, τα αρχικά αυτά χρώματα να τίθενται στην ετικέτα του σώματος και HTML καθιστούν την σελίδα ευκολότερη στην ανάγνωση και την εργασία. html, σώμα {
χρώμα: # 000;
φόντο: #fff;
}
Προεπιλεγμένα στυλ γραμματοσειράς
Το μέγεθος της γραμματοσειράς και η οικογένεια γραμματοσειρών είναι κάτι που αναπόφευκτα θα αλλάξει μόλις γίνει η σχεδίαση αλλά θα ξεκινήσει με ένα προεπιλεγμένο μέγεθος γραμματοσειράς 1 em και μια προεπιλεγμένη οικογένεια γραμματοσειρών Arial, Geneva ή κάποια άλλη γραμματοσειρά sans-serif. Η χρήση του ems διατηρεί τη σελίδα όσο το δυνατόν πιο προσβάσιμη και μια γραμματοσειρά sans-serif είναι πιο ευανάγνωστη στην οθόνη. html, body, p, th, td, li, dd, dt {
γραμματοσειρά: 1em Arial, Helvetica, sans-serif;
}
class = «ql-syntax»> Μπορεί να υπάρχουν άλλα μέρη όπου μπορεί να βρείτε κείμενο, αλλά Π, ου, 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: link {color: # 00f; }
α: επισκέφτηκε {color: # 009; }
a: αιωρηθείτε {color: # 06f; }
a: ενεργό {color: # 0cf; }
class = «ql-syntax»> Διαμορφώνοντας τους συνδέσμους με ένα αρκετά αβλαβές χρωματικό συνδυασμό, διασφαλίζει ότι δεν θα ξεχάσετε κανένα από τα μαθήματα και επίσης θα τα κάνετε λίγο λιγότερο δυνατά από το προεπιλεγμένο μπλε, κόκκινο και μοβ.
Φύλλο πλήρους στυλ
Εδώ είναι το πλήρες φύλλο στυλ: @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; }