Ο καλός τυπογραφικός σχεδιασμός αποτελεί σημαντικό μέρος μιας επιτυχημένης ιστοσελίδας. Το CSS σας δίνει εξαιρετικό έλεγχο στην εμφάνιση του κειμένου στις ιστοσελίδες των ιστοσελίδων που δημιουργείτε. Αυτό περιλαμβάνει τη δυνατότητα αλλαγής του χρώματος των γραμματοσειρών που χρησιμοποιείτε.
Τα χρώματα γραμματοσειρών μπορούν να αλλάξουν χρησιμοποιώντας ένα εξωτερικό φύλλο στυλ , ένα εσωτερικό φύλλο στυλ ή μπορεί να αλλάξει με τη χρήση inline styling μέσα στο έγγραφο HTML. Οι βέλτιστες πρακτικές υπαγορεύουν ότι πρέπει να χρησιμοποιήσετε ένα εξωτερικό φύλλο στυλ για τα στυλ CSS. Ένα εσωτερικό φύλλο στυλ, το οποίο είναι στυλ γραμμένο απευθείας στο "κεφάλι" του εγγράφου σας, χρησιμοποιείται γενικά μόνο για μικρούς ιστότοπους μιας σελίδας. Τα inline styles θα πρέπει να αποφεύγονται αφού είναι παρόμοια με τις παλιές ετικέτες "γραμματοσειράς" που εξετάσαμε πριν από πολλά χρόνια. Αυτά τα inline styles καθιστούν πολύ δύσκολο να διαχειριστείτε το στυλ γραμματοσειράς, αφού θα πρέπει να τα αλλάξετε σε κάθε περίπτωση του inline style.
Σε αυτό το άρθρο, θα μάθετε πώς μπορείτε να αλλάξετε το χρώμα γραμματοσειράς χρησιμοποιώντας ένα εξωτερικό φύλλο στυλ και ένα στυλ που χρησιμοποιείται σε μια ετικέτα παραγράφου. Μπορείτε να εφαρμόσετε την ίδια ιδιότητα στυλ για να αλλάξετε το χρώμα γραμματοσειράς σε οποιαδήποτε ετικέτα που περιβάλλει κείμενο, συμπεριλαμβανομένης της ετικέτας
.Προσθήκη στυλ για να αλλάξετε το χρώμα γραμματοσειράς
Για αυτό το παράδειγμα, θα χρειαστεί να έχετε ένα έγγραφο HTML για τη σήμανση σελίδας σας και ένα ξεχωριστό αρχείο CSS που επισυνάπτεται σε αυτό το έγγραφο. Το έγγραφο HTML θα κάνει πιθανώς ορισμένα στοιχεία σε αυτό. Αυτό που μας απασχολεί για το σκοπό αυτού του άρθρου είναι το στοιχείο της παραγράφου.
Εδώ είναι πώς να αλλάξετε το χρώμα γραμματοσειράς του κειμένου μέσα στις ετικέτες των παραγράφων χρησιμοποιώντας το εξωτερικό φύλλο στυλ.
Οι τιμές χρώματος μπορούν να εκφραστούν ως λέξεις-κλειδιά χρώματος, αριθμούς χρώματος RGB ή δεκαεξαδικούς αριθμούς χρωμάτων.
- Προσθέστε το χαρακτηριστικό στυλ για την ετικέτα παραγράφου:
- Π { }
- Τοποθετήστε την ιδιότητα χρώματος στο στυλ. Τοποθετήστε ένα τετράγωνο μετά από αυτήν την ιδιότητα:
- p {χρώμα:}
- Στη συνέχεια, προσθέστε την τιμή χρώματος μετά την ιδιότητα. Βεβαιωθείτε ότι τερματίζετε την τιμή με ένα ημικύκλιο:
- p {χρώμα: μαύρο;}
Οι παράγραφοι στη σελίδα σας θα είναι τώρα μαύρες.
Αυτό το παράδειγμα χρησιμοποιεί μια έγχρωμη λέξη-κλειδί - "μαύρη". Αυτός είναι ένας τρόπος για να προσθέσετε χρώμα στο CSS, αλλά είναι πολύ περιοριστικό. Η χρήση λέξεων-κλειδιών για το "μαύρο" και το "λευκό" είναι απλή επειδή τα δύο αυτά χρώματα είναι πολύ συγκεκριμένα, αλλά τι συμβαίνει αν χρησιμοποιείτε λέξεις-κλειδιά όπως "κόκκινο", "μπλε" ή "πράσινο"; Ακριβώς τι σκιά κόκκινου, μπλε ή πράσινου θα πάρετε; Δεν μπορείτε να καθορίσετε ακριβώς ποια απόχρωση χρώματος θέλετε με τις λέξεις-κλειδιά. Αυτός είναι ο λόγος που οι δεκαεξαδικές τιμές χρησιμοποιούνται συχνά στη θέση των λέξεων-κλειδιών χρώματος.
p {χρώμα: # 000000; }}
Αυτό το στυλ CSS θα ορίζει επίσης το χρώμα των παραγράφων σας σε μαύρο, επειδή ο δεκαεξαδικός κωδικός # 000000 μεταφράζεται σε μαύρο. Θα μπορούσατε ακόμη να χρησιμοποιήσετε στενογραφία με αυτή την hex τιμή και να την γράψετε ως μόλις # 000 και θα πάρετε το ίδιο πράγμα.
Όπως έχουμε ήδη αναφέρει, οι hex values λειτουργούν καλά όταν χρειάζεστε ένα χρώμα που δεν είναι μόνο μαύρο ή λευκό. Ακολουθεί ένα παράδειγμα:
p {χρώμα: # 2f5687; }}
Αυτή η hex τιμή θα ορίζει τις παραγράφους σε μπλε χρώμα, αλλά σε αντίθεση με τη λέξη-κλειδί "μπλε", αυτός ο εξαγωνικός κώδικας σάς δίνει τη δυνατότητα να ορίσετε μια πολύ συγκεκριμένη απόχρωση του μπλε - πιθανώς αυτή που επιλέγει ο σχεδιαστής όταν δημιουργούν τη διεπαφή για αυτόν τον ιστότοπο. Σε αυτή την περίπτωση, το χρώμα θα είναι ένα μεσαίο εύρος, σαν μπλε σαν σχιστόλιθο.
Τέλος, μπορείτε να χρησιμοποιήσετε και τις τιμές χρώματος RGBA για τα χρώματα των γραμματοσειρών. Το RGCA υποστηρίζεται τώρα σε όλα τα σύγχρονα προγράμματα περιήγησης, ώστε να μπορείτε να χρησιμοποιήσετε αυτές τις τιμές με λίγη ανησυχία ότι δεν θα υποστηρίζονται σε ένα πρόγραμμα περιήγησης ιστού, αλλά μπορείτε επίσης να ορίσετε ένα εύκολο εναλλακτικό πρόγραμμα.
ρ {χρώμα: rgba (47,86,135,1); }}
Αυτή η τιμή RGBA είναι ίδια με το μπλε χρώμα του σχιστόλιθου που καθορίστηκε προηγουμένως. Οι πρώτες 3 τιμές ορίζουν τις τιμές κόκκινου, πράσινου και μπλε και ο τελικός αριθμός είναι η ρύθμιση άλφα. Έχει οριστεί σε "1", που σημαίνει "100%", επομένως αυτό το χρώμα δεν θα έχει διαφάνεια. Εάν το ορίσετε σε έναν δεκαδικό αριθμό, όπως το 0,85, θα μεταφράζεται σε αδιαφάνεια 85% και το χρώμα θα είναι ελαφρώς διαφανές.
Εάν θέλετε να αδιαπέραστε τις τιμές του χρώματος, θα το κάνετε αυτό:
Π {
χρώμα: # 2f5687;
χρώμα: rgba (47,86,135,1);
}}
Αυτή η σύνταξη ρυθμίζει πρώτα τον δεκαεξαδικό κώδικα. Στη συνέχεια αντικαθιστά αυτή την τιμή με τον αριθμό RGBA. Αυτό σημαίνει ότι οποιοδήποτε παλαιότερο πρόγραμμα περιήγησης που δεν υποστηρίζει RGBA θα πάρει την πρώτη τιμή και θα αγνοήσει το δεύτερο. Τα σύγχρονα προγράμματα περιήγησης θα χρησιμοποιούν το δεύτερο κατά CSS.