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.

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

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:

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

Sul sito web CANIUSE è possibile verificare gratuitamente la compatibilità dei comandi CSS con tutti i browser più diffusi.

Per la progettazione di siti web responsive si sono aggiunti ad esempio CSS Flexbox, CSS Grid e le media query 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. 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.

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:

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.

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ì:

.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.

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:

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.

Informazioni dettagliate sulle unità di misura da utilizzare per font-size si trovano nella guida Tipografia nel responsive web design.

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:

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 è:

img { border: 5px solid #000080; }

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

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.

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:

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.

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).

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.

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.

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

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

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