Целият текст е ограден в тагове И става подчертано.

Име идва от английската дума "подчертаване". html таг смятан за по-нов.

Например

Обикновен текст.

Обикновен текст. Подчертан текст чрез таг ins

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

Обикновен текст. Подчертан текст чрез u таг

Обикновен текст.

Подчертан текст чрез свойството CSS text-decoration

CSS има свойството text-decoration, което отговаря за форматирането на html текста, за да създаде подчертаване.

CSS синтаксис текст-украса

текст-украса: нищо|подчертаване|надчертаване|ред чрез|наследяване;

• none - текст без украса
• подчертаване - подчертаване
• overline - горно подчертаване
• line-through - зачеркнат текст
• blink - мигащ текст (препоръчително е да не използвате тази стойност)

Интересуваме се от стойността на подчертаването

Например:

Текст со свойством 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.

Дебелината на линията и цветът на подчертаване на връзките също се задават чрез свойството border-bottom.

Със сигурност сте забелязали подчертана анимирана връзка на много ресурси и сте искали да знаете как да я приложите на вашия сайт. За да направите красива css подчертаванеелементи, не се нуждаем от големи познания или свързване на допълнителни скриптове, всичко, от което се нуждаем, е стандартен HTML и CSS.

Подчертани вариации

Подчертавайки връзки или други елементи, можете да се сетите за всичко. Долната линия може да изплува отдолу, да се плъзга наляво или надясно и т.н. Ще разгледаме още интересен пример, в който подчертаната линия ще върви от центъра към краищата, както в демонстрацията по-долу.

демонстрация на подчертаване

HTML

Първо, нека създадем някакъв елемент, например да вземем етикета A. Неговият атрибут не е важен за нас, защото по-голямата част от работата ще бъде посветена на стиловете.

css

Изпълнението ще се състои от две линии, които ще се движат от средата на дъното на елемента към неговите краища.

Свойството text-decoration отговаря за подчертаването, но няма смисъл да го използваме тук, тъй като в този случай не е напълно уместно да реализираме нашите планове за анимация. Нека не забравяме, че на всеки елемент може да бъде присвоен псевдоелемент::before или::after. Затова ще зададем всички свойства за тях и веднага ще зададем следните параметри за нашата връзка:

A( дисплей: вграден блок; позиция: относителна; текстова декорация: няма; )

По този начин задаваме блоковия поток и позициониране спрямо оригиналното място. Всичко това се прави така, че подчертаването да не изпълзи от елемента, когато присвоим псевдоелемента::before абсолютно позициониране. След това трябва да зададем точното му местоположение и размер. И тук веднага създаваме първата половина на подчертаната линия.

A::before( дисплей: блок; позиция: абсолютна; съдържание: ""; височина: 2px; ширина: 0; цвят на фона: червен; преход: ширина .5s леко влизане навън, ляво .5s лесно влизане- навън; ляво: 50%; долу: 0; )

Тези. височината на долната линия ще бъде 2px, дължина 0, червен цвят, а свойството за преход отговаря за анимацията. И разбира се, отстъпът отляво е 50%, т.е. Централна точка. Извършваме почти същите действия с псевдоелемента ::after:

A::after( дисплей: блок; позиция: абсолютна; съдържание: ""; височина: 2px; ширина: 0; цвят на фона: червен; преход: ширина .5s леко навътре-навън; ляво: 50%; долу: 0;)

A:hover::before(ширина: 50%; ляво: 0; ) a:hover::after(ширина: 50%; )

Трябва да се отбележи, че това е само един от начините за реализиране на тази идея. Можете да направите същото само с един псевдо-елемент::before. Абонирайте се за статии и предлагайте теми за статии.

Подчертаване за блокови елементи като етикет

може да се направи по два начина. Например, задайте линията под текста на цялата ширина на блока, независимо от количеството текст. И също така подчертаването да се прави само в текста. Нека разгледаме и двете опции по-нататък.

Ред под текста за цялата ширина на блока

За да създадете линия под текста, добавете свойството за стил border-bottom към елемента, неговата стойност е ширината на линията, стила и цвета едновременно (пример 1).

Пример 1: Линия с пълна ширина

HTML5 CSS 2.1 IE Cr Op Sa Fx

Примерен текст

Разстоянието от линията до текста може да се регулира със свойството padding-bottom, като се добави към селектора H1. Резултат този примерпоказано на фиг. 1.

Подчертаване на текст

За да подчертаете само текста, трябва да използвате свойството text-decoration със стойност underline, като отново го добавите към селектора H1 (пример 2).

Пример 2: Ширина на ред към текст

HTML5 CSS 2.1 IE Cr Op Sa Fx

Примерен текст

Черното заглавие привлича вниманието, въпреки че е черно вместо бяло.

Резултатът от този пример е показан на фиг. 2.

В случай на използване на свойството text-decoration, линията е твърдо свързана с текста, така че нейната позиция и стил не могат да бъдат определени.

или учебни етикети, които форматират HTML текст

На вашето внимание е представен един от ключовите и най-прости уроци на урока.

• HTML тексте основният компонент на повечето интернет страници.
• от ключови фрази в тялото на HTML страницатапотребителите могат да намерят вашия сайт.
• HTML текстможе да бъде всякакъв размер и цвят, който желаете. Можете също така да определите вида на шрифта и неговия обем.
• HTML размершрифтобикновено се задава в пиксели.
• HTML форматиранетекстизползват се широко разпространени етикети за форматиране.

Виж отдолу тагове, които форматират HTML текст:

• етикети → получер HTML текст(удебелен шрифт).
• тагове → получер HTML текст(удебелен шрифт).
• етикети → еднопространствен HTML текст(едноширен шрифт).
• етикети → еднопространствен HTML текст(едноширен шрифт).
• етикети → еднопространствен HTML текст(едноширен шрифт).
• етикети → HTML текст, размерът е по-голям от обикновено (едър шрифт).
• етикети → HTML текст, размерът е по-малък от обичайния (дребен шрифт).
• етикети → наклонен HTML текст (наклонен шрифт).
• етикети → наклонен HTML текст(курсив).
• етикети → наклонен HTML текст(курсив).
• етикети → подчертано HTML текст(подчертан шрифт).
• етикети → зачертано HTML текст(зачеркнат шрифт).
• етикети → HTML текст(шрифт) в долен индекс.
• етикети → HTML текст(шрифт) в надпис.

HTML форматиране на текст: зачертано, подчертан текст

Резултат: ... монопространствен шрифт

Резултат: ... размерът на шрифта е по-голям от обикновено

Резултат: ... наклонен шрифт

Резултат: зачеркнат текст (зачертан шрифт)

Резултат: горен индекс

C Методите за форматиране, представени по-горе, трябва да се използват само за малки части от текста. наслади се cssако искате да зададете определен шрифт за цялата страница или за няколко реда, например.