Container id e class in CSS

Un container non è altro che una descrizione in codice del bordo. Uno spazio vuoto nel quale il browser non riconosce niente. Come container si possono utilizzare i tag: <div>, <p> o <span>.

Un container viene identificato tramite un id, ha una larghezza (width:300px), un’altezza (height:140px) e un z-index (sequenza).

Il valore standard per la posizione e la grandezza è impostato in pixel (px). Si possono utilizzare anche altre unità: pc (pica), pt (point), in (inch), mm (millimetri), cm (centimetri) o % (percentuale) e em.

Esempio

<div id="layer1" style="position: absolute;
width: 300px;
height: 150px;
z-index:1;
background-color: #000000;
border: 1px solid #FFFFFF;"></div>

Con left: 60px e top: 40px si imposta il margine rispettivamente verso sinistra in alto. In questo modo un container può essere posizionato perfettamente.

Esempio

<div id="layer1" style="position: absolute;
width: 300px;
height: 150px;
z-index:1;
background-color: #000000;
border: 1px solid #FFFFFF; left: 60px; top: 40px;"></div>

Centrare: non vi è un comando diretto per centrare un layer in css. Però si può centrare un testo o un\’immagine. Quindi si introduce “text-align: center” nel tag “body“. In questo modo però tutti gli elementi nella pagina vengono centrati. Per evitare ciò si imposta che il contenuto del layer venga impostato a sinistra con “text-align: left“. Inoltre si impostano i margini della pagina (margin) su auto.

Codice per il tag “body”:

<body style="margin: 10px 0px;
padding: 0px;
text-align: center;">

<div id="layer" style="width: 500px;
height: 4000px;
border: 1px solid #FFFFFF;
margin: 0px auto;
text-align: left;
padding: 8px;">Contenuto del layer</div>

Una classe viene utilizzata in modo generico, può essere presente più volte in una pagina. Un id invece è più speciale, può essere presente solamente una volta in una pagina e nella gerarchia CSS sono più importanti. Un id può essere utilizzato con Javascript e hyperlinks.

<div style="width: 260px;
border: 1px solid black;
background-color: #DEDEDE;
font-family: verdana;
font-size: 12px;">

<div style="border: 0px solid black;
width: 16px;
height: 16px;
background-color: #FFCC00;
float: right;"> </div>

<div style="padding: 10px;">CONTENUTO</div>
</div>

La casella con testo bordo ed angolino viene visualizzata correttamente da tutti i browser.