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.

Il titolo di font verdana, colore rosso e in grassetto
testo font Arial colore nero
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