Πώς να προσαρμόσετε τις συνδέσεις με CSS - ανδρείκελα

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

Το στοιχείο αγκύρωσης HTML ( a ) χρησιμοποιείται για τη δημιουργία συνδέσμων. Το κείμενο μεταξύ της ετικέτας αγκύρωσης ανοίγματος και κλεισίματος είναι η περιγραφή του συνδέσμου και η διεύθυνση URL που ορίζεται στο χαρακτηριστικό href είναι η διεύθυνση που επισκέπτεται το πρόγραμμα περιήγησης κατά τη σύνδεση του συνδέσμου.

σύνδεσμος

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

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

Κοινές ιδιότητες και τιμές του CSS για συνδέσεις διαμόρφωσης

Όνομα ιδιοτήτων

Πιθανές τιμές	Περιγραφή	χρώμα
όνομα	hex code rgb value (	χρώμα: # 0000FF; ) ή τιμή RGB ( χρώμα: rgb (0, 255) >). διακόσμηση κειμένου καμία υπογραμμίστε
Ορίζει το σύνδεσμο για να έχει μια υπογράμμιση (ή όχι).	Τα ακόλουθα παραδείγματα στυλ συνδέονται κατά τρόπο παρόμοιο με τον τρόπο με τον οποίο στυλίζονται σε άρθρα στη Wikipedia, όπου οι σύνδεσμοι εμφανίζονται μπλε από προεπιλογή, υπογραμμίζονται στο ποντίκι και στο πορτοκαλί όταν είναι ενεργό. Όπως φαίνεται παρακάτω, ο πρώτος σύνδεσμος με τον υπεύθυνο τεχνολογίας των Ηνωμένων Πολιτειών φαίνεται να υπογραμμίζεται όπως θα συνέβαινε αν το ποντίκι ήταν πάνω του. Επίσης, ο σύνδεσμος με το Google εμφανίζεται πορτοκαλί όπως θα ήταν αν ήταν ενεργός και το ποντίκι έκανε κλικ σε αυτό. α: σύνδεσμος { χρώμα: rgb (6, 69, 173);	διακόσμηση κειμένου: κανένας;

α: επίσκεψη {

χρώμα: rgb (11, 0, 128)

α: ενεργό {

χρώμα: rgb (250, 167, 0)

}

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

Θυμηθείτε να συμπεριλάβετε το παχύ τελεία μεταξύ του επιλογέα

a

και της κατάστασης σύνδεσης.

Παρόλο που εξηγεί γιατί είναι πέρα ​​από το πεδίο αυτού του βιβλίου, οι προδιαγραφές CSS επιμένουν να καθορίσετε τις διάφορες καταστάσεις σύνδεσης με τη σειρά που εμφανίζεται εδώ - σύνδεσμος, επίσκεψη, αιώρηση και στη συνέχεια ενεργή.Ωστόσο, είναι αποδεκτό να μην ορίσουμε μια κατάσταση σύνδεσης, εφόσον διατηρείται αυτή η σειρά.

Οι διάφορες καταστάσεις συνδέσεων είναι γνωστές ως

επιλογείς ψευδο-κατηγορίας

. Οι επιλογείς ψευδο-κατηγορίας προσθέτουν μια λέξη-κλειδί στους επιλογείς CSS και σας επιτρέπουν να διαμορφώσετε μια ειδική κατάσταση του επιλεγμένου στοιχείου.