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

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

Συμβουλή: Κατά τον ορισμό του χρώματος οποιουδήποτε στοιχείου ιστοσελίδας, μπορεί να χρειαστεί να χρησιμοποιήσετε κώδικες χρωμάτων HTML. Για τα κύρια χρώματα, μπορείτε επίσης να ορίσετε τα ονόματα αυτών των χρωμάτων αντί να χρησιμοποιήσετε τους χρωματικούς κωδικούς, για παράδειγμα, το κόκκινο, το μπλε, το πράσινο και το μαύρο, αντί να χρησιμοποιήσετε τις αναγνωρισμένες τιμές κωδικού χρώματος.

Κατανόηση των διαφορετικών τύπων υπερσυνδέσμων

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

  1. Επισκεπτόμενος σύνδεσμος - Το χρώμα μετά την επίσκεψη ενός συνδέσμου. Εάν ένας υπερσύνδεσμος είναι αυτό το χρώμα, ο χρήστης μπορεί να αναμένει ότι κάνοντας κλικ στο σύνδεσμο θα τα μεταφέρει σε μια σελίδα που έχουν ήδη δει.
  2. Σύνδεσμος για το δείκτη του ποντικιού - Το χρώμα όταν το ποντίκι αιωρείται πάνω από ένα σύνδεσμο. Εάν ένας υπερσύνδεσμος είναι αυτό το χρώμα, ο χρήστης μπορεί να αναμένει ότι πατώντας το αριστερό πλήκτρο του ποντικιού (κλικ) και στη συνέχεια απελευθερώνοντας το κουμπί θα προκαλέσει την επίσκεψη του συνδέσμου. Το χρώμα του δείκτη του ποντικιού είναι το ίδιο για τους συνδέσμους Ενεργό και Επισκεφθέντα.
  3. Ενεργός σύνδεσμος - Το χρώμα του συνδέσμου όταν κάνετε κλικ. Όταν ο χρήστης δει αυτό το χρώμα, μπορεί να αναμένει ότι η απελευθέρωση του κουμπιού του ποντικιού θα προκαλέσει στο πρόγραμμα περιήγησης να επισκεφθεί τον σύνδεσμο.

Συμβουλή: Δείτε τον ορισμό υπερσυνδέσμων για περισσότερες πληροφορίες και σχετικές ερωτήσεις σε υπερσυνδέσεις.

Παράδειγμα χρώματος σύνδεσης CSS

Στο παρακάτω παράδειγμα CSS, ρυθμίζουμε τα χρώματα των υπερσυνδέσμων ώστε να μοιάζουν με αυτά που εμφανίζονται σε αυτήν τη σελίδα. Κατ 'αρχάς, όλες οι άγκυρες είναι ρυθμισμένες στο # 2c87f0 (σκιά του μπλε), # 636 μια σκιά μοβ, και όλα τα χρώματα του hover και των ενεργών συνδέσμων: # c33 (κόκκινο). Ο παρακάτω κώδικας μπορεί να προστεθεί στο στοιχείο στυλ CSS ή στο αρχείο .css σας.

 α {χρώμα: # 2c87f0; } α: επισκέφθηκε {χρώμα: # 636; } α: αιώρηση, α: ενεργή, α: εστίαση {χρώμα: # c33; }} 

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

Παράδειγμα ετικέτας σώματος HTML

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

Παρακάτω είναι οι περιγραφές καθεμιάς από τις ιδιότητες HTML στην ετικέτα σώματος.

TEXT = Το χρώμα του κειμένου.

LINK = Το χρώμα των συνδέσμων.

VLINK = Χρώμα συνδέσμου επίσκεψης.

ALINK = Χρώμα του ενεργού συνδέσμου ή του χρώματος που αλλάζει ο σύνδεσμος σε όταν κάνετε κλικ.

BGCOLOR = Το χρώμα φόντου σελίδας.