# I comandi CSS: le istruzioni utilizzate più spesso

Per la creazione di siti web è necessaria una gran varietà di comandi CSS. In questo articolo ti presentiamo una panoramica dei comandi CSS più importanti e più utilizzati, con l’aggiunta di alcuni brevi esempi che potrai adattare ai tuoi progetti di web design nella pratica.

## I comandi CSS: una vasta scelta di soluzioni con CSS 3

Se inizialmente i comandi CSS servivano a definire i tipi e i colori dei caratteri, a migliorare l’aspetto delle tabelle o a disporre i testi intorno agli elementi, con il tempo le possibilità sono aumentate molto. Oggi, con i comandi CSS è possibile creare **gradienti di colore**, **ritagliare immagini**, aggiungere **ombre**, arrotondare gli angoli e inserire **animazioni**.

N.B. Senza il linguaggio **CSS (Cascading Style Sheets)** oggi non è più possibile pensare di creare siti web. Facendo clic sui link alle guide collegate troverai informazioni dettagliate su [che cos’è CSS](https://www.ionos.it/digitalguide/siti-web/web-design/cose-css/) e [come collegare CSS in HTML](https://www.ionos.it/digitalguide/siti-web/web-design/come-collegare-css-nei-documenti-html/). Per muovere i primi passi, ti consigliamo di leggere l’articolo su [come imparare il linguaggio CSS con facilità](https://www.ionos.it/digitalguide/siti-web/web-design/come-imparare-il-css-una-guida-semplice/). Nei nostri [trucchi CSS](https://www.ionos.it/digitalguide/siti-web/web-design/trucchi-css-che-dovreste-assolutamente-conoscere/) troverai inoltre ulteriori snippet CSS da usare per soluzioni particolari.

Un **comando CSS**, noto anche come regola CSS, ha la seguente **struttura**:

<table>
  <thead>
    <tr>
      <th><strong>Selettore</strong></th>
      <th><strong>Parentesi aperta</strong></th>
      <th><strong>Proprietà</strong></th>
      <th><strong>Valore</strong></th>
      <th><strong>Parentesi chiusa</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>p</td>
      <td>{</td>
      <td>color:</td>
      <td>navy;</td>
      <td>}</td>
    </tr>
  </tbody>
</table>

Insieme, la proprietà e il valore formano la cosiddetta **dichiarazione**.

Chi scrive in CSS dovrebbe ricordare sempre che, nonostante i molti miglioramenti e allineamenti, **non tutti i browser sono in grado di “capire” tutto**. Per questo motivo in CSS sono disponibili i cosiddetti prefissi browser che permettono ai comandi di rivolgersi ai motori dei browser in modo mirato. Questi prefissi sono:

- -moz-: per Firefox
- -ms-: per Internet Explorer
- -khtml-: per Konqueror
- -o-: per le vecchie versioni di Opera
- -webkit-: per Safari, Chrome e le nuove versioni di Opera

Un semplice esempio:

```none
.box {
	-moz-border-radius: 10px; / *Istruzione per Firefox* /
	border-radius: 10px;
}
```

Sul sito web [CANIUSE](https://caniuse.com/ "Tabelle di supporto per HTML5, CSS3, ecc,.") è possibile **verificare** gratuitamente la **compatibilità** dei comandi CSS con tutti i browser più diffusi.

Consiglio Tutte le informazioni scritte fra / *…* / in CSS non vengono eseguite dal browser. In questo modo è possibile sia posizionare **commenti** che “nascondere” facilmente i comandi CSS a scopo di test, senza doverli cancellare e riscrivere.

Per la **progettazione di siti web responsive** si sono aggiunti ad esempio [CSS Flexbox](https://www.ionos.it/digitalguide/siti-web/creare-siti/css-flexbox/), [CSS Grid](https://www.ionos.it/digitalguide/siti-web/creare-siti/css-grid/) e le [media query](https://www.ionos.it/digitalguide/siti-web/web-design/media-query-css/) che contribuiscono a mettere in pratica l’approccio “mobile first” con nuovi comandi CSS.

## I colori in CSS

Il sistema di **colori su internet** si basa sul [modello di colori RGB](https://www.ionos.it/digitalguide/siti-web/web-design/media-query-css/). Per definire i colori sono disponibili comandi CSS per i singoli componenti di un sito web. Quasi ogni elemento può essere dotato di un colore o addirittura di un gradiente di colore.

N.B. I nomi delle classi e degli ID nei comandi CSS sono sensibili alla differenza fra lettere maiuscole e minuscole (in inglese, “**case sensitive**”). Pertanto non è la stessa cosa scrivere un’istruzione per un ID come “**\#GIALLO** { … }” o “**\#giallo** { … }”. Nell’elemento HTML deve essere quindi utilizzata scrivendola nel modo giusto.

### Le possibilità per indicare i valori cromatici

- **Codice esadecimale**: #63f0ac
- **Nomi dei colori**: red, green, blue, coral, white, black …
- **RGB**: rgb(238,130,238) e trasparenza RGB con rgba(238,130,238, 0.7)
- **HSL con trasparenza**: hsla(140,20%,50%,0.5) -Hue (tonalità) da 0 a 360 gradi sulla ruota dei colori -Saturation (saturazione): da 0% (incolore) a 100% (massima intensità del colore) -Lightness (luminosità): da 0% (nero) a 100% (bianco) -Valore numerico della trasparenza fino a 1.0 = copertura di colore totale

### Esempi di definizione dei colori per elementi HMTL

Per il **colore del carattere** si utilizza la proprietà *color*:

```none
p { color: red; } / *un paragrafo in rosso* /
div { color: #ffc3dd; } / *container DIV con scritta in rosa chiaro* /
h1 { color: rgba(220,0,218,0.85); } / *titolo in viola intenso con trasparenza all’85%* /
```

### Utilizzo dei gradienti di colore

Per utilizzare i gradienti di colore, un tempo dovevi ricorrere a immagini sotto forma di file, mentre oggi puoi crearli facilmente con un comando CSS. A tal fine, utilizza l’istruzione *background-image: gradient* o, in forma breve, *background: gradient*. Il comando *gradient* rappresenta un valore per un’immagine senza dimensioni e crea un **gradiente di colore** che puoi cambiare in determinati punti.

<table>
  <thead>
    <tr>
      <th><strong>Comando CSS</strong></th>
      <th><strong>Descrizione</strong></th>
      <th><strong>Possibili valori</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>linear-gradient</td>
      <td>gradiente lineare da un colore all’altro o con più colori</td>
      <td>to-top, to-right, 45deg (angolazione a piacere), colori in % come punti di arresto/transizione</td>
    </tr>
    <tr>
      <td>radial-gradient</td>
      <td>Gradiente circolare da un colore all’altro</td>
      <td>circle, ellipse con valori in pixel e colori</td>
    </tr>
    <tr>
      <td>conic-gradient</td>
      <td>Passaggio da un colore all’altro con andamento a cono</td>
      <td>Colori con valori in % e angolo iniziale come numero</td>
    </tr>
  </tbody>
</table>

La tabella mostra solo **una parte degli attributi possibili**. Per i dati dei colori è possibile utilizzare tutti i valori più comuni, compresi i valori cromatici con trasparenza.

La notazione del comando CSS completo, ad esempio, si presenta così:

```none
.box { background-image: linear-gradient(to top, white 0%, black 50%); }
```

## I comandi CSS per i caratteri

Il comando CSS *font* ti permette di cambiare in un colpo solo le **sei proprietà** del **carattere** utilizzato.

```none
p { font: italic small-caps 700 1.2em/1.5em Arial, Helvetica, sans-serif; }
```

Questa istruzione CSS riepilogativa si può scomporre nei suoi singoli componenti seguendo l’ordine delle informazioni indicate:

<table>
  <thead>
    <tr>
      <th><strong>Comando CSS</strong></th>
      <th><strong>Descrizione</strong></th>
      <th><strong>Possibili valori</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>font-style</td>
      <td>Aspetto del carattere</td>
      <td>normal, italic, oblique</td>
    </tr>
    <tr>
      <td>font-variant</td>
      <td>Variante del carattere</td>
      <td>normal, small-caps</td>
    </tr>
    <tr>
      <td>font-weight</td>
      <td>Spessore delle lettere</td>
      <td>normal (= 400), bold, bolder, lighter, da 100 a 900 (a intervalli di 100)</td>
    </tr>
    <tr>
      <td>font-size / line-height</td>
      <td>Altezza del carattere</td>
      <td>Valori in px, %, em, rem, vw, vh</td>
    </tr>
    <tr>
      <td>font-family</td>
      <td>Tipo di carattere</td>
      <td>Tipi di carattere a seconda del sistema operativo, del browser o di altre estensioni installate</td>
    </tr>
  </tbody>
</table>

La definizione della *font-family* (famiglia dei font) per il corpo del sito web viene ereditata in tutte le istruzioni subordinate. Il colore del carattere non è definito da un’istruzione *font*, ma da *color:tipo-di-colore*.

Consiglio I nomi dei **tipi di carattere con spazi vuoti** nel comando CSS devono essere racchiusi da virgolette semplici o doppie, ad esempio *font-family: “Lobster Two”*.

Informazioni dettagliate sulle **unità di misura** da utilizzare per *font-size* si trovano nella guida [Tipografia nel responsive web design](https://www.ionos.it/digitalguide/siti-web/web-design/responsive-web-design-e-scrittura-i-comandi-css/).

## I comandi CSS per l’aspetto dei testi

Oltre al tipo di carattere, al colore e alle dimensioni del testo, anche altri dettagli tipografici sono importanti per la **leggibilità** di un sito web. Alcuni di questi sono:

<table>
  <thead>
    <tr>
      <th><strong>Comando CSS</strong></th>
      <th><strong>Descrizione</strong></th>
      <th><strong>Possibili valori</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>text-align</td>
      <td>Allineamento del testo</td>
      <td>left, right, center, justify (giustificato)</td>
    </tr>
    <tr>
      <td>text-decoration</td>
      <td>Aspetto del testo</td>
      <td>underline, overline, line-through</td>
    </tr>
    <tr>
      <td>word-spacing</td>
      <td>Spaziatura tra le parole</td>
      <td>Valore numerico in pt (punti) mm, cm, px, em, rem</td>
    </tr>
    <tr>
      <td>letter-spacing</td>
      <td>Spaziatura tra i caratteri</td>
      <td>Valore numerico in pt (punti) mm, cm, px, em, rem</td>
    </tr>
    <tr>
      <td>text-indent</td>
      <td>Rientro prima riga</td>
      <td>Valore numerico in pt (punti) mm, cm, px, em, rem</td>
    </tr>
    <tr>
      <td>text-transform</td>
      <td>Tipo di testo</td>
      <td>capitalize, uppercase, lowercase, none</td>
    </tr>
  </tbody>
</table>

## I comandi CSS per linee e bordi

Per disegnare i bordi, utilizza l’elemento CSS *border* che, analogamente a *font*, racchiude più proprietà tutte insieme.

Esempio: un’immagine (con il tag HTML *img*) deve essere circondata da una **linea** dello spessore di 5 pixel, di colore blu marino. La **struttura in forma breve** è:

```none
img { border: 5px solid #000080; }
```

Anche questo comando CSS può essere scomposto nei seguenti singoli elementi:

<table>
  <thead>
    <tr>
      <th><strong>Comando CSS</strong></th>
      <th><strong>Descrizione</strong></th>
      <th><strong>Possibili valori</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>border-width</td>
      <td>Spessore della linea</td>
      <td>px, mm, in, em, rem</td>
    </tr>
    <tr>
      <td>border-style</td>
      <td>Tipo di linea</td>
      <td>none, hidden, dotted, dashed, double, groove, ridge, inset, outset</td>
    </tr>
    <tr>
      <td>border-color</td>
      <td>Colore della linea</td>
      <td>Vedi il paragrafo sui colori</td>
    </tr>
  </tbody>
</table>

Gli elementi *border-top*, *border-right*, *border-bottom* e *border-left* permettono di posizionare singolarmente le linee lungo i **singoli angoli** di un’immagine o di un rettangolo con gli stessi attributi utilizzati nella struttura in forma breve per *border*.

## I comandi CSS per definire le distanze

Le distanze sono di due tipi:

- *padding* indica la distanza interna del contenuto dall’elemento che lo circonda
- *margin* indica la distanza esterna di un elemento da quello successivo

### La distanza interna

Con *padding* (in italiano, “imbottitura”) puoi definire la distanza di un blocco di testo o di un’immagine dal bordo circostante. Questo elemento ha una **forma breve** ed elementi definiti per tutti i lati di un blocco di contenuto.

<table>
  <thead>
    <tr>
      <th><strong>Comando CSS</strong></th>
      <th><strong>Descrizione</strong></th>
      <th><strong>Possibili valori</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>padding: 1px</td>
      <td>Distanza interna generale</td>
      <td>px, em, mm, in, pt, pc, %</td>
    </tr>
    <tr>
      <td>padding: 1em 2.5em;</td>
      <td>Distanza interna in alto e in basso (primo valore), a sinistra e a destra (secondo valore</td>
      <td>px, em, mm, in, pt, pc, %</td>
    </tr>
    <tr>
      <td>padding: 5px 2px 4px;</td>
      <td>Distanza interna in alto (primo valore), a sinistra e a destra (secondo valore), in basso (terzo valore)</td>
      <td>px, em, mm, in, pt, pc, %</td>
    </tr>
    <tr>
      <td>padding-top: 1mm;</td>
      <td>Distanza interna verso l’alto</td>
      <td>px, em, mm, in, pt, pc, %</td>
    </tr>
    <tr>
      <td>padding-right: 1pc;</td>
      <td>Distanza interna verso destra</td>
      <td>px, em, mm, in, pt, pc, %</td>
    </tr>
    <tr>
      <td>padding-bottom: 3pt;</td>
      <td>Distanza interna verso il basso</td>
      <td>px, em, mm, in, pt, pc, %</td>
    </tr>
    <tr>
      <td>padding-left: 2in;</td>
      <td>Distanza interna verso sinistra</td>
      <td>px, em, mm, in, pt, pc, %</td>
    </tr>
  </tbody>
</table>

Se tutte le posizioni nella forma breve *padding* contengono dei valori, si inizia dall’alto e si procede in senso orario, ossia con la seguente struttura:

```none
p { padding: 5px 0 5px 0; } / *in alto e in basso 5 pixel, a destra e a sinistra senza distanza interna* /
```

### La distanza esterna

Il comando CSS *margin* definisce la distanza di un elemento del layout da quello successivo, ossia il margine. La struttura e l’ordine dei singoli valori sono gli stessi di *padding*.

<table>
  <thead>
    <tr>
      <th><strong>Comando CSS</strong></th>
      <th><strong>Descrizione</strong></th>
      <th><strong>Possibili valori</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>margin: 5px;</td>
      <td>Distanza esterna generale</td>
      <td>px, em, mm, in, pt, pc, %</td>
    </tr>
    <tr>
      <td>margin: 2em 1.5em;</td>
      <td>Distanza esterna in alto e in basso (primo valore), a sinistra e a destra (secondo valore</td>
      <td>px, em, mm, in, pt, pc, %</td>
    </tr>
    <tr>
      <td>margin: 2px 10px 15px;</td>
      <td>Distanza esterna in alto (primo valore), a sinistra e a destra (secondo valore), in basso (terzo valore)</td>
      <td>px, em, mm, in, pt, pc, %</td>
    </tr>
    <tr>
      <td>margin-top: 2pc;</td>
      <td>Distanza esterna verso l’alto</td>
      <td>px, em, mm, in, pt, pc, %</td>
    </tr>
    <tr>
      <td>margin-right: 5mm;</td>
      <td>Distanza esterna verso destra</td>
      <td>px, em, mm, in, pt, pc, %</td>
    </tr>
    <tr>
      <td>margin-bottom: 7pt;</td>
      <td>Distanza esterna verso il basso</td>
      <td>px, em, mm, in, pt, pc, %</td>
    </tr>
    <tr>
      <td>margin-left: 1in;</td>
      <td>Distanza esterna verso sinistra</td>
      <td>px, em, mm, in, pt, pc, %</td>
    </tr>
  </tbody>
</table>

N.B. Per il calcolo degli elementi di un layout è necessario considerare **tutti i componenti**, ossia la larghezza del testo o dell’immagine (*width*), più la distanza interna *padding* e lo spessore della linea *border-width*, più la distanza esterna *margin*.

## I comandi CSS per i link

Per definire la struttura dei link nel linguaggio CSS puoi stabilire lo **stato di ciascun link** separatamente. Oltre al normale aspetto dei collegamenti puoi scegliere anche il modo in cui il link reagisce passandoci sopra con il mouse, facendo clic su di esso o selezionandolo (ad esempio con il tasto Tab).

```none
a:link   { background-color: black; color: white;}
```

Di norma si apportano modifiche a queste cosiddette **pseudo-classi** per cambiare il colore dei collegamenti ipertestuali. In linea di massima, comunque, tutti i possibili comandi CSS rientrano in queste classi.

<table>
  <thead>
    <tr>
      <th><strong>Comando CSS</strong></th>
      <th><strong>Descrizione</strong></th>
      <th><strong>Possibili valori</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>a:link</td>
      <td>Link allo stato originale</td>
      <td>Combinabile con comandi CSS</td>
    </tr>
    <tr>
      <td>a:hover</td>
      <td>Aspetto del link al passaggio del puntatore del mouse</td>
      <td>Combinabile con comandi CSS</td>
    </tr>
    <tr>
      <td>a:active</td>
      <td>Aspetto del link facendovi clic sopra</td>
      <td>Combinabile con comandi CSS</td>
    </tr>
    <tr>
      <td>a:focus</td>
      <td>Link selezionato, ad esempio con il tasto Tab</td>
      <td>Combinabile con comandi CSS</td>
    </tr>
    <tr>
      <td>a:visited</td>
      <td>Link dopo essere stato visitato</td>
      <td>Combinabile con comandi CSS</td>
    </tr>
  </tbody>
</table>

## I comandi CSS per gli sfondi

Con CSS è anche possibile modificare lo sfondo di un sito web. Per farlo devi scegliere il colore o incorporare un’immagine. Se scegli un’immagine, puoi anche definire altre caratteristiche.

<table>
  <thead>
    <tr>
      <th><strong>Comando CSS</strong></th>
      <th><strong>Descrizione</strong></th>
      <th><strong>Possibili valori</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>background-color</td>
      <td>Colore dello sfondo</td>
      <td>Vedi il paragrafo sui colori</td>
    </tr>
    <tr>
      <td>background-image</td>
      <td>Immagine di sfondo</td>
      <td>URL</td>
    </tr>
    <tr>
      <td>background-attachment</td>
      <td>Lo sfondo si muove facendo scorrere la pagina o rimane fisso?</td>
      <td>scroll, fixed</td>
    </tr>
    <tr>
      <td>background-clip</td>
      <td>Stabilisce l’area in cui applicare le proprietà dello sfondo</td>
      <td>padding-box, corner-box, content-box</td>
    </tr>
    <tr>
      <td>background-position</td>
      <td>Allineamento dell’immagine di sfondo</td>
      <td>top, center, bottom / left, center, right</td>
    </tr>
    <tr>
      <td>background-repeat</td>
      <td>Ripete l’immagine se è più piccola dello sfondo.</td>
      <td>repeat, repeat-x (orizzontale), repeat-y (verticale), space (ripetizione senza taglio), round (ripetizione con ridimensionamento)</td>
    </tr>
  </tbody>
</table>

Questi sono **comandi dettagliati**. È anche possibile nidificarli all’interno del comando principale *background*:

```none
background: white url("http://example.org/image.png")
    repeat-x
```

Questo esempio integra i comandi *background-color*, *background-image* e *background-repeat*.

Consiglio Nella nostra guida trovi le istruzioni per [aggiungere questo sito web alla barra delle applicazioni di Windows 11](https://www.ionos.it/digitalguide/server/configurazione/windows-11-aggiungere-un-sito-alla-barra-delle-applicazioni/). In questo modo puoi accedere sempre e rapidamente alla panoramica di tutti i comandi CSS.


This is a markdown version of: [https://www.ionos.it/digitalguide/siti-web/web-design/comandi-css/](https://www.ionos.it/digitalguide/siti-web/web-design/comandi-css/) for AI/LLM consumption.