Κεφάλαιο 11: Σύνδεσμοι και ψευδό-κλάσεις

Σε ένα έγγραφο HTML μπορούμε μεταξύ άλλων στοιχείων να μορφοποιήσουμε και τα στοιχεία συνδέσμων. Η διαδικασία είναι απλή. Χρησιμοποιώντας τις ψευδό-κλάσεις που ακολουθούν μπορείτε να δώσετε μορφή στους συνδέσμους σε κάθε κατάσταση που μπορούν να βρεθούν.

a:link { style: value; }
a:visited { style: value; }
a:hover { style: value; }
a:focus { style: value; }
a:active { style: value; }

Ας δούμε τώρα κάθε μία από αυτές τις ψευδό-κλάσεις τι κάνει.

Link

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

a:link { color : red; }

Ο παραπάνω κώδικας θα κάνει όλους τους συνδέσμους μιας σελίδας με κόκκινα γράμματα αρκεί να μην έχει πραγματοποιηθεί κάποια ενέργεια επάνω τους.

Visited

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

a:visited { color : red; }

Ο παραπάνω κώδικας θα κάνει όλους τους συνδέσμους μιας σελίδας με κόκκινα γράμματα αρκεί πρώτα να τους έχετε επισκεφθεί.

Hover

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

a:hover { color : red; }

Ο παραπάνω κώδικας θα κάνει κάθε σύνδεσμο που το ποντίκι περνάει από επάνω του κόκκινο.

Focus

Αυτή η ψευδό-κλάση χρησιμοποιείται για να μεταβάλει την εμφάνιση ενός συνδέσμου όταν αυτός είναι το ενεργό στοιχείο μέσα στη σελίδα, το οποίο όμως έχει ενεργοποιηθεί με το πλήκτρο “Tab” του πληκτρολογίου και τη δηλώνουμε όπως στον κώδικα που ακολουθεί:

a:focus { color : red; }

Ο παραπάνω κώδικας θα κάνει κάθε σύνδεσμο ο οποίος ενεργοποιείται με το πληκτρολόγιο να έχει χρώμα κόκκινο για όση ώρα είναι το ενεργό στοιχείο της σελίδας.

Active

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

a:active { color : red; }

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

Θα πρέπει να σημειωθεί πως για να λειτουργήσουν σωστά όλες οι ψευδό-κλάσεις θα πρέπει να ορίσετε πρώτα τις ψευδό-κλάσεις :link και :visited και μετά την ψευδό-κλάση :hover. Επιπλέον θα πρέπει ή ψευδό-κλάση :hover να δηλωθεί πριν την ψευδό-κλάση :active.

Προηγούμενο : CSS Γραμματοσειρές
Επόμενο :  Φόντο