Αφαίρεση υποκεφαλίδων σύνδεσης ή δημιουργία ζευγαρωμένων κηλίδων ή διπλών υπογραμμισμένων συνδέσεων
Από προεπιλογή, οι φυλλομετρητές ιστού έχουν συγκεκριμένα στυλ CSS που εφαρμόζουν σε συγκεκριμένα στοιχεία HTML. Αν δεν αντικαταστήσετε αυτές τις προεπιλογές με τα φύλλα στυλ του ιστότοπού σας, τότε ισχύουν οι προεπιλογές. Για τους υπερσυνδέσμους, το προεπιλεγμένο στυλ εμφάνισης είναι ότι κάθε συνδεδεμένο κείμενο θα είναι μπλε και υπογραμμισμένο. Ο περιηγητής κάνει αυτό έτσι ώστε οι επισκέπτες του ιστότοπου να μπορούν εύκολα να δουν τι κείμενο συνδέεται. Πολλοί σχεδιαστές ιστοσελίδων δεν ενδιαφέρονται για αυτά τα προεπιλεγμένα στυλ, ειδικά αυτά που υπογραμμίζουν. Ευτυχώς, το CSS καθιστά εύκολο να αλλάξετε την εμφάνιση των υπογραμμισμένων ή να τα αφαιρέσετε τελείως.
Κατάργηση της υπογράμμισης για συνδέσμους κειμένου
Το υπογραμμισμένο κείμενο μπορεί να είναι πιο δύσκολο να διαβάσει αυτό το μη υπογραμμισμένο κείμενο. Επιπλέον, πολλοί σχεδιαστές απλά δεν ενδιαφέρονται για την εμφάνιση υπογραμμισμένων συνδέσμων κειμένου. Σε αυτές τις περιπτώσεις, πιθανόν να θέλετε να αφαιρέσετε αυτά τα υπογραμμίζει εντελώς.
Για να αφαιρέσετε τις υπογραμμίσεις από συνδέσμους κειμένου, θα χρησιμοποιήσετε την διακόσμηση κειμένου της ιδιότητας CSS. Εδώ είναι το CSS που θα γράψετε για να το κάνετε αυτό:
ένα {κείμενο-διακόσμηση: κανένα? }}
Με αυτή τη γραμμή CSS, θα αφαιρέσετε την υπογράμμιση από όλους τους συνδέσμους κειμένου. Αν και αυτό είναι ένα πολύ γενικό στυλ (χρησιμοποιεί έναν επιλογέα στοιχείων), εξακολουθεί να έχει μεγαλύτερη εξειδίκευση από ότι τα προεπιλεγμένα στυλ των προγραμμάτων περιήγησης. Επειδή αυτά τα προεπιλεγμένα στυλ είναι αυτό που δημιουργεί τις υπογραμμίσεις για να ξεκινήσετε, αυτό είναι που πρέπει να αντικαταστήσετε.
Μια προειδοποίηση για την αφαίρεση υπογραμμίσεων
Οπτικά, η αφαίρεση των υπογραμμισμάτων μπορεί να είναι ακριβώς αυτό που θέλετε να ολοκληρώσετε, αλλά θα πρέπει να είστε προσεκτικοί όταν το κάνετε και αυτό. Είτε σας αρέσει η εμφάνιση υπογραμμισμένων συνδέσεων είτε όχι, δεν μπορείτε να υποστηρίξετε ότι καθιστούν προφανές το ποιο κείμενο είναι συνδεδεμένο και ποιο όχι. Εάν αφαιρέσετε υπογραμμίζει ή αλλάξετε αυτό το χρώμα προεπιλεγμένης μπλε ζεύξης, θα πρέπει να βεβαιωθείτε ότι τα αντικαταστήσετε με στυλ που εξακολουθούν να επιτρέπουν το συνδεδεμένο κείμενο να ξεχωρίζει. Αυτό θα κάνει μια πιο διαισθητική εμπειρία για τους επισκέπτες του ιστότοπού σας.
Μην υπογραμμίζετε μη συνδέσεις
Μια άλλη προσοχή στις συνδέσεις και τις υπογραμμίζει, δεν υπογραμμίζουν το κείμενο που δεν είναι ένας σύνδεσμος ως ένας τρόπος να τονισθεί. Οι άνθρωποι έρχονται να περιμένουν ότι το υπογραμμισμένο κείμενο είναι ένας σύνδεσμος, οπότε αν υπογραμμίζετε το περιεχόμενο για να προσθέσετε έμφαση (αντί να το κάνετε τολμηρό ή να το υπογραμμίζετε), στέλνετε λάθος μήνυμα και συγχέετε τους χρήστες του ιστότοπου.
Αλλάξτε την υπογράμμιση σε κουκκίδες ή παύλες
Εάν θέλετε να διατηρήσετε τον σύνδεσμο κειμένου υπογραμμισμένο, αλλά αλλάξτε το στυλ αυτής της υπογράμμισης από την προεπιλεγμένη εμφάνιση, η οποία είναι γραμμή "soldi", μπορείτε να το κάνετε και αυτό. Αντί αυτής της σταθερής γραμμής, μπορείτε να χρησιμοποιήσετε κουκίδες για να υπογραμμίσετε τους συνδέσμους σας. Για να το κάνετε αυτό, θα καταργήσετε ακόμα την υπογράμμιση, αλλά θα την αντικαταστήσετε με την ιδιότητα στυλ κάτω από τα σύνορα:
ένα {κείμενο-διακόσμηση: κανένα? σύνορα-κάτω: 1px διακεκομμένη. }}Αφού αφαιρέσατε την τυπική υπογράμμιση, η διακεκομμένη είναι η μόνη που εμφανίζεται.
Μπορείτε να κάνετε το ίδιο πράγμα για να πάρετε παύλες. Απλά αλλάξτε το στυλ κάτω από τα σύνορα στη διακεκομμένη:
ένα {κείμενο-διακόσμηση: κανένα? σύνορα-κάτω: 1px διακεκομμένη; }}Αλλάξτε το χρώμα υπογράμμισης
Ένας άλλος τρόπος για να επιστήσετε την προσοχή στις συνδέσεις σας είναι να αλλάξετε το χρώμα της υπογράμμισης. Βεβαιωθείτε ότι το χρώμα ταιριάζει με το χρώμα σας.
ένα {κείμενο-διακόσμηση: κανένα? σύνορα-κάτω: 1χλ. }}Διπλά υπογράμματα
Το τέχνασμα με τη χρήση διπλών υπογραμμίζει ότι πρέπει να αλλάξετε το πλάτος των συνόρων. Εάν δημιουργήσετε ένα πλάτος πλάτους 1px, θα καταλήξετε με μια διπλή υπογράμμιση που μοιάζει με μία μόνο υπογράμμιση.
ένα {κείμενο-διακόσμηση: κανένα? κάτω όριο: 3px διπλό; }}Μπορείτε επίσης να χρησιμοποιήσετε την υπάρχουσα υπογράμμιση για να κάνετε διπλή υπογράμμιση με άλλες λειτουργίες, όπως μία από τις γραμμές που είναι διακεκομμένες:
ένα {border-bottom: 1px διπλό? }}Μην ξεχάσετε τα κράτη σύνδεσης
Μπορείτε να προσθέσετε το στυλ κάτω από τα σύνορα στους συνδέσμους σας σε διαφορετικές καταστάσεις όπως: αιώρηση,: ενεργή ή: επισκέφθηκε. Αυτό μπορεί να δημιουργήσει μια ωραία εμπειρία τύπου "ανατροπής" για τους επισκέπτες όταν χρησιμοποιείτε την ψευδο-τάξη "hover". Για να δημιουργήσετε μια δεύτερη υποδιαίρεση με διάκενα εμφανίζονται όταν τοποθετείτε το δείκτη του ποντικιού πάνω από τη σύνδεση:
ένα {κείμενο-διακόσμηση: κανένα? } α: αιωρείται {όριο-κάτω: 1px διακεκομμένη. }}Αρχικό άρθρο από την Jennifer Krynin. Επεξεργασμένο από τον Jeremy Girard