Podtržení dokumentu nebo textu je vždy považováno za snadné. Ale vezmeme-li v úvahu případ pro webové stránky, je to ještě snadné? Většina z nás by řekla ano, ale vytvoření vodorovné čáry včetně některých vlastních návrhů dělá tento jednoduchý úkol únavným. Pojďme zahájit Cestu výzdoby textu pomocí CSS následujícím způsobem:
- Co je to textová dekorace?
- Typy textových dekorací v CSS
- Textová dekorace pomocí CSS: Code
- Přeskočení textové dekorace
Co je to textová dekorace?
Nastavuje vzhled dekorativních čar na textu. Je to zkratková vlastnost pro:
- řádek textové dekorace
- barva textové dekorace
- styl dekorace textu
Je zadán jako jedna nebo více mezerami oddělených hodnot představujících tečku z dlouhé rukyxt-dekorace vlastnosti.
Syntax:
textová dekorace: || ||
Kde,
řádek textové dekorace: Používá se k nastavení druhu použité dekorace, jako jepodtržení, přetížení a řádkování.
barva textové dekorace:Slouží k nastavení barvy dekorace.
styl dekorace textu: Slouží k nastavení stylu čáry, jako jepevné, zvlněné, tečkované, přerušované, dvojité
Typy textových dekorací v CSS
- Overline:
#decoration {text-decoration: overline} 
- Line-Through:
#decoration {text-decoration: line-through}- Zdůraznit:
#decoration {text-decoration: underline}- Kombinace:
#decoration {text-decoration: underline line-through overline}Výstup:
Textová dekorace pomocí CSS: Code
Kód:
Kód CSS:
#overline {text-decoration: vlnitý overline vápno} #underover {text-decoration: přerušovaná podtržení overline} #dotted {text-decoration: podtržení overline tečkovaná červená} #wavy {text-decoration: line-through wavy}Výstup:
Přeskočení textové dekorace
Vlastnost známou jako přeskočení výzdoby textu lze použít také tam, kde text přesahuje, přesahuje a podtrhuje. Pomáhá při zdobení textu. Jednoduše určuje, jak jsou nakresleny podtržení a podtržení, když přecházejí přes stoupající a klesající.
#decoration {text-decoration-skip: ink}Hodnoty, které lze použít s přeskočením textové dekorace, jsou:
předměty : (výchozí) řádek přeskočí vložené objekty, jako jsou obrázky nebo prvky vloženého bloku.
java double na int kolo
žádný : čára protíná všechno.
mezery : řádek dekorace přeskočí mezery, znaky oddělovače slov a jakékoli mezery nastavené s mezerami mezi písmeny nebo mezerami slov.
inkoust : řádek dekorace přeskočí glyfy, descendenty nebo ascendenty.
hrany : dekorační čára začíná mírně za počáteční hranou obsahu a končí mírně před koncovou hranou obsahu.
krabicová dekorace : linie zdobení přeskočí zděděný okraj, ohraničení a výplň.
Jelikož tato vlastnost není podporována žádným prohlížečem, zatím není k dispozici žádná ukázka, ale zde je příklad na obrázku níže, jak by každá z hodnot mohla vypadat po implementaci přeskočení textu a dekorace.
Tímto se dostáváme na konec tohoto blogu Textové dekorace pomocí CSS. Máte-li jakékoli dotazy týkající se tohoto tématu, zanechte prosím níže uvedený komentář a my se vám ozveme.
Podívejte se na naše který přichází s živým tréninkem vedeným instruktorem a zkušenostmi z reálného projektu. Toto školení vám umožní ovládat dovednosti práce s webovými technologiemi typu back-end a front-end. Zahrnuje školení na Web Development, jQuery, Angular, NodeJS, ExpressJS a MongoDB.
Máte na nás dotaz? Uveďte to prosím v sekci komentářů v blogu „Textové dekorace pomocí CSS“ a my se vám ozveme.