Πώς να σχεδιάσετε συνδέσμους στο CSS

Στυλ Σύνδεσμοι

Σύνδεσμοι μπορεί να οριστεί με οποιαδήποτε ιδιότητα CSS, όπως color, font-family, font-size, και padding. Εδώ είναι ένα εύκολο παράδειγμα:

a { color: hotpink; }

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

Οι σύνδεσμοι έχουν επίσης 4 καταστάσεις και πολλοί προγραμματιστές διαμορφώνουν κάθε κατάσταση διαφορετικά. Οι τέσσερις πολιτείες είναι:

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

Η ιδιότητα είναι υπεύθυνη για τη δημιουργία διευθύνσεων URL και μπορεί να τροποποιηθεί χρησιμοποιώντας έναν αριθμό ιδιοτήτων στυλ CSS, αν και έχει μερικές από προεπιλογή:

  1. Υπογραμμίζω
  2. Μπλε χρώμα

Μπορείτε να τα αλλάξετε προσθέτοντας την αλλαγή colorκαι τις text-decorationιδιότητες.

 color: black; text-decoration: none;

Μπορείτε επίσης να σχεδιάσετε τον σύνδεσμο με βάση την αλληλεπίδραση χρησιμοποιώντας αυτές τις ιδιότητες, επίσης γνωστές ως καταστάσεις συνδέσμου:

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

Ακολουθεί ένα δείγμα CSS που χρησιμοποιεί τις 4 καταστάσεις:

a:link { color: red; } a:visited { color: blue; } a:hover { color: green; } a:active { color: blue; }

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

  • a:hoverΠΡΕΠΕΙ να έρθει μετά a:linkκαιa:visited

a:active ΠΡΕΠΕΙ να έρθει μετά a:hover

a: link - ένας κανονικός, μη επισκέψιμος σύνδεσμος a: επισκέφθηκε - ένας σύνδεσμος που έχει επισκεφθεί ο χρήστης a: hover - ένας σύνδεσμος όταν ο χρήστης ποντάρει πάνω του a: ενεργός - ένας σύνδεσμος τη στιγμή του κλικ

/* unvisited link */ a:link { color: red; } /* visited link */ a:visited { color: green; } /* mouse over link */ a:hover { color: hotpink; } /* selected link */ a:active { color: blue; } 

Περισσότερα για το στυλ στο CSS:

  • Πώς να σχεδιάσετε μια ετικέτα HTML απευθείας στο CSS
  • Πώς να σχεδιάσετε λίστες με CSS
  • Πώς να σχεδιάσετε κουμπιά με CSS