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

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

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

Αφαιρέστε την υπογράμμιση συνδέσμου από ολόκληρο τον ιστότοπο

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

κείμενο-διακόσμηση: κανένα;

Αυτή η μικρή γραμμή θα αφαιρέσει εντελώς την υπογράμμιση όλων των στοιχείων που έχουν γραφτεί χρησιμοποιώντας την ετικέτα "a" σε ολόκληρο τον ιστότοπο.

Τι γίνεται όμως αν δεν έχετε πρόσβαση στο αρχείο CSS;

Σε αυτήν την περίπτωση, συνιστάται η χρήση της ετικέτας Style στην αρχή του εγγράφου. Λειτουργεί το ίδιο με ένα αρχείο CSS. Για να εφαρμόσετε στυλ, πρέπει να προσθέσετε μια κατασκευή στην αρχή του εγγράφου (ή της σελίδας HTML), στην οποία ισχύουν οι συνήθεις κανόνες των στυλ CSS.

Αυτά τα στυλ ισχύουν μόνο για μια συγκεκριμένη σελίδα. Δεν θα ισχύουν για άλλες ενότητες ή έγγραφα του ιστότοπου.

Κατάργηση υπογράμμισης συνδέσμου κατά την τοποθέτηση του δείκτη

Τι γίνεται όμως αν χρειαστεί να αφαιρέσετε την υπογράμμιση του συνδέσμου κατά την τοποθέτηση του δείκτη; Το CSS μπορεί να μας βοηθήσει και σε αυτή την περίπτωση. Ο κώδικας θα μοιάζει με αυτό:

κείμενο-διακόσμηση: κανένα;

Είναι η ψευδο-κλάση ":hover" που είναι υπεύθυνη για τη διακόσμηση των στοιχείων όταν αιωρούνται πάνω τους.

Συνδυάζοντας αυτές τις δύο επιλογές, μπορούμε να κάνουμε την υπογράμμιση του συνδέσμου να εμφανίζεται μόνο στο δείκτη του ποντικιού, διαφορετικά θα μοιάζει με κανονικό κείμενο:

κείμενο-διακόσμηση: κανένα;

κείμενο-διακόσμηση: υπογράμμιση;

Χρήση αναγνωριστικών και κλάσεων

Όπως μπορείτε να δείτε από τα παραπάνω, η αλλαγή του στυλ ενός στοιχείου σε έναν ιστότοπο ή ένα έγγραφο HTML είναι αρκετά εύκολη. Τα μειονεκτήματα τέτοιων επιλογών είναι η αδυναμία επιλεκτικής εφαρμογής στυλ: όχι σε ολόκληρο τον ιστότοπο ή το έγγραφο, αλλά σε έναν συγκεκριμένο σύνδεσμο.

Υπάρχουν πολλές επιλογές για την επίλυση αυτού του προβλήματος.

Μπορείτε να αφαιρέσετε την υπογράμμιση των συνδέσμων inline. Αν και αυτό δεν συνιστάται αυστηρά από την άποψη της βελτιστοποίησης του ιστότοπου.

Για να το κάνετε αυτό, πρέπει να καθορίσετε την παράμετρο Style απευθείας στην ετικέτα συνδέσμου:

Η δεύτερη επιλογή είναι πιο αποδεκτή.

Εισάγουμε μια πρόσθετη κλάση ή αναγνωριστικό στο στοιχείο και εκχωρούμε τα στυλ που χρειαζόμαστε σε αυτούς τους επιλογείς:

Μια τάξη γράφεται με μια τελεία πριν από το όνομά της:

None_decoration(

κείμενο-διακόσμηση: κανένα;

Το αναγνωριστικό υποδεικνύεται με το σύμβολο #:

#none_decoration(

κείμενο-διακόσμηση: κανένα;

Αυτός ο κανόνας ισχύει τόσο για το αρχείο CSS όσο και για την ετικέτα Style

Αλλαγή του στυλ εμφάνισης των συνδέσμων σε κείμενο

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

Αυτό είναι επίσης πολύ απλό να γίνει:

χρώμα :*καθορίστε το επιθυμητό χρώμα σε οποιαδήποτε μορφή (*κόκκινο, #c2c2c2, rgb (132, 33, 65)*)*;

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

Αντικατάσταση τυπικού στυλ

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

κείμενο-διακόσμηση-στυλ:

• Εάν χρειάζεστε συμπαγή γραμμή, καθορίστε την τιμή συμπαγή.
• Για κυματιστή γραμμή - κυματιστή.
• Διπλή γραμμή - αντίστοιχα διπλή.
• Η γραμμή μπορεί να αντικατασταθεί με μια ακολουθία κουκκίδων - διακεκομμένων.
• Υπογραμμίστε μια λέξη ως διακεκομμένη γραμμή - διακεκομμένη

Μπορείτε επίσης να αλλάξετε τη θέση της γραμμής σε σχέση με το κείμενο:

Η κατασκευή line-text-decoration-line μπορεί να λάβει τις ακόλουθες τιμές:

Και το χρώμα (δεν πρέπει να συγχέεται με το χρώμα του κειμένου!):

text-decoration-line: (οποιοδήποτε χρώμα σε οποιαδήποτε μορφή * κόκκινο, #c2c2c2, rgb (132, 33, 65)*).

Για ευκολία, και οι τρεις θέσεις μπορούν να γραφτούν μαζί στην κατασκευή:

κείμενο-διακόσμηση: κόκκινο, γραμμή, κυματιστή.

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

Με την έλευση της μορφής RGBA(Κόκκινο Πράσινο Μπλε Άλφα)στο CSS3 αυτό το πρόβλημα μπορεί να θεωρηθεί λυμένο. Χρησιμοποιώντας μια προηγμένη μορφή αναπαράστασης χρωμάτων, οι σχεδιαστές ιστοσελίδων έχουν πλέον τη δυνατότητα να χρησιμοποιούν τη διαφάνεια άλφα για το χρώμα.

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

Σύνταξη

χρώμα: rgba(0,96,160); / * μπλε χρώμα */ χρώμα: rgba (0,96,160,0,2 ); / * μπλε χρώμα με διαφάνεια */

Η τιμή χρώματος RGBA δίνεται από: RGBA (κόκκινο, πράσινο, μπλε, άλφα).
Η παράμετρος άλφα αντιπροσωπεύει έναν αριθμό από 0,0(εντελώς διαφανές) έως 1,0(εντελώς αδιαφανές).

Συμβατότητα

Οι τιμές χρώματος RGBA υποστηρίζονται από προγράμματα περιήγησης: IE9+, Firefox 3+, Chrome, Safari και Opera 10+.

Ποιος εφάρμοσε

Το Lebedev Studio, το Artyom Gorbunov Design Bureau, ο Ilya Birman εκμεταλλεύτηκαν αμέσως αυτή την ευκαιρία... Στα site τους παρέμενε η υπογράμμιση των συνδέσμων, αλλά έγινε πιο κομψή.

patpitchaya/

Παρουσιάζω σύντομα τμήματα κώδικα CSS (απόσπασμα) για την υλοποίηση της επισήμανσης των αγκυρώσεων συνδέσμων με ομαλή υπογράμμιση κατά την τοποθέτηση του δείκτη.
Το γιατί πρέπει να διαχωρίσετε το κείμενο από το γενικό χάος είναι κάτι που δεν έχει νόημα. Υπάρχει μεγάλη ποικιλία τρόπων και τύπων σχεδιασμού συνδέσμων, όλα περιορίζονται μόνο από τη φαντασία του πλοιάρχου.
Με τη βοήθεια της ψευδο-κλάσης:hover και της μαγείας, μπορείτε να επισυνάψετε σχεδόν οποιοδήποτε εφέ σε τυπικούς, βαρετά σχεδιασμένους κυανωτικούς συνδέσμους.
Οι λύσεις που θα συζητηθούν σήμερα δεν είναι κάτι ιδιαίτερα εκπληκτικό ή ασυνήθιστο. Όλα είναι απλά, χωρίς ιδιαίτερες καμπάνες και σφυρίχτρες, απλά τονίζοντας τον έγχρωμο σύνδεσμο και το ελαφρύ animation της υπογράμμισης.

Θα περιγράψω αναλυτικά μόνο τον κώδικα CSS, αφού δεν χρειάζεται να αλλάξουμε ή να προσθέσουμε κάτι στην πλευρά Html.

CSS

Αρχικά, χρησιμοποιώντας την ιδιότητα line-height: ορίστε το διάστιχο ανάλογα με τη γραμμή βάσης της γραμματοσειράς· η τιμή σας μπορεί να είναι διαφορετική. Ας κάνουμε τον σύνδεσμο έναν σύνδεσμο γραμμής μπλοκ, ενσωματωμένο στη δομή κειμένου, ορίζοντας την ιδιότητα εμφάνισης σε inline-block . Ας απαλλαγούμε από την τυπική υπογράμμιση γράφοντας text-decoration:none; και γεμίζουμε τον σύνδεσμο με το χρώμα που χρειαζόμαστε.

a (γραμμή-ύψος: 1; οθόνη: ενσωματωμένο μπλοκ; χρώμα: #ffeb3b; διακόσμηση κειμένου: κανένα; δρομέας: δείκτης; )

a (Ύψος γραμμής: 1; οθόνη: inline-block; χρώμα:#ffeb3b; κείμενο-διακόσμηση: κανένας; δρομέας: δείκτης; )

Στη συνέχεια χρησιμοποιούμε το ψευδο-στοιχείο:after για να μπορούμε να προσθέσουμε ένα επιπλέον στοιχείο, στην περίπτωσή μας μια γραμμή, και να ορίσουμε ένα απλό εφέ μετάβασης στη μετάβαση: ιδιότητα. Το πλάτος γραμμής θα οριστεί αρχικά σε μηδενικό πλάτος: 0%; , το ύψος καθορίζεται σε 2 εικονοστοιχεία. Το χρώμα της γραμμής μπορεί να είναι οποιοδήποτε· στο παράδειγμα δεν έγινα πολύ δημιουργικός και όρισα τα χρώματα του κειμένου συνδέσμου να ταιριάζουν.

a: after ( εμφάνιση: μπλοκ; περιεχόμενο: "" ; ύψος: 2 εικονοστοιχεία; πλάτος: 0%, χρώμα φόντου: #ffeb3b; μετάβαση: πλάτος . 3s ease-in-out; )

a:after ( εμφάνιση: μπλοκ; περιεχόμενο: ""; ύψος: 2 εικονοστοιχεία; πλάτος: 0%; χρώμα φόντου: #ffeb3b; μετάβαση: πλάτος 0,3s ease-in-out; )

Το μόνο που μένει είναι να προσθέσουμε λίγη κίνηση στον σύνδεσμό μας. Για να γίνει αυτό, χρησιμοποιούμε μερικές ψευδο-κλάσεις: hover και: focus . Το πρώτο θα καθορίσει το στυλ του συνδέσμου όταν τοποθετηθεί το δείκτη του ποντικιού, το δεύτερο θα λειτουργήσει όταν ο δρομέας τοποθετηθεί "σφιχτά" στον σύνδεσμο. Εδώ θα αλλάξουμε την τιμή του πλάτους και θα την ορίσουμε στο 100%.
Τώρα, όταν τοποθετείτε το δείκτη του ποντικιού ή εστιάζετε σε έναν σύνδεσμο, θα εμφανίζεται στο χρήστη μια στυλιζαρισμένη υπογράμμιση, ομαλά με ελάχιστα αισθητή καθυστέρηση, τον χρόνο της οποίας, ορίσαμε συνετά νωρίτερα στην ιδιότητα μετάβασης: .

a: αιώρηση: μετά, a: εστίαση: μετά (πλάτος: 100 %; )

a:hover:after, a:focus:after (πλάτος: 100%; )

Ως αποτέλεσμα, έχουμε την ακόλουθη εικόνα:

Ολόκληρος ο συναρμολογημένος κώδικας θα μοιάζει με αυτό:

a ( οθόνη : inline-block ; χρώμα : #ffeb3b ; line-height : 1 ; text-decoration : none ; cursor : pointer ; ) a: after ( background-color : #ffeb3b ; display : block ; content : "" ; ύψος : 2 εικονοστοιχεία ; πλάτος : 0% ; -webkit-transition: πλάτος .3s ease-in-out; -moz--transition: πλάτος .3s ease-in-out; μετάβαση: πλάτος .3s ease-in-out; ) a: hover : after , a: focus : after (πλάτος : 100% ; )

a ( οθόνη: inline-block; χρώμα:#ffeb3b; line-height: 1; text-decoration:none; cursor: pointer; ) a:after ( background-color: #ffeb3b; display: block; content: ""; ύψος: 2 εικονοστοιχεία, πλάτος: 0%, -webkit-μετάβαση: πλάτος 0,3s ease-in-out; -moz--transition: πλάτος 0,3s ease-in-out; μετάβαση: πλάτος 0,3s ease-in-out; ) a:hover:after, a:focus:after (πλάτος: 100%; )

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

Ενημέρωση και προσθήκες από 22/10/2017

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

Όλα είναι πολύ απλά, απλά πρέπει να προσθέσετε μερικές νέες ιδιότητες, δηλαδή, για το κύριο στοιχείο α, να ορίσετε την τοποθέτηση ως σχετική θέση: σχετική; , και για το ψευδοστοιχείο a:after absolute position:absolute; με απόσταση από την αριστερή άκρη του γονικού στοιχείου αριστερά:50%; , και επίσης χρησιμοποιώντας την ιδιότητα μετασχηματισμού για τον προσδιορισμό της οριζόντιας μετατόπισης του στοιχείου από την καθορισμένη τιμή transform:translateX(-50%).

Στην έξοδο παίρνουμε αυτό το αποτέλεσμα:

Όταν συναρμολογηθεί, όλος ο κώδικας css, για να υπογραμμιστεί ομαλά ο σύνδεσμος από το κέντρο, θα πρέπει να μοιάζει κάπως έτσι:

a ( οθόνη : inline-block ; χρώμα : #ffeb3b ; line-height : 1 ; text-decoration : none ; δρομέας : δείκτης ; θέση : σχετική ; ) a: after ( background-color : #ffeb3b ; display : block ; περιεχόμενο : "" ; ύψος : 2 εικονοστοιχεία ; πλάτος : 0% , αριστερά : 50% , θέση : απόλυτη ; -webkit-transition: πλάτος .3s ease-in-out; -moz--transition : πλάτος .3s ease-in-out ; μετάβαση : πλάτος .3s ease-in-out; -webkit-transform: translateX(-50%) ; -moz-transform: translateX(-50%) ; transformation: translateX(-50% ) ;) a: hover : after , a: εστίαση: μετά (πλάτος: 100% ;)

a ( οθόνη: inline-block; χρώμα:#ffeb3b; line-height: 1; text-decoration:none; cursor: pointer; position:relative; ) a:after (color-background: #ffeb3b; display: block; περιεχόμενο : ""; ύψος: 2 εικονοστοιχεία; πλάτος: 0%, αριστερά: 50%, θέση: απόλυτη; -webkit-transition: πλάτος .3s ease-in-out; -moz--transition: πλάτος .3s ease-in-out ; μετάβαση: πλάτος .3s ease-in-out; -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); transform:translateX(-50%); ) a:hover: μετά, a:focus:after (πλάτος: 100%; )

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

Με όλο τον σεβασμό, Andrew

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

• σύνδεσμοι χωρίς υπογράμμιση.
• διακοσμητική επισήμανση?
• επισήμανση με χρώμα φόντου.
• δομή;
• εικόνα δίπλα στον σύνδεσμο.

Σύνδεσμοι χωρίς υπογράμμιση

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

Παράδειγμα 1. Χωρίς υπογράμμιση για συνδέσμους

Οι ψευδοκλάσεις :hover και :visited δεν χρειάζεται να προσθέσουν διακόσμηση κειμένου, κληρονομούν τις ιδιότητες του επιλογέα a.

Υπογράμμιση συνδέσμων όταν τοποθετείτε τον δείκτη του ποντικιού πάνω τους

Για να προσθέσετε μια υπογράμμιση σε συνδέσμους που έχουν διακόσμηση κειμένου : κανένα , θα πρέπει να χρησιμοποιήσετε την ψευδο-κλάση :hover. Καθορίζει το στυλ του συνδέσμου όταν ο κέρσορας του ποντικιού αιωρείται πάνω του. Το μόνο που μένει είναι να προσθέσετε την ιδιότητα text-decoration για την ψευδο-κλάση με την τιμή υπογράμμιση (παράδειγμα 2).

Παράδειγμα 2: Υπογράμμιση συνδέσμων

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

Η υπογράμμιση των συνδέσμων μπορεί να οριστεί όχι μόνο με μια συμπαγή γραμμή, αλλά, για παράδειγμα, με μια διακεκομμένη γραμμή. Για να το κάνετε αυτό, πρέπει να χρησιμοποιήσετε την ιδιότητα border-bottom, η οποία δημιουργεί μια γραμμή στο κάτω μέρος του στοιχείου. Καθορίζοντας ένα από τα ορίσματα αυτής της ιδιότητας, με διακεκομμένη , παίρνουμε μια διακεκομμένη υπογράμμιση. Το Παράδειγμα 3 δείχνει πώς να ορίσετε μια μπλε διακεκομμένη γραμμή για τους κόκκινους συνδέσμους όταν τοποθετείτε το δείκτη του ποντικιού πάνω τους με τον κέρσορα του ποντικιού.

Παράδειγμα 3: Υπογράμμιση με κουκκίδες για συνδέσμους

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

Ρύζι. 1. Χρησιμοποιώντας μια διακεκομμένη γραμμή για να επισημάνετε έναν σύνδεσμο

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

Παράδειγμα 4: Διπλή υπογράμμιση συνδέσμων

Αλλάζοντας το πάχος της γραμμής, τον τύπο και το χρώμα της, μπορείτε να έχετε πολλά διαφορετικά εφέ.

Χρήση χρώματος φόντου

Για να προσθέσετε ένα έγχρωμο φόντο σε έναν σύνδεσμο, απλώς χρησιμοποιήστε την ιδιότητα φόντου, εκχωρώντας του ένα χρώμα σε οποιαδήποτε διαθέσιμη μορφή. Ομοίως, μπορείτε να χρησιμοποιήσετε την ψευδο-κλάση :hover, και στη συνέχεια το χρώμα του φόντου κάτω από τον σύνδεσμο θα αλλάξει όταν τοποθετήσετε το ποντίκι πάνω του (παράδειγμα 5).

Ρύζι. 2. Αλλάξτε το χρώμα του φόντου όταν τοποθετείτε το δείκτη του ποντικιού πάνω από έναν σύνδεσμο

Πλαίσιο γύρω από το σύνδεσμο

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

Παράδειγμα 6. Αλλαγή του χρώματος περιγράμματος των συνδέσμων

Για να αποτραπεί η προσκόλληση του πλαισίου στο κείμενο, στο παράδειγμα, ορίζονται περιθώρια γύρω του χρησιμοποιώντας padding. Μπορείτε επίσης να προσθέσετε ένα φόντο μαζί με το πλαίσιο χρησιμοποιώντας την ιδιότητα φόντου.

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

A ( περίγραμμα: 1 εικονοστοιχείο συμπαγές διαφανές; /* Διαφανές περίγραμμα γύρω από συνδέσμους */ ) a:hover ( περίγραμμα: 1px σταθερό κόκκινο; /* Κόκκινο περίγραμμα όταν τοποθετείτε το δείκτη του ποντικιού πάνω από έναν σύνδεσμο */ )

Εικόνες δίπλα σε εξωτερικούς συνδέσμους

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

Το καλό με τη χρήση εικόνων κοντά σε εξωτερικούς συνδέσμους είναι ότι ο σύνδεσμος που έχει σχεδιαστεί με αυτόν τον τρόπο είναι σαφώς διαφορετικός από τους κανονικούς συνδέσμους εντός του ιστότοπου και μια σωστά επιλεγμένη εικόνα λέει στον επισκέπτη ότι ο σύνδεσμος οδηγεί σε άλλο ιστότοπο. Για να διαχωρίσουμε το στυλ για τοπικούς και εξωτερικούς συνδέσμους, θα χρησιμοποιήσουμε έναν επιλογέα χαρακτηριστικών. Δεδομένου ότι όλοι οι σύνδεσμοι προς άλλους ιστότοπους είναι γραμμένοι με ένα πρωτόκολλο, για παράδειγμα http, αρκεί να ορίσετε το στυλ για τους συνδέσμους των οποίων η τιμή του χαρακτηριστικού href αρχίζει με http://. Αυτό γίνεται χρησιμοποιώντας την κατασκευή a (...), όπως φαίνεται στο Παράδειγμα 7.

Η εικόνα φόντου βρίσκεται στα δεξιά του συνδέσμου και έτσι ώστε το κείμενο να μην επικαλύπτει την εικόνα, προστίθεται ένα περιθώριο στα δεξιά μέσω της ιδιότητας padding-right. Εάν πρέπει να προσθέσετε μια εικόνα στα αριστερά, αντικαταστήστε το 100% με 0 και το padding-right με το padding-left .

Το πρωτόκολλο μπορεί να είναι όχι μόνο http, αλλά και ftp και https· γι' αυτούς αυτή η συνταγή σταματά να λειτουργεί. Επομένως, για ευελιξία, είναι καλύτερο να αλλάξετε τον επιλογέα σε ένα , λέει ότι το στυλ πρέπει να εφαρμόζεται σε όλους τους συνδέσμους των οποίων η διεύθυνση περιέχει //.

Χρησιμοποιώντας html, μπορείτε να δώσετε στο κείμενο ένα όμορφο σχέδιο. Το στοιχείο υπογράμμισης είναι πολύ δημοφιλές, αλλά δεν γνωρίζουν όλοι οι τακτικοί χρήστες πώς να το χρησιμοποιούν.

Υπογράμμιση σε HTML

Πώς λοιπόν κάνετε την υπογράμμιση; σε html μορφοποιείται με χρήση ετικέτας . Χρησιμοποιείται σε όλες τις προδιαγραφές html και xhtml, αλλά μόνο υπό την προϋπόθεση της μετάβασης , δεδομένου ότι πρέπει να καθοριστεί η έκδοση του προγράμματος περιήγησης της σήμανσης. Σε αυτήν την περίπτωση, το έγγραφο περνά με επιτυχία την επικύρωση. Το στοιχείο πρέπει να υποδεικνύεται ως τυπικό, δηλαδή στο επάνω μέρος της σελίδας.

Ετικέτα κλείνοντας, πρέπει να συνοδεύεται. Πρέπει να το προσθέσετε στη σήμανση ως εξής:

1. Τίτλος νούμερο ένα

Μας κείμενοσε μια παράγραφο

Η λέξη «κείμενο» θα είναι υπογραμμισμένη.

Μπορείτε επίσης να τονίσετε ένα μόνο γράμμα σε μια λέξη:

1. Επικεφαλίδα νούμερο δύο

Τα δικά μας Προς τηνστ στην παράγραφο

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

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

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

Υπογράμμιση στο CSS

Η διακόσμηση κειμένου με χρήση css είναι ένας βολικός και πρακτικός τρόπος. Οι απλούστεροι τρόποι για να το επισημάνετε είναι να χρησιμοποιήσετε τη διακόσμηση κειμένου ή το κάτω μέρος του περιγράμματος.

Για να επισημάνετε κείμενο με διακόσμηση κειμένου, η ιδιότητα πρέπει να προστεθεί στην επιθυμητή κλάση.

• επιθυμητή τάξη (
• κείμενο-διακόσμηση: υπογράμμιση;

Θα πρέπει να θυμόμαστε ότι τα ονόματα των τάξεων γράφονται πάντα στα λατινικά.

Η διακόσμηση μπορεί επίσης να γίνει χρησιμοποιώντας περιγράμματα. Τα περιγράμματα σάς επιτρέπουν να κάνετε και μια κανονική (συμπαγή) υπογράμμιση και μια διακεκομμένη. Για να γίνει αυτό, καθορίζονται οι απαραίτητες ιδιότητες περιγράμματος, αλλά η ιδιότητα διακόσμησης κειμένου καταργείται.

• επιθυμητή τάξη (
• κείμενο-διακόσμηση: κανένα;

Στη συνέχεια, το κείμενο διακοσμείται χρησιμοποιώντας την ακόλουθη ιδιότητα:

• .επιθυμητή τάξη (
• κείμενο-διακόσμηση: κανένα;
• περίγραμμα-κάτω: 2 εικονοστοιχεία με διακεκομμένο μαύρο.

Έτσι βγαίνει η διακόσμηση: Για να γίνει συμπαγής, αντί για «διακεκομμένη», χρησιμοποιείται «μασίφ». Για όσους τους αρέσει να διακοσμούν κείμενο με διακεκομμένη υπογράμμιση, μπορείτε να δοκιμάσετε να χρησιμοποιήσετε το "dotted".

Τα στυλ πλαισίων γράφονται σε μία γραμμή. Εκτός από τον τύπο υπογράμμισης, πρέπει επίσης να καθορίσετε το πάχος και το χρώμα της υπογράμμισης. Μπορείτε να πειραματιστείτε με το μέγεθος, αλλά συνήθως 1 ή 2 pixel είναι αρκετά. Το χρώμα του κειμένου μπορεί επίσης να οριστεί στο χρώμα υπογράμμισης:

• επιθυμητή τάξη (
• κείμενο-διακόσμηση: κανένα;
• περίγραμμα-κάτω: 1 εικονοστοιχείο μπλε διακεκομμένο.
• χρώμα:μπλε;

Αυτό θα δημιουργήσει μπλε κείμενο με μπλε διακόσμηση. Για να επισυνάψετε ένα στυλ σε html, πρέπει να προσθέσετε μια κλάση στη σήμανση.

• Τρίτος τίτλος

Το κείμενό μας σε μια παράγραφο

Αυτό είναι, αυτά είναι τα βασικά της υπογράμμισης σε html.