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

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

Μπορείτε να μάθετε περισσότερα για τους κανόνες στο παρακάτω άρθρο.

Μορφοποίηση γραμματοσειράς με χρήση ιδιοτήτων CSS

1. Οικογένεια γραμματοσειρών γραμματοσειρά-οικογένεια

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

Σπουδαίος!Εάν το όνομα της γραμματοσειράς περιέχει κενά ή σύμβολα (για παράδειγμα, #, $, %), τότε περικλείεται σε εισαγωγικά. Αυτό γίνεται για να μπορεί το πρόγραμμα περιήγησης να καταλάβει πού αρχίζει και πού τελειώνει το όνομα της γραμματοσειράς.

Σύνταξη

P (γραμματοσειρά-οικογένεια: "Times New Roman", Georgia, Serif;)

2. Στυλ γραμματοσειράς στυλ γραμματοσειράς

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

Σύνταξη

H1 (στυλ γραμματοσειράς: κανονικό;) h1 (στυλ γραμματοσειράς: πλάγια;) h1 (στυλ γραμματοσειράς: πλάγια;) Εικ. 1. Η ιδιότητα τύπου γραμματοσειράς

3. Επιλογή στυλ γραμματοσειράς παραλλαγή γραμματοσειράς

Αυτή η ιδιότητα σάς επιτρέπει να εμφανίζετε τη γραμματοσειρά με μικρά κεφαλαία γράμματα. Κληρονόμησε.

Σύνταξη

H1 (παραλλαγή γραμματοσειράς: κανονική;) h1 (παραλλαγή γραμματοσειράς: μικρά κεφαλαία;) Εικ. 2. Η ιδιότητα της παραλλαγής γραμματοσειράς

4. Βάρος γραμματοσειράς γραμματοσειρά-βάρος

Η ιδιότητα καθορίζει το βάρος της γραμματοσειράς.

Σύνταξη

H1 (βάρος γραμματοσειράς: κανονικό;) span (βάρος γραμματοσειράς: έντονη;) span (βάρος γραμματοσειράς: πιο έντονη;) span (βάρος γραμματοσειράς: ελαφρύτερο;) h1 (βάρος γραμματοσειράς: 100;) Ρύζι. 3. Η ιδιότητα font-weight

5. Μέγεθος γραμματοσειράς μέγεθος γραμματοσειράς

Η ιδιότητα καθορίζει το μέγεθος (σημείο) της γραμματοσειράς.

Σύνταξη

H3 (μέγεθος γραμματοσειράς: μικρό;) h1 (μέγεθος γραμματοσειράς: xx-large;), em (μέγεθος γραμματοσειράς: μεγάλο;) p (μέγεθος γραμματοσειράς: 20 px;) h3 (μέγεθος γραμματοσειράς: 120%;)

6. Χρώμα γραμματοσειράς

Η ιδιότητα καθορίζει το χρώμα της γραμματοσειράς χρησιμοποιώντας διάφορα συστήματα απόδοσης χρωμάτων. Το ακίνητο είναι κληρονομικό.

Στο πρώτο μέρος του βιβλίου, δείξαμε ήδη σε μερικά παραδείγματα πώς να ορίσετε το χρώμα του κειμένου στο CSS. Δεν υπάρχει τίποτα περίπλοκο εδώ: θα χρειαστείτε την ιδιότητα χρώματος και την τιμή του χρώματος με το οποίο θέλετε να χρωματίσετε το κείμενο.

P (χρώμα: #211C18; )

Στο παράδειγμά μας, η τιμή #211C18 αντιπροσωπεύει τον δεκαεξαδικό κωδικό χρώματος. Εάν είστε ήδη εξοικειωμένοι με το δεκαεξαδικό σύστημα αριθμών, μπορείτε να παραλείψετε την ανάγνωση της επόμενης παραγράφου. Θα μιλήσουμε επίσης περαιτέρω για άλλους τρόπους αναπαράστασης χρωμάτων στον Ιστό - χρησιμοποιώντας μοντέλα χρωμάτων (RGB, HSL) και λέξεις-κλειδιά. Αυτές οι πληροφορίες θα είναι χρήσιμες για αρχάριους και συνιστάται να τις διαβάσετε.

Δεκαεξαδικά χρώματα (δεκαεξαδικό)

Δεκαεξαδικό σύστημα αριθμών ( δεκαεξαδικός, εξάγωνος) βασίζεται στον αριθμό 16. Για να γράψετε μια δεκαεξαδική τιμή, χρησιμοποιούνται 16 χαρακτήρες: Αραβικοί αριθμοί από το 0 έως το 9 και τα πρώτα γράμματα του λατινικού αλφαβήτου (A, B, C, D, E, F). Το χρώμα σε δεκαεξαδική μορφή γράφεται ως τρεις διψήφιοι αριθμοί από το 00 έως το FF (πρέπει να προηγείται ένα σύμβολο κατακερματισμού #), το οποίο αντιστοιχεί σε τρία στοιχεία: Κόκκινο, Πράσινο, Μπλε (μοντέλο χρώματος RGB). Με άλλα λόγια, μια καταχώριση χρώματος μπορεί να αναπαρασταθεί ως #RRGGBB, όπου το πρώτο ζεύγος χαρακτήρων καθορίζει το κόκκινο επίπεδο, το δεύτερο - το πράσινο επίπεδο και το τρίτο - το μπλε επίπεδο. Το χρώμα που προκύπτει είναι ένας συνδυασμός αυτών των τριών χρωμάτων.

Συντομογραφία για εξάγωνα χρώματα

Ορισμένες δεκαεξαδικές τιμές χρώματος μπορούν να γραφτούν με συντομογραφίες. Για να το κάνετε αυτό, μετατρέψτε την καταχώρηση όπως #RRGGBB σε #RGB. Αυτό μπορεί να γίνει όταν ο δεκαεξαδικός αριθμός περιέχει τρία ζεύγη πανομοιότυπων χαρακτήρων.

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

Παραδείγματα συντομευμένης σημείωσης για εξαγωνικά χρώματα:

Μοντέλο χρώματος RGB

Ο δεύτερος τρόπος για να καθορίσετε χρώματα στο CSS είναι να χρησιμοποιήσετε δεκαδικές τιμές RGB (Κόκκινο, Μπλε, Πράσινο). Για να γίνει αυτό, πρέπει να γράψετε τη λέξη-κλειδί rgb μετά την ιδιότητα χρώματος και, στη συνέχεια, μέσα σε παρένθεση και διαχωρισμένα με κόμμα - τρεις αριθμούς στην περιοχή από 0 έως 255, καθένας από τους οποίους σημαίνει την ένταση των κόκκινων, πράσινων και μπλε χρωμάτων (r , ζ, β). Όσο μεγαλύτερος είναι ο αριθμός, τόσο πιο έντονο είναι το χρώμα. Για παράδειγμα, για να πάρετε ένα λαμπερό πράσινο χρώμα, πρέπει να γράψετε:

P (χρώμα: rgb(0, 255, 0); )

Αλλά η κιτρινωπή μουστάρδα απόχρωση έχει την εξής σημασία:

Χρώμα: rgb(94, 81, 3); /* παρακάτω είναι το ίδιο χρώμα, γραμμένο σε δεκαεξαδικό: */ χρώμα: #5E5103;

Η τιμή για το μαύρο γράφεται ως (0, 0, 0) και για το λευκό ως (255, 255, 255) . Είναι επίσης δυνατό να δηλωθούν αυτές οι τιμές ως ποσοστά. Έτσι, ο αριθμός 255 αντιστοιχεί στο 100%, επομένως, το λευκό χρώμα μπορεί να οριστεί ως εξής:

Χρώμα: rgb(100%, 100%, 100%);

Πού να αναζητήσετε τις έννοιες των χρωμάτων

Ίσως έχετε μια ερώτηση: από πού βρίσκετε όλες αυτές τις έννοιες των χρωμάτων; Υπάρχουν πολλοί επεξεργαστές γραφικών και διαδικτυακές υπηρεσίες με τις οποίες μπορείτε να επιλέξετε χρώματα και να δημιουργήσετε συνδυασμούς χρωμάτων. Ένα από τα πιο δημοφιλή προγράμματα στα οποία μπορείτε να επιλέξετε ένα κατάλληλο χρώμα και να λάβετε τις τιμές RGB, hex και πολλά άλλα είναι το Adobe Photoshop. Εναλλακτικά, υπάρχουν ειδικοί ιστότοποι όπου μπορείτε εύκολα να επιλέξετε όχι μόνο ένα χρώμα, αλλά και έναν ολόκληρο συνδυασμό χρωμάτων. Ένα εξαιρετικό παράδειγμα είναι η υπηρεσία Adobe Color CC.

Μοντέλο χρώματος RGBA

Μπορείτε να ορίσετε ένα χρώμα σε μορφή RGBA με τον ίδιο σχεδόν τρόπο όπως στο RGB. Η διαφορά μεταξύ RGBA και RGB είναι η παρουσία ενός καναλιού άλφα, το οποίο είναι υπεύθυνο για τη διαφάνεια του χρώματος. Η διαφάνεια ορίζεται χρησιμοποιώντας έναν αριθμό που κυμαίνεται από το 0 έως το 1, όπου το 0 είναι πλήρως διαφανές και το 1 είναι πλήρως αδιαφανές. Οι ενδιάμεσες τιμές όπως το 0,5 σάς επιτρέπουν να ορίσετε μια ημιδιαφανή εμφάνιση (επιτρέπεται η συντομογραφία, χωρίς μηδέν, αλλά με τελεία – 0,5). Για παράδειγμα, για να κάνετε το κείμενο έγχρωμο και ελαφρώς διαφανές, πρέπει να γράψετε τη λέξη-κλειδί rgba και την τιμή χρώματος μετά την ιδιότητα χρώματος:

P (χρώμα: rgba(94, 81, 3, .9); )

Το μειονέκτημα του RGBA είναι ότι δεν υποστηρίζεται από τον Internet Explorer έκδοση 8 και παλαιότερη. Ειδικά για το IE8, μπορείτε να εφαρμόσετε την ακόλουθη λύση:

P (χρώμα: rgb(94, 81, 3); χρώμα: rgba (94, 81, 3, .9); )

Η πρώτη ιδιότητα στο παράδειγμα προορίζεται για το πρόγραμμα περιήγησης IE8, το οποίο θα εμφανίζει το κείμενο στο επιθυμητό χρώμα, αλλά χωρίς διαφάνεια. Και αυτά τα προγράμματα περιήγησης που κατανοούν το RGBA θα εφαρμόσουν τη δεύτερη ιδιότητα στο στοιχείο, με διαφάνεια.

Έγχρωμα μοντέλα HSL (HSLA).

Μπορείτε επίσης να ορίσετε χρώμα στο CSS χρησιμοποιώντας τις συντεταγμένες του χρωματικού μοντέλου HSL (Απόχρωση, Κορεσμός, Ελαφρότητα). Είναι γραμμένο έτσι:

P (χρώμα: hsl(165, 100%, 50%); )

Ο πρώτος αριθμός στις αγκύλες σημαίνει απόχρωση και δίνεται σε μοίρες (εύρος αριθμού από 0 έως 359). Θα είναι εύκολο να καταλάβετε γιατί χρησιμοποιούνται οι μοίρες αν θυμάστε πώς μοιάζει ο τροχός χρώματος:

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

Το χρωματικό μοντέλο HSLA λειτουργεί σχεδόν το ίδιο με το HSL, αλλά, παρόμοια με το RGBA, έχει ένα κανάλι άλφα με το οποίο μπορείτε να ορίσετε τη διαφάνεια του χρώματος, προσδιορίζοντας την επιθυμητή τιμή στην περιοχή από 0 έως 1:

P (χρώμα: hsla(165, 100%, 50%, .6); )

Τα HSL και HSLA υποστηρίζονται από όλα τα προγράμματα περιήγησης εκτός από τον Internet Explorer έκδοση 8 και παλαιότερη.

Τυπικά χρώματα HTML

Ένας άλλος τρόπος αναπαράστασης χρωμάτων στον ιστό είναι μέσω λέξεων-κλειδιών, οι οποίες μπορούν να χρησιμοποιηθούν για τον καθορισμό ενός χρώματος για ένα στοιχείο. Παράδειγμα:

P (χρώμα: μαύρο;)

Υπάρχουν 16 τυπικά χρώματα που μπορούν να γραφτούν στην τιμή της ιδιότητας χρώματος:

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

Η χρήση τέτοιων λέξεων-κλειδιών είναι αποδεκτή, αλλά υπάρχει ο κίνδυνος κάποια λέξη να μην γίνει αποδεκτή από το πρόγραμμα περιήγησης. Επομένως, συνιστάται να γράψετε τον δεκαεξαδικό χρωματικό κώδικα αντί για λέξεις-κλειδιά.

Αποτελέσματα

Στο CSS, το χρώμα του κειμένου καθορίζεται χρησιμοποιώντας την ιδιότητα χρώματος και η τιμή του μπορεί να γραφτεί με διάφορους τρόπους - σε δεκαεξαδική (δεκαεξαδική) μορφή, σε μορφή RGB ή HSL ή με τον καθορισμό μιας λέξης-κλειδιού. Για να αποφευχθεί η εσφαλμένη εμφάνιση ενός χρώματος που καθορίζεται χρησιμοποιώντας μια λέξη-κλειδί, είναι καλύτερο να καθορίσετε την εξαγωνική τιμή του.

Είναι επίσης δυνατό να ρυθμίσετε τη διαφάνεια του στοιχείου χρησιμοποιώντας ένα κανάλι άλφα (μορφές RGBA και HSLA). Αξίζει να ληφθεί υπόψη ότι το πρόγραμμα περιήγησης IE8 και οι προηγούμενες εκδόσεις του δεν υποστηρίζουν μορφές RGBA, HSL και HSLA.

Σε αυτό το σεμινάριο θα εξετάσουμε το χαρακτηριστικό της τελευταίας ετικέτας , που ορίζει το χρώμα του κειμένου. Από προεπιλογή, το κείμενο είναι μαύρο, το οποίο εμφανίζεται σε λευκό φόντο. Ωστε να αλλαγή χρώματος κειμένου σε html, πρέπει να εφαρμόσετε το χαρακτηριστικό χρώματος της ετικέτας :