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?
- Tipus de decoracions de text en CSS
- Decoració de text mitjançant CSS: codi
- Salt de decoració de text
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} 
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.