Veškerý text uzavřený ve značkách a se zdůrazní.

název pochází z anglického slova „underline“. html tag považovány za novější.

Například

Prostý text.

Prostý text. Podtržený text pomocí značky ins

Převedeno na stránce na

Prostý text. Podtržený text pomocí značky u

Prostý text.

Podtržený text pomocí vlastnosti CSS text-decoration

CSS má vlastnost text-decoration, která je zodpovědná za formátování html textu pro vytvoření podtržení.

CSS syntaxe text-decoration

textová výzdoba: žádné|podtržení|přetržení|přetržení|zdědit;

• žádný - text bez dekorace
• podtrhnout - podtrhnout
• overline - horní podtržení
• line-through - přeškrtnutí textu
• blikat - blikající text (doporučujeme tuto hodnotu nepoužívat)

Zajímá nás hodnota podtržení

Napří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ýsledek příkladu je na Obr. jeden.

Tloušťka čáry a barva podtržení odkazů se také nastavují pomocí vlastnosti border-bottom.

Určitě jste si všimli animovaného odkazu podtrhujícího u mnoha zdrojů a chtěli jste vědět, jak jej implementovat na vaše stránky. Aby bylo krásné css podtržení prvky, nepotřebujeme velké znalosti, ani připojení dalších skriptů, stačí nám standardní HTML a CSS.

Podtrhněte variace

Podtržením odkazů nebo jakýchkoli jiných prvků si můžete myslet cokoliv. Podtržení se může vznášet zespodu, vysouvat se doleva nebo doprava a tak dále. Podíváme se na více zajímavý příklad, ve kterém podtržení půjde od středu k okrajům, jako v ukázce níže.

demonstrace podtržení

HTML

Nejprve vytvořte nějaký prvek, například vezměte značku A. Jeho atribut pro nás není důležitý, protože většina práce bude věnována stylům.

css

Implementace se bude skládat ze dvou čar, které se budou pohybovat od středu spodní části prvku k jeho okrajům.

Vlastnost text-decoration je zodpovědná za podtržení, ale nemá smysl ji zde používat, protože v tomto případě není zcela relevantní realizovat naše plány na animaci. Nezapomeňme, že každému prvku lze přiřadit pseudoprvek::before nebo::after . Nastavíme jim tedy všechny vlastnosti a našemu odkazu rovnou nastavíme následující parametry:

A( display: inline-block; position: relativní; text-decoration: none; )

Nastavíme tedy tok bloku a umístění vzhledem k původnímu místu. To vše se děje tak, aby podtržení nevylezlo z prvku, když přiřadíme pseudoprvek::before absolutní umístění. Poté musíme nastavit jeho přesné umístění a velikost. A zde okamžitě vytvoříme první polovinu podtržení.

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

Tito. výška podtržení bude 2px, délka 0, červená barva a za animaci je zodpovědná vlastnost přechodu. A samozřejmě odsazení vlevo je 50%, tzn. centrální bod. Téměř stejné akce provádíme s pseudoprvkem ::after:

A::after( displej: blok; pozice: absolutní; obsah: ""; výška: 2px; šířka: 0; barva pozadí: červená; přechod: šířka 0,5s náběh-ven-out; vlevo: 50 %; dole: 0 ;)

A:hover::before( šířka: 50 %; vlevo: 0; ) a:hover::after( šířka: 50 %; )

Nutno podotknout, že je to pouze jedna z možností, jak tuto myšlenku realizovat. Totéž můžete udělat pouze s jedním pseudoprvkem::before . Přihlaste se k odběru článků a navrhujte témata článků.

Podtržení u prvků bloku, jako je tag

lze provést dvěma způsoby. Nastavte například řádek pod textem na celou šířku bloku bez ohledu na množství textu. A také podtržení dělat pouze u textu. Dále se podíváme na obě možnosti.

Řádek pod textem na celou šířku bloku

Chcete-li vytvořit čáru pod textem, přidejte do prvku vlastnost border-bottom style, její hodnota je šířka čáry, styl a barva zároveň (příklad 1).

Příklad 1: Plná šířka čáry

HTML5 CSS 2.1 IE Cr Op Sa Fx

Ukázka textu

Vzdálenost od řádku k textu lze upravit pomocí vlastnosti padding-bottom přidáním do selektoru H1. Výsledek tento příklad znázorněno na Obr. jeden.

Podtržení textu

Chcete-li podtrhnout pouze text, musíte použít vlastnost text-decoration s hodnotou underline , kterou opět přidáte do selektoru H1 (příklad 2).

Příklad 2: Šířka řádku k textu

HTML5 CSS 2.1 IE Cr Op Sa Fx

Ukázka textu

Černý nadpis přitahuje pozornost, přestože je černý místo bílé.

Výsledek tohoto příkladu je znázorněn na Obr. 2.

V případě použití vlastnosti text-decoration je čára pevně spojena s textem, takže nelze určit její polohu a styl.

nebo studovat značky tohoto formátu HTML text

Vaše pozornost je věnována jedné z klíčových a nejjednodušších lekcí tutoriálu.

• HTML text je hlavní součástí většiny internetových stránek.
• Podle klíčových slov v těle HTML stránky uživatelé mohou najít váš web.
• HTML text může mít jakoukoli velikost a barvu, kterou chcete. Můžete také definovat typ písma a jeho objem.
• velikost HTML písmo obvykle nastaveny v pixelech.
• HTML formátování textširoce rozšířené formátovací značky.

Viz. níže značky, které 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 → jednoprostorový HTML text(jednoprostorové písmo).
• značky → jednoprostorový HTML text(jednoprostorové písmo).
• značky → jednoprostorový HTML text(jednoprostorové písmo).
• značky → HTML text, velikost je větší než obvykle (velké písmo).
• značky → HTML text, velikost je menší než obvykle (malý tisk).
• značky → šikmé HTML text (kurzíva).
• značky → šikmé HTML text(kurzíva).
• značky → šikmé HTML text(kurzíva).
• značky → podtrženo HTML text(podtržené písmo).
• značky → přeškrtnout HTML text(přeškrtnuté písmo).
• značky → HTML text(font) v dolním indexu.
• značky → HTML text(font) v horním indexu.

Formátování textu HTML: přeškrtnutý, podtržený text

Výsledek: ... jednoprostorové písmo

Výsledek: ... velikost písma větší než obvykle

Výsledek: ... kurzíva

Výsledek: přeškrtnutý text (přeškrtnuté písmo)

Výsledek: horní index

C Výše ​​uvedené způsoby formátování by se měly používat pouze pro malé části textu. užívat si css pokud chcete nastavit konkrétní písmo pro celou stránku nebo například pro několik řádků.