CSS, la proprietà Outline

di Michele Costanzo Commenta

CSS Outline
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;
   }

Lascia un commento

Il tuo indirizzo email non verrà pubblicato.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>