033.3 Lezione 1

Certificazione:

Web Development Essentials

Versione:

1.0

Argomento:

033 Stile dei Contenuti con i CSS

Obiettivo:

033.3 Stili nei CSS

Lezione:

1 di 1

Introduzione

I CSS forniscono centinaia di proprietà che possono essere utilizzate per modificare l’aspetto degli elementi HTML. Solo i designer esperti riescono a ricordarne la maggior parte. Tuttavia, è pratico conoscere le proprietà di base che sono applicabili a qualsiasi elemento, così come alcune proprietà specifiche dell’elemento stesso. Questo capitolo tratta di alcune proprietà popolari che probabilmente userete.

Proprietà e Valori Comuni dei CSS

Molte proprietà CSS hanno lo stesso tipo di valore. I colori, per esempio, hanno lo stesso formato numerico sia che stiate cambiando il colore del carattere o il colore dello sfondo. Allo stesso modo, le unità disponibili per cambiare la dimensione del carattere sono anche usate per cambiare lo spessore di un bordo. Tuttavia, il formato del valore non è sempre unico. I colori, per esempio, possono essere inseriti in vari formati diversi, come vedremo in seguito.

Colori

Cambiare il colore di un elemento è probabilmente una delle prime cose che i designer imparano a fare con i CSS. Puoi cambiare il colore del testo, il colore dello sfondo, il colore del bordo degli elementi e altro ancora.

Il valore di un colore nei CSS può essere scritto come un color keyword (cioè un nome di colore) o come un valore numerico che elenca ogni componente del colore stesso. Tutti i nomi comuni dei colori, come black, white, red, purple, green, yellow, e blue sono accettati come parole chiave di colore. L’intera lista accettata nei CSS è disponibile su pagina web del W3C. Ma per avere un controllo più fine sul colore, puoi usare il valore numerico.

Parole Chiave di Colore

Useremo prima la parola chiave color, perché è più semplice. La proprietà color cambia il colore del testo nell’elemento corrispondente. Quindi per mettere tutto il testo della pagina in viola, potresti scrivere la seguente regola CSS:

* {
  color: purple;
}

Valori Numerici dei Colori

Anche se intuitivo, le parole chiave di colore non offrono la gamma completa di colori possibili nei display moderni. I web designer di solito sviluppano una tavolozza di colori che impiega colori personalizzati, assegnando valori specifici ai componenti rosso, verde e blu.

Ogni componente del colore è un numero binario a otto bit, che possiamo esprimere con un valore che va da 0 a 255. Tutti e tre i colori base devono essere specificati nella miscela di colori, e il loro ordine è sempre rosso, verde, blu. Quindi, per cambiare il colore di tutto il testo nella pagina in rosso usando la notazione RGB, usa rgb(255,0,0):

* {
  color: rgb(255,0,0);
}

Un componente impostato su 0 indica che il colore di base corrispondente non viene utilizzato nella miscela di colori. Le percentuali possono essere utilizzate anche al posto dei numeri:

* {
  color: rgb(100%,0%,0%);
}

La notazione RGB si vede raramente se si utilizza un’applicazione di disegno per creare layout o semplicemente per sceglierne i colori. Piuttosto, è più comune vedere i colori nei CSS espressi come valori esadecimali. Anche i componenti del colore in esadecimale vanno da 0 a 255, ma in modo più conciso, iniziando con un simbolo hash # e utilizzando una lunghezza fissa di due cifre per tutti i componenti. Il valore minimo 0 è 00 e il valore massimo 255 è FF, quindi il colore rosso è #FF0000.

Tip	Se le cifre in ogni componente di un colore esadecimale si ripetono, la seconda cifra può essere omessa. Il colore `rosso`, per esempio, può essere scritto con una sola cifra per ogni componente: `#F00`.

La seguente lista mostra la notazione RGB ed esadecimale per alcuni colori di base:

Nome Colore Notazione RGB Valore Esadecimale

black

rgb(0,0,0)

#000000

white

rgb(255,255,255)

#FFFFFF

red

rgb(255,0,0)

#FF0000

purple

rgb(128,0,128)

#800080

green

rgb(0,128,0)

#008000

yellow

rgb(255,255,0

#FFFF00

blue

rgb(0,0,255)

#0000FF

Le parole chiave di colore e le lettere nei valori esadecimali di colore sono case-insensitive.

Opacità di Colore

Oltre ai colori saturi, è possibile riempire gli elementi della pagina con colori semitrasparenti. L’opacità di un colore può essere impostata usando un quarto componente nel valore del colore. A differenza degli altri componenti del colore, dove i valori sono numeri interi che vanno da 0 a 255, l’opacità è una frazione che va da 0 a 1.

Il valore più basso, 0, dà come risultato un colore completamente trasparente, rendendolo indistinguibile da qualsiasi altro colore completamente trasparente. Il valore più alto, 1, dà come risultato un colore completamente saturo, che è lo stesso del colore originale senza alcuna trasparenza.

Quando usi la notazione RGB, specifica i colori con una componente di opacità attraverso il prefisso rgba invece di rgb. Così, per rendere il colore rosso semitrasparente, usate rgba(255,0,0,0.5). Il carattere a sta per alpha channel, un termine comunemente usato per specificare la componente di saturazione nel gergo della grafica digitale.

La saturazione può anche essere impostata nella notazione esadecimale. Qui, come per gli altri componenti del colore, la saturazione va da 00 a FF. Quindi, per rendere il colore rosso semitrasparente usando la notazione esadecimale, usa #FF000080.

Sfondo

Il colore di sfondo dei singoli elementi o dell’intera pagina è impostato con la proprietà background-color. Accetta gli stessi valori della proprietà color, sia come parole chiave che usando la notazione RGB/esadecimale.

Lo sfondo degli elementi HTML non è però limitato ai colori. Con la proprietà background-image è possibile usare un’immagine come sfondo. I formati di immagine accettati sono tutti quelli convenzionali accettati dal browser, come JPEG e PNG.

Il percorso dell’immagine dovrebbe essere specificato usando un designatore url(). Se l’immagine che vuoi usare è nella stessa cartella del file HTML, è sufficiente usare solo il nome del file:

body {
  background-image: url("background.jpg");
}

In questo esempio, il file immagine background.jpg sarà usato come immagine di sfondo per tutto il corpo della pagina. Per impostazione predefinita, l’immagine di sfondo viene ripetuta se la sua dimensione non copre l’intera pagina, partendo dall’angolo in alto a sinistra dell’area corrispondente al selettore della regola. Questo comportamento può essere modificato con la proprietà background-repeat. Se vuoi che l’immagine di sfondo sia posizionata nell’area dell’elemento senza essere ripetuta, usa il valore no-repeat:

body {
  background-image: url("background.jpg");
  background-repeat: no-repeat;
}

Puoi anche far ripetere l’immagine solo in direzione orizzontale (background-repeat: repeat-x) o solo in direzione verticale (background-repeat: repeat-y).

Figure 1. Posizionamento dello sfondo utilizzando la proprietà background-repeat.

Tip	Due o più proprietà CSS possono essere combinate in una singola proprietà, chiamata proprietà background shorthand. Le proprietà `background-image` e `background-repeat`, per esempio, possono essere combinate in una singola proprietà background con `background: no-repeat url("background.jpg")`.

Un’immagine di sfondo può anche essere posta in una posizione specifica nell’area dell’elemento usando la proprietà background-position. Le cinque posizioni di base sono top, bottom, left, right e center, ma la posizione in alto a sinistra dell’immagine può anche essere regolata con le percentuali:

body {
  background-image: url("background.jpg");
  background-repeat: no-repeat;
  background-position: 30% 10%;
}

La percentuale per ogni posizione è relativa alla dimensione corrispondente dell’elemento. Nell’esempio, il lato sinistro dell’immagine di sfondo sarà al 30% della larghezza del corpo (di solito il corpo è l’intero documento visibile) e il lato superiore dell’immagine sarà al 10% dell’altezza del corpo.

Bordi

Cambiare il bordo di un elemento è anche una comune personalizzazione del layout fatta con i CSS. Il bordo si riferisce alla linea che forma un rettangolo intorno all’elemento e ha tre proprietà di base: color, style e width.

Il colore del bordo, definito con border-color, segue lo stesso formato che abbiamo visto per le altre proprietà di colore.

I bordi possono essere tracciati in uno stile diverso da una linea continua. Potresti, per esempio, usare dei trattini per il bordo con la proprietà border-style: dashed. Gli altri possibili valori di stile sono:

dotted: Una sequenza di punti arrotondati
double: Due linee rette
groove: Una linea con un aspetto scolpito
ridge: Una linea con un aspetto espanso
inset: Un elemento che appare incorporato
outset: Un elemento che appare in rilievo

La proprietà border-width imposta lo spessore del bordo. Il suo valore può essere una parola chiave (thin, medium o thick) o un valore numerico specifico. Se preferisci usare un valore numerico, dovrai anche specificare la sua unità corrispondente. Questo aspetto sarà affrontato in seguito.

Valori di Unità

Le dimensioni e le distanze nei CSS possono essere definite in vari modi. Le unità assolute sono basate su un numero fisso di pixel dello schermo, quindi non sono molto diverse dalle dimensioni fisse usate nei media stampati. Ci sono anche unità relative, che sono calcolate dinamicamente rispetto al media dove la pagina viene visualizzata, come lo spazio disponibile o un’altra dimensione scritta in unità assolute.

Unità Assolute

Le unità assolute sono equivalenti alle loro controparti fisiche, come i centimetri o i pollici. Sugli schermi dei computer convenzionali, un pollice sarà largo 96 pixel. Le seguenti unità assolute sono comunemente usate:

in (inch): 1 in è equivalente a 2,54 cm o 96 px.
cm (centimetri): 1 cm è equivalente a 96 px / 2.54.
mm (millimeter): 1 mm è equivalente a 1 cm / 10.
px (pixel): 1 px è equivalente a 1 / 96esimo di un pollice (inch).
pt (point): 1pt è equivalente a 1 / 72esimo di un pollice (inch).

Tieni presente che il rapporto tra pixel e pollici può variare. Negli schermi ad alta risoluzione, dove i pixel sono più densi, un pollice corrisponderà a più di 96 pixel.

Unità Relative

Le unità relative variano a seconda di altre misure o delle dimensioni della finestra. Il viewport è l’area del documento attualmente visibile nella sua finestra. In modalità schermo intero, la finestra corrisponde allo schermo del dispositivo. Le seguenti unità relative sono comunemente usate:

%: Percentuale — è relativo all’elemento genitore.
em: La dimensione del carattere usato nell’elemento.
rem: La dimensione del carattere usato nell’elemento radice.
vw: 1% della larghezza della finestra.
vh: 1% dell’altezza della finestra.

Il vantaggio di usare unità relative è che puoi creare layout che sono regolabili cambiando solo alcune dimensioni chiave. Per esempio, puoi usare l’unità pt per impostare la dimensione del carattere nell’elemento body e l’unità rem per i caratteri negli altri elementi. Una volta cambiata la dimensione del carattere per il corpo, tutte le altre dimensioni dei caratteri si regoleranno di conseguenza. Inoltre, l’uso di vw e vh per impostare le dimensioni delle sezioni della pagina le rende adattabili a schermi con dimensioni diverse.

Caratteri e Proprietà del Testo

La tipografia, o lo studio dei tipi di carattere, è un argomento di design molto ampio, e la tipografia nei CSS non è da meno. Tuttavia, ci sono alcune proprietà di base dei font che soddisferanno i bisogni della maggior parte degli utenti che imparano i CSS.

La proprietà font-family imposta il nome del carattere da usare. Non c’è garanzia che il font scelto sarà disponibile nel sistema in cui la pagina verrà visualizzata, quindi questa proprietà potrebbe non avere alcun effetto nel documento. Sebbene sia possibile fare in modo che il browser scarichi e usi il file di font specificato, la maggior parte dei web designer non si fa problema a utilizzare una famiglia di font generica nei loro documenti.

Le tre famiglie di caratteri generiche più comuni sono serif, sans-serif e monospace. Serif è la famiglia di caratteri predefinita nella maggior parte dei browser. Se preferisci usare sans-serif per l’intera pagina, aggiungi la seguente regola al tuo foglio di stile:

* {
  font-family: sans-serif;
}

Opzionalmente, è possibile impostare prima un nome specifico di famiglia di font, seguito da una famiglia generica:

* {
  font-family: "DejaVu Sans", sans-serif;
}

Se il dispositivo che visualizza la pagina ha quella specifica famiglia di caratteri, il browser la userà. Altrimenti, userà il suo font predefinito che corrisponde al nome generico della famiglia. I browser cercano i font nell’ordine in cui sono specificati nella proprietà.

Chiunque abbia usato un’applicazione di elaborazione testi avrà anche familiarità con altre tre regolazioni del carattere: dimensione, spessore e stile. Queste tre regolazioni hanno delle controparti nelle proprietà CSS: font-size, font-weight e font-style.

La proprietà font-size accetta parole chiave come xx-small, x-small, small, medium, large, x-large, xx-large, xxx-large. Queste parole chiave sono relative alla dimensione predefinita del carattere usata dal browser. Le parole chiave larger e smaller cambiano la dimensione del carattere rispetto alla dimensione del carattere dell’elemento principale. Puoi anche esprimere la dimensione del carattere con valori numerici, includendo l’unità dopo il valore, o con percentuali.

Se non vuoi cambiare la dimensione del carattere, ma la distanza tra le linee, usa la proprietà line-height. Un line-height di 1 renderà l’altezza della linea la stessa dimensione del carattere dell’elemento, il che può rendere le linee di testo troppo vicine tra loro. Pertanto, un valore maggiore di 1 è più appropriato per i testi. Come la proprietà font-size, altre unità possono essere usate insieme al valore numerico.

Il font-weight imposta lo spessore del carattere con le familiari parole chiave normal o bold. Le parole chiave lighter e bolder cambiano lo spessore del carattere dell’elemento rispetto a quello del carattere del suo elemento principale.

La proprietà font-style può essere impostata su italic per selezionare la versione in corsivo della famiglia di caratteri corrente. Il valore oblique seleziona la versione obliqua del font. Queste due opzioni sono quasi identiche, ma la versione italica di un font è solitamente un po' più stretta della versione obliqua. Se non esistono né versioni italiche né oblique del font, il font sarà artificialmente inclinato dal browser.

Ci sono altre proprietà che cambiano il modo in cui il testo viene reso nel documento. Puoi, per esempio, aggiungere una sottolineatura ad alcune parti del testo che vuoi enfatizzare. Per prima cosa, usa un tag <span> per delimitare il testo:

<p>CSS is the <span class="under">proper mechanism</span> to style HTML documents.</p>

Poi puoi usare il selettore .under per cambiare la proprietà text-decoration:

.under {
  text-decoration: underline;
}

Per default, tutti gli elementi a (link) sono sottolineati. Se vuoi rimuoverlo, usa il valore none per la text-decoration di tutti gli elementi a:

a {
  text-decoration: none;
}

Quando si revisiona il contenuto, alcuni autori preferiscono cancellare parti errate o obsolete del testo, in modo che il lettore sappia che il testo è stato aggiornato e che cosa è stato rimosso. Per farlo, usa il valore line-through della proprietà text-decoration:

.disregard {
  text-decoration: line-through;
}

Di nuovo, un tag <span> può essere usato per applicare lo stile:

<p>Netscape Navigator <span class="disregard">is</span> was one of the most popular Web browsers.</p>

Altre decorazioni possono essere specifiche per un elemento. I pallini negli elenchi puntati possono essere personalizzati usando la proprietà list-style-type. Per cambiarli in quadrati, per esempio, usa list-style-type: square. Per rimuoverli semplicemente, imposta il valore di list-style-type a none.

Esercizi Guidati

Come si può aggiungere la semitrasparenza al colore blu (notazione RGB rgb(0,0,255)) per usarlo nella proprietà CSS color?
Quale colore corrisponde al valore esadecimale #000?
Dato che Times New Roman è un font serif e che non sarà disponibile in tutti i dispositivi, come potresti scrivere una regola CSS per richiedere Times New Roman mentre imposti la famiglia di font generica serif come fallback?
Come potresti usare una parola chiave di dimensione relativa per impostare la dimensione del carattere dell’elemento <p class="disclaimer"> più piccolo in relazione al suo elemento principale?

Esercizi Esplorativi

La proprietà background è un’abbreviazione per impostare più di una proprietà background-* contemporaneamente. Riscrivi la seguente regola CSS come una singola proprietà background.
```
body {
  background-image: url("background.jpg");
  background-repeat: repeat-x;
}
```
Scrivi una regola CSS per l’elemento <div id="header"></div> che cambia solo la larghezza del suo bordo inferiore a 4px.
Scrivi una proprietà font-size che raddoppia la dimensione del carattere usato nell’elemento principale della pagina.
La Doppia spaziatura è una caratteristica comune di formattazione del testo nei word processor. Come si potrebbe impostare un formato simile usando i CSS?

Sommario

Questa lezione tratta l’applicazione di stili semplici agli elementi di un documento HTML. I CSS forniscono centinaia di proprietà, e la maggior parte dei web designer avrà bisogno di ricorrere a manuali di riferimento per utilizzarle tutte. Ciononostante, un insieme relativamente piccolo di proprietà e valori sono usati la maggior parte delle volte, ed è importante conoscerli a memoria. La lezione passa attraverso i seguenti concetti e procedure:

Proprietà CSS fondamentali che hanno a che fare con colori, sfondi e caratteri.
Le unità assolute e relative che i CSS possono usare per impostare dimensioni e distanze, come px, em, rem, vw, vh e così via.

Risposte agli Esercizi Guidati

Come si può aggiungere la semitrasparenza al colore blu (notazione RGB rgb(0,0,255)) per usarlo nella proprietà CSS color?

Usa il prefisso rgba e aggiungi 0.5 come quarto valore: rgba(0,0,0,0.5).
Quale colore corrisponde al valore esadecimale #000?

Il colore black. Il valore esadecimale #000 è un’abbreviazione di #000000.
Dato che Times New Roman è un font serif e che non sarà disponibile in tutti i dispositivi, come potresti scrivere una regola CSS per richiedere Times New Roman mentre imposti la famiglia di font generica serif come fallback?
```
* {
  font-family: "Times New Roman", serif;
}
```
Come potresti usare una parola chiave di dimensione relativa per impostare la dimensione del carattere dell’elemento <p class="disclaimer"> più piccolo in relazione al suo elemento principale?

Utilizzando la parola chiave smaller:
```
p.disclaimer {
  font-size: smaller;
}
```

Risposte agli Esercizi Esplorativi

La proprietà background è un’abbreviazione per impostare più di una proprietà background-* contemporaneamente. Riscrivi la seguente regola CSS come una singola proprietà background.
```
body {
  background-image: url("background.jpg");
  background-repeat: repeat-x;
}
```
```
body {
  background: repeat-x url("background.jpg");
}
```
Scrivi una regola CSS per l’elemento <div id="header"></div> che cambia solo la larghezza del suo bordo inferiore a 4px.
```
#header {
  border-bottom-width: 4px;
}
```
Scrivi una proprietà font-size che raddoppia la dimensione del carattere usato nell’elemento principale della pagina.

L’unità rem corrisponde alla dimensione del carattere usato nell’elemento radice, quindi la proprietà dovrebbe essere font-size: 2rem.
La Doppia spaziatura è una caratteristica comune di formattazione del testo nei word processor. Come si potrebbe impostare un formato simile usando i CSS?

Imposta la proprietà line-height al valore 2em, perché l’unità em corrisponde alla dimensione del carattere dell’elemento corrente.