La logica del CSS non è semplice, nel senso che se sei abituato a pensare in html fai fatica ad abituarti al css. Però poi ti rendi conto che è molto più comodo, pratico e.. leggero! Sì, perché rendi le pagine più snelle.
Ho visto che usi i div, quindi significa che sei già un passo avanti (nell'HTML old-style lo scheletro delle pagine era costituito da una mega tabella).
Spiegarlo in due parole non è semplice. Immagina di avere tanti pagine html, come nel tuo caso. In ognuna delle pagine hai tanti tag e ogni tag ha degli attributi che ne modificano l'aspetto (l'allineamento del testo, lo spessore del bordo di una tabella, le dimensioni di un riquadro, il colore del testo di un paragrafo, etc..).
Se hai 100 pagine html, tutte con la stessa formattazione, e un giorno decidi che lo il carattere di ogni tag h1 dev'essere grassetto.. come fai? Il css serve a "centralizzare" gli stili (immagino che lo sai già, la mia è un'introduzione stile dummies).
Stai usando un software per creare il sito, giusto? Lui ha creato per te un foglio di stile e ha utilizzato dei tag compatibili con gli standard W3C. Purtoroppo però il sito non è realmente compatibile con questi standard..
Supponiamo di voler scrivere da zero un sito che usa CSS (tralasciando il discorso degli standard). Il linguaggio che userai sarà l'XHTML. I tag mono tag, come <img>, <input> etc.. dovranno essere scritti come <img attributi />, <input attributi />, ..
I nomi dei tag vanno scritti minuscoli, gli attributi minuscoli, il valore di ogni attributo dovrà essere tra doppi apici:
Codice PHP:
<img src="http://www.esempio.it/immagine.jpg" border="0" />
Per apportare modifiche all'aspetto visivo e strutturale, dovrai usare i css.
E' semplice. Ogni tag può avere un valore id o un valore class, o entrambi.
Ogni tag è l'istanza di un tipo di tag. Ad esempio, <h1></h1> è un'istanza del tag h1. Se vuoi che TUTTI i tag h1 abbiano il testo colorato di blu elettrico, nel file css dovrai semplicemente scrivere:
Codice PHP:
h1{
color: #00f;
}
Se invece vuoi che un tag h1 abbia colore rosso e tutti gli altri blu, allora nel codice XHTML dovrai specificare che un tuo tag h1 è istanza di un particolare tipo di tag h1. In un'ottica di programmazione ad oggetti (che assomiglia a quella CSS solo per scuola di pensiero), vuoi specificare che un certo tag h1 erediti gli attributi del generico tag h1 e che si specializzi in qualcosa. In altre parole, vuoi che un certo tag h1 sia istanza di una classe da te definita. Scriverai:
Codice PHP:
/* Nel file .css */
h1{
color: #00f;
}
.rosso{
color: #f00;
}
/* Nel file .html */
<h1>Primo testo blu</h1>
<h1>Secondo testo blu</h1>
<h1 class="rosso">Primo testo rosso</h1>
<h1>Terzo testo blu</h1>
<h1 class="rosso">Secondo testo rosso</h1>
Supponiamo ora che vuoi che il secondo tag rosso abbia qualche particolarità, per cui lo vuoi allineare al centro. Allora gli dai un id, ossia lo identifichi univocamente chiamandolo, per esempio, "centrato".
Codice PHP:
/* Nel file .css */
h1{
color: #00f;
}
.rosso{
color: #f00;
}
#centrato{
text-align:center;
}
/* Nel file .html */
<h1>Primo testo blu</h1>
<h1>Secondo testo blu</h1>
<h1 class="rosso">Primo testo rosso</h1>
<h1>Terzo testo blu</h1>
<h1 id="centrato" class="rosso">Secondo testo rosso</h1>
Immagine di avere quei tag h1 in tutte le pagine del tuo sito. Un giorno ti svegli e dici: voglio che tutti gli h1 diventino verdi, esclusi quelli rossi. Allora apri il tuo file .css e lo modifichi nel modo seguente:
Codice PHP:
/* Nel file .css */
h1{
color: #0f0;
}
.rosso{
color: #f00;
}
#centrato{
text-align:center;
}
E qui hai appena apportato una modifica al layout grafico SENZA toccare il file html 
Immagina di avere 100 tag h1 in una pagina. E' sufficiente assegnarli un class e il gioco è fatto!
Nel caso dei div, ad esempio, hai un sacco di robe da impostare.. larghezza, altezza, margini, padding, sfondo, bordi etc.. Senza foglio di stile dovresti fare qualcosa del genere:
Codice PHP:
<div style="text-align:left; margin: 0px; border: 1px; padding: 5px; color:#fa3209; font-family:Verdana, Geneva, sans-serif; font-size: 10px;">ciao!</div>
e capisci che la scomodità va a mille, soprattutto perché quel codice css non è riutilizzabile in altre parti del sito!
Spero quindi di averti acceso la lampadina della curiosità, in modo che inizi a mettere mano a questo lato della programmazione web che, oggi come oggi, è indispensabile nella creazione di un sito web professionale.
Per quanto riguarda gli standard W3C, invece, vale quanto detto all'inizio sulle regole dell'xhtml, in più però devi specificare il doctype (essenzialmente l'insieme di regole usate nel tuo documento, che possono essere strict o transitional). Un esempio:
Codice PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
e la codifica usata:
Codice PHP:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
Se vuoi iniziare a muoverti in questo mare di regole faresti bene a tenere sotto mano questo sito:
W3Schools Online Web Tutorials
è la bibbia della programmazione web
LinkBack URL
About LinkBacks
Sito della mia squadra!
Rispondi citando
Originariamente inviata da §¤PREISER¤§
