Όλο το κείμενο περικλείεται σε ετικέτες Και τονίζεται.

Ονομα προήλθε από την αγγλική λέξη «υπογραμμίζω». ετικέτα html θεωρείται νεότερο.

Για παράδειγμα

Απλό κείμενο.

Απλό κείμενο. Υπογραμμισμένο κείμενο μέσω ετικέτας ins

Μετατράπηκε στη σελίδα σε

Απλό κείμενο. Υπογραμμισμένο κείμενο μέσω ετικέτας u

Απλό κείμενο.

Υπογραμμισμένο κείμενο μέσω της ιδιότητας CSS text-decoration

Το CSS έχει την ιδιότητα text-decoration, η οποία είναι υπεύθυνη για τη μορφοποίηση του κειμένου html για τη δημιουργία μιας υπογράμμισης.

CSS σύνταξη κειμένου-διακόσμηση

κείμενο-διακόσμηση: κανένας|υπογράμμιση|υπέργραμμη|γραμμή-μέσω|κληρονομιά;

• κανένα - κείμενο χωρίς διακόσμηση
• υπογραμμίζω - υπογράμμιση
• overline - πάνω υπογράμμιση
• line-through - διαγραφή κειμένου
• αναβοσβήνει - κείμενο που αναβοσβήνει (συνιστάται να μην χρησιμοποιείται αυτή η τιμή)

Μας ενδιαφέρει η αξία της υπογράμμισης

Για παράδειγμα:

Текст со свойством text-decoration: underline

Преобразуется на странице в

Текст со свойством text-decoration: underline

Подчеркнутый текст через свойство CSS border-bottom

Свойство CSS border-bottom создано для создании рамок (границ) объекта снизу. Естественно таким образом можно задавать и подчеркивание тексту.

Рассмотрим пример

Преобразуется на странице в

Задача

Решение

Пунктирное подчеркивание у ссылок в последнее время стало стандартом оформления ссылок, щелчок по которым не открывает ссылку, а выполняет некоторое действие в текущем документе. Активное использование технологии AJAX, когда страница обновляется без её перезагрузки, привело к новому виду ссылок, которые отличаются от обычных ссылок пунктирной линией.

Для создания линии следует использовать свойство border-bottom со значением dashed , добавляя его к селектору A . Чтобы подчеркивание применялось не ко всем ссылкам, следует указать уникальный класс, назовем его, например dot . Также необходимо убрать исходное подчёркивание у ссылок с помощью свойства text-decoration со значением none (пример 1).

Пример 1. Пунктирное подчеркивание

HTML5 CSS 2.1 IE Cr Op Sa Fx

Το αποτέλεσμα του παραδείγματος φαίνεται στο Σχ. 1.

Το πάχος γραμμής και το χρώμα υπογράμμισης των συνδέσμων ορίζονται επίσης μέσω της ιδιότητας περίγραμμα-κάτω.

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

Υπογραμμίστε τις παραλλαγές

Υπογραμμίζοντας συνδέσμους ή οποιαδήποτε άλλα στοιχεία, μπορείτε να σκεφτείτε οτιδήποτε. Η υπογράμμιση μπορεί να επιπλέει από κάτω, να γλιστρήσει προς τα αριστερά ή προς τα δεξιά και ούτω καθεξής. Θα δούμε περισσότερα ενδιαφέρον παράδειγμα, στο οποίο η υπογράμμιση θα πάει από το κέντρο προς τις άκρες, όπως στο παρακάτω demo.

επίδειξη υπογράμμισης

HTML

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

css

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

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

A(οθόνη: ενσωματωμένο μπλοκ, θέση: σχετική, διακόσμηση κειμένου: καμία; )

Έτσι, ορίσαμε τη ροή και τη θέση του μπλοκ σε σχέση με την αρχική θέση. Όλα αυτά γίνονται για να μην ανιχνεύεται η υπογράμμιση έξω από το στοιχείο όταν εκχωρούμε το::before pseudo-στοιχείο απόλυτη τοποθέτηση. Μετά από αυτό, πρέπει να ορίσουμε την ακριβή θέση και το μέγεθός του. Και εδώ δημιουργούμε αμέσως το πρώτο μισό της υπογράμμισης.

A::before( εμφάνιση: μπλοκ, θέση: απόλυτη, περιεχόμενο: "", ύψος: 2 εικονοστοιχεία, πλάτος: 0, χρώμα φόντου: κόκκινο, μετάβαση: πλάτος 0,5 δευτ. ευκολία εισόδου, αριστερά 0,5 δευτ. ευκολία εισόδου, αριστερά: 50%, κάτω: 0; )

Εκείνοι. το ύψος της υπογράμμισης θα είναι 2 εικονοστοιχεία, μήκος 0, κόκκινο χρώμα και η ιδιότητα μετάβασης είναι υπεύθυνη για την κινούμενη εικόνα. Και φυσικά, η εσοχή στα αριστερά είναι 50%, δηλ. κεντρικό σημείο. Εκτελούμε σχεδόν τις ίδιες ενέργειες με το ψευδοστοιχείο ::after:

Απο

A:hover::before(πλάτος: 50%; αριστερά: 0; ) a:hover::after(πλάτος: 50%; )

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

Υπογράμμιση για στοιχεία μπλοκ όπως ετικέτα

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

Γραμμή κάτω από το κείμενο για όλο το πλάτος του μπλοκ

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

Παράδειγμα 1: Γραμμή πλήρους πλάτους

HTML5 CSS 2.1 IE Cr Op Sa Fx

Δείγμα κειμένου

Η απόσταση από τη γραμμή στο κείμενο μπορεί να ρυθμιστεί με την ιδιότητα padding-bottom προσθέτοντάς την στον επιλογέα H1. Αποτέλεσμα αυτό το παράδειγμαφαίνεται στο σχ. 1.

Υπογράμμιση κειμένου

Για να υπογραμμίσετε μόνο το κείμενο, πρέπει να χρησιμοποιήσετε την ιδιότητα text-decoration με τιμή υπογράμμισης , προσθέτοντάς την ξανά στον επιλογέα H1 (παράδειγμα 2).

Παράδειγμα 2: Πλάτος γραμμής σε κείμενο

HTML5 CSS 2.1 IE Cr Op Sa Fx

Δείγμα κειμένου

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

Το αποτέλεσμα αυτού του παραδείγματος φαίνεται στο Σχ. 2.

Στην περίπτωση χρήσης της ιδιότητας text-decoration, η γραμμή είναι συνδεδεμένη με το κείμενο, επομένως η θέση και το στυλ της δεν μπορούν να προσδιοριστούν.

ή μελετήστε τις ετικέτες αυτής της μορφής Κείμενο HTML

Η προσοχή σας παρουσιάζεται σε ένα από τα βασικά και πιο απλά μαθήματα του σεμιναρίου.

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

Δες παρακάτω ετικέτες που μορφοποιούν κείμενο HTML:

• ετικέτες → τολμηρή Κείμενο HTML(έντονη γραμματοσειρά).
• ετικέτες → έντονη γραφή Κείμενο HTML(έντονη γραμματοσειρά).
• ετικέτες → μονοδιάστημα Κείμενο HTML(γραμματοσειρά monospace).
• ετικέτες → μονοδιάστημα Κείμενο HTML(γραμματοσειρά monospace).
• ετικέτες → μονοδιάστημα Κείμενο HTML(γραμματοσειρά monospace).
• ετικέτες → Κείμενο HTML, το μέγεθος είναι μεγαλύτερο από το συνηθισμένο (μεγάλη γραμματοσειρά).
• ετικέτες → Κείμενο HTML, το μέγεθος είναι μικρότερο από το συνηθισμένο (μικρό γράμμα).
• ετικέτες → πλάγιος Κείμενο HTML (πλάγια γραμματοσειρά).
• ετικέτες → πλάγιος Κείμενο HTML(Πλάγια γραμματοσειρά).
• ετικέτες → πλάγιος Κείμενο HTML(Πλάγια γραμματοσειρά).
• ετικέτες → υπογραμμισμένο Κείμενο HTML(υπογραμμισμένη γραμματοσειρά).
• ετικέτες → διαγράμμιση Κείμενο HTML(γραμματοσειρά διαγράμμισης).
• ετικέτες → Κείμενο HTML(γραμματοσειρά) σε δείκτη.
• ετικέτες → Κείμενο HTML(γραμματοσειρά) σε εκθέτη.

Μορφοποίηση κειμένου HTML: διαγραφή, υπογραμμισμένο κείμενο

Αποτέλεσμα: ... γραμματοσειρά monospace

Αποτέλεσμα: ... μέγεθος γραμματοσειράς μεγαλύτερο από το συνηθισμένο

Αποτέλεσμα: ... πλάγια γραμματοσειρά

Αποτέλεσμα: κείμενο διαγραφής (γραμματοσειρά διαγραφής)

Αποτέλεσμα: εκθέτης

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