Uno sciopero è definito come una riga attraverso il testo. È comunemente usato per mostrare un testo irrilevante, ma possiamo anche utilizzarlo per la decorazione. Le prime versioni di HTML hanno usato l'elemento per fare uno sciopero di testo. Tuttavia, HTML5 non supporta l'elemento. Più specificamente, in CSS, il "decorazione del testo"Il valore della proprietà è impostato come"linea-through"Per lo stesso scopo.

Questo articolo ti guiderà su CSS StrikeThrough e sulle altre proprietà di decorazione del testo. Quindi iniziamo!

Quali sono le proprietà CSS di decorazione del testo?

Ci sono molti "decorazione del testo"Valori della proprietà utilizzati in CSS. Alcuni di essi sono elencati di seguito:

• linea-through
• sottolineare
• overline
• nessuno

Andiamo su di loro uno per uno!

Decisore del testo: linea-through

IL "linea-through"La proprietà di decorazione del testo viene utilizzata per aggiungere una linea orizzontale attraverso il testo. Questa proprietà è anche conosciuta come testo incrociato.

Esempio 1: come usare CSS StrikeThrough?

Innanzitutto, aggiungeremo un nome "contenitore"All'interno dell'elemento corporeo del file HTML. Quindi, includi il

Tag per aggiungere un po 'di testo.

Html

Decorazione del testo: sciopero

Nella sezione CSS, assegnare il valore della proprietà di decorazione del testo come "linea-through".

CSS

DECORAZIONE DEL TESTO: linea-through;

Si può vedere che la proprietà line-through viene applicata correttamente al testo aggiunto:

Per rendere questa decorazione più interessante, applichiamo un po 'di animazione ad essa.

Esempio 2: come applicare l'animazione su strikethrough con CSS?

Aggiungi un elemento div all'interno dell'elemento corporeo del file HTML. All'interno del div, posizionare una voce

Tag con un po 'di testo.

Html

Benvenuti in Linuxhint!

Successivamente, applica gli stili agli elementi HTML.

CSS

Gli elementi HTML sono disegnati con le proprietà CSS. Per impostare l'allineamento del testo al centro, l'elemento Div viene fornito con la proprietà allineato al testo con il Centro Value:

div
Testo-align: centro;

Style Line Div

.linea
Font-Family: sans-serif;
Font-size: 60px;
Colore: #00154F;
Posizione: relativo;
display: blocco inline;
Cursore: puntatore;

Le proprietà CSS applicate alla linea di div sono spiegate di seguito:

• "famiglia di font"La proprietà imposta la famiglia dei caratteri del testo come"sans-serif".
• "dimensione del font"Proprietà con valore"60px"Imposta le dimensioni del carattere su 60px.
• "colore"La proprietà viene utilizzata per specificare il colore del testo.
• "posizione"Con valore"parente"Regola la linea Div rispetto alla sua posizione attuale.
• "Schermo"Proprietà come"blocco inline"Consentirà la larghezza della riga di impostazione e limiterà il contenuto da visualizzare nella riga successiva.
• "cursore"Con il valore"Pointer"Specifica che quando il mouse si libra sul testo, verrà visualizzato un cursore della mano puntante.

Style Line Div After Selector

Il codice di seguito dà forma alla riga di div dopo che è stato selezionato. IL "::Dopo"È noto come dopo il selettore:

.riga :: dopo
contenuto: ";
blocco di visualizzazione;
larghezza: 0;
Altezza: 20px;
background-color: #f4af1b;
Posizione: assoluto;
In basso: 10%;
Z -INDEX: -1;
transizione: larghezza 1s;

Dopo aver selezionato la linea, le proprietà menzionate verranno applicate come spiegato:

• "contenuto"La proprietà viene utilizzata per inserire il contenuto specificato nell'elemento. Se il valore non è nessuno, quindi dopo la selezione il contenuto viene impostato secondo il codice pseudo menzionato.
• "Schermo"Mentre un blocco prende la larghezza della schermata disponibile e imposta il blocco per iniziare una nuova riga.
• "larghezza"La proprietà viene utilizzata per l'impostazione della larghezza dell'elemento.
• "altezza"La proprietà viene utilizzata per l'impostazione dell'altezza dell'elemento.
• "colore di sfondo"La proprietà viene utilizzata per impostare il colore di sfondo dell'elemento.
• "posizione"Poiché assoluto si riferisce che la linea Div si posizionerà rispetto al suo Parent Div dopo la selezione.
• "metter il fondo a"La proprietà aggiunge uno spazio del 10% nella parte inferiore della linea.
• "Z-INDEX"Definisce l'ordine di elementi sovrapposti.
• "transizione"La proprietà imposta il movimento dell'elemento in cui il valore di larghezza rappresenta la transizione che deve essere applicata sulla proprietà di larghezza di un elemento e 1s è la sua durata.

Style Line Div After Hover

Imposta la larghezza del contenitore di linea come 100% quando il mouse si libra su di esso:

.Linea: Hover :: After
larghezza: 100%;

Di conseguenza, il bilico sul testo aggiunto aggiungerà uno sciopero animato:

Decisore del testo: sottolineare

IL "sottolineare"Il valore della proprietà di decorazione del testo posizionerà una riga sotto il testo. Questa proprietà è utilizzata principalmente per rendere il testo richiesto prominente.

CSS

DECORAZIONE DEL TESTO: sottolineatura;

Produzione

Decisore del testo: overline

La decorazione sovrano si riferisce al testo che ha una linea orizzontale sopra. È anche noto come un overbar. Più specificamente, per rendere un testo eccessivo, assegnare il "decorazione del testo"Proprietà un valore"overline".

CSS

Decisore del testo: overline;

Assegnando il valore in overline, si può osservare che una barra viene mostrata sul testo:

Decisore del testo: nessuno

Se non hai bisogno di alcuna decorazione di testo, assegna il valore "nessuno" al "decorazione del testo" proprietà.

CSS

DECORAZIONE DEL TESTO: Nessuno;

Produzione

Finora abbiamo discusso delle proprietà di decorazione del testo, della linea, sottolinea, overline e nessuna con esempi. La prossima sezione discuterà i valori degli attributi di decorazione del testo. Quindi andiamo!

Valori degli attributi di decorazione del testo

È possibile utilizzare anche altri valori di attributo:

• linea di decorazione del testo: Definisce il tipo di linea come sottolineatura, linea-through, overline e altro ancora.
• text-decoration-color: Definisce il colore della linea.
• stile di decorazione del testo: Specifica lo stile della linea, sia ondulato, punteggiato, tratteggiato, ecc.
• Text-decoration-spessore: Definisce la larghezza della linea.

Guarda l'esempio seguente, che mostra la degne di testo con più valori discussi sopra.

Esempio

In primo luogo, aggiungi una riga tratteggiata sul testo con larghezza 10px e il colore specificato:

DECORAZIONE DEL TESTO: 10px punteggiati in linea overline #00154F;

Quindi, un ondulato sottolinea con la larghezza e il colore richiesti:

DECORAZIONE DEL TESTO: sottolineare Wavy 9px RGB (249, 253, 2);

Le righe di codice CSS sopra fornite mostreranno i seguenti risultati:

Abbiamo fornito le informazioni relative allo strikethrough CSS e ad altre proprietà della decorazione del testo.

Conclusione

Le proprietà di decorazione del testo di CSS impostano l'aspetto di diverse linee decorative sul testo aggiunto. Più specificamente, StrikeThrough aggiunge una riga attraverso il testo che può essere applicato impostando il valore della decorazione del testo come "linea-through". Questo post ha discusso dello strikeThrough CSS, di altre proprietà di decorazione del testo e valori degli attributi.