Πώς να αλλάξετε τα χρώματα γραμματοσειράς ιστότοπου με CSS

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

Πώς να χρησιμοποιήσετε τα στυλ CSS για να αλλάξετε το χρώμα της γραμματοσειράς

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

ξεχωριστό αρχείο CSS που επισυνάπτεται σε αυτό το έγγραφο. Θα εξετάσουμε το στοιχείο παραγράφου, συγκεκριμένα.

Χρησιμοποιήστε έγχρωμες λέξεις-κλειδιά για να αλλάξετε χρώματα γραμματοσειράς

Για να αλλάξετε το χρώμα του κειμένου για κάθε παράγραφο στο αρχείο HTML, μεταβείτε στο εξωτερικό φύλλο στυλ και πληκτρολογήστε Π { }. Τοποθετήστε το χρώμα ιδιοκτησία στο στυλ ακολουθούμενο από άνω και κάτω τελεία, όπως p {χρώμα:}. Στη συνέχεια, προσθέστε την τιμή χρώματος μετά την ιδιότητα, τελειώνοντας με ένα ερωτηματικό. Σε αυτό το παράδειγμα, το κείμενο της παραγράφου αλλάζει σε μαύρο χρώμα:

Π {
χρωμα μαυρο;
}

Χρησιμοποιήστε δεκαεξαδικές τιμές για να αλλάξετε τα χρώματα γραμματοσειράς

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

Αυτό το στυλ CSS μπορεί να χρησιμοποιηθεί για να χρωματίσει τις παραγράφους σας μαύρες επειδή ο κωδικός hex # 000000 μεταφράζεται σε μαύρο. Θα μπορούσατε ακόμη και να χρησιμοποιήσετε συντομογραφία με αυτήν την δεκαεξαδική τιμή και να το γράψετε ως # 000 με τα ίδια αποτελέσματα.

Π {
χρώμα: # 000000;
}

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

Π {
χρώμα: # 2f5687;
}

Το Hex λειτουργεί ρυθμίζοντας τις τιμές RGB (κόκκινο, πράσινο, μπλε) ενός χρώματος ξεχωριστά με τις βασικές-δεκαέξι τιμές. Γι 'αυτό περιέχουν τα γράμματα ΕΝΑ διά μέσου φά εκτός από τα ψηφία 0 διά μέσου 9.

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

Χρησιμοποιήστε τιμές χρώματος RGBA για να αλλάξετε χρώματα γραμματοσειράς

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

Αυτή η τιμή RGBA είναι η ίδια με το μπλε χρώμα σχιστόλιθου που καθορίζεται παραπάνω:

Π {
χρώμα: rgba (47,86,135,1);
}

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

Εάν θέλετε να αλεξιώσετε τις τιμές χρώματος, αντιγράψτε αυτόν τον κωδικό CSS:

Π {
χρώμα: # 2f5687;
χρώμα: rgba (47,86,135,1);
}

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

Είναι σημαντικό να έχετε κατά νου ότι η ιδιότητα χρώματος λειτουργεί σε οποιοδήποτε στοιχείο κειμένου HTML στο CSS. Μπορείτε, για παράδειγμα, να αλλάξετε όλα τα χρώματα του συνδέσμου σας. Αυτό το παράδειγμα θα κάνει τους συνδέσμους σας ανοιχτό πράσινο:

ένα {
χρώμα: # 16c616;
}

Αυτό λειτουργεί με πολλά στοιχεία ταυτόχρονα. Μπορείτε να ορίσετε κάθε επίπεδο τίτλου ταυτόχρονα. Για παράδειγμα, αυτό θα ορίσει όλα τα στοιχεία τίτλου σας σε μπλε μεσάνυχτα:

h1, h2, h3, h4, h5, h6 {
χρώμα: # 020833;
}

Η εμφάνιση των τιμών hex ή RGBA για τα χρώματα σας δεν είναι πάντα εύκολη. Οι περισσότεροι σχεδιαστές ιστοσελίδων θα χρησιμοποιήσουν ένα πρόγραμμα επεξεργασίας εικόνων, όπως το Photoshop ή το GIMP, για να δημιουργήσουν τους ακριβείς κωδικούς. Μπορείτε επίσης να βρείτε βολικά εργαλεία επιλογής χρωμάτων στο διαδίκτυο, όπως αυτό από το w3schools.

Άλλοι τρόποι μορφοποίησης μιας σελίδας HTML

Τα χρώματα γραμματοσειράς μπορούν να αλλάξουν με ένα εξωτερικό φύλλο στυλ, ένα εσωτερικό φύλλο στυλ ή ένα ενσωματωμένο στυλ μέσα στο έγγραφο HTML. Ωστόσο, οι βέλτιστες πρακτικές υπαγορεύουν ότι πρέπει να χρησιμοποιήσετε ένα εξωτερικό φύλλο στυλ για τα στυλ CSS.

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