Στυλ υπερσυνδέσμων, τι είναι και πως χρησιμοποιούνται
Σε προηγούμενο μάθημα είδαμε πως ορίζεται ένας υπερσύνδεσμος με την html ετικέτα link και τις ιδιότητες της οποίες χρησιμοποιούμε. Σε αυτό το μάθημα θα δούμε την χρήση των Στυλ υπερσυνδέσμων με την χρήση των CSS.
Πως δίνουμε στυλ στους υπερσυνδέσμους
Στους υπερσυνδέσμους μπορούμε να δώσουμε τις γνωστές ιδιότητες χρώματος, color & background-color, γραμματοσειράς, font-family, και άλλες. Ένας υπερσύνδεσμος έχει το χαρακτηριστικό ότι όταν ο δείκτης του ποντικιού βρεθεί επάνω σε αυτόν, για παράδειγμα, να αλλάξει στυλ όπως υπογράμμιση και χρώμα. Αυτό συμβαίνει ανάλογα με την κατάσταση στην οποία βρίσκεται ο υπερσύνδεσμος. Υπάρχουν οι εξής καταστάσεις:
- Link: Είναι ο τρόπος προβολής/εμφάνισης του υπερσυνδέσμου, δηλαδή έτσι όπως εμφανίζεται.
- Visited: Αυτό το στυλ εμφανίζεται αφού έχει πατηθεί, δηλαδή μετά αφού κάνουμε κλικ σε αυτόν.
- Hover: Το στυλ αυτό ενεργοποιείται όταν ο δείκτης του ποντικιού βρίσκεται επάνω στον υπερσύνδεσμο.
- Active: Η κατάσταση αυτή ενεργοποιείται όταν βρισκόμαστε στην σελίδα την οποία ανοίγει ο συγκεκριμένος υπερσύνδεσμος.
Μπορούμε λοιπόν να φτιάξουμε κανόνες css για κάθε μία από αυτές τις καταστάσεις σε συνδυασμό με την html ετικέτα <a>. Σε αυτό το παράδειγμα υπάρχει το χαρακτηριστικό ότι αναφερόμαστε στην κατάσταση ως a:κατάσταση π.χ. a:link.
<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
</style>
</head>
<body>
<p><b><a href="#" target="_blank">Κείμενο υπερσυνδέσμου</a></b></p>
<p>Αντιγράψτε τον κώδικα της ιστοσελίδας σε ένα κείμενο με κατάληξη .html. Ανοίξτε το σε έναν φυλλομετρητή και παρατηρήστε τα χρώματα πως αλλάζουν ανάλογα με την κατάσταση του υπερσυνδέσμου</p>
</body>
</html>
Σημαντικό: Όταν φτιάχνουμε κανόνες css για τις παραπάνω καταστάσεις ενός υπερσυνδέσμου, πρέπει να ακολουθούμε την σειρά ορισμού όπως την βλέπουμε: link, visited, hover, active.
Οι κανόνες υπερσυνδέσμων ισχύουν για κάθε υπερσύνδεσμο τον οποίον φτιάχνουμε. Εάν δεν ορίσουμε, τότε ο φυλλομετρητής χρησιμοποιεί τους εξ’ ορισμού χρωματισμούς για κάθε μια κατάσταση της υπερσύνδεσης.
Συνδυασμός κανόνων και καταστάσεων
Σε κάθε κατάσταση μπορούμε να ορίσουμε περισσότερους από έναν κανόνα css όπως φαίνεται στο ακόλουθο παράδειγμα:
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
text-decoration: none;
background-color: #B2FF99;
}
a:visited {
text-decoration: none;
background-color: #FFFF85;
}
a:hover {
text-decoration: underline;
background-color: #FF704D;
}
a:active {
text-decoration: underline;
background-color: #FF704D;
}
</style>
</head>
<body>
<p><b><a href="#" target="_blank">Κείμενο υπερσυνδέσμου</a></b></p>
<p>Αντιγράψτε τον κώδικα της ιστοσελίδας σε ένα κείμενο με κατάληξη .html. Ανοίξτε το σε έναν φυλλομετρητή και παρατηρήστε τα χρώματα πως αλλάζουν ανάλογα με την κατάσταση του υπερσυνδέσμου καθώς και την υπογράμμιση του.</p>
</body>
</html>
Για κάθε μια κατάσταση που ορίζουμε, χρησιμοποιούμε δύο ιδιότητες, το χρώμα παρασκηνίου background-color και υπογράμμισης text-decoration. Αυτό το κάνουμε αφ’ ενός για να διακρίνεται ο υπερσύνδεσμος και αφ’ ετέρου για να ξεφύγει από την συμβατική εμφάνισης της υπογράμμισης. Έτσι λοιπόν, ανάλογα με την κατάσταση υπογραμμίζουμε ή όχι το κείμενο και θέτουμε χρώμα παρασκηνίου.
Επίλογος
Σε αυτό το μάθημα αναφερθήκαμε στις καταστάσεις των υπερσυνδέσμων, την προτεραιότητα τους και τον ορισμό των βασικών στυλ υπερσυνδέσμων.
