Com implementar la decoració de text mitjançant CSS



Aquest article us proporcionarà un coneixement detallat i complet de diferents tipus de decoració de text mitjançant CSS amb exemples.

Subratllar un document o un text sempre es considera fàcil. Però si tenim en compte el cas dels llocs web, encara és fàcil? La majoria de nosaltres diríem que sí, però fer una línia horitzontal que inclogui alguns dissenys personalitzats fa que aquesta tasca senzilla sigui fatigosa. Comenceu el viatge de la decoració de text mitjançant CSS de la manera següent:

Què és la decoració de text?

Estableix l’aspecte de les línies decoratives del text. És una propietat abreujada de:





  • text-decoració-línia
  • text-decoració-color
  • estil-decoració-text

S’especifica com un o més valors separats per l’espai que representen la te de mà llargapropietats de decoració xt.

Sintaxi:



decoració de text: || ||

On,

  • línia-decoració-text: S'utilitza per configurar el tipus de decoració que s'utilitza, com arasubratlla, subratlla i fa una línia completa.

  • text-decoració-color:S'utilitza per configurar el color de la decoració.



  • estil-decoració-text: S'utilitza per configurar l'estil de la línia comsòlid, ondulat, puntejat, discontinu, doble

Tipus de decoracions de text en CSS

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

Overline-text-decoration-using-css

quadre tutorial pas a pas
  • Line-Through:
#decoration {text-decoration: line-through}

  • Subratllar:
#decoration {text-decoration: underline}

  • Combinació:
#decoration {text-decoration: subratllar overline}

Sortida:

Decoració de text mitjançant CSS: codi

Codi:

  

Codi CSS:

#overline {text-decoration: wavy overline lime} #underover {text-decoration: discontinu underline overline} #punt {text-decoration: subratllar overline puntejat en vermell} #wavy {text-decoration: line-through wavy}

Sortida:

Salt de decoració de text

Una propietat coneguda com a text-decoration-skip també es pot utilitzar quan un text sobresurt, traça i subratlla. Ajuda a decorar el text. Simplement especifica com es dibuixen les línies subratllades i subratllades quan passen per sobre dels ascendents i descendents.

#decoration {text-decoration-skip: ink}

Els valors que es poden utilitzar amb els salts de decoració de text són:

def __init__ python
  • objectes : (per defecte) la línia omet objectes en línia, com ara imatges o elements de bloqueig en línia.

  • cap : la línia ho travessa tot.

  • espais : la línia de decoració salta espais, caràcters separadors de paraules i qualsevol espai establert amb espaiat de lletres o espais de paraules.

    què és ide a java
  • tinta : la línia de decoració salta glifos, descendents o ascendents.

  • vores : la línia de decoració comença una mica després de la vora inicial del contingut i acaba una mica abans de la vora final del contingut.

  • decoració de caixes : la línia de decoració salta el marge, la vora i el farciment heretats.

Com que cap propietat no admet aquesta propietat, encara no hi ha cap demostració, però a la imatge següent es mostra un exemple de com podrien semblar cadascun dels valors un cop s'hagi implementat text-decoration-skip.

Amb això, arribem al final d’aquest bloc de decoració de text mitjançant CSS. Si teniu cap pregunta sobre aquest tema, deixeu un comentari a continuació i us respondrem.

Consulteu el nostre que inclou formació en viu dirigida per un instructor i experiència en projectes reals. Aquesta formació us permet dominar les habilitats necessàries per treballar amb tecnologies web front-end i front-end. Inclou formació sobre desenvolupament web, jQuery, Angular, NodeJS, ExpressJS i MongoDB.

Tens alguna pregunta? Si us plau, mencioneu-lo a la secció de comentaris del bloc 'Decoració de text mitjançant CSS' i us respondrem.