Σύνδεσμοι CSS

Με το CSS, μπορείτε να ρυθμίσετε το στυλ των δεσμών με διάφορους τρόπους.

δεσμοί κειμένου δεσμοί κειμένου κουμπιά δεσμών κουμπιά δεσμών

Ρύθμιση στυλ δεσμών

Οι δεσμοί μπορούν να χρησιμοποιήσουν οποιαδήποτε ιδιότητα CSS (π.χ. color,font-family,background και άλλες) για να ρυθμίσετε το στυλ.

παράδειγμα

a {
  color: hotpink;
}

Δοκιμάστε το Εκτέλεση

Επιπλέον, μπορείτε να ρυθμίσετε διαφορετικά στυλ για τους δεσμούς ανάλογα με την κατάσταση τους.

Οι τέσσερις καταστάσεις των δεσμών είναι:

  • a:link - Ο κανονικός, μη επισκεφθείς δεσμός
  • a:visited - Ο δεσμός που έχει επισκεφθεί από τον χρήστη
  • a:hover - Όταν ο χρήστης τοποθετεί το ποντίκι πάνω από τον δεσμό
  • a:active - Όταν ο δεσμός πατηθεί

παράδειγμα

/* Ο δεσμός που δεν έχει επισκεφθεί */
a:link {
  color: red;
}
/* Ο δεσμός που έχει επισκεφθεί */
a:visited {
  color: green;
}
/* Ο δεσμός στον οποίο το ποντίκι βρίσκεται */
a:hover {
  color: hotpink;
}
/* Ο δεσμός που έχει επιλεγεί */
a:active {
  color: blue;
}

Δοκιμάστε το Εκτέλεση

Αν θέλετε να ρυθμίσετε στυλ για πολλαπλές καταστάσεις δεσμών, ακολουθήστε τις παρακάτω κανόνες σειράς:

  • a:hover πρέπει να είναι μετά το a:link και το a:visited
  • a:active πρέπει να είναι μετά το a:hover

αποσφαλμάτωση κειμένου

text-decoration Η ιδιότητα χρησιμοποιείται κυρίως για την αφαίρεση της υπογράμμισης από τους δεσμούς:

παράδειγμα

a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a:active {
  text-decoration: underline;
}

Δοκιμάστε το Εκτέλεση

χρωματισμός παρασκηνίου

background-color Οι ιδιότητες μπορούν να χρησιμοποιηθούν για να καθορίσουν τον χρωματισμό του παρασκηνίου των δεσμών:

παράδειγμα

a:link {
  background-color: yellow;
}
a:visited {
  background-color: cyan;
}
a:hover {
  background-color: lightgreen;
}
a:active {
  background-color: hotpink;
}

Δοκιμάστε το Εκτέλεση

κουμπιά δεσμών

Αυτό το παράδειγμα δείχνει έναν πιο προηγμένο παράδειγμα όπου συνδυάζουμε πολλαπλές ιδιότητες CSS για να εμφανίζουμε τα δεσμευμένα ως πλαίσια/κουμπιά:

παράδειγμα

a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center; 
  text-decoration: none;
  display: inline-block;
}
a:hover, a:active {
  background-color: red;
}

Δοκιμάστε το Εκτέλεση

Περισσότερα Παράδειγματα

Προσθήκη Διαφορετικών Στυλ σε Υπερσύνδεσμοι
Αυτό το παράδειγμα δείχνει πώς να προσθέσουμε άλλους στυλ σε υπερσύνδεσμοι.
Προχωρημένο - Δημιουργία Σύνδεσης με Κάθετη Κλίμακα
Αυτό είναι ένα άλλο παράδειγμα δημιουργίας πλαίσιας/κουμπιών σύνδεσης.
Αλλαγή Δακτυλιδίου
Η ιδιότητα cursor ορίζει τον τύπο του δακτυλιδίου που θα εμφανιστεί. Αυτό το παράδειγμα δείχνει διαφορετικούς τύπους δακτυλιδίου (υπερτιθέμενος για συνδέσμους).