L'attributo style in HTML è un attributo globale che permette di applicare stili CSS direttamente a un singolo elemento, senza usare selettori o definire regole in un foglio di stile esterno o interno.
L'attributo style è inserito nel tag di apertura dell'elemento e il suo valore è una o più dichiarazioni CSS, separate da un punto e virgola ; (punto e virgola). Ogni dichiarazione è composta da una proprietà e dal suo valore, separati da due punti : (due punti).
<p style="proprietà: valore;">Testo di esempio</p>
Nella tabella che segue vi sono alcune proprietà che posso essere utilizzate per style:| Proprietà | Valori Possibili | Descrizione |
|---|---|---|
| color | #RRGGBB, nomi, rgb(...) | Imposta il colore del testo di un elemento. |
| background-color | #RRGGBB, nomi, rgb(...) | Imposta il colore di sfondo di un elemento. |
| font-size | px, em, %, rem | Definisce la dimensione del carattere. |
| text-align | left, right, center, justify | Allinea il testo all'interno di un elemento. |
| margin | px, em, %, auto | Imposta lo spazio esterno di un elemento. |
| padding | px, em, % | Imposta lo spazio interno di un elemento. |
| border | Spessore, stile e colore | Definisce un bordo intorno all'elemento. |
<p style="color: blue; background-color: lightgray; font-size: 18px; text-align: center;">
Questo è un testo stilizzato con l'attributo style.</p>
Risultato
Questo è un testo stilizzato con l'attributo style.
Il tag <div>
Il tag <div> (che sta per division) è un elemento generico a livello di blocco. Non ha alcun significato semantico, il che significa che non descrive il suo contenuto ma viene utilizzato per applicare gli stili e raggruppare gli elementi della pagina htmlin diversi contenitori.
Immagina di voler racchiudere un titolo e un paragrafo in una casella con un bordo e un'ombra. Invece di applicare questi stili a ogni singolo elemento, puoi metterli dentro un div:
<div style="border: 1px solid #ccc; padding: 15px; box-shadow: 2px 2px 5px #aaa;">
<h2>Introduzione</h2>
<p>Questo è un paragrafo che si trova all'interno di un div.</p>
</div>
Risultato:
Introduzione
Questo è un paragrafo che si trova all'interno di un div.
L'uso degli stili in linea in HTML, ovvero l'attributo style, non è considerato una buona pratica di sviluppo web. Sebbene possa sembrare un modo rapido per applicare il design a un elemento, presenta diversi svantaggi che complicano la gestione e l'organizzazione del codice nel lungo periodo. Per questo motivo, è fondamentale capire perché non dovresti usare gli stili in linea.
LABORATORIO
Stili in linea con l'attributo style
In questo laboratorio imparerai a utilizzare l'attributo style per applicare stili diretti a paragrafi, liste e immagini.
1 Stile in linea per un paragrafo
Crea un paragrafo (`<p>`) e applica uno stile in linea che cambi il colore del testo in blu e lo allinei al centro. Utilizza le proprietà `color` e `text-align`.
<p style="color: blue; text-align: center;">
Questo paragrafo è stilizzato.
</p>
Obiettivo: Comprendere come applicare più proprietà CSS a un singolo elemento.
2 Stile in linea per una lista non ordinata
Crea una lista non ordinata (<ul>) e cambia il tipo di marcatore in un quadrato (square) e il colore di sfondo in grigio chiaro. Usa le proprietà `list-style-type` e background-color.
<ul style="list-style-type: square; background-color: #f0f0f0;">
<li>Primo elemento</li>
<li>Secondo elemento</li>
</ul>
Obiettivo: Modificare l'aspetto di un'intera lista con un solo attributo style.
3 Stile in linea per un'immagine
Inserisci un'immagine (<img>) e applica uno stile in linea per impostare la larghezza a 200 pixel e aggiungere un bordo solido e arrotondato. Usa le proprietà width, border e border-radius.
<img src="percorso/immagine.jpg" alt="Una breve descrizione" style="width: 200px; border: 2px solid #333; border-radius: 10px;">
Obiettivo: Controllare le dimensioni e l'estetica di un'immagine direttamente nel tag.
4 Risultato visibile combinato
Combina gli elementi dei punti precedenti in un unico blocco. Inserisci il paragrafo stilizzato, la lista e l'immagine all'interno di un <div> con un bordo, un'ombra e un colore di sfondo per un risultato più leggibile.
<div style="border: 1px solid #ccc; padding: 15px; background-color: #f9f9f9; box-shadow: 2px 2px 5px #aaa;">
<p style="color: blue; text-align: center;">
Questo è un paragrafo stilizzato.
</p>
<ul style="list-style-type: square; background-color: #f0f0f0;">
<li>Elemento 1</li>
<li>Elemento 2</li>
</ul>
<img src="percorso/immagine.jpg" alt="Una breve descrizione" style="width: 200px; border: 2px solid #333; border-radius: 10px; display: block; margin: auto;">
</div>
Obiettivo: Combinare diversi elementi con stili in linea per un risultato coerente.
5 Bonus - Vantaggi e svantaggi
Aggiungi un'ultima sezione che riassume i vantaggi e gli svantaggi dell'uso dell'attributo style in linea, mettendo in evidenza perché i fogli di stile esterni sono la pratica raccomandata.
<h5>Vantaggi dell'uso di style</h5>
<ul>
<li>Veloce per modifiche semplici e mirate.</li>
<li>Ha la massima priorità.</li>
</ul>
<h5>Svantaggi di style</h5>
<ul>
<li>Rende il codice disordinato e poco leggibile.</li>
<li>È difficile da mantenere e aggiornare su larga scala.</li>
<li>Non è riutilizzabile.</li>
</ul>
Obiettivo: Capire perché lo stile in linea non è la migliore pratica per progetti complessi.