Κάνετε Fancy Headings με CSS

Χρησιμοποιήστε γραμματοσειρές, περιγράμματα και εικόνες για να διακοσμήσετε τις επικεφαλίδες

Οι επικεφαλίδες είναι κοινές στις περισσότερες ιστοσελίδες. Στην πραγματικότητα, σχεδόν οποιοδήποτε έγγραφο κειμένου τείνει να έχει τουλάχιστον έναν τίτλο, ώστε να γνωρίζετε τον τίτλο του τι διαβάζετε. Αυτοί οι τίτλοι κωδικοποιούνται χρησιμοποιώντας τα στοιχεία κεφαλίδας HTML - h1, h2, h3, h4, h5 και h6.

Σε ορισμένους ιστότοπους, μπορεί να διαπιστώσετε ότι οι τίτλοι είναι κωδικοποιημένοι χωρίς τη χρήση αυτών των στοιχείων. Αντ 'αυτού, οι τίτλοι μπορούν να χρησιμοποιούν παραγράφους με συγκεκριμένα χαρακτηριστικά κλάσης που προστίθενται σε αυτά ή διαιρέσεις με στοιχεία κλάσης. Ο λόγος που ακούω συχνά για αυτή την λανθασμένη πρακτική είναι ότι ο σχεδιαστής «δεν μοιάζει με τον τρόπο εμφάνισης των επικεφαλίδων». Από προεπιλογή, οι επικεφαλίδες εμφανίζονται με έντονους χαρακτήρες και είναι μεγαλύτερες σε μέγεθος, ειδικά τα στοιχεία h1 και h2 που εμφανίζονται με πολύ μεγαλύτερο μέγεθος γραμματοσειράς από το κείμενο της υπόλοιπης σελίδας. Λάβετε υπόψη ότι αυτή είναι μόνο η προεπιλεγμένη εμφάνιση αυτών των στοιχείων! Με το CSS, μπορείτε να κάνετε την εμφάνιση της κλάσης, ωστόσο θέλετε! Μπορείτε να αλλάξετε το μέγεθος της γραμματοσειράς, να αφαιρέσετε τον έντονο τόνο και πολλά άλλα. Οι επικεφαλίδες είναι ο κατάλληλος τρόπος για τον κωδικό των τίτλων μιας σελίδας. Ακολουθούν ορισμένοι λόγοι για τους οποίους.

Γιατί να χρησιμοποιείτε ετικέτες επικεφαλίδας Αντί DIVs και Styling

Μηχανές Αναζήτησης όπως οι Ετικέτες Επικεφαλίδας


Αυτός είναι ο καλύτερος λόγος για να χρησιμοποιήσετε τις επικεφαλίδες και να τις χρησιμοποιήσετε με τη σωστή σειρά (π.χ. h1, τότε h2, τότε h3, κλπ.). Οι μηχανές αναζήτησης δίνουν την υψηλότερη στάθμιση στο κείμενο που περιλαμβάνεται στις ετικέτες επικεφαλίδας επειδή υπάρχει σημασιολογική τιμή σε αυτό το κείμενο. Με άλλα λόγια, με την επισήμανση του τίτλου της σελίδας H1, πείτε στο αράχνη της μηχανής αναζήτησης ότι αυτή είναι η # 1 εστίαση της σελίδας. Οι επικεφαλίδες H2 έχουν # 2 έμφαση, και ούτω καθεξής.

Δεν πρέπει να θυμάστε ποιες κλάσεις χρησιμοποιήσατε για να ορίσετε τους τίτλους σας

Όταν γνωρίζετε ότι όλες οι ιστοσελίδες σας θα έχουν ένα H1 που είναι τολμηρό, 2m, και κίτρινο, τότε μπορείτε να ορίσετε ότι μία φορά στο φύλλο στυλ σας και να γίνει. 6 μήνες αργότερα, όταν προσθέτετε μια άλλη σελίδα, προσθέτετε μια ετικέτα H1 στην κορυφή της σελίδας σας, δεν χρειάζεται να επιστρέψετε σε άλλες σελίδες για να μάθετε ποιο αναγνωριστικό στυλ ή κατηγορία που χρησιμοποιήσατε για τον ορισμό της κύριας επικεφαλίδες και υποτμήματα.

Παρέχουν ένα ισχυρό περίγραμμα σελίδας

Τα περιγράμματα διευκολύνουν την ανάγνωση του κειμένου. Αυτός είναι ο λόγος για τον οποίο τα περισσότερα σχολεία των ΗΠΑ δίδαξαν τους μαθητές να γράψουν ένα περίγραμμα πριν γράψουν το χαρτί. Όταν χρησιμοποιείτε ετικέτες τίτλου σε μορφή περίγραμμα, το κείμενό σας έχει μια σαφή δομή που γίνεται φανερή πολύ γρήγορα. Επιπλέον, υπάρχουν εργαλεία που μπορούν να αναθεωρήσουν το περίγραμμα της σελίδας για να δώσουν μια σύνοψη, και αυτά βασίζονται σε ετικέτες τίτλου για τη δομή του περιγράμματος.

Η σελίδα σας θα γίνει αισθητή ακόμα και με τα στυλ να σβήνονται

Όλοι δεν μπορούν να δουν ή να χρησιμοποιήσουν φύλλα στυλ (και αυτό έρχεται πίσω στο # 1 - οι μηχανές αναζήτησης βλέπουν το περιεχόμενο (κείμενο) της σελίδας σας, όχι τα φύλλα στυλ). Αν χρησιμοποιείτε ετικέτες επικεφαλίδας, καθιστάτε πιο προσιτές τις σελίδες σας, επειδή οι τίτλοι περιέχουν πληροφορίες που η ετικέτα DIV δεν θα έκανε.

Είναι χρήσιμη για αναγνώστες οθόνης και προσβασιμότητα στον ιστότοπο

Η σωστή χρήση των επικεφαλίδων δημιουργεί μια λογική δομή σε ένα έγγραφο. Αυτό είναι που οι αναγνώστες οθόνης θα χρησιμοποιήσουν για να «διαβάσουν» έναν ιστότοπο σε έναν χρήστη με προβλήματα όρασης, καθιστώντας τον ιστότοπό σας προσβάσιμο σε άτομα με ειδικές ανάγκες.

Στυλ Κείμενο και γραμματοσειρά των τίτλων σας

Ο ευκολότερος τρόπος να απομακρυνθείτε από το "μεγάλο, τολμηρό και άσχημο" πρόβλημα των ετικετών κλάσης είναι να στυλετε το κείμενο με τον τρόπο που θέλετε να κοιτάξει. Στην πραγματικότητα, όταν δουλεύω σε έναν νέο ιστότοπο, γράφω συνήθως τα στυλ παραγράφου, h1, h2 και h3 το πρώτο πράγμα. Συνήθως κολλά μόνο με την οικογένεια γραμματοσειρών και το μέγεθος / βάρος. Για παράδειγμα, αυτό μπορεί να είναι ένα προκαταρκτικό φύλλο στυλ για έναν νέο ιστότοπο (αυτά είναι μερικά μόνο παραδείγματα στυλ που θα μπορούσαν να χρησιμοποιηθούν):

σώμα, html {margin: 0; padding: 0; } p {font: 1em Arial, Γενεύη, Helvetica, sans-serif; } h1 {font: bold 2em "Times New Roman", Times, serif; } h2 {γραμματοσειρά: bold 1.5 "Times New Roman", Times, serif; } h3 {γραμματοσειρά: τολμηρή 1.2μ Arial, Γενεύη, Helvetica, sans-serif; }}

Μπορείτε να τροποποιήσετε τις γραμματοσειρές της επικεφαλίδας ή να αλλάξετε το στυλ κειμένου ή ακόμα και το χρώμα του κειμένου . Όλα αυτά θα μετατρέψουν τον "άσχημο" τίτλο σας σε κάτι πιο ζωντανό και σύμφωνα με το σχέδιό σας.

h1 {γραμματοσειρά: το έντονο italic 2em / 1em "Times New Roman", "MS Serif", "Νέα Υόρκη", serif; περιθώριο: 0; padding: 0; χρώμα: # e7ce00; }}

Τα σύνορα μπορούν να ντύσουν τους τίτλους

Τα σύνορα είναι ένας πολύ καλός τρόπος για να βελτιώσετε τους τίτλους σας. Και τα σύνορα είναι εύκολο να προστεθούν. Αλλά μην ξεχάσετε να πειραματιστείτε με τα σύνορα - δεν χρειάζεστε σύνορο από κάθε πλευρά του τίτλου σας. Και μπορείτε να χρησιμοποιήσετε περισσότερα από απλά βαρετά σύνορα.

h1 {γραμματοσειρά: το έντονο italic 2em / 1em "Times New Roman", "MS Serif", "Νέα Υόρκη", serif; περιθώριο: 0; padding: 0; χρώμα: # e7ce00; border-top: στερεό # e7ce00 μέσο? σύνορα-κάτω: διακεκομμένη # e7ce00 λεπτό? πλάτος: 600px; }}

Προστέθηκα ένα ανώτατο και κατώτατο όριο στη γραμμή δείγματος για να παρουσιάσω μερικές ενδιαφέρουσες οπτικές μορφές. Θα μπορούσατε να προσθέσετε σύνορα με οποιονδήποτε τρόπο που θέλετε να επιτύχετε το στυλ σχεδιασμού που θέλετε.

Προσθέστε τις εικόνες φόντου στους τίτλους σας για ακόμα περισσότερα Pizazz

Πολλές τοποθεσίες Web έχουν μια ενότητα κεφαλίδας στο επάνω μέρος της σελίδας που περιλαμβάνει έναν τίτλο - συνήθως τον τίτλο της ιστοσελίδας και ένα γραφικό. Οι περισσότεροι σχεδιαστές το θεωρούν ως δύο ξεχωριστά στοιχεία, αλλά δεν χρειάζεται να το κάνετε. Αν το γραφικό υπάρχει μόνο για να διακοσμήσετε την επικεφαλίδα, τότε γιατί να μην το προσθέσετε στα στυλ τίτλων;

h1 {γραμματοσειρά: το έντονο italic 3em / 1em "Times New Roman", "MS Serif", "Νέα Υόρκη", serif; υπόβαθρο: #fff url ("fancyheadline.jpg") επανάληψη-x κάτω? padding: 0.5em 0 90px 0; κείμενο-ευθυγράμμιση: κέντρο; περιθώριο: 0; σύνορα-κάτω: στερεό # e7ce00 0.25em; χρώμα: # e7ce00; }}

Το κόλπο σε αυτόν τον τίτλο είναι ότι ξέρω ότι η εικόνα μου είναι 90 pixels ψηλό. Έτσι, πρόσθεσα padding στο κάτω μέρος του τίτλου των 90px (padding: 0.5 0 90px 0p;). Μπορείτε να παίξετε με τα περιθώρια, το ύψος γραμμής και την επένδυση για να εμφανίσετε το κείμενο της επικεφαλίδας ακριβώς εκεί που θέλετε.

Ένα πράγμα που πρέπει να θυμάστε όταν χρησιμοποιείτε τις εικόνες είναι ότι εάν έχετε έναν ανταποκρινόμενο ιστότοπο (ο οποίος πρέπει) με μια διάταξη που αλλάζει με βάση τα μεγέθη και τις συσκευές οθόνης, ο τίτλος δεν θα είναι πάντα το ίδιο μέγεθος. Αν χρειάζεστε τον τίτλο σας για ακριβές μέγεθος, αυτό μπορεί να προκαλέσει προβλήματα. Είναι ένας από τους λόγους για τους οποίους γενικά αποφεύγω τις εικόνες φόντου σε έναν τίτλο, τόσο δροσερό όσο μπορεί μερικές φορές να δούμε.

Αντικατάσταση εικόνας σε τίτλους

Αυτή είναι μια άλλη δημοφιλής τεχνική για τους σχεδιαστές ιστοσελίδων, διότι σας επιτρέπει να δημιουργήσετε έναν γραφικό τίτλο και να αντικαταστήσετε το κείμενο της ετικέτας επικεφαλίδας με αυτήν την εικόνα. Αυτό είναι ειλικρινά μια αντίχειρα πρακτική από τους σχεδιαστές ιστοσελίδων είχαν πρόσβαση σε πολύ λίγες γραμματοσειρές και ήθελαν να χρησιμοποιήσουν πιο εξωτικές γραμματοσειρές στη δουλειά τους. Η άνοδος των γραμματοσειρών του διαδικτύου άλλαξε πραγματικά τον τρόπο με τον οποίο οι σχεδιαστές προσεγγίζουν τοποθεσίες. Οι τίτλοι μπορούν τώρα να οριστούν σε μια μεγάλη ποικιλία γραμματοσειρών και οι εικόνες με τις ενσωματωμένες γραμματοσειρές δεν χρειάζονται πλέον. Ως εκ τούτου, θα βρείτε αντικατάσταση εικόνων CSS μόνο για πρωτοσέλιδα σε παλαιότερες τοποθεσίες που δεν έχουν ακόμη ενημερωθεί με πιο σύγχρονες πρακτικές.

Αρχικό άρθρο από την Jennifer Krynin. Επεξεργασμένο από τον Jeremy Girard στις 9/6/17