Cum se implementează decorarea textului folosind CSS



Acest articol vă va oferi o cunoaștere detaliată și cuprinzătoare a diferitelor tipuri de decorare a textului folosind CSS cu exemple.

Sublinierea unui document sau a unui text este întotdeauna considerată ușoară. Dar dacă luăm în considerare cazul site-urilor web, este ușor încă? Cei mai mulți dintre noi ar spune da, dar realizarea unei linii orizontale, inclusiv câteva modele personalizate, face ca această sarcină simplă să fie obositoare. Să începem Călătoria de decorare a textului folosind CSS în modul următor:

Ce este decorarea textului?

Setează aspectul liniilor decorative pe text. Este o proprietate de stenografie pentru:





  • text-decor-linie
  • text-decor-culoare
  • text-decor-stil

Este specificat ca una sau mai multe valori separate de spațiu reprezentând te-ul mâinii lungiproprietăți de decorare xt.

Sintaxă:



decor-text: || ||

Unde,

  • text-decor-linie: Este folosit pentru a seta tipul de decor folosit, cum ar fisubliniază, subliniază și linie.

  • text-decor-culoare:Este folosit pentru a seta culoarea decorului.



  • stil-decor-text: Este folosit pentru a seta stilul liniei, cum ar fisolid, ondulat, punctat, punctat, dublu

Tipuri de decorațiuni text în CSS

  • Linie generală:
#decoration {text-decoration: overline}

Overline-text-decoration-using-css

asemănări între java și javascript
  • Line-Through:
#decoration {text-decoration: line-through}

  • Subliniați:
#decoration {text-decoration: underline}

  • Combinaţie:
#decoration {text-decoration: subliniați linia prin linie}

Ieșire:

Decorarea textului folosind CSS: Cod

Cod:

  

Cod CSS:

#overline {text-decoration: ondulat overline lime} #underover {text-decoration: punctat subliniat overline} #dotted {text-decoration: subliniere overline punctat roșu} #wavy {text-decoration: line-through ondulat}

Ieșire:

Decorați textul Skip

O proprietate cunoscută sub denumirea de text-decorare-săritură poate fi utilizată și în cazul în care textul este suprasolicitat, liniat și subliniat. Ajută la decorarea textului. Acesta specifică pur și simplu modul în care sunt trasate linia și sublinierea atunci când trec peste ascendenți și descendenți.

#decoration {text-decoration-skip: ink}

Valorile care pot fi utilizate cu salturile de decorare a textului sunt:

def __init__ python
  • obiecte : (implicit) linia omite obiecte în linie, cum ar fi imagini sau elemente de blocare în linie.

  • nici unul : linia traversează totul.

  • spații : linia de decor omite spații, caractere separatoare de cuvinte și orice spații setate cu spațierea literelor sau spațiile cuvintelor.

    ce este bucătar și marionetă
  • cerneală : linia de decor omite glifele, descendenții sau ascendenții.

  • margini : linia de decor începe ușor după marginea inițială a conținutului și se termină puțin înainte de marginea finală a conținutului.

  • decorare cutie : linia de decorare trece peste marginea, marginea și căptușirea moștenite.

Întrucât această proprietate nu este acceptată de niciun browser, nu există încă nicio demonstrație, dar iată un exemplu în imaginea de mai jos despre cum ar putea arăta fiecare dintre valori odată ce text-decoration-skip este implementat.

Cu aceasta, ajungem la sfârșitul acestui blog Decorare text folosind CSS. Dacă aveți întrebări cu privire la acest subiect, vă rugăm să lăsați un comentariu mai jos și vă vom răspunde.

Verificați-ne care vine cu instruire live condusă de instructor și experiență de proiect din viața reală. Acest training vă face să aveți abilități în a lucra cu tehnologii web back-end și front-end. Acesta include instruire în domeniul dezvoltării web, jQuery, Angular, NodeJS, ExpressJS și MongoDB.

Ai o întrebare pentru noi? Vă rugăm să o menționați în secțiunea de comentarii a blogului „Decorarea textului utilizând CSS” și vă vom răspunde.