Kako izvesti dekoracijo besedila s pomočjo CSS



V tem članku boste našli podrobno in celovito znanje o različnih vrstah okrasitve besedila z uporabo CSS s primeri.

Podčrtavanje dokumenta ali besedila je vedno enostavno. Toda če upoštevamo primer spletnih strani, je to še enostavno? Večina od nas bi odgovorila pritrdilno, toda postavitev vodoravne črte, vključno z nekaterimi oblikami po meri, naredi to preprosto nalogo dolgočasno. Začnimo potovanje z okrasitvijo besedila z uporabo CSS na naslednji način:

Kaj je okrasitev besedila?

Nastavi videz dekorativnih črt na besedilu. Gre za stenografsko lastnost za:





  • besedilo-dekoracija-vrstica
  • besedilo-dekoracija-barva
  • Besedilo-dekoracija-slog

Navedena je kot ena ali več ločenih vrednosti, ki predstavljajo dolgoročno telastnosti xxt-dekoracije.

Sintaksa:



okrasitev besedila: || ||

Kje,

kaj je parameter v tabeli
  • besedilo-dekoracija-vrstica: Uporablja se za določanje vrste uporabljene dekoracije, kot je nprpodčrtaj, podčrtaj in prečrtaj.

  • besedilo-dekoracija-barva:Uporablja se za nastavitev barve dekoracije.



  • slog-okrasitev besedila: Uporablja se za nastavitev sloga črte, kot jetrdno, valovito, pikčasto, črtkano, dvojno

Vrste okrasitve besedila v CSS

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

Overline-text-decoration-using-css

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

  • Podčrtaj:
#decoration {text-decoration: underline}

  • Kombinacija:
#decoration {text-decoration: underline line-through overline}

Izhod:

Okrasitev besedila z uporabo CSS: Koda

Koda:

  

Koda CSS:

#overline {text-decoration: wavy overline lime} #underover {text-decoration: dashed underline overline} #dotted {text-decoration: underline overline pikčasto rdeče} #wavy {text-decoration: line-through wavy}

Izhod:

Okrasitev besedila Preskoči

Lastnost, znana kot text-decoration-preskoči, se lahko uporablja tudi tam, kjer je besedilo podrejeno, podčrtano in podčrtano. Pomaga pri okraševanju besedila. Preprosto določa, kako se narišejo podčrtane in podčrtane črte, ko prečkajo dvižne in spustne roke.

#decoration {text-decoration-skip: ink}

Vrednosti, ki jih lahko uporabimo pri preskakovanju okrasitve besedila, so:

  • predmetov : (privzeto) vrstica preskoči vstavljene predmete, kot so slike ali elementi v vrstici.

  • nobenega : črta prečka vse.

  • prostorih : dekorativna vrstica preskoči presledke, znake za ločevanje besed in vse presledke, nastavljene z presledki med črkami ali presledki.

  • črnilo : dekorativna črta preskoči glife, spuščajoče ali naraščajoče.

  • robovi : dekorativna črta se začne nekoliko po začetnem robu vsebine in konča nekoliko pred končnim robom vsebine.

  • škatla-okras : dekorativna črta preskoči podedovani rob, obrobo in oblazinjenje.

Ker te lastnosti ne podpira noben brskalnik, predstavitve še ni, na spodnji sliki pa je primer, kako bi lahko izgledala vsaka od vrednosti, ko se izvede text-decoration-preskoči.

S tem smo prišli do konca tega bloga Text Decoration Using CSS. Če imate kakršna koli vprašanja v zvezi s to temo, pustite komentar spodaj in odgovorili vam bomo.

Oglejte si našo ki prihaja z usposabljanjem pod vodstvom inštruktorjev v živo in izkušnjami iz resničnih projektov. To usposabljanje vam omogoča, da obvladate veščine za delo z zalednimi in prednjimi spletnimi tehnologijami. Vključuje usposabljanje za spletni razvoj, jQuery, Angular, NodeJS, ExpressJS in MongoDB.

stl razvrsti c ++

Imate vprašanje za nas? Prosimo, omenite ga v oddelku za komentarje v blogu „Dekoracija besedila s pomočjo CSS“, mi pa se vam bomo oglasili.