[CSS] Piccolo chiarimento

[D4rkAng3l]

Sono un novizio dei CSS...ho appena iniziato la guida di html.it

Ditemi se ho capito bene, facendo riferimento a questo esempio fatto sulla guida


/* Definisco le regole per il corpo del documento */
body {
background: White; /* Prima dichiarazione: notate il punto e virgola finale!*/
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; /* Seconda dichiarazione*/
font-size: 12px; /* Terza dichiarazione */
}

/* Titolo di primo livello */
h1 {
color: black;
}

/* Paragrafo generico */
p {
color: black;
font: 12px/1.5 Georgia, "Times New Roman", serif;
}


#div1 {
background: Silver; /* Sfondo colr argento */
width: 300px;
}

#div2 {
background: Silver;
width: 300px;
position: absolute;
top: 400px;
left: 400px;
}


Per prima cosa dice le caratteristiche che devono rispettare tutti gli elementi contenuti nel body ovvero: sfondo bianco, i tipi di caratteri potranno essere: Verdana, Geneva, Arial, Helvetica, sans-serif (ma in base a cosa? cioè il carattere standard è il Verdena, se poi uno non ha il Verdena allora userà l'Arial, se non c'ha manco l'Arial userà l'Helevetica e così via?) e poi imposta a 12 px la dimensione del testo nel body.

Successivamente stabilisce la regola che definisce le caratteristiche di TUTTI i titoli di prigmo livello dicendo solo che il colore dei titoli di primo livello è nero, le altre caratteristiche le eredità dalla regola del body, giusto?

Poi specifica con un'altra regola le caratteristiche di tutti i paragrafi generici e vengono cambiate alcune cose rispetto al body come la dimensione del testo e la famiglia di caratteri da usare, giusto?

La cosa che mi sfugge è questa parte:


#div1 {
background: Silver; /* Sfondo colr argento */
width: 300px;
}

#div2 {
background: Silver;
width: 300px;
position: absolute;
top: 400px;
left: 400px;
}


ma in pratica che fà? stabilisce le regole per un determinato div1 e per un altro specifico div2 che avranno caratteristiche diverse? è per quello che ci mette il #? o si tratta di "famiglie" di div? ovvero quando poi nel body avrò i miei vari div essi potranno essere di tipo div1 oppure di tipo div2 e avere caratteristiche in base alla loro appartenenza...come funziona questa cosa?

Spero di averci capito qualcosa :-/

Grazie
Andrea

[khamel]

#div1 significa che qualsiasi tag che avrà id="div1" avrà quelle caratteristiche di visualizzazione

Ciao

[D4rkAng3l]

#div1 significa che qualsiasi tag che avrà id="div1" avrà quelle caratteristiche di visualizzazione

Ciao

eh quindi è come dicevo io? divide tutti i tag in classi di equivalenza e quelli che appartengono alla classe div1 hanno quelle caratteristiche...così?

[khamel]

nono.. per fare come dici te, cioè indicare la classe, si usa il . quindi sarebbe stato cosi

.div1

usando il # invece si indica il valore dell'attributo "id" del tag. Ti faccio un esempio

<div id="div1"></div>

Tieni conto che il valore dell'attributo id deve essere univoco all'interno della pagina

[D4rkAng3l]

quindi prima devo dichairare tipo una classe div1
poi con:
[code]
#div1 {
background: Silver; /* Sfondo colr argento */
width: 300px;
}
[/div1]
attribuisco i valori dello stile per la classe div1

ho capito stavolta?

Grazie

[khamel]

No.. stavolta ti faccio un esempio completo.

Se crei il div cosi (utilizzando l'attributo id)

<div id="div1"></div>

allora devi fare il css cosi

#div1 {
background: Silver; /* Sfondo colr argento */
width: 300px;
}

Se crei il div cosi (utilizzando l'attributo class)

<div class="div1"></div>

allora devi fare il css cosi

.div1 {
background: Silver; /* Sfondo colr argento */
width: 300px;
}

Capito?

[D4rkAng3l]

ah ok perfetto...ma la differenza stà che se creo il div con:

<div id="div1"></div>

ci sarà un solo div1

mentre se lo creo con:
<div class="div1"></div>

è come se creassi una classe di div di tipo div1 che avranno tutti le stesse caratteristiche?

[khamel]

Esatto!

Ah ti dico una cosa, il fatto che il valore dell'attributo id sia univoco non è sempre vero, per esempio se creando due elementi con lo stesso id certi browser te la fanno passare liscia, altri no, in linea di massima è sempre consigliabile usare l'attributo id in maniera univoca, anche perchè in questo modo puoi sfruttare da javascript la funzione

document.getElementById()

e tante altre legate all'id dell'elemento

Ciao

[D4rkAng3l]

ok ora ho capito...

mentre invece se faccio una cosa del genere dentro un file CSS


h1 {color: #000000;}
p {background: white; font: 12px Verdana, arial, sans-serif;}
table {width: 200px;}


stò dicendo che TUTTI i tag h1 hanno carattere nero
che tutti i paragrafi del documento hanno sfondo bianco, carattere di 12 px e caratteri di tipo Verdena (se non c'è il verdena usa l'arial e se non c'è l'arial il san serif)
e tutte le tabbelle hanno larghezza di 200 px

giusto?

[khamel]

Si giusto