Τρόπος αλλαγής υπογραμμίσεων συνδέσμου HTML σε μια ιστοσελίδα

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

Τρόπος κατάργησης της υπογράμμισης σε συνδέσμους κειμένου

Από προεπιλογή, τα προγράμματα περιήγησης ιστού έχουν ορισμένα Στυλ CSS που ισχύουν για συγκεκριμένα στοιχεία HTML. Εάν δεν αντικαταστήσετε αυτές τις προεπιλογές με τα φύλλα στυλ του ιστότοπού σας, τότε ισχύουν οι προεπιλογές. Για

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

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

ένα {text-decoration: none; }

Με αυτήν τη γραμμή CSS, καταργείτε την υπογράμμιση από όλους τους συνδέσμους κειμένου στην ιστοσελίδα σας. Παρόλο που πρόκειται για ένα πολύ γενικό στυλ (χρησιμοποιεί έναν επιλογέα στοιχείων), εξακολουθεί να έχει περισσότερη ειδικότητα από ό, τι τα προεπιλεγμένα στυλ προγράμματος περιήγησης. Επειδή αυτά τα προεπιλεγμένα στυλ είναι αυτά που δημιουργούν τις υπογραμμίσεις για να ξεκινήσετε, αυτό πρέπει να αντικαταστήσετε.

Προσοχή κατά την αφαίρεση υπογραμμίσεων

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

Μην υπογραμμίζετε τους μη συνδέσμους

Μια άλλη προσοχή για τους συνδέσμους και τις υπογραμμίσεις, μην υπογραμμίζετε κείμενο που δεν είναι σύνδεσμος ως τρόπος να τονιστεί. Οι άνθρωποι περιμένουν ότι το υπογραμμισμένο κείμενο θα είναι σύνδεσμος, οπότε αν υπογραμμίζετε περιεχόμενο για να το προσθέσετε έμφαση (αντί να το κάνεις τολμηρό ή με πλάγια γραφή), στέλνεις λάθος μήνυμα και θα μπερδέψεις τον ιστότοπο χρήστες.

Πώς να αλλάξετε την υπογράμμιση σε τελείες ή παύλες

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

ένα {text-decoration: none; περίγραμμα-κάτω: 1px διάστικτο; }

Δεδομένου ότι έχετε αφαιρέσει την τυπική υπογράμμιση, η διακεκομμένη είναι η μόνη που εμφανίζεται.

Μπορείτε να κάνετε το ίδιο πράγμα για να πάρετε παύλες. Απλώς αλλάξτε το στυλ περιγράμματος-κάτω σε διακεκομμένη:

ένα {text-decoration: none; περίγραμμα-κάτω: 1px διακεκομμένη. }

Τρόπος αλλαγής του υπογράμμισης χρώματος

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

ένα {text-decoration: none; περίγραμμα-κάτω: 1px συμπαγές κόκκινο; }

Διπλές υπογραμμίσεις

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

ένα {text-decoration: none; όριο-κάτω: 3px διπλό. }

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

ένα {border-bottom: 1px double; }

Μην ξεχάσετε τις καταστάσεις σύνδεσης

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

ένα {text-decoration: none; }
a: αιωρήστε το {border-bottom: 1px dotted }