Στην ενότητα αυτή θα δούμε πως με την CSS ορίζουμε το στυλ των συνδέσμων της σελίδας μας. Παρακάτω βλέπουμε έναν σύνδεσμο, ο οποίος αλλάζει χρώμα και υπογραμμίζεται όταν έχουμε τον δείκτη του ποντικιού μας επάνω σ"αυτό:
WLearn.gr home page
Περισσότερα για τους Συνδέσμους
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;;
}
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;
}
color: navy;
font-weight : bold;
font-size : 14px;
text-decoration: none;
}
Φέρτε το ποντίκι σας επάνω στο link και δείτε πως αλλάζει στυλ. Δοκιμάστε να αλλάξετε στυλ και δείτε το αποτέλεσμα εστιάζοντας στο link
Στυλ σε όλους τους συνδέσμους που ο χρήστης έχει επισκεφτεί στο παρελθόν
a:visited {
font-weight : bold;
font-size : 14px;
}
font-weight : bold;
font-size : 14px;
}
Στυλ στους συνδέσμους με class menu-item που ο χρήστης έχει επισκεφτεί στο παρελθόν
a.menu-item:visited {
font-weight : bold;
font-size : 20px;
}
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>
<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>
Για να έχουμε το επιθυμητό αποτέλεσμα όταν χρησιμοποιούμε ψευδοκλάσεις στους συνδέσμους, θα πρέπει να γράφονται με την παρακάτω σειρά:
- απλός σύνδεσμος
- :visited
- :hover
- :active
