Informazioni sulle classi

[violentoweb]

Ragazzi chi saprebbe spiegarmi in parole povere cosa sono le classi che non mi è ben chiaro?

[Mich_]

http://css.html.it/guide/lezione/22/...tori-speciali/

[violentoweb]

Originariamente inviato da Mich_
http://css.html.it/guide/lezione/22/...tori-speciali/

Veloce come il vento! Grazie mille ora me le studio!!

Faccio un esempio per vedere se ho capito bene, correggetemi se sbaglio.

Nel css che creo io scrivo:

<style type="text/css">
.verde {
font: 10px verdana, Helvetica, sans-serif;
color: #green;
}
</style>

poi nella pagina, quando voglio che il testo sia un verdana di 10 px verde basta che scrivo:

<p class="verde">....</p>

e lui in automatico mi va a leggere il css e mi mette il testo racchiuso fra <p class="verde"> e </p> in verde scritto con carattere verdana a 10 px giusto??

E queste classi posso usarle quante ne voglio su una pagina, mentre per gli ID li dovrei usare solamente se una pagina mettiamo abbia tutto il testo scritto stesso carattere stesso colore, ovviamente per dove è applicato l'id, perchè lo posso usare solamente una volta giusto?

Sul css scrivo:

#testo {color: red;}

e sulla pagina richiamo con questo codice:

<h1 id="testo">...</h1>

Mi sorge una domanda, ma nell'id, posso mettere la formattazione del testo il tipo di carattere ecc, come nella classe??

Grazie!

[Mich_]

1. Attenzione alla sintassi:
color: green;
oppure
color: #00ff00;
oppure
color: rgb(0,255,0);

il cancelletto introduce il codice colore esadecimale, non il suo nome (dove esiste)


2. il ragionamento fila dal punto di vista logico, ha qualche problema dal punto di vista semantico: in linea di massima i nomi degli id e classi devono rispecchiare il contenuto semantico, non l'aspetto.

Esempio:
<span class="evidenziato">testo</span>
dove alla classe evidenziato corrisponde:

.evidenziato {
  font: larger;
  color: green;
}

Perche` se domani vuoi cambiare colore di sfondo e quindi il verde non ci sta piu` e lo vuoi rosso, ti trovi a dover cambiare tutte le classi della marcatura, oppure ti trovi con una incongruenza intrinseca del tipo:
.verde {
color: red;
}


3. Dentro le graffe dei selettori ci puoi mettere tutte le caratteristiche CSS che vuoi (e che sono valide per quel tipo di tag).
Ad esempio una cosa del genere non ha senso, ma non darebbe alcun problema sintattico:

<div id="pippo">

un po' di testo</p></div>

con:
#pippo {
  width: 100%;
}
#pippo img {
  padding: 0;
  background-color: black;
}

nel CSS ho definito lo sfondo per tutte le immagini inserite dentro il div pippo, ma nel div non ci sono immagini
nel CSS ho definito uno sfondo per una immagine, ma probabilmente non lo si vedra`, dato che l'immagine copre completamente lo sfondo (salvo che l'immagine non abbia trasparenze).

[violentoweb]

Originariamente inviato da Mich_
1. Attenzione alla sintassi:
color: green;
oppure
color: #00ff00;
oppure
color: rgb(0,255,0);

il cancelletto introduce il codice colore esadecimale, non il suo nome (dove esiste)


2. il ragionamento fila dal punto di vista logico, ha qualche problema dal punto di vista semantico: in linea di massima i nomi degli id e classi devono rispecchiare il contenuto semantico, non l'aspetto.

Esempio:
<span class="evidenziato">testo</span>
dove alla classe evidenziato corrisponde:

.evidenziato {
  font: larger;
  color: green;
}

Perche` se domani vuoi cambiare colore di sfondo e quindi il verde non ci sta piu` e lo vuoi rosso, ti trovi a dover cambiare tutte le classi della marcatura, oppure ti trovi con una incongruenza intrinseca del tipo:
.verde {
color: red;
}


3. Dentro le graffe dei selettori ci puoi mettere tutte le caratteristiche CSS che vuoi (e che sono valide per quel tipo di tag).
Ad esempio una cosa del genere non ha senso, ma non darebbe alcun problema sintattico:

<div id="pippo">

un po' di testo</p></div>

con:
#pippo {
  width: 100%;
}
#pippo img {
  padding: 0;
  background-color: black;
}

nel CSS ho definito lo sfondo per tutte le immagini inserite dentro il div pippo, ma nel div non ci sono immagini
nel CSS ho definito uno sfondo per una immagine, ma probabilmente non lo si vedra`, dato che l'immagine copre completamente lo sfondo (salvo che l'immagine non abbia trasparenze).

Forse mi sono spiegato male!

in questo codice:

<style type="text/css">
.verde {
font: 10px verdana, Helvetica, sans-serif;
color: #green;
}
</style>

Io ho messo verde così per fare un esempio, da quello che ho capito te mi volevi dire che se come nome della classe lascio verde perchè ho il testo verde e un giorno volessi cambiare colore del testo e metterlo rosso, mi rimane il nome della classe verde. Ma io quel verde mettiamo che la chiamo colore_testo, il codice va bene no?
Ovviamente poi sull'html richiamerò :



class="colore_testo">....</p>

Poi io sul mio codice ho sbagliato a mettere:

#green

invece dovevo mettere solo:

green

Perchè il cancelletto va usato solo per indicare colori esadecimali.

Giusto?