Sviluppo Web

Attributo Style

Stampa WhatsApp Email

Uso dell’attributo style per applicare direttamente agli elementi HTML proprietà CSS relative a colore, sfondo, dimensioni, allineamento e presentazione del testo.

Che cos’è l’attributo style

L’attributo style permette di applicare direttamente a un elemento HTML una o più regole di presentazione.

L’attributo style permette di applicare direttamente a un elemento HTML una o più regole di presentazione.

Consideriamo un normale paragrafo: 

<p>Questo è un paragrafo.</p>

Possiamo modificare il colore del testo utilizzando l’attributo style: 

<p style="color: red;">
    Questo è un paragrafo rosso.
</p>
HTML e CSS

HTML descrive principalmente la struttura e il significato dei contenuti. Le istruzioni inserite nell’attributo style appartengono invece al linguaggio CSS, utilizzato per definire la presentazione grafica della pagina.

La sintassi di style

L’attributo style segue la normale sintassi degli attributi HTML:

L’attributo style segue la normale sintassi degli attributi HTML: 

style="..."

All’interno delle virgolette vengono inserite una o più dichiarazioni CSS.

Una dichiarazione CSS utilizza la struttura:

proprietà: valore;

Per esempio:

color: blue;

Inserita nell’attributo style:

<p style="color: blue;">
    Testo blu
</p>
Come leggere la dichiarazione 
<p style="color: blue;">
          |      |
          |      +---------- valore
          |
          +----------------- proprietà

La proprietà color indica che cosa modificare, mentre il valore blue indica come deve essere modificato.

Attributo HTML e dichiarazione CSS

È importante distinguere l’attributo HTML dalla dichiarazione CSS contenuta al suo interno.

È importante distinguere l’attributo HTML dalla dichiarazione CSS contenuta al suo interno. 

<h1 style="color: green;">Informatica</h1>
Parte Significato
h1 Tag HTML
style Attributo HTML
color Proprietà CSS
green Valore della proprietà CSS
Attenzione alla terminologia

color non è un attributo HTML. È una proprietà CSS contenuta nel valore dell’attributo HTML style.

Modificare il colore del testo

La proprietà CSS color permette di modificare il colore del testo.

La proprietà CSS color permette di modificare il colore del testo. 

<p style="color: red;">
    Questo testo è rosso.
</p>

Possiamo utilizzare colori differenti:

<p style="color: blue;">Testo blu</p>

<p style="color: green;">Testo verde</p>

<p style="color: orange;">Testo arancione</p>
Risultato atteso

Il browser visualizzerà i tre paragrafi utilizzando rispettivamente il colore blu, verde e arancione.

Modificare il colore dello sfondo

La proprietà background-color permette di modificare il colore dello sfondo di un elemento.

La proprietà background-color permette di modificare il colore dello sfondo di un elemento. 

<p style="background-color: yellow;">
    Questo paragrafo ha lo sfondo giallo.
</p>

La proprietà può essere applicata anche a un titolo: 

<h2 style="background-color: lightblue;">
    Linguaggi per il Web
</h2>
color e background-color

color modifica il colore del testo, mentre background-color modifica il colore dello sfondo.

Modificare la dimensione del testo

La proprietà font-size permette di modificare la dimensione del testo.

La proprietà font-size permette di modificare la dimensione del testo. 

<p style="font-size: 20px;">
    Testo con dimensione di 20 pixel.
</p>

In questo esempio:

  • font-size è la proprietà CSS;
  • 20px è il valore;
  • px indica l’unità pixel.

Altri esempi:

<p style="font-size: 14px;">Testo piccolo</p>

<p style="font-size: 24px;">Testo più grande</p>

<p style="font-size: 32px;">Testo molto grande</p>
Il valore comprende anche l’unità

Quando una proprietà richiede una misura, è necessario specificare anche un’unità appropriata. In font-size: 20px;, il numero è 20 e l’unità utilizzata è px.

Allineare il testo

La proprietà text-align permette di controllare l’allineamento del contenuto testuale.

La proprietà text-align permette di controllare l’allineamento del contenuto testuale.

Per centrare un titolo:

<h1 style="text-align: center;">
    Il mio sito
</h1>

Alcuni valori comuni sono:

Valore Effetto
left Allinea il testo a sinistra.
center Centra il testo.
right Allinea il testo a destra.
justify Giustifica il testo quando applicabile.

Esempio:

<p style="text-align: right;">
    Testo allineato a destra.
</p>

Utilizzare più proprietà CSS

Un unico attributo style può contenere più dichiarazioni CSS.

Un unico attributo style può contenere più dichiarazioni CSS.

Le dichiarazioni vengono separate mediante il punto e virgola. 

<p style="color: blue; font-size: 20px;">
    Testo blu di 20 pixel.
</p>

Possiamo aggiungere ulteriori proprietà: 

<p style="color: blue; background-color: lightgray; font-size: 20px;">
    Un paragrafo con più proprietà.
</p>
Schema da ricordare 
style="proprietà1: valore1; proprietà2: valore2; proprietà3: valore3;"

Analizziamo un esempio completo

<h1 style="color: white; background-color: blue; text-align: center;">
    Informatica
</h1>

L’elemento contiene un solo attributo HTML: 

style

All’interno dell’attributo sono presenti tre dichiarazioni CSS:

Proprietà Valore Effetto
color white Imposta il testo bianco.
background-color blue Imposta lo sfondo blu.
text-align center Centra il testo.

Altre proprietà utili

Oltre alle proprietà già osservate, è possibile utilizzare altre semplici proprietà per modificare la presentazione del testo.

Oltre alle proprietà già osservate, è possibile utilizzare altre semplici proprietà per modificare la presentazione del testo.

Proprietà Funzione Esempio
font-family Imposta il tipo di carattere. font-family: Arial;
font-weight Controlla lo spessore del testo. font-weight: bold;
font-style Permette, per esempio, di visualizzare testo in corsivo. font-style: italic;

Esempio:

<p style="font-family: Arial; font-weight: bold;">
    Testo visualizzato con Arial e in grassetto.
</p>

LABORATORIO

Creare una pagina utilizzando style

L’obiettivo è creare una semplice pagina HTML e modificarne progressivamente la presentazione utilizzando esclusivamente l’attributo style.

Software: editor di testo e browser

L’obiettivo è creare una semplice pagina HTML e modificarne progressivamente la presentazione utilizzando esclusivamente l’attributo style.

Passo 1 - Creare il file

Creare un nuovo file denominato:

style.html

Passo 2 - Inserire la struttura HTML

<!DOCTYPE html>
<html lang="it">

<head>
    <meta charset="UTF-8">
    <title>Prova attributo style</title>
</head>

<body>

    <h1>Tecnologie Web</h1>

    <h2>HTML</h2>

    <p>
        HTML definisce la struttura di una pagina Web.
    </p>

    <h2>CSS</h2>

    <p>
        CSS definisce la presentazione grafica di una pagina Web.
    </p>

</body>

</html>

Passo 3 - Modificare il titolo principale

Applicare al titolo un colore, uno sfondo e un allineamento: 

<h1 style="color: white; background-color: blue; text-align: center;">
    Tecnologie Web
</h1>

Passo 4 - Modificare i titoli secondari

<h2 style="color: darkgreen;">HTML</h2>

e:

<h2 style="color: darkgreen;">CSS</h2>

Passo 5 - Modificare i paragrafi

<p style="font-size: 18px;">
    HTML definisce la struttura di una pagina Web.
</p>

<p style="font-size: 18px;">
    CSS definisce la presentazione grafica di una pagina Web.
</p>

Passo 6 - Aggiungere più proprietà

Modificare il primo paragrafo utilizzando più dichiarazioni CSS: 

<p style="font-size: 18px; color: navy; background-color: lightgray;">
    HTML definisce la struttura di una pagina Web.
</p>
Risultato del laboratorio

La struttura HTML della pagina rimane invariata nella sua funzione, ma alcuni elementi vengono presentati con colori, dimensioni, sfondi e allineamenti differenti grazie all’attributo style.

Codice completo del laboratorio

<!DOCTYPE html>
<html lang="it">

<head>
    <meta charset="UTF-8">
    <title>Prova attributo style</title>
</head>

<body>

    <h1 style="color: white; background-color: blue; text-align: center;">
        Tecnologie Web
    </h1>

    <h2 style="color: darkgreen;">
        HTML
    </h2>

    <p style="font-size: 18px; color: navy; background-color: lightgray;">
        HTML definisce la struttura di una pagina Web.
    </p>

    <h2 style="color: darkgreen;">
        CSS
    </h2>

    <p style="font-size: 18px;">
        CSS definisce la presentazione grafica di una pagina Web.
    </p>

</body>

</html>

Errori comuni

Errore 1 - Dimenticare i due punti

Errato:

<p style="color red;">Testo</p>

Corretto:

<p style="color: red;">Testo</p>

Errore 2 - Separare le proprietà con la virgola

Errato:

<p style="color: red, font-size: 20px;">
    Testo
</p>

Corretto:

<p style="color: red; font-size: 20px;">
    Testo
</p>

Errore 3 - Scrivere la proprietà fuori dalle virgolette

Errato:

<p style="color: red;" font-size: 20px;>
    Testo
</p>

Corretto:

<p style="color: red; font-size: 20px;">
    Testo
</p>

Errore 4 - Confondere proprietà e valore

Errato:

<p style="red: color;">
    Testo
</p>

Corretto:

<p style="color: red;">
    Testo
</p>
Regola pratica 
proprietà: valore;

I due punti separano la proprietà dal valore. Il punto e virgola separa una dichiarazione CSS dalla successiva.

Limiti dell’attributo style

L’attributo style è utile per comprendere immediatamente il rapporto tra un elemento HTML e una regola CSS.

L’attributo style è utile per comprendere immediatamente il rapporto tra un elemento HTML e una regola CSS.

Tuttavia, quando una pagina contiene molti elementi, ripetere gli stessi stili direttamente nei tag rende il codice più difficile da modificare.

Consideriamo:

<p style="color: blue;">Primo paragrafo</p>

<p style="color: blue;">Secondo paragrafo</p>

<p style="color: blue;">Terzo paragrafo</p>

La stessa regola viene ripetuta tre volte.

Verso i fogli di stile CSS

Nelle pagine Web strutturate si preferisce normalmente separare la presentazione dal contenuto utilizzando regole CSS definite in modo centralizzato, spesso attraverso un foglio di stile esterno. L’attributo style rimane comunque valido e utile per casi specifici e per comprendere la sintassi fondamentale del CSS.

Esercizio autonomo

Creare una pagina denominata linguaggi.html dedicata a tre linguaggi informatici.

Creare una pagina denominata linguaggi.html dedicata a tre linguaggi informatici.

La pagina deve contenere:

  • un titolo h1 centrato;
  • un colore di sfondo per il titolo principale;
  • un colore del testo per il titolo principale;
  • tre titoli h2;
  • un colore differente per almeno due titoli h2;
  • tre paragrafi descrittivi;
  • almeno un paragrafo con dimensione del testo di 18px;
  • almeno un elemento con due proprietà CSS nello stesso attributo style;
  • almeno un elemento con tre proprietà CSS nello stesso attributo style.
Criteri di verifica
  • L’attributo style deve trovarsi nel tag di apertura.
  • Le proprietà devono essere seguite dai due punti.
  • Ogni proprietà deve avere un valore appropriato.
  • Le diverse dichiarazioni devono essere separate dal punto e virgola.
  • Le virgolette dell’attributo style devono essere correttamente aperte e chiuse.
  • Il codice HTML deve essere correttamente indentato.

Verifica rapida

Domande di controllo
  1. A cosa serve l’attributo style?
  2. Quale linguaggio viene utilizzato all’interno dell’attributo style?
  3. Qual è la struttura di una dichiarazione CSS?
  4. Quale simbolo separa una proprietà dal suo valore?
  5. Quale simbolo separa più dichiarazioni CSS?
  6. Quale proprietà modifica il colore del testo?
  7. Quale proprietà modifica il colore dello sfondo?
  8. Quale proprietà modifica la dimensione del testo?
  9. Quale proprietà permette di centrare un testo?
  10. Che cosa rappresenta px in un valore come 20px?
  11. Perché utilizzare molti attributi style può rendere una pagina difficile da mantenere?