Lez.5 - Corso Intermedio Css
Il Cotorno degli Elementi la proprietà outline in un foglio di stile Css
Il Cotorno degli Elementi la Proprietà outline
Il bordo non è l'unico tipo di contorno che possiamo assegnare ai nosti elementi html, esiste un'altro tipo di contorno chiamato outline (contorno).
Outline a differenza del bordo va ad occupare uno spazio che in realtà non influisce sulle dimensione dell'oggetto stesso.
La sintassi di outline è la stessa di border:
outline: 50px solid red;
Ora cerchiamo di capirne il concetto descrivendo il codice sottostante.
Per prima cosa notiamo che l'oggetto non si sposta, il contorno viene applicato regolarmente, e la zona rossa, quella sopra, che non si vede è solo perché esce fuori dalla pagina stessa.
Ora per vedere come si comporta outline provate a cambiare il margin del div in questione in questa maniera:
margin: 100px auto; quindi vediamo che se gli applichiamo un margine, lo dotiamo di una spaziatura verso l'esterno e la facciamo di 100px in verticale, e auto in orizzontale per centrarlo nella pagina, ci rendiamo conto che esce tutto il contorno e salta fuori anche l'oggetto sotto.
Per fare un riepilogo: l'oggetto ha un bordo di 50px per lato di colore nero, questo influisce sulla sua dimensine e quindi sullo spazio occupato.
All'esterno del bordo vado a dare un outline di 50px. L'outline a differenza del border non occupa spazio, quindi se io avessi due oggetti attaccati vedrei che il bordo di tutti e due gli oggetti sarebbe distinguibile ma l'outline si fonderebbe con l'outline dell'altro oggetto di fianco.
IMPORTANTE dando una dimensione X al margine come: margin: Xpx Xpx; il margine sposta l'elemento non modificandone la dimensione, mentre dando una dimensione X ad outline come: outline: Xpx solid cyan; non sposta l'elemento e se la dimensione X è molta alta copre l'elemento vicino.
Il codice:
Outline a differenza del bordo va ad occupare uno spazio che in realtà non influisce sulle dimensione dell'oggetto stesso.
La sintassi di outline è la stessa di border:
outline: 50px solid red;
Ora cerchiamo di capirne il concetto descrivendo il codice sottostante.
Per prima cosa notiamo che l'oggetto non si sposta, il contorno viene applicato regolarmente, e la zona rossa, quella sopra, che non si vede è solo perché esce fuori dalla pagina stessa.
Ora per vedere come si comporta outline provate a cambiare il margin del div in questione in questa maniera:
margin: 100px auto; quindi vediamo che se gli applichiamo un margine, lo dotiamo di una spaziatura verso l'esterno e la facciamo di 100px in verticale, e auto in orizzontale per centrarlo nella pagina, ci rendiamo conto che esce tutto il contorno e salta fuori anche l'oggetto sotto.
Per fare un riepilogo: l'oggetto ha un bordo di 50px per lato di colore nero, questo influisce sulla sua dimensine e quindi sullo spazio occupato.
All'esterno del bordo vado a dare un outline di 50px. L'outline a differenza del border non occupa spazio, quindi se io avessi due oggetti attaccati vedrei che il bordo di tutti e due gli oggetti sarebbe distinguibile ma l'outline si fonderebbe con l'outline dell'altro oggetto di fianco.
Il codice:
<!DOCTYPE html>
<html lang="it">
<head>
<title>Border</title>
<meta charset="utf-8">
<style type="text/css">
div {
background-color: cyan;
width: 200px;
height: 200px;
margin: 50px 50px;
outline: 100px solid red;
border: 50px solid black;
}
h1 {
background-color: yellow;
margin-left: 150px;
outline: 75px solid cyan;
}
h2 {
background-color: chartreuse;
outline: 50px solid green;
margin: 50px;
}
</style>
</head>
<body>
<div>
Contenuto del div
</div>
<h1>Outline 1</h1>
<h2>Outline 2</h2>
</body>
</html>