Kaip įgyvendinti teksto dekoravimą naudojant CSS



Šis straipsnis suteiks jums išsamių ir išsamių žinių apie įvairius teksto dekoravimo tipus naudojant CSS su pavyzdžiais.

Dokumento ar teksto pabraukimas visada laikomas lengvu. Bet jei atsižvelgsime į svetainių atvejį, ar tai dar lengva? Daugelis iš mūsų sakytų „taip“, tačiau nubrėžus horizontalią liniją, įskaitant keletą pasirinktinių dizainų, ši paprasta užduotis vargina. Leiskite pradėti teksto dekoravimo kelionę naudojant CSS tokiu būdu:

kaip sukurti atsitiktinę eilutę Java

Kas yra teksto dekoravimas?

Tai nustato dekoratyvinių linijų išvaizdą ant teksto. Tai yra trumpų savybių:





  • tekstas-dekoravimas-eilutė
  • tekstas-dekoravimas-spalva
  • teksto dekoravimo stiliaus

Jis nurodomas kaip viena ar daugiau tarpais atskirtų reikšmių, žyminčių ilgąsias rankasxt apdailos savybės.

Sintaksė:



teksto dekoravimas: || ||

Kur,

  • teksto dekoravimo eilutė: Jis naudojamas nustatant naudojamo apdailos rūšį, pvzpabraukti, perbrėžti ir perrašyti.

  • teksto dekoravimo spalva:Jis naudojamas dekoracijos spalvai nustatyti.



  • teksto dekoravimo stilius: Jis naudojamas nustatyti linijos stilių, pvzvientisas, banguotas, taškuotas, brūkšniuotas, dvigubas

CSS teksto dekoravimo tipai

  • Perbrėžimas:
#decoration {text-decoration: overline}

Overline-text-decoration-using-css

  • Perėjimas per liniją:
#decoration {text-decoration: line-through}

  • Pabraukite:
#decoration {text-decoration: pabraukti}

  • Derinys:
#decoration {text-decoration: pabraukti liniją per liniją}

Išvestis:

Teksto dekoravimas naudojant CSS: kodas

Kodas:

  

CSS kodas:

#overline {text-decoration: wavy overline lime} #underover {text-decoration: dashed underline overline} #dotted {text-decoration: underline overline dotted red} # banguotas {text-decoration: line-through wavy}

Išvestis:

Teksto dekoravimo praleidimas

Turtas, žinomas kaip teksto apdailos praleidimas, taip pat gali būti naudojamas ten, kur tekstas perbraukiamas, perbraukiamas ir pabraukiamas. Tai padeda dekoruoti tekstą. Joje paprasčiausiai nurodoma, kaip braižomi brūkšniai ir pabraukimai, kai jie eina per kylančius ir nusileidžiančius.

#decoration {text-decoration-skip: ink}

Vertybės, kurias galima naudoti su teksto dekoravimo šuoliais, yra šios:

  • objektai : (numatytoji) eilutė praleidžia įterptinius objektus, pvz., vaizdus ar įterptinius elementus.

  • nė vienas : linija kerta viską.

  • tarpai : apdailos eilutė praleidžia tarpus, žodžių skyrimo simbolius ir visas tarpus, nurodytus raidėmis arba tarpais.

  • rašalas : apdailos linija praleidžia glifus, palikuonius ar kylančius.

  • kraštai : dekoravimo linija prasideda šiek tiek po turinio pradžios krašto ir baigiasi šiek tiek prieš turinio pabaigos kraštą.

  • dėžutės dekoravimas : dekoravimo linija praleidžia paveldėtą paraštę, kraštinę ir užpildą.

Kadangi šios ypatybės nepalaiko jokia naršyklė, dar nėra demonstracinės versijos, tačiau žemiau esančiame paveikslėlyje pateikiamas pavyzdys, kaip kiekviena iš reikšmių galėtų atrodyti, kai bus įgyvendinta teksto apdaila-praleidimas.

Tai pasiekėme šio teksto dekoravimo, naudodami CSS tinklaraštį, pabaigą. Jei turite klausimų dėl šios temos, palikite komentarą žemiau ir mes susisieksime su jumis.

Patikrinkite mūsų kuris ateina su instruktorių vedamomis tiesioginėmis treniruotėmis ir realių projektų patirtimi. Šie mokymai leidžia išmokti dirbti su „back-end“ ir „front-end“ interneto technologijomis. Tai apima mokymus apie žiniatinklio plėtrą, „jQuery“, „Angular“, „NodeJS“, „ExpressJS“ ir „MongoDB“.

Turite mums klausimą? Prašau tai paminėti tinklaraščio „Teksto dekoravimas naudojant CSS“ komentarų skyriuje ir mes su jumis susisieksime.