livelli e classi

[atomicants]

ho un dubbio:

è corretto definire nel foglio di stile esterno una classe del tipo:

.mia {text-align:center;
margin:0px;
font-size:11px;
font-family:Arial, Helvetica, sans-serif;
font-weight: bold;
color:66ccff;
}

e applicarla poi a dei livelli specificando di volta in volta le dimensioni in questo modo:

<div class="mia" style="width:500px; height:200px; overflow:hidden">

e, nell' ipotesi che sia corretto farlo, cosa succede se nello stile del livello si dichiara una caratteristica già presente nella classe?

(ad es: <div class="mia" style="font-size:14px; width:500px; height:200px; overflow:hidden"> )

grazie!

[pela]

si può fare e la proprietà presente all'interno del livello sovrascrive quella della classe

[Francis87]

a questo punto di conviene usare gli ID ke sono univoci cioè puoi usarli solo x UN elemento

<div id="mioid">

e lo rikiami nello stile così:

#mioid
{
font-family: arial;
...
}

e qui dentro aggiungi anke width e height così ottieni un codice più pulito!

non ci sono problemi se scrivi di nuovo un attributo, purchè i valori non siano contrastanti

[atomicants]

uh, questo è proprio interessante:

chiaritemi meglio in questo esempio la differenza fra usare una classe o un id...



mi sembra di capire che a differenza delle classi, "aggiungere" stile a un id sia scorretto

(es. <div id="mioid" style="ecc... ecc.....)

[iguane]

Originariamente inviato da atomicants
uh, questo è proprio interessante:

chiaritemi meglio in questo esempio la differenza fra usare una classe o un id...



mi sembra di capire che a differenza delle classi, "aggiungere" stile a un id sia scorretto

(es. <div id="mioid" style="ecc... ecc.....)

allora se usi gli ID

#IGU{... codice stile}

<div id="Igu">....</div>

Questo però ti costringe se vuoi rispettare le regole e ridefinire tutte le volte n blocchi magari uguali per il 90% dello stile.

Es pratico:

#IGU{
font-size:8pt;
position:absolute;
background-color:#FF0000;
widht:10px;
}

#IGU2{
font-size:8pt;
position:absolute;
background-color:#FF0000;
width:30px;
}


<div id="Igu">....</div>
<div id="Igu2">....</div>

In questo modo il 95% dello style è ripetuto e questo ti posta ad un appesantimento del css.

Quindi la scelta dipende da quello che devi fare tu la stessa cosa di sopra la puoi scrivere così-

.colore{
font-size:8pt;
position:absolute;
background-color:#FF0000;
}

#IGU{
width:400px;
}

#IGU2{
width:30px;
}


<div id="Igu" class="colore">....</div>
<div id="Igu2" class="colore">....</div>

In questo secondo modo se in un futuro devi cambiare il colore lo cambi in un unico punto e il tutto risulta più leggero

[pela]

si può comunque aggiungere stile ad un id, soltanto che non è utile, infatti solo un elemento nella pagina può avere un certo id, quindi si possono impostare tutti i suoi stili direttamente nel css esterno (tanto sei sicuro che si applicano solo a quell'elemento)

azz... troppo tardi

[atomicants]

siete stati chiarissimi ragazzi!
Grazie!

[atomicants]

alla fine ho seguito il consiglio di iguane.

Ho due livelli con alcune cose in comune:

<div id="riqua1" class="home">
......
<div id="riqua2" class="home">

in style.css

.home {position: absolute;
overflow: hidden;
background-color:black;
margin:0px;
padding:0px;
height: 180px;
}
#riqua1 {top:25px;
left:10px;
margin:0px;
padding:0px;
width:760px;
background-image:url(fondodown.jpg);
background-position:bottom left;
background-repeat:repeat-x;
}
#riqua2 {position: absolute;
top:275px;
left:10px;
width:450px;
}

nella classe home avevo anche formattato il testo, solo che nei livelli ho messo tabelle, che non prendono la formattazione del box in cui sono contenute (domanda, come mai?!?)
Ho quindi usato la classe nella tabella:

<table width=760px class="testo5">

grazie ancora!

[iguane]

Originariamente inviato da atomicants
alla fine ho seguito il consiglio di iguane.

Ho due livelli con alcune cose in comune:

<div id="riqua1" class="home">
......
<div id="riqua2" class="home">

in style.css

.home {position: absolute;
overflow: hidden;
background-color:black;
margin:0px;
padding:0px;
height: 180px;
}
#riqua1 {top:25px;
left:10px;
margin:0px;
padding:0px;
width:760px;
background-image:url(fondodown.jpg);
background-position:bottom left;
background-repeat:repeat-x;
}
#riqua2 {position: absolute;
top:275px;
left:10px;
width:450px;
}

nella classe home avevo anche formattato il testo, solo che nei livelli ho messo tabelle, che non prendono la formattazione del box in cui sono contenute (domanda, come mai?!?)
Ho quindi usato la classe nella tabella:

<table width=760px class="testo5">

grazie ancora!

Perchè il tag <table> non eredita le impostazione dell'elemento padre. devi ridefinirle oppure se sono proprio identiche assegni la classe alla table.

[cantard]

Per la formattazione del testo diventa anche interessante creare delle classi da associare ai tag

e <span> <h1> e così via, piuttosto che agli elementi contenitori...