3.4 Οι σύνδεσμοι στην γλώσσα CSS

Με τη βοήθεια της CSS, έχουμε τη δυνατότητα να προσαρμόσουμε την εμφάνιση των συνδέσμων (links) με ποικίλους τρόπους.

Μερικές από τις κύριες ιδιότητες CSS που μπορούν να εφαρμοστούν σε σύνδεσμους είναι:

1. Χρώματα:
   Μπορείτε να αλλάξετε το χρώμα του κειμένου συνδέσμου με την ιδιότητα color. Για παράδειγμα:

   a {
     color: blue;
   }

2. Υπογράμμιση:
   Μπορείτε να ελέγξετε αν ο σύνδεσμος θα εμφανίζεται υπογραμμισμένος ή όχι, χρησιμοποιώντας την ιδιότητα text-decoration. Για παράδειγμα:

   a {
     text-decoration: none; /* χωρίς υπογράμμιση */
   }

3. Εφέ κειμένου:
   Μπορείτε να προσθέσετε εφέ στο κείμενο συνδέσμου, όπως αλλαγή χρώματος κατά το πέρασμα του δείκτη του ποντικιού πάνω από τον σύνδεσμο, χρησιμοποιώντας τις ιδιότητες :hover, :visited, :active. Για παράδειγμα:

   a:hover {
     color: red; /* αλλαγή χρώματος κατά το πέρασμα του δείκτη του ποντικιού */
   }

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

[adinserter block=”2″]

Οι σύνδεσμοι μπορούν να διαμορφωθούν με οποιαδήποτε ιδιότητα CSS (π.χ. χρώμα, γραμματοσειρά, φόντο, κ.λπ.) για να προσαρμοστούν στον σχεδιασμό της ιστοσελίδας σας. Ας δούμε μερικά παραδείγματα:

/* Αλλαγή χρώματος κειμένου συνδέσμου */
a {
  color: blue;
}

/* Αλλαγή χρώματος φόντου συνδέσμου */
a {
  background-color: yellow;
}

/* Αλλαγή γραμματοσειράς συνδέσμου */
a {
  font-family: Arial, sans-serif;
}

/* Προσθήκη περιγράμματος στον σύνδεσμο */
a {
  border: 1px solid black;
}

/* Αφαίρεση υπογράμμισης από τους συνδέσμους */
a {
  text-decoration: none;
}

/* Αλλαγή χρώματος κατά το πέρασμα του ποντικιού */
a:hover {
  color: red;
}

/* Αλλαγή χρώματος κειμένου συνδέσμου που έχει επισκεφθεί */
a:visited {
  color: purple;
}

/* Αλλαγή χρώματος κειμένου συνδέσμου που βρίσκεται σε κατάσταση κλικ */
a:active {
  color: green;
}

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

Η ιδιότητα text-decoration χρησιμοποιείται κυρίως για την αφαίρεση υπογράμμισης από τους συνδέσμους (links). Μπορείτε να τη χρησιμοποιήσετε ως εξής:

a {
  text-decoration: none;
}

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

Παράδειγμα:

<a href="#" class="no-underline">Αυτός είναι ένας σύνδεσμος χωρίς υπογράμμιση</a>

.no-underline {
  text-decoration: none;
}

Στο παραπάνω παράδειγμα, η κλάση “no-underline” εφαρμόζει την ιδιότητα text-decoration: none; μόνο στον συγκεκριμένο σύνδεσμο με αυτήν την κλάση. Οι υπόλοιποι σύνδεσμοι στη σελίδα θα διατηρήσουν την υπογράμμισή τους.

Η ιδιότητα background-color χρησιμοποιείται για να καθορίσει το χρώμα του φόντου των συνδέσμων. Μπορείτε να τη χρησιμοποιήσετε ως εξής:

a {
  background-color: yellow;
}

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

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

Παράδειγμα:

<a href="#" class="custom-link">Αυτός είναι ένας προσαρμοσμένος σύνδεσμος</a>

.custom-link {
  background-color: lightblue;
}

Στο παραπάνω παράδειγμα, η κλάση “custom-link” εφαρμόζει το χρώμα φόντου “lightblue” μόνο στον συγκεκριμένο σύνδεσμο με αυτήν την κλάση. Οι υπόλοιποι σύνδεσμοι στη σελίδα θα διατηρήσουν το προεπιλεγμένο χρώμα φόντου.

[adinserter block=”3″]

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

<!DOCTYPE html>
<html>
<head>
  <title>Link Buttons</title>
  <style>
    /* Στυλ για τους συνδέσμους */
    .button-link {
      display: inline-block;
      padding: 10px 20px;
      background-color: blue;
      color: white;
      text-decoration: none;
      border-radius: 5px;
      font-weight: bold;
    }

    /* Στυλ για τους συνδέσμους κατά το πέρασμα του ποντικιού */
    .button-link:hover {
      background-color: darkblue;
    }
  </style>
</head>
<body>
  <h1>Link Buttons</h1>

  <!-- Σύνδεσμοι ως κουμπιά -->
  <a href="#" class="button-link">Αρχική</a>
  <a href="#" class="button-link">Προφίλ</a>
  <a href="#" class="button-link">Επικοινωνία</a>
</body>
</html>

Στο παραπάνω παράδειγμα, οι σύνδεσμοι εμφανίζονται ως κουτιά/κουμπιά με τη χρήση της κλάσης “button-link”. Οι ιδιότητες CSS που εφαρμόζονται περιλαμβάνουν τον τρόπο εμφάνισης (display: inline-block), το περίγραμμα (padding), το χρώμα φόντου (background-color), το χρώμα κειμένου (color), την υπογράμμιση (text-decoration), το στρογγυλεμένο περίγραμμα (border-radius) και τον τύπο γραμματοσειράς (font-weight).

Οι ιδιότητες CSS που εφαρμόζονται στην κλάση “button-link:hover” ορίζουν την εμφάνιση των συνδέσμων κατά το πέρασμα του ποντικιού πάνω τους. Στο παράδειγμα, το χρώμα φόντου αλλάζει για να δείξει ότι ο σύνδεσμος είναι “ενεργός”.

Εκτελέστε τον παραπάνω κώδικα HTML σε έναν φυλλομετρητή για να δείτε πώς εμφανίζονται οι σύνδεσμοι ως κουμπιά με το προσαρμοσμένο στυλ.

Ας δούμε ένα παράδειγμα που δείχνει πώς να προσθέσετε άλλα στυλ στους υπερσυνδέσμους (hyperlinks):

<!DOCTYPE html>
<html>
<head>
  <title>Styling Hyperlinks</title>
  <style>
    /* Στυλ για τους υπερσυνδέσμους */
    a {
      color: blue;
      text-decoration: none;
      transition: color 0.3s ease;
    }

    /* Στυλ για τους υπερσυνδέσμους κατά το πέρασμα του ποντικιού */
    a:hover {
      color: red;
    }

    /* Στυλ για τους επισκεφθέντες υπερσυνδέσμους */
    a:visited {
      color: purple;
    }

    /* Στυλ για τους υπερσυνδέσμους όταν είναι ενεργοί */
    a:active {
      color: green;
    }

    /* Στυλ για υπερσυνδέσμους που ανήκουν σε ένα συγκεκριμένο div */
    .custom-div a {
      font-weight: bold;
      font-size: 20px;
    }
  </style>
</head>
<body>
  <h1>Styling Hyperlinks</h1>

  <!-- Σύνδεσμοι με προσαρμοσμένα στυλ -->
  <div class="custom-div">
    <a href="#">Αυτός είναι ένας υπερσύνδεσμος με προσαρμοσμένα στυλ</a>
  </div>

  <!-- Σύνδεσμοι χωρίς προσαρμοσμένα στυλ -->
  <a href="#">Αυτός είναι ένας απλός υπερσύνδεσμος</a>
</body>
</html>

Στο παραπάνω παράδειγμα, έχουμε διαμορφώσει τους υπερσυνδέσμους με τη χρήση CSS για να τους προσθέσουμε χρώμα, αφαίρεση υπογράμμισης, μετάβαση στο χρώμα κατά το πέρασμα του ποντικιού και άλλα στυλ. Επίσης, προσθέσαμε ένα προσαρμοσμένο στυλ για τους υπερσυνδέσμους που βρίσκονται μέσα σε ένα συγκεκριμένο div.

Εκτελέστε τον παραπάνω κώδικα HTML σε έναν φυλλομετρητή για να δείτε πώς εφαρμόζονται τα προσαρμοσμένα στυλ στους υπερσυνδέσμους και πώς αλλάζει η εμφάνισή τους κατά το πέρασμα του ποντικιού.

[adinserter block=”4″]

Ας δούμε ένα παράδειγμα που δείχνει τις διάφορες τύπους δρομέων (cursors) που μπορούν να χρησιμοποιηθούν για συνδέσμους:

<!DOCTYPE html>
<html>
<head>
  <title>Link Cursors</title>
  <style>
    /* Στυλ για τους υπερσυνδέσμους */
    a {
      cursor: pointer;
    }

    /* Στυλ για τους υπερσυνδέσμους με διαφορετικό δρομέα κατά το πέρασμα του ποντικιού */
    a:hover {
      cursor: grab;
    }

    /* Στυλ για υπερσυνδέσμους που βρίσκονται μέσα σε ένα συγκεκριμένο div */
    .custom-div a {
      cursor: crosshair;
    }
  </style>
</head>
<body>
  <h1>Link Cursors</h1>

  <!-- Σύνδεσμοι με διαφορετικούς τύπους δρομέων -->
  <div>
    <a href="#">Αυτός είναι ένας σύνδεσμος με τύπο δρομέα "pointer"</a>
  </div>
  <div class="custom-div">
    <a href="#">Αυτός είναι ένας σύνδεσμος με τύπο δρομέα "crosshair"</a>
  </div>
  <div>
    <a href="#" style="cursor: help;">Αυτός είναι ένας σύνδεσμος με τύπο δρομέα "help" (ενσωματωμένο)</a>
  </div>
</body>
</html>

Στο παραπάνω παράδειγμα, οι υπερσυνδέσμοι (links) έχουν διάφορους τύπους δρομέων (cursors) που μπορούν να χρησιμοποιηθούν. Ο τύπος του δρομέα ορίζεται με την ιδιότητα cursor. Στο παράδειγμα, οι συνδέσμοι έχουν τους εξής τύπους δρομέων:

• “pointer” για τον προεπιλεγμένο τύπο δρομέα (όταν δεν υπάρχει άλλη ορισμένη τιμή)
• “grab” για τον τύπο δρομέα κατά το πέρασμα του ποντικιού πάνω από τον σύνδεσμο
• “crosshair” για τους συνδέσμους που βρίσκονται μέσα στο συγκεκριμένο div

Μπορείτε να δοκιμάσετε τον παραπάνω κώδικα HTML σε έναν φυλλομετρητή για να δείτε πώς εμφανίζονται οι διάφοροι τύποι δρομέων κατά το πέρασμα του ποντικιού πάνω από τους συνδέσμους.