CSS: differenza tra . e #

[Valeria75_bis]

A livello pratico che differenza c'è tra la definizione di un CSS tramite . e tramite #

... ok uno rappresenta la classe, ma a livello pratico qual'è la logica corretta da seguire nella definizione di un foglio di stile?

Grazie per l'aiuto

[garlick]

#tuonome{<proprietà e valori>} indica un id. Come ricorda il nome stesso, nella pagina deve esistere un solo elemento con un determinato id. Nella pratica quindi è consigliabile utilizzare l'id per elementi unici, come ad es. per l'header oppure il footer.

.tuonome{<proprietà e valori>} indica invece una classe. In questo caso invece la stessa classe può essere assegnata a svariati elementi nella stessa pagina. E' da usare quindi per elementi che verranno ripetuti più volte all'interno della pagina, come ad esempio paragrafi oppure contenitori vari che devono essere riutilizzati per vari scopi.

[erredeco]

Mi permetto di aggiungere 2 righe riguardo al calcolo della specificità (ovvero quanto è "importante" una dichiarazione CSS), che è diversa per ID e classi:

Io di solito mi attengo a questo schemino:
- selettore universale (*): specificità = 0
- elementi (tag): specificità = 1
- classi e pseudoclassi: specificità = 10
- id: specificità = 100

esempi

p {...} /*specificità 1*/

.classnome p {...} /*specificità: 11*/

#idnome p {...} /*specificità: 101*/

#idnome #idnome2 p.classnome a:hover {...} /*specificità: 222 */

[aleron75]

... ok uno rappresenta la classe, ma a livello pratico qual'è la logica corretta da seguire nella definizione di un foglio di stile?

Ciao,
la logica sarebbe di utilizzare il meno possibile le classi, preferendo a queste l'utilizzo degli id e dei selector. La combinazione di questi ultimi rende spesso non necessario l'uso delle classi.

Questo per mantenere i file (X)HTML quanto più possibile esenti da elementi di presentazione.

Saluti, Alessandro

[Valeria75_bis]

Originariamente inviato da garlick
#tuonome{<proprietà e valori>} indica un id. Come ricorda il nome stesso, nella pagina deve esistere un solo elemento con un determinato id. Nella pratica quindi è consigliabile utilizzare l'id per elementi unici, come ad es. per l'header oppure il footer.

.tuonome{<proprietà e valori>} indica invece una classe. In questo caso invece la stessa classe può essere assegnata a svariati elementi nella stessa pagina. E' da usare quindi per elementi che verranno ripetuti più volte all'interno della pagina, come ad esempio paragrafi oppure contenitori vari che devono essere riutilizzati per vari scopi.

Grazie mille per la spiegazione dettagliata!!!

Ora mi è ben chiara la differenza

[Valeria75_bis]

Originariamente inviato da erredeco
Mi permetto di aggiungere 2 righe riguardo al calcolo della specificità (ovvero quanto è "importante" una dichiarazione CSS), che è diversa per ID e classi:

Io di solito mi attengo a questo schemino:
- selettore universale (*): specificità = 0
- elementi (tag): specificità = 1
- classi e pseudoclassi: specificità = 10
- id: specificità = 100

esempi

Sinceramente non è che abbia capito il concetto di specificità (222, 111 )

[erredeco]

Sinceramente non è che abbia capito il concetto di specificità (222, 111 )

E' molto semplice: se hai due (o più) regole nel CSS che puntano allo stesso elemento, ci sono delle semplici regole che il browser segue per capire quale è la più specifica, ovvero quale "vince". Ti faccio questi 2 esempi per capire:

p { color: red; }
p { color: blue; }

In questo caso il testo contenuto nel

di che colore è? Ovviamente blu, in quanto se hai dichiarazioni identiche, l'ultima "vince" sempre in quanto sovrascrive le precedenti.

ma in questo caso ?

div p { color: red; }
p { color: blue; }

Beh... converrai che il colore dei

contenuti in un <div> non è blu, bensì
rosso (nonostante la dichiarazione del blu venga dopo), e questo perché la prima delle due regole è più specifica

Insomma, per farla breve, più specifica è una regola, maggiore è la sua importanza e maggiore è la preferenza che il browser gli assegna in caso di conflitti.

Quello che ho scritto nel post precedente non è altro che una serie di regole "empiriche" per calcolare la specificità, semplicemente come "somma" di "punteggi" che vanno assegnati a tag, classi e id.

Se ancora la cosa ti è oscura, guarda anche qui:

http://www.stuffandnonsense.co.uk/ar...city_wars.html

[Valeria75_bis]

Chiarissimo!!!! Grazie mille!