Všetok text uzavretý v značkách a sa stáva zdôrazneným.

názov pochádza z anglického slova „underline“. html tag považovaný za novší.

Napríklad

Obyčajný text.

Obyčajný text. Podčiarknutý text prostredníctvom značky ins

Konvertované na stránke na

Obyčajný text. Podčiarknutý text cez značku u

Obyčajný text.

Podčiarknutý text prostredníctvom vlastnosti CSS text-decoration

CSS má vlastnosť text-decoration, ktorá je zodpovedná za formátovanie html textu na vytvorenie podčiarknutia.

CSS syntax text-decoration

textová výzdoba: žiadne|podčiarknuté|prečiarknuté|prečiarknuté|dediť;

• žiadny - text bez dekorácie
• podčiarknuť – podčiarknuť
• overline - horné podčiarknutie
• line-through - prečiarknutie textu
• blikať – blikajúci text (odporúča sa nepoužívať túto hodnotu)

Zaujíma nás hodnota podčiarknutia

Napríklad:

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

Výsledok príkladu je znázornený na obr. jeden.

Hrúbka čiary a farba podčiarknutia odkazov sa tiež nastavujú pomocou vlastnosti border-bottom.

Určite ste si všimli animovaný odkaz podčiarknutý na mnohých zdrojoch a chceli ste vedieť, ako ho implementovať na vašu stránku. Aby bolo krásne css podčiarknutie prvky, nepotrebujeme veľké znalosti, ani pripájanie ďalších skriptov, stačí nám štandardné HTML a CSS.

Podčiarknite variácie

Podčiarknutím odkazov alebo akýchkoľvek iných prvkov si môžete myslieť čokoľvek. Podčiarknutie môže plávať zdola, vysunúť sa doľava alebo doprava atď. Pozrieme sa na viac zaujímavý príklad, v ktorom podčiarknutie pôjde od stredu k okrajom, ako v ukážke nižšie.

demonštrácia podčiarknutia

HTML

Najprv vytvorte nejaký prvok, napríklad si vezmite značku A. Jeho atribút nie je pre nás dôležitý, pretože väčšina práce bude venovaná štýlom.

css

Implementácia bude pozostávať z dvoch čiar, ktoré sa budú pohybovať od stredu spodnej časti prvku k jeho okrajom.

Vlastnosť text-decoration je zodpovedná za podčiarknutie, ale nemá zmysel ju tu používať, pretože v tomto prípade nie je úplne relevantné realizovať naše plány na animáciu. Nezabúdajme, že každému prvku možno priradiť pseudoprvok::pred alebo::po . Preto im nastavíme všetky vlastnosti a nášmu odkazu hneď nastavíme nasledujúce parametre:

A( zobrazenie: inline-block; pozícia: relatívna; text-decoration: none; )

Nastavíme teda blokový tok a umiestnenie vzhľadom na pôvodné miesto. Toto všetko sa robí tak, aby podčiarknutie nevyliezlo z prvku, keď priradíme pseudoprvok::before absolútne umiestnenie. Potom musíme nastaviť jeho presné umiestnenie a veľkosť. A tu okamžite vytvoríme prvú polovicu podčiarknutia.

A::before( display: block; position: absolute; content: ""; height: 2px; width: 0; background-color: red; transition: width .5s easy-in-out, left .5s easy-in- von; vľavo: 50 %; dole: 0; )

Tie. výška podčiarknutia bude 2px, dĺžka 0, červená farba a za animáciu je zodpovedná vlastnosť prechodu. A samozrejme, odsadenie vľavo je 50%, t.j. stredový bod. Takmer rovnaké akcie vykonávame s pseudoprvkom ::after:

A::after( zobrazenie: blok; pozícia: absolútna; obsah: ""; výška: 2px; šírka: 0; farba pozadia: červená; prechod: šírka 0,5 s nabehnutie von; vľavo: 50 %; dole: 0 ;)

A:hover::before( šírka: 50 %; vľavo: 0; ) a:hover::after( šírka: 50 %; )

Treba si uvedomiť, že toto je len jeden zo spôsobov, ako túto myšlienku zrealizovať. To isté môžete urobiť len s jedným pseudoprvkom::before . Prihláste sa na odber článkov a navrhnite témy pre články.

Podčiarknite prvky bloku, ako je značka

možno vykonať dvoma spôsobmi. Napríklad nastavte riadok pod textom na celú šírku bloku bez ohľadu na množstvo textu. A tiež podčiarknutie robiť len pri texte. Ďalej sa pozrime na obe možnosti.

Čiara pod textom na celú šírku bloku

Ak chcete vytvoriť čiaru pod textom, pridajte do prvku vlastnosť border-bottom style, jej hodnota je šírka čiary, štýl a farba zároveň (príklad 1).

Príklad 1: Čiara plnej šírky

HTML5 CSS 2.1 IE Cr Op Sa Fx

Ukážkový text

Vzdialenosť od riadku k textu je možné upraviť pomocou vlastnosti padding-bottom jej pridaním do selektora H1. Výsledok tento príklad znázornené na obr. jeden.

Podčiarknutie textu

Ak chcete podčiarknuť iba text, musíte použiť vlastnosť text-decoration s hodnotou underline , ktorú opäť pridáte do selektora H1 (príklad 2).

Príklad 2: Šírka riadku na text

HTML5 CSS 2.1 IE Cr Op Sa Fx

Ukážkový text

Čierny nadpis priťahuje pozornosť napriek tomu, že je čierny namiesto bieleho.

Výsledok tohto príkladu je znázornený na obr. 2.

V prípade použitia vlastnosti text-decoration je čiara pevne spojená s textom, takže nie je možné určiť jej polohu a štýl.

alebo študovať značky v tomto formáte HTML text

Vaša pozornosť je venovaná jednej z kľúčových a najjednoduchších lekcií tutoriálu.

• HTML text je hlavnou súčasťou väčšiny internetových stránok.
• Podľa kľúčových slov v tele stránky HTML používatelia môžu nájsť vašu stránku.
• HTML text môže mať akúkoľvek veľkosť a farbu, ktorú chcete. Môžete tiež definovať typ písma a jeho objem.
• veľkosť HTML písmo zvyčajne nastavené v pixeloch.
• HTML formátovanie text používajú sa rozšírené formátovacie značky.

Pozri nižšie značky, ktoré formátujú text HTML:

• značky → tučné HTML text(tučné písmo).
• tagy → tučné HTML text(tučné písmo).
• značky → jednorozmerné HTML text(jednopriestorové písmo).
• značky → jednorozmerné HTML text(jednopriestorové písmo).
• značky → jednorozmerné HTML text(jednopriestorové písmo).
• značky → HTML text, veľkosť je väčšia ako zvyčajne (veľké písmo).
• značky → HTML text, veľkosť je menšia ako zvyčajne (malé písmo).
• značky → šikmé HTML text (kurzíva).
• značky → šikmé HTML text(kurzíva).
• značky → šikmé HTML text(kurzíva).
• značky → podčiarknuté HTML text(podčiarknuté písmo).
• značky → prečiarknutie HTML text(prečiarknuté písmo).
• značky → HTML text(font) v dolnom indexe.
• značky → HTML text(font) v hornom indexe.

Formátovanie textu HTML: prečiarknutý, podčiarknutý text

Výsledok: ... jednopriestorové písmo

Výsledok: ... veľkosť písma väčšia ako zvyčajne

výsledok: ... kurzíva

Výsledok: prečiarknutý text (prečiarknuté písmo)

Výsledok: horný index

C Vyššie uvedené spôsoby formátovania by sa mali používať len pre malé časti textu. Užite si to css ak chcete nastaviť konkrétne písmo pre celú stránku, alebo napríklad pre niekoľko riadkov.