Originalmente inviato da sugandbibi
Ora veniamo a quegli elelemtni che non sono unici nel documento, ovvero a tutti i figli di <body> cioè: <img>, <a>, <div>, <span> e chi più se ne ricorda ne metta.
La classe non è un privilegio, Id è un privilegio, far divenire PADRE un elemento non è solo un nobile sentimento del creatore, ma serve a dare certi privilegi all'elemento.
Ovviamente non è affatto necessario, un padre (anzi un patriarca) lo abbiamo già è <body> (tralasciamo <html> per ora, ma a volte è interessante e importante avere un elemento padre all'interno della stessa discendenza.
Mettiamo un caso, volete creare un layer contenitore per una serie di altri contenitori e porlo al centro della pagina, conviene definirlo come un identificatore, perchè è il genitore di una serie di figli (o anche nessuno non fa nulla), quindi lo definisco così:
Codice:
div#corpo {
margin: 10px auto; /* lo centro alla grande */
height: 300px;
width: 90%;
border: 1px solid red;
}
Quindi lo implemento nella pagina come figlio di <body>
Codice:
<div id='corpo'>
... bla bla ...
</div>
Ok, ora ho un box bordato di rosso che mi gira sulla pagina (de gustibus ... )
Poi voglio che dentro questo box ci sia un header <h> figlio di questo e non globale, perchè voglio che le impostazioni per questo elemento rimangano legate a quel liello e non ad altri, quindi:
Codice:
segue da sopra
div#corpo h1 {
font-size: 1.8em;
text-align: center;
text-decoration: underline;
}
Quindi nel codice della pagina:
Codice:
<div id='corpo'>
<h1>Bello grande e sottolineato!</h1>
</div>
Cosa succede ora?
Che h1 ha preso i metodi (object oriented programming) di "corpo" e si è adattato a quelle "impostazioni" che avevamo creato per lui.
Se scriviamo:
Codice:
<div id='corpo'>
<h1>Bello grande e sottolineato!</h1>
</div>
<h1>Brutto e zoppo</h1>
[...]
