Entra

View Full Version : [HTML + CSS] Piccolo aiuto per sotto-classi css


VegetaSSJ5
03-01-2008, 15:23
Salve a tutti e buon anno nuovo! :)
Scusate per la banalità della domanda ma non riesco a venirne a capo (ho googlato solo qualche minuto...).

Ho questa porzione di pagina html:<div id="articolo01" class="articolo">
<div class="title">TITOLO</div>
<div class="genre">GENERE</div>
<div class="argument">ARGOMENTO</div>
<div class="regia">REGIA</div>
<div class="description">DESCRIZIONE</div>
</div>
Vorrei dare uno stile ad ogni sottoclasse di articolo, e cioè title, genre, argument, regia e description.
Nel rispettivo foglio di stile ho una cosa del genere:.articolo {
margin-top: 20px;
}

.articolo.title {
font-weight : bold;
}
In effetti su ogni elemento della classe articolo mi applica correttamente il margin-top: 20px;, però per la sottoclasse title non mi visualizza il testo in bold. Come si dichiara correttamente nel foglio di stile questa cosa?

Grazie.

qwerty86
03-01-2008, 15:54
.articolo {
margin-top: 20px;
}

.title {
font-weight : bold;
}

Prova così....:)

D4rkAng3l
03-01-2008, 16:39
mmm non sò se ho capito ma con

.articolo {
margin-top: 20px;
}


stai dando un margine superiore di 20 pixel a qualsiasi tag che appartiene alla classe articolo che però non esiste nel tuo codice HTML in quanto le classi presenti sono: title, genre, argument, regia e description.
Casomai c'è un tag div con id articolo01 ma se volevi settare il margine superiore a quello avresti dovuto scrivere:

#articolo01{
margin-top: 20px;
}


Poi per settare ognuna delle lo stile di ognuna delle classi fai così:


.title {
font-weight : bold;
}
.genre{
caratteristiche che tu vuoi;
}
.argument{
caratteristiche che tu vuoi;
}
.regia{
caratteristiche che tu vuoi;
}
.description{
caratteristiche che tu vuoi;
}


Ti consiglio di dare una letta a questo: http://css.html.it/guide/leggi/2/guida-css-di-base/
fatto veramente molto bene...in relazione alla domanda da te fatta datti una letta ai capitoli:
8. I selettori
9. Id e classi: due selettori speciali

Ciao
Andrea

qwerty86
03-01-2008, 17:28
mmm non sò se ho capito ma con

.articolo {
margin-top: 20px;
}


stai dando un margine superiore di 20 pixel a qualsiasi tag che appartiene alla classe articolo che però non esiste nel tuo codice HTML in quanto le classi presenti sono: title, genre, argument, regia e description.
Casomai c'è un tag div con id articolo01 ma se volevi settare il margine superiore a quello avresti dovuto scrivere:

#articolo01{
margin-top: 20px;
}


Poi per settare ognuna delle lo stile di ognuna delle classi fai così:


.title {
font-weight : bold;
}
.genre{
caratteristiche che tu vuoi;
}
.argument{
caratteristiche che tu vuoi;
}
.regia{
caratteristiche che tu vuoi;
}
.description{
caratteristiche che tu vuoi;
}


Ti consiglio di dare una letta a questo: http://css.html.it/guide/leggi/2/guida-css-di-base/
fatto veramente molto bene...in relazione alla domanda da te fatta datti una letta ai capitoli:
8. I selettori
9. Id e classi: due selettori speciali

Ciao
Andrea

Guarda che la classe generica .articolo è usata proprio dal tag div con id= articolo01 e class articolo , diciamo che poteva evitare di usarli entrambi , nebasta uno.:)

VegetaSSJ5
03-01-2008, 19:22
che idiota che sono! :doh:
avevo provato in tutti i modi tranne col seguente, che funziona... :stordita:.articolo .title {
font-weight : bold;
}
in pratica ci va lo spazio tra la classe generica (articolo) e la sottoclasse (title) :p

stai dando un margine superiore di 20 pixel a qualsiasi tag che appartiene alla classe articolo che però non esiste nel tuo codice HTML
c'è c'è! cerca bene! :D

qwerty86
03-01-2008, 19:39
si facendo

.articolo .title

stai usando un selettore contestuale , in pratica lo style viene applicato a tutti i tag kon la classe title che discendono dal tag della classe articolo anche se non è un figlio diretto. Se vuoi che venga applicato solo al figlio diretto devi usare

.articolo > .title

VegetaSSJ5
03-01-2008, 19:48
in pratica lo style viene applicato a tutti i tag kon la classe title che discendono dal tag della classe articolo anche se non è un figlio diretto
intendi dire che non necessariamente l'oggetto della classe title deve essere figlio di articolo, ma può essere anche un nipote di 3° grado?! :D

grazie per le info. sai dirmi dove trovarle sul web? non sono riuscito a trovare nulla...

D4rkAng3l
03-01-2008, 20:08
che idiota che sono! :doh:
avevo provato in tutti i modi tranne col seguente, che funziona... :stordita:.articolo .title {
font-weight : bold;
}
in pratica ci va lo spazio tra la classe generica (articolo) e la sottoclasse (title) :p


c'è c'è! cerca bene! :D

certo che pure io sò rincojonito...abbiate pazienza e scusatemi...dopo 3 ore di studio per l'esame di database stò fuso :D

D4rkAng3l
03-01-2008, 20:10
intendi dire che non necessariamente l'oggetto della classe title deve essere figlio di articolo, ma può essere anche un nipote di 3° grado?! :D

grazie per le info. sai dirmi dove trovarle sul web? non sono riuscito a trovare nulla...

Forse ti può essere utile? http://css.html.it/guide/lezione/21/i-selettori/

qwerty86
03-01-2008, 20:14
Forse ti può essere utile? http://css.html.it/guide/lezione/21/i-selettori/

Si dai un'occhiata qui:)

VegetaSSJ5
03-01-2008, 20:15
Forse ti può essere utile? http://css.html.it/guide/lezione/21/i-selettori/
grazie grazie! molto utile! ;)