Nelle scorse settimane abbiamo analizzato le proprietà dei fogli di stile CSS dedicate alla gestione dei bordi (border-style, border-color e border-width). In questa guida analizzeremo invece le proprietà della famiglia Outline che hanno diverse analogie con i bordi ma scopi differenti.
Outline in CSS
Outline è una proprietà dei fogli di stile CSS che serve ad evidenziare un elemento. Si può immaginare Outline come una una linea di contorno gerarchicamente esterna al bordo: in altre parole se per uno stesso elemento nel CSS è stato definito sia un bordo che un outline, quest’ultimo sarà esterno al bordo. Associando un outline ad un evento è possibile evidenziare alcune parti di una pagina come accade ad esempio quando in un modulo non si è compilato uno dei campi obbligatori.
La proprietà ‘outline’ permette di definire tutte le proprietà del contorno in forma sintetica; in particolare la proprietà accetterà tre valori così definiti:
p {
outline: spessore stile colore;
}
Lo spessore può essere definito con una delle unità di misura riconosciute nei fogli di stile CSS o con i valori generici thin, medium e thick già visti per i bordi. Allo stesso modo il colore può essere espresso con una delle notazione di cui abbiamo parlato in questa guida. Per quanto riguarda invece lo stile dell’outline è possibile scegliere i valori none, dotted, dashed, solid, double, groove, ridge, inset ed outset il cui significato è analogo a quanto visto per i bordi.
Un codice di esempio
Tenendo in conto la struttura descritta sopra un semplice codice di esempio per un Outline in CSS potrebbe essere di questo tipo:
p {
outline: double 3px red;
}
che produce un contorno con linea doppia, uno spessore di 3 pixel e di colore rosso. Ricordiamo infine che i tre valori della proprietà Outline possono essere definiti anche autonomamente utilizzando le proprietà outline-width (spessore) outline-style (stile) e outline-color (colore):
p {
outline-style: double;
outline-width: 3px;
outline-color: red;
}