css base

[lillop]

css base

Salve

Sono un neofila di css e vorrei capire bene delle info di base.
Ho letto 3000 guide ma non riesco a trovare una risposta alle mie domande.

In Xhtml si creano i <div id="prova"></div>
In css #prova { si danno le specifiche}

Ora all'interno di questo div devo scrivere del testo di 5 righe.
Questo testo va diviso in 3 parti.

1. Il titolo di font verdana, colore rosso e in grassetto
2. testo font Arial colore nero
3. Spazio di un rigo, sulla destra un testo con un link ipertestuale

[karedas]

Ciao lillop

Non fai altro che riferirti agli elementi usando delle sub-parentele.

Usando quindi un esempio reale:
[html]
<div id="prova">
<h1>Titolo</h1>
<p>Questo è il testo all'interno di un tag per paragrafo
<a href="destinazione.html"> Questo invece è un link</a>
</p>
</div>
[/html]A nostra volta ci riferiremo ai tag ( o alle classi o id se ce ne fossero) in questa maniera:

#prova{...attributi sul div} h1{ font-family:"verdana"; color:red;} p{ font-family:Arial;}

Non serve altro
Puoi fare dei riferimenti in questo modo in maniera infinitesimale, ovvio che però per una questione di praticità e pulizia codice si vadano a "filtrare" in maniera diversa.

In ogni caso altri esempi qui di seguito:

h1 span{} // si riferisce al tag span all'interno dell'h1.
div * {}// si riferisce a tutti gli elementi all'interno di un div generico
div.prova{} // si riferisce al div di classe prova. Senza la clausola "div" davanti si riferisce a tutti quegli elementi che hanno solo quella classe senza indirizzarsi solo ai div.

Ecc ecc

[lillop]

Scusami se ti rispondo solo ora, ma sono stato fuori casa.

Nel tuo esempio che riporto:

<div id="prova">
<h1>Titolo</h1>
<p>Questo &egrave; il testo all'interno di un tag per paragrafo
<a href="destinazione.html"> Questo invece &egrave; un link</a>
</p>
</div>

#prova{...attributi sul div} h1{ font-family:"verdana"; color:red;} p{ font-family:Arial;}

e se volessi dare delle impostazione a livello generale ad <h1>?
#h1 {...attributi}
Vale anche all'interno del div prova?

[supercapocc]

a livello generale

h1 {attributi}

[karedas]

Esatto, come Supercapocc fa notare la differenza si basa su differenze fondamentali:

#abc // si usa l'asterisco per gli id
.abc // si usa il punto per le classi

Per riferirti ai tag basta unicamente richiamarli con la sintassi citata da supercapocc.

Tag:
h1{}
a{} oppure a:hover{} oppure a:link etc
div{}
b{}

h1 span{}

Questi sono tutti casi singoli o incanalati dei riferimenti ai tag.

[supercapocc]

a proposito di id e class, perchè usare questa differenza ?
ho letto che si usa un id per identificare con precisione un solo elemento, poi vedo lo stile di molti csm con una sfilza di #
anche i template di splinder, per esempio.

sono un pò perplesso

[jess]

@supercapocc said:

a proposito di id e class, perchè usare questa differenza ?
ho letto che si usa un id per identificare con precisione un solo elemento, poi vedo lo stile di molti csm con una sfilza di #
anche i template di splinder, per esempio.

sono un pò perplesso

Me lo sono chiesto anch'io. Personalmente uso per css sopratutto class e solo se c'è un eccezione anche id. Id uso più per javascript dove è spesso importante identificare un elemento preciso.

Jess

[berry]

@Jess said:

a proposito di id e class, perchè usare questa differenza ?
ho letto che si usa un id per identificare con precisione un solo elemento, poi vedo lo stile di molti csm con una sfilza di #
anche i template di splinder, per esempio.

Jess

con tanti # ma probabilmente tutti con un nome diverso