Το χαρακτηριστικό Cascading Style Sheets (CSS) χρησιμοποιείται πιο συχνά για να αλλάξει το χρώμα των υπερσυνδέσμων σε ιστοσελίδες. Λιγότερο λειτουργικές λύσεις για αυτό το πρόβλημα είναι στη γλώσσα HTML (HyperText Markup Language - "hypertext markup language").
Είναι απαραίτητο
Βασικές γνώσεις γλωσσών HTML και CSS
Οδηγίες
Βήμα 1
Ετοιμάστε ένα μπλοκ στυλ για υπερσυνδέσμους. Στην απλούστερη μορφή του, μπορεί να μοιάζει με αυτό: ένα {color: Green} Εδώ "a" ονομάζεται "selector", το οποίο υποδεικνύει ότι η περιγραφή στυλ σε παρένθεση πρέπει να εφαρμόζεται σε όλες τις ετικέτες συνδέσμων στο έγγραφο. Το πράσινο ορίζει το χρώμα του συνδέσμου · αυτός είναι ένας πολύ τραχύς ορισμός του χρώματος και σπάνια χρησιμοποιείται. Πολύ πιο συχνά, ένα "ψευδο-κλάση" προστίθεται στον επιλογέα "a" - είναι μια ετικέτα που σας επιτρέπει να καθορίσετε το στυλ του συνδέσμου σε τρεις διαφορετικές καταστάσεις.
Βήμα 2
Χρησιμοποιήστε τον σύνδεσμο pseudo-class για να ορίσετε την κανονική (ανενεργή) κατάσταση του συνδέσμου. Μπορεί να μοιάζει με αυτό, για παράδειγμα: a: link {color: Green}
Βήμα 3
Χρησιμοποιήστε το δείκτη ψευδοκλάσης για να καθορίσετε τον τρόπο εμφάνισης του συνδέσμου στο δείκτη. Για παράδειγμα: a: hover {color: Lime}
Βήμα 4
Χρησιμοποιήστε την ψευδο-κλάση που επισκεφτήκατε για να περιγράψετε το στυλ ενός συνδέσμου που έχετε ήδη επισκεφτεί. Για παράδειγμα: a: visit {color: DarkGreen}
Βήμα 5
Συνδυάστε και τις τρεις καταστάσεις σε ένα μπλοκ περιγραφής ενός στυλ. Η εμφάνιση κώδικα HTML που περιέχει περιγραφές CSS των στυλ μπορεί, για παράδειγμα, να έχει την εξής μορφή:
α: σύνδεσμος {color: Green}
α: επισκέφθηκε το {color: DarkGreen}
α: αιωρηθείτε {color: Lime}
Εδώ, οι ετικέτες στυλ HTML ανοίγματος και κλεισίματος λένε στο πρόγραμμα περιήγησης από πού ξεκινούν και τελειώνουν οι περιγραφές στυλ και μεταξύ τους είναι μια περιγραφή της συμπεριφοράς του συνδέσμου σε τρεις καταστάσεις.
Βήμα 6
Το δείγμα που χρησιμοποιήθηκε παραπάνω δείχνει μόνο τα χαρακτηριστικά χρώματος, αλλά και άλλα χαρακτηριστικά μπορούν να συμπεριληφθούν στην περιγραφή. Για παράδειγμα, εάν ο σχεδιασμός της σελίδας απαιτεί ο σύνδεσμος να μην είναι υπογραμμισμένος στην κανονική (ανενεργή) κατάσταση, αλλά υπογραμμισμένος όταν ο δρομέας τοποθετείται πάνω από το ποντίκι, τότε ο κώδικας μπορεί να τροποποιηθεί ως εξής:
α: σύνδεσμος {color: Green; διακόσμηση κειμένου: κανένα;}
α: επισκέφτηκε το {color: DarkGreen; διακόσμηση κειμένου: κανένα;}
α: αιωρηθείτε {color: Lime; κείμενο-διακόσμηση: υπογράμμιση;}
Βήμα 7
Εάν θέλετε να αλλάξετε το χρώμα μόνο ορισμένων συνδέσμων στη σελίδα και να αφήσετε τους υπόλοιπους με τις προεπιλεγμένες ρυθμίσεις, προσθέστε το χαρακτηριστικό κλάσης στην ετικέτα κάθε συνδέσμου που αλλάζει. Για παράδειγμα, ονομάστε αυτήν την κατηγορία υπερσύνδεσης newLinks. Στη συνέχεια, η ετικέτα συνδέσμου μπορεί να έχει την εξής μορφή: σύνδεσμος κειμένου Το ίδιο όνομα κλάσης πρέπει να προστεθεί στην περιγραφή στυλ:
a.newLinks: link {color: Green; διακόσμηση κειμένου: κανένα;}
a.newLinks: επισκέφθηκε το {color: DarkGreen; διακόσμηση κειμένου: κανένα;}
a.newLinks: αιωρηθείτε {color: Lime; κείμενο-διακόσμηση: υπογράμμιση;}
Βήμα 8
Τοποθετήστε τον κωδικό περιγραφής στυλ που παρασκευάστηκε από τα παραδείγματα που περιγράφονται παραπάνω στην κεφαλίδα της σελίδας - μεταξύ των ετικετών και. Εάν είναι απαραίτητο, προσθέστε ένα χαρακτηριστικό κλάσης στις ετικέτες συνδέσμων με το όνομα που χρησιμοποιείται στις περιγραφές στυλ. Στη συνέχεια, αποθηκεύστε την τροποποιημένη σελίδα και θα ολοκληρωθεί η διαδικασία αλλαγής του χρώματος των υπερσυνδέσμων.
