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

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

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

Αλλαγή χρώματος κειμένου ιστότοπου με CSS

Το CSS έχει σχεδιαστεί προσεκτικά για να διασφαλίσει ότι δίνει στους σχεδιαστές δύναμη στα έργα τους στον ιστότοπό τους. Είναι απίστευτα εύκολο να αλλάξετε χρώμα κειμένου με CSS στον ιστότοπό σας. χρειάζεστε μόνο έναν κανόνα για να το κάνετε.

χρώμα: μπλε?

Φυσικά, όμως, οι κανόνες CSS δεν λειτουργούν πολύ καλά από μόνοι τους. Πρέπει να τα αντιστοιχίσετε με κατηγορίες στοιχείων, αναγνωριστικά και αναγνωριστικά για να διασφαλίσετε ότι τα προγράμματα περιήγησης ιστού γνωρίζουν σε τι ισχύει το στυλ. Μπορείτε να δείτε παραδείγματα αυτού του κανόνα που χρησιμοποιούνται με επικεφαλίδα Η1, παράγραφο Ρ και ένα κουμπί παρακάτω.

h1 {χρώμα: μπλε; }
p {χρώμα: κόκκινο; }
κουμπί {χρώμα: κόκκινο; }

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

Σχετίζεται με: Το μοντέλο του CSS Box εξηγείται με παραδείγματα

Εύρεση της σωστής κλάσης CSS

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

Άνοιγμα του Επιθεωρητή

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

• Google Chrome: CTRL + Shift + C ή Μενού κουκκίδες > Περισσότερα Εργαλεία > Εργαλεία προγραμματιστή
• Microsoft Edge: CTRL + Shift + C ή Μενού κουκκίδες > Περισσότερα Εργαλεία > Εργαλεία προγραμματιστή
• Mozilla Firefox: CTRL + Shift + C ή Μενού κουκκίδες > Περισσότερα Εργαλεία > Εργαλεία προγραμματιστή Ιστού
• Apple Safari: Προτιμήσεις > Προχωρημένος > Εμφάνιση μενού ανάπτυξης στη γραμμή μενού και μετά Αναπτύσσω > Εμφάνιση επιθεωρητή ιστού

Εύρεση του σωστού στυλ κειμένου CSS

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

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

• Google Chrome: Κάντε δεξί κλικ > Επιθεωρώ
• Microsoft Edge: Κάντε δεξί κλικ > Επιθεωρώ
• Mozilla Firefox: Κάντε δεξί κλικ > Επιθεωρώ ή ΕΡ
• Apple Safari: Κάντε δεξί κλικ > Επιθεωρήστε το στοιχείο

Με αυτόν τον τρόπο, το παράθυρο της κονσόλας/επιθεωρητή του ιστότοπού σας θα εστιάσει στο στοιχείο που προσπαθείτε να αλλάξετε. Στο Chrome, Safari, Edge και Firefox, θα πρέπει να δείτε μια ενότητα με ετικέτα Στυλ που περιέχει όλο τον κώδικα CSS για το στοιχείο που ελέγχετε.

Θα πρέπει επίσης να δείτε το στοιχείο HTML που επισημαίνεται σε ένα παράθυρο δίπλα σε αυτό. Αυτό μπορεί να χρησιμοποιηθεί για τον προσδιορισμό της κλάσης ή του αναγνωριστικού του στοιχείου που αλλάζετε. Στην περίπτωσή μας, κοιτάμε την κύρια επικεφαλίδα Η1 στη σελίδα μας και αυτή ανήκει σε μια κλάση που ονομάζεται .listing-title.

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

Σχετίζεται με: Πώς να δημιουργήσετε μια αποκριτική γραμμή πλοήγησης χρησιμοποιώντας HTML και CSS

Προσθήκη του νέου σας CSS

It’sρθε η ώρα να προσθέσετε το νέο σας CSS στον ιστότοπό σας. Ο τρόπος με τον οποίο θα το κάνετε αυτό θα εξαρτηθεί από τον τύπο της πλατφόρμας ιστότοπου που χρησιμοποιείτε, με επιλογές όπως το Shopify που απαιτούν επεκτάσεις για να μπορείτε να προσθέτετε CSS χωρίς να αλλάζετε τα αρχεία σας.

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

.listing-title {
χρώμα: μπλε?
}

Τι γίνεται αν το χρώμα του κειμένου σας δεν αλλάξει;

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

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

.listing-title {
χρώμα: μπλε! σημαντικό
}

Άλλο στυλ κειμένου Διασκέδαση CSS

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

• Μέγεθος γραμματοσειράς: Αυτό αλλάζει το μέγεθος του κειμένου στον ιστότοπό σας, π.χ., μέγεθος γραμματοσειράς: 12px;
• Βάρος γραμματοσειράς: Το βάρος αναφέρεται στο πάχος μιας γραμματοσειράς, με το έντονο να είναι μεγάλο βάρος και το λεπτό κείμενο να είναι χαμηλό, π.χ., βάρος γραμματοσειράς: 400
• Στοίχιση κειμένου: Αυτό αλλάζει την ευθυγράμμιση του κειμένου με το οποίο εργάζεστε, π.χ., ευθυγράμμιση κειμένου: δεξιά;
• Κείμενο-σκιά: Αυτό σας επιτρέπει να προσθέσετε μια σκιά στο κείμενό σας με μια σειρά από χαρακτηριστικά, π.χ., σκιά κειμένου: 2px 2px 3px μαύρο.
• Μετατροπή κειμένου: Αυτό αλλάζει την περίπτωση του κειμένου με το οποίο εργάζεστε, π.χ. μετατροπή κειμένου: κεφαλαία.
• Κείμενο-διακόσμηση: Αυτό σας επιτρέπει να προσθέσετε υπογραμμίσεις, παύλες και άλλες διακοσμήσεις στο κείμενο, π.χ., διακόσμηση κειμένου: υπογράμμιση

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

Σχετίζεται με: Πώς να αλλάξετε το κείμενο του ιστότοπού σας με την ιδιότητα της οικογένειας γραμματοσειρών CSS

Μάθετε περισσότερα από το χρώμα κειμένου CSS

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

10 απλά παραδείγματα κώδικα CSS που μπορείτε να μάθετε σε 10 λεπτά

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

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

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