Ako implementovať dekoráciu textu pomocou CSS



Tento článok vám poskytne podrobné a komplexné znalosti o rôznych druhoch dekorácie textu pomocou CSS s príkladmi.

Podčiarknutie dokumentu alebo textu sa vždy považuje za ľahké. Ale keď zvážime prípad webových stránok, je to ešte ľahké? Väčšina z nás by povedala áno, ale vytvorenie vodorovnej čiary vrátane niektorých vlastných návrhov robí túto jednoduchú úlohu únavnou. Poďme začať Cestu dekorácie textu pomocou CSS nasledujúcim spôsobom:

Čo je to dekorácia textu?

Nastavuje vzhľad dekoratívnych čiar na texte. Je to stenografický majetok pre:





  • riadok dekorácie textu
  • textová dekorácia-farba
  • štýl dekorácie textu

Je zadaný ako jedna alebo viac medzi sebou oddelených hodnôt predstavujúcich ručnú text-dekoračné vlastnosti.

Syntax:



dekorácia textu: || ||

Kde,

  • riadok dekorácie textu: Slúži na nastavenie druhu použitej dekorácie ako naprpodčiarknuť, nadčiarkovať a riadkovať.

  • farba dekorácie textu:Slúži na nastavenie farby dekorácie.



  • štýl dekorácie textu: Slúži na nastavenie štýlu čiary ako naprpevné, vlnité, bodkované, prerušované, dvojité

Typy textových dekorácií v CSS

  • Overline:
#decoration {text-decoration: overline}

Overline-text-decoration-using-css

  • Line-Through:
#decoration {text-decoration: line-through}

  • Zdôrazniť:
#decoration {text-decoration: underline}

  • Kombinácia:
#decoration {text-decoration: underline line-through overline}

Výkon:

Textová dekorácia pomocou CSS: Kód

Kód:

  

Kód CSS:

#overline {textová výzdoba: zvlnená čiara vápno} #underover {text-výzdoba: prerušovaná podčiarknutá čiara} #dotted {textová výzdoba: podčiarknutá čiara bodkovaná červená} #wavy {textová dekorácia: zvlnená čiara}

Výkon:

Preskočenie dekorácie textu

Vlastnosť známa ako preskočenie dekorácie textu sa dá použiť aj vtedy, keď sa text prekrýva, riadkuje a podčiarkuje. Pomáha pri zdobení textu. Jednoducho určuje, ako sa vykresľujú podčiarknutia a podčiarknutia pri prechode stúpačmi a klesačmi.

#decoration {text-decoration-skip: ink}

Hodnoty, ktoré je možné použiť s vynechaním dekorácie textu, sú:

  • predmety : (predvolené) riadok preskočí vložené objekty, ako sú obrázky alebo prvky vloženého bloku.

    jednorozmerné pole v jave
  • žiadny : čiara pretína všetko.

  • medzery : riadok dekorácie preskočí medzery, znaky oddeľovača slov a všetky medzery nastavené na medzery medzi písmenami alebo medzerami.

  • atrament : línia výzdoby preskočí glyfy, zostupujúcich alebo stúpajúcich.

  • hrany : riadok dekorácie začína mierne za začiatočnou hranou obsahu a končí mierne pred koncovou hranou obsahu.

  • krabicová výzdoba : línia dekorácie preskočí zdedený okraj, orámovanie a výplň.

Pretože túto vlastnosť nepodporuje žiadny prehliadač, zatiaľ nie je k dispozícii ukážka. Na nasledujúcom obrázku je príklad toho, ako by každá z hodnôt mohla vyzerať, keď bude implementovaná preskočenie textu na dekoráciu.

Týmto sa dostávame na koniec tohto blogu Text Decoration With CSS. Ak máte akékoľvek otázky týkajúce sa tejto témy, zanechajte prosím komentár nižšie a my sa vám ozveme.

Vyskúšajte naše ktorá prináša živé školenie vedené inštruktorom a skúsenosti s projektmi v reálnom živote. Toto školenie vám pomôže získať zručnosti v oblasti práce s webovými technológiami typu back-end a front-end. Zahŕňa školenie zamerané na vývoj webových aplikácií, jQuery, Angular, NodeJS, ExpressJS a MongoDB.

Máte na nás otázku? Uveďte to v sekcii komentárov v blogu „Textové dekorácie pomocou CSS“ a my sa vám ozveme.