I comandi CSS: le istru­zio­ni uti­liz­za­te più spesso

Per la creazione di siti web è ne­ces­sa­ria una gran varietà di comandi CSS. In questo articolo ti pre­sen­tia­mo una pa­no­ra­mi­ca dei comandi CSS più im­por­tan­ti e più uti­liz­za­ti, 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 ini­zial­men­te i comandi CSS servivano a definire i tipi e i colori dei caratteri, a mi­glio­ra­re l’aspetto delle tabelle o a disporre i testi intorno agli elementi, con il tempo le pos­si­bi­li­tà sono aumentate molto. Oggi, con i comandi CSS è possibile creare gradienti di colore, ri­ta­glia­re immagini, ag­giun­ge­re ombre, ar­ro­ton­da­re gli angoli e inserire ani­ma­zio­ni.

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

Insieme, la proprietà e il valore formano la co­sid­det­ta di­chia­ra­zio­ne.

Chi scrive in CSS dovrebbe ricordare sempre che, no­no­stan­te i molti mi­glio­ra­men­ti e al­li­nea­men­ti, non tutti i browser sono in grado di “capire” tutto. Per questo motivo in CSS sono di­spo­ni­bi­li i co­sid­det­ti prefissi browser che per­met­to­no ai comandi di ri­vol­ger­si 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 ve­ri­fi­ca­re gra­tui­ta­men­te la com­pa­ti­bi­li­tà dei comandi CSS con tutti i browser più diffusi.

Per la pro­get­ta­zio­ne di siti web re­spon­si­ve si sono aggiunti ad esempio CSS Flexbox, CSS Grid e le media query che con­tri­bui­sco­no 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 di­spo­ni­bi­li comandi CSS per i singoli com­po­nen­ti di un sito web. Quasi ogni elemento può essere dotato di un colore o ad­di­rit­tu­ra di un gradiente di colore.

Le pos­si­bi­li­tà per indicare i valori cromatici

• Codice esa­de­ci­ma­le: #63f0ac
• Nomi dei colori: red, green, blue, coral, white, black …
• RGB: rgb(238,130,238) e tra­spa­ren­za RGB con rgba(238,130,238, 0.7)
• HSL con tra­spa­ren­za: hsla(140,20%,50%,0.5) -Hue (tonalità) da 0 a 360 gradi sulla ruota dei colori -Sa­tu­ra­tion (sa­tu­ra­zio­ne): da 0% (incolore) a 100% (massima intensità del colore) -Lightness (lu­mi­no­si­tà): da 0% (nero) a 100% (bianco) -Valore numerico della tra­spa­ren­za fino a 1.0 = copertura di colore totale

Esempi di de­fi­ni­zio­ne 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 uti­liz­za­re i gradienti di colore, un tempo dovevi ricorrere a immagini sotto forma di file, mentre oggi puoi crearli fa­cil­men­te con un comando CSS. A tal fine, utilizza l’istru­zio­ne back­ground-image: gradient o, in forma breve, back­ground: gradient. Il comando gradient rap­pre­sen­ta un valore per un’immagine senza di­men­sio­ni e crea un gradiente di colore che puoi cambiare in de­ter­mi­na­ti punti.

La tabella mostra solo una parte degli attributi possibili. Per i dati dei colori è possibile uti­liz­za­re tutti i valori più comuni, compresi i valori cromatici con tra­spa­ren­za.

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 uti­liz­za­to.

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

Questa istru­zio­ne CSS rie­pi­lo­ga­ti­va si può scomporre nei suoi singoli com­po­nen­ti seguendo l’ordine delle in­for­ma­zio­ni indicate:

La de­fi­ni­zio­ne della font-family (famiglia dei font) per il corpo del sito web viene ereditata in tutte le istru­zio­ni su­bor­di­na­te. Il colore del carattere non è definito da un’istru­zio­ne font, ma da color:tipo-di-colore.

In­for­ma­zio­ni det­ta­glia­te sulle unità di misura da uti­liz­za­re per font-size si trovano nella guida Ti­po­gra­fia nel re­spon­si­ve web design.

I comandi CSS per l’aspetto dei testi

Oltre al tipo di carattere, al colore e alle di­men­sio­ni del testo, anche altri dettagli ti­po­gra­fi­ci sono im­por­tan­ti per la leg­gi­bi­li­tà 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, ana­lo­ga­men­te a font, racchiude più proprietà tutte insieme.

Esempio: un’immagine (con il tag HTML img) deve essere cir­con­da­ta 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 per­met­to­no di po­si­zio­na­re sin­go­lar­men­te le linee lungo i singoli angoli di un’immagine o di un ret­tan­go­lo con gli stessi attributi uti­liz­za­ti 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 suc­ces­si­vo

La distanza interna

Con padding (in italiano, “im­bot­ti­tu­ra”) puoi definire la distanza di un blocco di testo o di un’immagine dal bordo cir­co­stan­te. 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 con­ten­go­no 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 suc­ces­si­vo, 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 lin­guag­gio CSS puoi stabilire lo stato di ciascun link se­pa­ra­ta­men­te. Oltre al normale aspetto dei col­le­ga­men­ti puoi scegliere anche il modo in cui il link reagisce pas­san­do­ci sopra con il mouse, facendo clic su di esso o se­le­zio­nan­do­lo (ad esempio con il tasto Tab).

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

Di norma si apportano modifiche a queste co­sid­det­te pseudo-classi per cambiare il colore dei col­le­ga­men­ti iper­te­stua­li. In linea di massima, comunque, tutti i possibili comandi CSS rientrano in queste classi.

I comandi CSS per gli sfondi

Con CSS è anche possibile mo­di­fi­ca­re lo sfondo di un sito web. Per farlo devi scegliere il colore o in­cor­po­ra­re un’immagine. Se scegli un’immagine, puoi anche definire altre ca­rat­te­ri­sti­che.

Questi sono comandi det­ta­glia­ti. È anche possibile ni­di­fi­car­li all’interno del comando prin­ci­pa­le back­ground:

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

Questo esempio integra i comandi back­ground-color, back­ground-image e back­ground-repeat.