INTERNET EXPLORER? Ti consiglio di navigare questo sito con Mozilla Firefox oppure con Google Chrome.

Effetto testo barrato con con i Css

Autore: Luca Ruggiero | Tell a Friend

Corso HTML
Impara il linguaggio di marcatura per il Web.

Corso CSS
Web Design ed Accessibilità secondo il W3C!

Corso Web Design
Disegno di siti Web con HTML, CSS e Dynamic HTML.

Concesso in esclusiva a MrWebmaster.it - E' vietata la pubblicazione senza espresso consenso del proprietario

Per quanto poco utilizzato conosciamo bene l'importanza di poter sbarrare un testo per farlo sembrare cancellato, sistema utile ad esempio nei carrelli della spesa per i prodotti in promozione, segnalando sia il prezzo pieno sbarrato ed il prezzo corrente.

In HTML tradizionale utilizziamo i Tag s

<s>TESTO SBARRATO</s>
oppure strike
<strike>TESTO SBARRATO</strike>
che assolvono alla stessa funzione.

Entrambi, però, sono sconsigliati dalle specifiche dell' XHTML.

Allo scopo ci vengono in soccorso i CSS che, grazie al loro attributo text-decoration, permettono di ovviare al problema della compatibilità con i tanto bramati standard.

Vediamo un esempio in cui usiamo un livello che non comporta il ritorno a capo a cui assegnamo una classe:
<span class="strike">TESTO SBARRATO</span>
Vediamo come impostare il codice CSS:
<style type="text/css">
span.strike
{
    text-decoration: line-through;
}
</style>
A permettere lo sbarramento del testo è l'attributo speciale line-through.

IN EVIDENZA
HOT LINKS