Sottolineare un documento o un testo è sempre considerato facile. Ma se consideriamo il caso dei siti web, è ancora facile? La maggior parte di noi direbbe di sì, ma creare una linea orizzontale che includa alcuni design personalizzati rende questo semplice compito noioso. Comincia il viaggio della decorazione del testo usando i CSS nel modo seguente:
- Cos'è la decorazione del testo?
- Tipi di decorazioni di testo nei CSS
- Decorazione del testo tramite CSS: codice
- Salta decorazione testo
Cos'è la decorazione del testo?
Imposta l'aspetto delle linee decorative sul testo. È una proprietà abbreviata per:
- text-decoration-line
- testo-decorazione-colore
- stile di decorazione del testo
È specificato come uno o più valori separati da spazi che rappresentano la mano lunga teproprietà xt-decoration.
Sintassi:
testo-decorazione: || ||
Dove,
text-decoration-line: Serve per impostare il tipo di decoro utilizzato comesottolineato, overline e line-through.
text-decoration-color:Serve per impostare il colore della decorazione.
stile di decorazione del testo: Viene utilizzato per impostare lo stile della linea comesolido, ondulato, punteggiato, tratteggiato, doppio
Tipi di decorazioni di testo nei CSS
- Overline:
#decoration {text-decoration: overline} 
- Line-Through:
#decoration {text-decoration: line-through}- Sottolineare:
#decoration {text-decoration: underline}- Combinazione:
#decoration {text-decoration: underline line-through overline}Produzione:
Decorazione del testo tramite CSS: codice
Codice:
Codice CSS:
#overline {text-decoration: wavy overline lime} #underover {text-decoration: dashed underline overline} #dotted {text-decoration: underline overline tratteggiato rosso} #wavy {text-decoration: line-through wavy}Produzione:
Salta decorazione testo
Una proprietà nota come text-decoration-skip può essere utilizzata anche quando un testo overline, line-through e underline. Aiuta a decorare il testo. Specifica semplicemente come vengono tracciate le sovratensioni e le sottolineature quando passano su ascendenti e discendenti.
#decoration {text-decoration-skip: ink}I valori che possono essere utilizzati con i salti di decorazione del testo sono:
oggetti : (impostazione predefinita) la riga salta gli oggetti in linea, come immagini o elementi di blocco in linea.
nessuna : la linea attraversa tutto.
spazi : la linea di decorazione salta gli spazi, i caratteri di separazione delle parole e tutti gli spazi impostati con la spaziatura delle lettere o gli spazi delle parole.
inchiostro : la linea di decorazione salta glifi, discendenti o ascendenti.
bordi : la linea di decorazione inizia leggermente dopo il bordo iniziale del contenuto e termina leggermente prima del bordo finale del contenuto.
scatola-decorazione : la linea di decorazione salta il margine, il bordo e il riempimento ereditati.
Poiché questa proprietà non è supportata da alcun browser, non esiste ancora una demo, ma ecco un esempio nell'immagine seguente di come potrebbe apparire ciascuno dei valori una volta implementato il text-decoration-skip.
Con questo, arriviamo alla fine di questo blog sulla decorazione del testo usando i CSS. Se hai domande su questo argomento, lascia un commento qui sotto e ti ricontatteremo.
come utilizzare alert in javascript
Dai un'occhiata al nostro che viene fornito con formazione dal vivo con istruttore e esperienza di progetto nella vita reale. Questa formazione ti consente di acquisire competenze per lavorare con tecnologie web back-end e front-end. Include formazione su sviluppo Web, jQuery, Angular, NodeJS, ExpressJS e MongoDB.
Hai domande per noi? Si prega di menzionarlo nella sezione commenti del blog 'Decorazione di testo utilizzando CSS' e ti risponderemo.