Στην ενότητα αυτή θα δούμε πως με την CSS ορίζουμε το στυλ των συνδέσμων της σελίδας μας. Παρακάτω βλέπουμε έναν σύνδεσμο, ο οποίος αλλάζει χρώμα και υπογραμμίζεται όταν έχουμε τον δείκτη του ποντικιού μας επάνω σ"αυτό:
WLearn.gr home page

Περισσότερα για τους Συνδέσμους

Στυλ στους συνδέσμους με την βοήθεια ψευδοκλάσεων

Οι ψευδοκλάσεις (pseudo-class) της CSS χρησιμοποιούνται για να εκμεταλλευτούν τις καταστάσεις που μπορεί να έχει ένας σύνδεσμος και οι οποίες είναι οι παρακάτω:
  • link, κανονικός σύνδεσμος τον οποίον δεν έχει επισκεφτεί ο χρήστης στο παρελθόν
  • visited, σύνδεσμος που έχει επισκεφτεί ο χρήστης στο παρελθόν και υπάρχει στην cache memory του browser του
  • hover, σύνδεσμος στον οποίον ο χρήστης έχει τον δείκτη του ποντικιού του επάνω απο αυτόν
  • active, σύνδεσμος όταν ο χρήστης κάνει κλικ και δεν έχει ακόμη ελευθερώσει του κουμπί του ποντικιού του

Η σύνταξη των ψευδοκλάσεων στους συνδέσμους είναι η παρακάτω:
Σύνταξη των ψευδοκλάσεων
a:ψευδοκλάση {
ιδιότητα: τιμή;
}

Παραδείγματα:
Στυλ σε όλους τους συνδέσμους
a:link {
color: blue;
font-weight : bold;
font-size : 14px;
text-decoration: underline;;
}
Μπορούμε να παραλείψουμε το :link όταν ορίζουμε στυλ σε κανονικούς συνδέσμους. Δοκιμάστε να αφαιρέσετε το :link απο το στυλ και δείτε το αποτέλεσμα

Στυλ σε όλους τους συνδέσμους που ο χρήστης εστιάζει με το ποντίκι του
a:hover {
color: navy;
font-weight : bold;
font-size : 14px;
text-decoration: none;
}
Φέρτε το ποντίκι σας επάνω στο link και δείτε πως αλλάζει στυλ. Δοκιμάστε να αλλάξετε στυλ και δείτε το αποτέλεσμα εστιάζοντας στο link

Στυλ σε όλους τους συνδέσμους που ο χρήστης έχει επισκεφτεί στο παρελθόν
a:visited {
font-weight : bold;
font-size : 14px;
}

Στυλ στους συνδέσμους με class menu-item που ο χρήστης έχει επισκεφτεί στο παρελθόν
a.menu-item:visited {
font-weight : bold;
font-size : 20px;
}

Ένα ολοκληρωμένο παράδειγμα ορισμού στυλ σε συνδέσμους

Στα παραπάνω παραδείγματα είδαμε πως χρησιμοποιούμε ψευδκλάσεις για να ορίζουμε στυλ σε διάφορες καταστάσεις των συνδέσμων.

Στο παρακάτω παράδειγμα θα δούμε πως να χρησιμοποιούμε σωστά όλες τις ψευδοκλάσεις μαζί για να έχουμε το επιθυμητό αποτέλεσμα.
Στυλ σε συνδέσμους
<html>
<head>
<style type="text/css">
a.example1 {
color: Red;
font-weight : bold;
font-size : 14px;
text-decoration: underline;
}
a.example1:visited {
font-weight : bold;
font-size : 14px;
}
a.example1:hover {
color: navy;
font-weight : bold;
font-size : 14px;
text-decoration: none;
}
a.example1:active {
color: green;
font-weight : bold;
font-size : 14px;
TEXT-DECORATION: none;
}
</style>
</head>

<body>

<a hre f="http://www.wlearn.gr" class="example1">Wlearn.gr</a>

</body>
</html>

Για να έχουμε το επιθυμητό αποτέλεσμα όταν χρησιμοποιούμε ψευδοκλάσεις στους συνδέσμους, θα πρέπει να γράφονται με την παρακάτω σειρά:
  1. απλός σύνδεσμος
  2. :visited
  3. :hover
  4. :active
Pin It