Πώς να αλλάξετε το χρώμα ενός Word με την ετικέτα Span και το CSS

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

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

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

Οδηγίες βήμα προς βήμα

  1. Ανοίξτε την ιστοσελίδα που θέλετε να ενημερώσετε στον αγαπημένο σας επεξεργαστή κειμένου HTML. Αυτό θα μπορούσε να είναι ένα πρόγραμμα όπως το Adobe Dreamweaver ή απλός επεξεργαστής κειμένου όπως το Notepad, το Notepad ++, το TextEdit κ.λπ.
  2. Στο έγγραφο, εντοπίστε τις λέξεις που θέλετε να εμφανίζονται με διαφορετικό χρώμα στη σελίδα. Για χάρη αυτού του φροντιστηρίου, αφήστε μερικές λέξεις που βρίσκονται μέσα σε μια μεγαλύτερη παράγραφο του κειμένου. Το κείμενο αυτό θα περιέχεται στο ζευγάρι των ζευγαριών. Βρείτε μία από τις δύο λέξεις με το χρώμα που θέλετε να επεξεργαστείτε.
  3. Τοποθετήστε το δρομέα σας πριν από το πρώτο γράμμα στη λέξη ή στην ομάδα των λέξεων που θέλετε να αλλάξετε χρώμα. Θυμηθείτε, αν χρησιμοποιείτε ένα πρόγραμμα επεξεργασίας WYSIWYG όπως το Dreamweaver, εργάζεστε τώρα με την "προβολή κώδικα".
  4. Αφήστε να τυλίξετε το κείμενο του οποίου το χρώμα θέλουμε να αλλάξουμε με μια ετικέτα, συμπεριλαμβανομένου ενός χαρακτηριστικού κλάσης. Ολόκληρη η παράγραφος μπορεί να μοιάζει με αυτό: Αυτό είναι ένα κείμενο που επικεντρώνεται σε μια πρόταση.
  5. Έχουμε μόλις χρησιμοποιήσει ένα στοιχείο inline, το, για να δώσουμε σε αυτό το συγκεκριμένο κείμενο ένα "γάντζο" που μπορούμε να χρησιμοποιήσουμε στο CSS. Το επόμενο βήμα είναι να μεταβείτε στο εξωτερικό αρχείο CSS για να προσθέσετε έναν νέο κανόνα.
  1. Στο αρχείο CSS, προσθέστε:
    1. .focus-text {
    2. χρώμα: # F00;
    3. }}
  2. Αυτός ο κανόνας θα ορίζει αυτό το στοιχείο inline, το, να εμφανίζει στο χρώμα κόκκινο. Εάν είχαμε ένα προηγούμενο ύφος που έθεσε το κείμενο του εγγράφου μας σε μαύρο, αυτό το inline στυλ θα προκαλούσε το κείμενο span να επικεντρωθεί και να ξεχωρίζει με το διαφορετικό χρώμα. Θα μπορούσαμε επίσης να προσθέσουμε άλλα στυλ σε αυτόν τον κανόνα, ίσως να κάνουμε το κείμενο με πλάγια γράμματα ή τολμηρό για να το τονίσουμε ακόμα περισσότερο;
  3. Αποθηκεύστε τη σελίδα σας.
  4. Δοκιμάστε τη σελίδα στο αγαπημένο σας πρόγραμμα περιήγησης ιστού για να δείτε τις αλλαγές που ισχύουν.
  5. Σημειώστε ότι εκτός από το, ορισμένοι επαγγελματίες του διαδικτύου επιλέγουν να χρησιμοποιήσουν άλλα στοιχεία όπως τα ζευγάρια ή τα tag tags. Αυτές οι ετικέττες ήταν για "τολμηρές" και "πλάγιες" συγκεκριμένα, αλλά καταργήθηκαν και αντικαταστάθηκαν με και. Οι ετικέτες εξακολουθούν να λειτουργούν σε σύγχρονα προγράμματα περιήγησης, ωστόσο, τόσοι πολλοί προγραμματιστές ιστοσελίδων τις χρησιμοποιούν ως ενσωματωμένα γάντζους styling. Αυτή δεν είναι η χειρότερη προσέγγιση, αλλά αν θέλετε να αποφύγετε τυχόν υποτιμημένα στοιχεία, σας προτείνω να κολλήσετε με την ετικέτα για αυτές τις ανάγκες styling.

Συμβουλές και πράγματα που πρέπει να προσέξουμε

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