Τι πρέπει να γνωρίζετε
- Καταργήστε την υπογράμμιση σε συνδέσμους κειμένου με τη διακόσμηση κειμένου ιδιοτήτων CSS πληκτρολογώντας ένα {text-decoration: none; }.
- Αλλάξτε την υπογράμμιση σε τελείες με την ιδιότητα στυλ κάτω περιγράμματος ένα {text-decoration: none; περίγραμμα-κάτω: 1px διάστικτο; }.
- Αλλάξτε το υπογραμμισμένο χρώμα πληκτρολογώντας ένα {text-decoration: none; περίγραμμα-κάτω: 1px συμπαγές κόκκινο; }. Αντικαταστήστε το συμπαγές κόκκινο με άλλο χρώμα.
Αυτό το άρθρο εξηγεί διάφορους τρόπους με τους οποίους μπορείτε να χρησιμοποιήσετε το CSS για να αλλάξετε την προεπιλεγμένη εμφάνιση των συνδέσμων κειμένου στην ιστοσελίδα σας, αφαιρώντας την υπογράμμιση, αλλάζοντας την σε διακεκομμένη γραμμή ή αλλάζοντας το χρώμα της. Πρόσθετες πληροφορίες περιλαμβάνονται για την αλλαγή της υπογράμμισης σε διακεκομμένη γραμμή ή διπλή υπογράμμιση.
Τρόπος κατάργησης της υπογράμμισης σε συνδέσμους κειμένου
Από προεπιλογή, τα προγράμματα περιήγησης ιστού έχουν συγκεκριμένα στυλ CSS που εφαρμόζονται σε συγκεκριμένα στοιχεία HTML. Εάν δεν αντικαταστήσετε αυτές τις προεπιλογές με τα φύλλα στυλ του ιστότοπού σας, τότε ισχύουν οι προεπιλογές. Για υπερσυνδέσμους, το προεπιλεγμένο στυλ εμφάνισης είναι ότι οποιοδήποτε συνδεδεμένο κείμενο είναι μπλε και υπογραμμισμένο. Εάν θέλετε, μπορείτε να αλλάξετε την εμφάνιση αυτών των υπογραμμίσεων ή να τα καταργήσετε εντελώς από την ιστοσελίδα σας. Για να αφαιρέσετε τις υπογραμμίσεις από συνδέσμους κειμένου, χρησιμοποιείτε τη διακόσμηση κειμένου ιδιοτήτων CSS. Εδώ είναι το CSS που γράφετε για να το κάνετε αυτό: ένα {text-decoration: none; }
class = «ql-syntax»> Με αυτήν τη μία γραμμή CSS, καταργείτε την υπογράμμιση από όλους τους συνδέσμους κειμένου στην ιστοσελίδα σας. Παρόλο που πρόκειται για ένα πολύ γενικό στυλ (χρησιμοποιεί έναν επιλογέα στοιχείων), εξακολουθεί να έχει περισσότερη ειδικότητα από ό, τι τα προεπιλεγμένα στυλ προγράμματος περιήγησης. Επειδή αυτά τα προεπιλεγμένα στυλ είναι αυτά που δημιουργούν τις υπογραμμίσεις για να ξεκινήσετε, αυτό πρέπει να αντικαταστήσετε.
Προσοχή κατά την αφαίρεση υπογραμμίσεων
Οπτικά, η αφαίρεση των υπογραμμίσεων μπορεί να είναι ακριβώς αυτό που θέλετε να επιτύχετε, αλλά θα πρέπει να είστε προσεκτικοί όταν το κάνετε επίσης. Είτε σας αρέσει η εμφάνιση υπογραμμισμένων συνδέσμων είτε όχι, δεν μπορείτε να υποστηρίξετε ότι καθιστούν προφανές ως προς το ποιο κείμενο συνδέεται και ποιο όχι. Εάν καταργήσετε τις υπογραμμίσεις ή αλλάξετε αυτό το προεπιλεγμένο μπλε χρώμα συνδέσμου, πρέπει να βεβαιωθείτε ότι τα αντικαταστήσατε με στυλ που εξακολουθούν να επιτρέπουν το συνδεδεμένο κείμενο να ξεχωρίζει. Αυτό θα προσφέρει μια πιο διαισθητική εμπειρία για τους επισκέπτες του ιστότοπού σας.
Μην υπογραμμίζετε τους μη συνδέσμους
Μια άλλη προσοχή για τους συνδέσμους και τις υπογραμμίσεις, μην υπογραμμίζετε κείμενο που δεν είναι σύνδεσμος ως τρόπος να τονιστεί. Οι χρήστες αναμένουν ότι το υπογραμμισμένο κείμενο θα είναι σύνδεσμος, οπότε αν υπογραμμίζετε περιεχόμενο για να προσθέσετε έμφαση (αντί να το κάνετε τολμηρό ή να το πλάγια γράψετε), στέλνετε λάθος μήνυμα και θα συγχέετε τους χρήστες του ιστότοπου.
Πώς να αλλάξετε την υπογράμμιση σε τελείες ή παύλες
Εάν θέλετε να διατηρήσετε τις γραμμές υπογράμμισης του κειμένου σας, αλλά αλλάξτε το στυλ αυτής της υπογράμμισης από την προεπιλεγμένη εμφάνιση, η οποία είναι μια «σταθερή» γραμμή, μπορείτε να το κάνετε και αυτό. Αντί για αυτή τη σταθερή γραμμή, μπορείτε να χρησιμοποιήσετε τελείες για να υπογραμμίσετε τους συνδέσμους σας. Για να το κάνετε αυτό, θα συνεχίσετε να καταργείτε την υπογράμμιση, αλλά θα την αντικαταστήσετε με την ιδιότητα στυλ με περίγραμμα: a {text-decoration: none; περίγραμμα-κάτω: 1px διάστικτο; }
Δεδομένου ότι έχετε αφαιρέσει την τυπική υπογράμμιση, η διακεκομμένη είναι η μόνη που εμφανίζεται. Μπορείτε να κάνετε το ίδιο πράγμα για να πάρετε παύλες. Απλώς αλλάξτε το στυλ περιγράμματος-κάτω σε διακεκομμένο: ένα {text-decoration: none; περίγραμμα-κάτω: 1px διακεκομμένη. }
Τρόπος αλλαγής του υπογράμμισης χρώματος
Ένας άλλος τρόπος για να τραβήξετε την προσοχή στους συνδέσμους σας είναι να αλλάξετε το χρώμα της υπογράμμισης. Απλώς βεβαιωθείτε ότι το χρώμα ταιριάζει με το συνδυασμό χρωμάτων σας. ένα {text-decoration: none; περίγραμμα-κάτω: 1px συμπαγές κόκκινο; }
Διπλές υπογραμμίσεις
Το κόλπο για τη χρήση διπλών υπογραμμίσεων είναι ότι πρέπει να αλλάξετε το πλάτος του περιγράμματος. Εάν δημιουργήσετε ένα περίγραμμα πλάτους 1 εικονοστοιχείου, θα καταλήξετε σε μια διπλή υπογράμμιση που μοιάζει με μία υπογράμμιση. ένα {text-decoration: none; περίγραμμα-κάτω: 3px διπλό. }
Μπορείτε επίσης να χρησιμοποιήσετε την υπάρχουσα υπογράμμιση για να δημιουργήσετε μια διπλή υπογράμμιση με άλλες λειτουργίες, όπως μία από τις γραμμές που είναι διακεκομμένες: ένα {border-bottom: 1px double; }
Μην ξεχάσετε τις καταστάσεις σύνδεσης
Μπορείτε να προσθέσετε το στυλ κάτω-περιγράμματος στους συνδέσμους σας σε διαφορετικές καταστάσεις όπως: hover,: ενεργό ή: επισκέφθηκε. Αυτό μπορεί να δημιουργήσει μια ωραία εμπειρία στυλ «ανατροπής» για τους επισκέπτες όταν χρησιμοποιείτε αυτήν την ψευδο-κατηγορία «αιωρηθείτε». Για να εμφανιστεί μια δεύτερη διακεκομμένη υπογράμμιση όταν τοποθετείτε το δείκτη του ποντικιού πάνω από το σύνδεσμο: a {text-decoration: none }
a: αιωρήστε το {border-bottom: 1px dotted; }
Αναφέρετε αυτό το άρθρο
Μορφή mla apa chicago Η αναφορά σας
Kyrnin, Jennifer. «Πώς να αλλάξετε τις υπογραμμίσεις συνδέσμων σε μια ιστοσελίδα.» ThoughtCo, Μάιος. 14, 2021, thinkco.com/change-link-underlines-3466397.
Kyrnin, Jennifer. (2021, 14 Μαΐου). Πώς να αλλάξετε τις υπογραμμίσεις συνδέσμων σε μια ιστοσελίδα. Ανακτήθηκε από το https://www.thoughtco.com/change-link-underlines-3466397
Kyrnin, Jennifer. «Πώς να αλλάξετε τις υπογραμμίσεις συνδέσμων σε μια ιστοσελίδα.» ThoughtCo. https://www.thoughtco.com/change-link-underlines-3466397 (πρόσβαση στις 26 Μαΐου 2021).
αντιγραφή παραπομπής