Existuje mnoho značek pro formátování textu. Některé z nich se používají často (a rychle si je zapamatujete), jiné - zřídka (nemusíte si je pamatovat).

Zde se podíváme na ty, které se často používají.

Značky, které tvoří textové nadpisy

Tyto značky zvýrazňují text jako nadpisy. Tito. Každý nadpis začíná na novém řádku, je zvýrazněn tučně a má svou velikost (nadpis první úrovně je největší, šestá úroveň je nejmenší).

Tyto značky lze použít s možností vodorovného zarovnání zarovnat. Možné hodnoty pro tento parametr:

• vlevo, odjet- vlevo, odjet,
• že jo- napravo,
• centrum- ve středu,
• ospravedlnit- na šířku.

Ukázkový kód:

Značky zalomení odstavce a řádku

Štítek
- značka nuceného posuvu řádku. Text za touto značkou začíná na novém řádku.
Tagy rozdělte text na odstavce. Před začátkem každého odstavce byste měli umístit značku

, závěrečná značka je volitelná. Na rozdíl od značky
Odstavce jsou od sebe odděleny prázdným řádkem.

Na štítku

existuje parametr zarovnat, který určuje, jak je text v odstavci zarovnán. Možné hodnoty pro tento parametr:

• vlevo, odjet- vlevo, odjet,
• že jo- napravo,
• centrum- ve středu,
• ospravedlnit- na šířku.

Ukázkový kód:

HTML formátování

Toto je odstavec, je oddělen od zbytku textu prázdnými řádky nahoře a dole a zarovnán doleva.

Toto je odstavec, je oddělen od zbytku textu prázdnými řádky nahoře a dole a je zarovnán doprava.

Toto je odstavec, je oddělen od zbytku textu prázdnými řádky nahoře a dole a zarovnán na střed.

Je to jen text.
Toto je text na novém řádku.

V okně prohlížeče to bude vypadat takto:

Značky, díky kterým je text kurzívou

Tyto značky píší text kurzívou, ale dělají to z různých důvodů.
Tagy slouží k logickému zvýraznění názvů knih, článků a citací.
Tagy se používají ke zvýraznění definic.
Tagy A zvýraznit důležité části textu. Poslední jmenovaný se nedoporučuje používat.

Ukázkový kód:

Formátování HTML Tento text je ve značkách citace
Tento text je ve značkách dfn
Tento text je v em tagech
Tento text je ve značkách i

V okně prohlížeče to bude vypadat takto:

Značky, díky kterým je text tučný

Oba se používají ke zvýraznění důležitých částí textu, ale lepší je první.

Ukázkový kód:

Tento text ve značkách je silný
Tento text je ve značkách b

V okně prohlížeče to bude vypadat takto:

Značky, které zvýrazňují text podtržením

Oba se používají k podtržení důležitých pasáží textu, ale přednost se dává prvnímu.

Ukázkový kód:

Formátování HTML Pouze text

Tento text je ve značkách u

V okně prohlížeče to bude vypadat takto:

Značky, které zobrazují text jednoprostorovým písmem

Text je zobrazen jednoprostorovým písmem, ale je vhodnější použít první.

Ukázkový kód:

Formátování HTML Pouze text
Tento text je ve značkách kbd
Tento text je ve značkách samp
Tento text je ve značkách tt

V okně prohlížeče to bude vypadat takto:

Značky, které zobrazují text v horním a dolním indexu

Tagy zobrazit text pod úrovní řádku menším písmem.
Tagy zobrazit text nad úrovní řádku menším písmem.
Vhodné pro odvození matematických a chemických vzorců.

Ukázkový kód:

HTML formátování y=x 2 - rovnice paraboly.

H 2 O je vzorec vody.

V okně prohlížeče to bude vypadat takto:

Značka fontu a její parametry

Tagy uveďte parametry písma textu:

tvář- název písma. Můžete uvést několik názvů písem oddělených čárkami. V tomto případě, pokud není nalezeno první zadané písmo (nevíte, jaká písma jsou nainstalována v počítači uživatele), prohlížeč použije další v seznamu.

velikost- velikost písma v libovolných jednotkách od 1 do 7. Výchozí velikost písma je 3.

barva- barva textu (výchozí - černá).

Existují dva způsoby, jak určit barvu: podle názvu a zadáním hexadecimálního kódu barvy.

S personalizovanými barvami (je jich 156) je vše jednoduché, podívejte se na odpovídající tabulku, vyberte barvu, která se vám líbí, a její název napište do hodnoty parametru (například color="blue").

Ale druhá metoda poskytuje mnohem větší výběr. Zde si můžeme vybrat z milionu barev zadáním jeho hexadecimálního kódu. Tento kód má 6 číslic a začíná znakem „#“. O tom, jak se barevný kód tvoří, se nebudeme rozepisovat, pouze upozorníme, že jej lze získat například ve Photoshopu. Přečtěte si, jak to udělat na stránce
Jasnější to bude na příkladu:

Zvýrazníme slovo „text“ červeně:

Text

Nyní přidáme značky kurzívou (otevírání vlevo, zavírání vpravo):

Text

A teď - tučné značky:

Text

Pokaždé umístíme všechny předchozí značky do nových. Toto se nazývá pořadí vnoření. Pro formátování textu můžete použít různé značky, hlavní věcí je neporušit pořadí vnoření.

Tím končí třetí lekce, podívali jsme se na hlavní způsoby formátování textu, v další lekci se podíváme na méně použitelné formátovací značky. Přesto nebude na škodu se s nimi seznámit.

nebo studijní značky, které formátují text HTML

Představujeme vám jednu 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 frází v textu HTML stránky uživatelé mohou najít váš web.
• HTML text Může mít jakoukoli velikost a barvu podle vašeho uvážení. Můžete také určit typ písma a jeho hlasitost.
• Velikost písma HTML obvykle nastaveny v pixelech.
• HTML formátování textuširoce používané, používají se formátovací značky.

Viz. níže značky, které formátují text HTML:

• Tagy → tučně HTML text(tučné písmo).
• Štítky → tučné HTML text(tučné písmo).
• Tagy → monoprostor HTML text(jednoprostorové písmo).
• Tagy → monoprostor HTML text(jednoprostorové písmo).
• Tagy → monoprostor HTML text(jednoprostorové písmo).
• Tagy → HTML text, větší než obvyklá velikost (velké písmo).
• Tagy → HTML text, velikost je menší než obvykle (malé písmo).
• Tagy → šikmé HTML text(kurzíva).
• Tagy → šikmé HTML text(kurzíva).
• Tagy → šikmé HTML text(kurzíva).
• Tagy → podtrženo HTML text(podtržené písmo).
• Tagy → přeškrtnuté HTML text(přeškrtnuté písmo).
• Tagy → HTML text(font) v dolním indexu.
• Tagy → 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 je větší než normální

Výsledek: ... kurzíva

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

Výsledek: horní index

Výše uvedené formátovací techniky by se měly používat pouze pro malé části textu. Použij to CSS pokud chcete nastavit konkrétní písmo pro celou stránku nebo například pro několik řádků.

Popis

Přidá výzdobu textu v podobě podtržení, proškrtnutí, čáry nad textem a blikání. Můžete použít více než jeden styl najednou uvedením hodnot oddělených mezerami.

Syntax

text-dekorace: [blik || průchozí || overline || podtržení ] | žádný | zdědit

Hodnoty

blikat Nastaví blikající text. Takový text pravidelně mizí, přibližně jednou za sekundu, a poté se znovu objeví na svém původním místě. Prohlížeče tuto hodnotu v současnosti nepodporují a v CSS3 je zastaralá a místo ní je doporučena animace. line-through Vytvoří linkový text (příklad). overline Řádek prochází přes text (příklad). underline Nastaví text, který má být podtržen (příklad). none Zruší všechny efekty, včetně podtržených odkazů, což je standardně nastaveno. inherit Hodnota je zděděna od rodiče.

HTML5 CSS2.1 IE Cr Op Sa Fx

Strategický útok

Objektový model

document.getElementById("elementID ").style.textDecoration

document.getElementById("elementID ").style.textDecorationBlink

document.getElementById("elementID ").style.textDecorationLineThrough

document.getElementById("elementID ").style.textDecorationNone

document.getElementById("elementID ").style.textDecorationOverLine

document.getElementById("elementID ").style.textDecorationUnderline

Prohlížeče

Verze aplikace Internet Explorer do 7.0 včetně nepodporují dědičnou hodnotu. Řádek získaný pomocí hodnoty line-through v IE7 je umístěn výše než v jiných prohlížečích; Tato chyba byla opravena v IE8.

Existuje mnoho různých způsobů, jak stylovat podtržení. Možná si vzpomínáte na článek Marcina Vichariho „Crafting link underlines“ na Medium. Vývojáři Medium se nesnaží o nic šíleného, ​​chtějí jen vytvořit pěknou čáru pod textem.

Toto je nejjednodušší podtržítko, ale má správnou velikost a nepřekrývá písmena. A rozhodně je lepší než výchozí podtržítko ve většině prohlížečů. Medium muselo čelit výzvám, aby dosáhlo svého stylu na webu. O dva roky později je pro nás stále obtížné vytvořit krásné podtržení.

Cíle

Co je špatného na obvyklém zdobení textu: podtržení ? V ideálním případě by podtržítko mělo dělat následující:

• pozice pod základní linií;
• přeskočit popisky;
• změnit barvu, tloušťku a styl čáry;
• práce s víceřádkovým textem;
• pracovat na jakémkoli pozadí.

Věřím, že to jsou všechny rozumné požadavky, ale pokud vím, neexistuje žádný intuitivní způsob, jak toho dosáhnout pomocí CSS.

Přístupy

Jaké jsou tedy tyto různé způsoby, jak můžeme implementovat podtržení na webu?

Zde jsou ty, které zvažuji:

• text-dekorace;
• okraj-dole ;
• box-shadow ;
• obrázek na pozadí;
• SVG filtry;
• Underline.js(canvas);
• text-dekorace-* .

Podívejme se na tyto metody jednu po druhé a promluvme si o výhodách a nevýhodách každé z nich.

text-dekorace

text-decoration je nejviditelnější způsob, jak podtrhnout text. Aplikujete jednu vlastnost a to stačí. U malých velikostí písma to může vypadat dobře, ale zvětšete velikost písma a podtržení začne vypadat nemotorně.

Největší problém s dekorací textu je nedostatek přizpůsobení. Jste omezeni na barvu a velikost písma textu a neexistuje žádný způsob, jak to změnit v různých prohlížečích. O tom si povíme podrobněji později.

• snadné použití;
• umístěn pod základní linií;
• ve výchozím nastavení přeskakuje popisky v Safari a iOS;
• zdůrazňuje víceřádkový text;
• funguje na jakémkoli pozadí.

• nepřeskočí zápatí ve všech ostatních prohlížečích;
• neumožňuje změnit barvu, tloušťku nebo styl čáry.

hranice-dole

border-bottom vytváří dobrou rovnováhu mezi jednoduchostí a přizpůsobitelností. Tento přístup využívá starou dobrou vlastnost okraje CSS, což znamená, že můžete snadno změnit barvu, tloušťku a styl.

Takto vypadá border-bottom pro vložené prvky.

Hlavní nevýhodou je vzdálenost podtržení od textu, je zcela pod popisky. Můžete to opravit nastavením prvků na inline-block a snížením výšky řádku , ale pak ztratíte možnost zalamovat text. Dobré pro jednotlivé linky, ale jinde se nehodí.

Kromě toho můžeme použít stín textu k zakrytí části čáry vedle vložených prvků a simulovat to použitím stejné barvy jako pozadí. To znamená, že tato technika funguje pouze na jednoduchém jednobarevném pozadí, bez přechodů, vzorů nebo obrázků.

V tuto chvíli již využíváme až čtyři vlastnosti pro návrh jedné linie. Je to mnohem více práce než pouhé přidání textové dekorace.

• umí přeskočit popisky pomocí text-shadow ;
• může změnit barvu, váhu a styl čáry;
• umožňuje používat přechody a animace barev a tučnosti;
• pracuje s víceřádkovým textem, pokud není použit vložený blok;
• Funguje na jakémkoli pozadí, pokud nepoužíváte text-shadow .

• Je umístěn příliš nízko a obtížně se pohybuje;
• pro správnou funkci se používá mnoho dalších vlastností;
• při použití stínu textu vypadá zvýraznění textu ošklivě.

box-shadow

box-shadow nakreslí podčáru pomocí dvou vnitřních stínů: jeden vytvoří obdélník a druhý skryje jeho část. To znamená, že k tomu potřebujete jednobarevné pozadí.

Stejný trik s textovým stínem můžete použít k vyplnění mezer mezi podtržením a popisky. Pokud se však barva podtržení liší od barvy textu – nebo je jen dostatečně tenká – čára nebude kolidovat s popisky tolik, jako by tomu bylo u zdobení textu .

• umožňuje změnit barvu a tloušťku čáry;
• pracuje s víceřádkovým textem.

• neumožňuje změnit styl podtržení;
• Nefunguje na žádném pozadí.

obrázek na pozadí

Metoda obrázku na pozadí je nejblíže tomu, co chceme, a má nejmenší množství nevýhod. Cílem je použít lineární přechod a pozici pozadí k vytvoření obrazu, který se opakuje pod řádky textu.

Aby tento přístup fungoval, musí být text ve standardním zobrazení: inline; .

Další možnost se obejde bez lineárního přechodu, pro efekty můžete přidat vlastní obrázek na pozadí.

• lze umístit pod základní linii;
• umí přeskočit prvky popisků pomocí text-shadow ;
• pracuje s vlastními obrázky;
• zalamuje více řádků textu;
• Funguje na jakémkoli pozadí, pokud nepoužíváte text-shadow .

• Velikost obrázku se může lišit v závislosti na rozlišení obrazovky, prohlížeči a zvětšení.

SVG filtry

S touto metodou jsem si docela hrál. Můžete vytvořit SVG filtr čar, který nakreslí čáru a poté rozšíří text, aby zamaskoval část čáry, kterou chceme, aby byla průhledná. Filtru pak můžete dát ID a odkazovat na něj v CSS něco jako filter: url('#svg-underline') .

Výhodou tohoto přístupu je, že průhlednosti je dosaženo bez použití stínu textu , což znamená, že popisky se mohou objevit na jakémkoli pozadí, včetně přechodů a obrázků na pozadí! Toto funguje pouze na jednom řádku textu, takže na to pamatujte.

V Chrome a Firefoxu to vypadá takto:

Podpora v IE, Edge a Safari je problematická. Je těžké testovat podporu SVG filtrů v CSS. Můžete použít direktivu @supports s filter , ale tím se zkontroluje pouze funkčnost odkazu na filtr, nikoli funkčnost samotného filtru. Mé pokusy skončily zdlouhavým zjišťováním schopností prohlížeče, což je znatelný nedostatek této metody.

• lze umístit pod základní linii;
• může přeskočit rozšiřující prvky;
• umožňuje změny barvy, tloušťky a stylu čáry;
• funguje na jakémkoli pozadí.

• nefunguje s víceřádkovým textem;
• nefunguje v IE, Edge a Safari, ale můžete použít zdobení textu jako záložní, v Safari to vypadá slušně.

Underline.js (Canvas)

Underline.js je fascinující. Považuji za působivé, čeho dosáhla Wenting Zhang se svým ovládáním JavaScriptu a smyslem pro detail. Pokud jste neviděli technické demo Underline.js, přestaňte číst a dejte mu chvilku. Je od ní také devítiminutová řeč o tom, jak to funguje, ale zkrátím to: Podtržení se kreslí pomocí prvků . Jedná se o nový přístup, který funguje překvapivě dobře.

Přes chytlavý název je Underline.js jen technické demo. To znamená, že jej nemůžete jen tak zapojit do svého projektu, aniž byste změnili kód.

Myslel jsem, že to zmíním jako důkaz konceptu má potenciál vytvářet skvělé interaktivní podtržení, ale musíte si napsat svůj vlastní JavaScript, aby to fungovalo.

Nové vlastnosti zdobení textu

Pamatuješ si, že jsem slíbil, že budu mluvit víc o zdobení textu. Nastal čas.

Tato vlastnost funguje skvěle sama o sobě, ale můžete přidat některé experimentální vlastnosti a upravit vzhled podtržení.

• text-dekorace-barva
• text-dekorace-přeskočit
• text-decoration-style

Ale nebuďte příliš nadšení... Podpora prohlížeče je jako vždy. Tak to jde.

text-dekorace-barva

Vlastnost text-decoration-color umožňuje změnit barvu podtržení odděleně od barvy textu. Podpora této vlastnosti je lepší, než byste čekali – funguje ve Firefoxu a s předponou v Safari. Zde je háček: pokud máte popisky, Safari umístí nad text podtržení.

text-dekorace-přeskočit

Vlastnost text-decoration-skip umožňuje přeskakování popisků v podtrženém textu.

Tato vlastnost je nestandardní a v současnosti funguje pouze v Safari s předponou -webkit-. Safari tuto vlastnost ve výchozím nastavení povoluje, takže popisky nejsou vždy přeškrtnuty.

Pokud používáte Normalizovat, vezměte prosím na vědomí, že nejnovější verze tuto vlastnost deaktivují z důvodu konzistentního chování prohlížeče. A pokud chcete, aby podtržení neovlivnilo popisky, musíte jej aktivovat ručně.

text-decoration-style

Vlastnost ve stylu textové dekorace nabízí stejné možnosti stylu jako vlastnost ve stylu ohraničení s přidáním zvlněného stylu.

Zde je seznam dostupných hodnot:

• čárkovaná
• tečkovaný
• dvojnásobek
• pevný

V současné době vlastnost text-decoration-style funguje pouze ve Firefoxu, zde je z ní snímek obrazovky:

Co chybí

Série vlastností text-decoration-* se používá mnohem intuitivněji než jiné vlastnosti dekorace podtržení CSS. Pokud se ale podíváme blíže, není dostatek způsobů, jak nastavit tloušťku nebo polohu čáry, abychom uspokojili naše potřeby.

Po krátkém průzkumu jsem našel několik dalších vlastností:

• šířka-podtržení textu
• text-podtržení-pozice

Zdá se, že se jedná o rané návrhy CSS, ale nikdy nebyly implementovány do prohlížečů kvůli nedostatku zájmu.

závěry

Jaký je tedy nejlepší způsob, jak podtrhnout?

Pro malý text doporučuji použít text-decoration s optimistickým přidáváním text-decoration-skip . Ve většině prohlížečů to vypadá trochu nevkusně, ale podtržení bylo v prohlížečích vždy takové a lidé si toho prostě nevšimnou. Navíc je vždy šance, že když budete trpěliví, bude to podtržení jednoho dne vypadat dobře, aniž byste museli cokoliv měnit tak, jak to dělají prohlížeče.

Pro hlavní text má smysl použít background-image . Tento přístup funguje, vypadá skvěle a existují na to Sass mixiny. V zásadě můžete přeskočit stín textu, pokud je podtržení tenké nebo má jinou barvu než text.

Pro jednotlivé řádky textu použijte border-bottom spolu s dalšími vlastnostmi.

A pokud potřebujete, aby se popisky objevily na přechodu nebo na pozadí obrázku, zkuste použít filtry SVG. Nebo se prostě vyhněte používání podtržítek.

V budoucnu, až se podpora prohlížeče zlepší, bude jedinou odpovědí sada vlastností text-decoration-*.

Doporučuji se také podívat na článek Benjamina Woodroffe CSS Underlines Suck, který se zabývá stejnými problémy.

Podtržený text v HTML je zvýrazněn pomocí značky u HTML (od slova zdůraznit). Používá se následovně (požadovaná část textu se umístí mezi značky ):

Tvůrce webových stránek "Nubex"

Tento kód je ale považován za neplatný, takže je mnohem efektivnější a správnější používat k ozdobení textu styly CSS.

Podtržení textu - CSS

Jak jsme již řekli v článku, textové dekorace se nastavují pomocí vlastnosti text-dekorace. Podtržený text je určen parametrem zdůraznit:

Tvůrce webových stránek Nubex"

Pomocí CSS můžete podtrhnout text více než jen plnou čarou. Podívejme se, jaké možnosti můžete použít k podtržení textu:

• Podtržení textu pomocí CSS s tečkovanou čarou:

  Tvůrce webových stránek Nubex"

  
  
  
• Podtržení tečkami:

  Tvůrce webových stránek Nubex"

  
  
  
• Dvojitá čárka:

  Tvůrce webových stránek Nubex"

  
  
  

Jak můžete vidět z výše uvedených příkladů, styl podtržení můžete ovládat pomocí vlastnosti hranice-dole(spodní řádek). Pomocí tohoto parametru můžete nastavit typ podtržení, barvu a tloušťku.