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