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

Θέλετε να εμπλουτίσετε τον ιστότοπό σας με μερικά διαφορετικά χρώματα γραμματοσειράς; Μπορείτε να το κάνετε αυτό χρησιμοποιώντας CSS. Το CSS σημαίνει Cascading Style Sheets και είναι η προεπιλεγμένη γλώσσα που χρησιμοποιείται για τη δημιουργία και τη διαχείριση του στυλ οποιουδήποτε ιστότοπου.

Υπάρχουν τρεις μέθοδοι εφαρμογής CSS σε ένα έγγραφο HTML. Πρόκειται για ενσωματωμένο CSS, εσωτερικό/ενσωματωμένο CSS και εξωτερικό CSS.

Μέθοδος 1: Ενσωματωμένο CSS

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

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

Παράγραφος κειμένου

Μπορείτε να επιτύχετε το ίδιο αποτέλεσμα χρησιμοποιώντας εσωτερικό/ενσωματωμένο CSS ή εξωτερικό CSS.

Μέθοδος δεύτερη: Εσωτερικό/Ενσωματωμένο CSS

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

Τρίτη μέθοδος: Εξωτερικό CSS

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

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

p { χρώμα: μπλε }

Στο έγγραφό σας HTML, θα πρέπει να συμπεριλάβετε έναν σύνδεσμο προς το φύλλο στυλ σας μέσα στο στοιχείο κεφαλίδας HTML:

Παράγραφος κειμένου

Αλλαγή χρώματος γραμματοσειράς σε HTML, χωρίς εφαρμογή CSS

Η καλύτερη πρακτική είναι να χρησιμοποιήσετε CSS, αλλά δείτε πώς μπορείτε να αλλάξετε το χρώμα της γραμματοσειράς χρησιμοποιώντας μόνο HTML:

Παράγραφος κειμένου

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

Η αλλαγή χρώματος γραμματοσειράς στο CSS είναι σχετικά απλή

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

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

Πώς να αλλάξετε το μέγεθος γραμματοσειράς HTML στο CSS

Διαβάστε Επόμενο

Σχετικά με τον Συγγραφέα