Tutorial Web Design – I fogli di stile, css (6)

sabato, 21 aprile, 2012

Ben trovati, eccoci di nuovo qua. Oggi continueremo a parlare dei fogli di stile e vedremo nuovi selettori.

Siete pronti? Cominciamo!

Alla fine del precedente tutorial eravamo rimasti con il nostro file index.html compilato nel seguente modo:

<!DOCTYPE HTML>
<html>
<head>
<title>Le città più belle del mondo</title>
<link href="css/stile.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="francia">
<h2>Andiamo in Francia</h2>
<h4>Qualche consiglio</h4>
<p><i>Parigi</i></p>
<p><i>Tolosa</i></p>
</div>
<div id="italia">
<h2>Andiamo in Italia</h2>
<h4>Qualche consiglio</h4>
<p><i>Roma</i></p>
<p><i>Palermo</i></p>
</div>
<div id="germania">
<h2>Andiamo in Germania</h2>
<h4>Qualche consiglio</h4>
<p><i>Berlino</i></p>
<p><i>Colonia</i></p>
</div>
</body>
</html>

Mentre nel file stile.css avevamo:

/* Css Document */

h2 {color:#0099CC;}   /* questo è un commento, potete anche ometterlo */
h4{color:#9999FF;}    /* potete scrivere anche con i ritorno a capo, per organizzare il codice */

Oggi continueremo a lavorare con i css. Parliamo di un selettore molto importante: quello del TAG BODY. BODY rappresenta il corpo della pagina e poter interagire con questo TAG all’interno dei fogli di stile significa andare a modificare la struttura generale della pagina. Vediamo subito un esempio. Come prima cosa dichiariamo il selettore e mettiamo le parentesi. Useremo il metodo di impaginazione su più righe.

Io direi di assegnare un bel colore di sfondo alla nostra pagina, che adesso per default è bianco. La proprietà per il colore dello sfondo è:

Leggi il resto »

Pubblicato in Internet, Programmazione, Tutorial | 1 Commento »

Tutorial Web Design – I fogli di stile, css (5)

sabato, 14 aprile, 2012

Nei precedenti articoli abbiamo analizzato un po’ di nozioni e creato la prima pagina web. Se ve la siete persa, andate a leggervi il precedente post. Riepilogo qui sotto il codice finale della nostra pagina, ma dovreste avere il file salvato.

<!DOCTYPE HTML>
<html>
<head>
<title>Le città più belle del mondo</title>
</head>
<body>
<div id="francia">
<h2>Andiamo in Francia</h2>
<h4>Qualche consiglio</h4>
<p><i>Parigi</i></p>
<p><i>Tolosa</i></p>
</div>
<div id="italia">
<h2>Andiamo in Italia</h2>
<h4>Qualche consiglio</h4>
<p><i>Roma</i></p>
<p><i>Palermo</i></p>
</div>
<div id="germania">
<h2>Andiamo in Germania</h2>
<h4>Qualche consiglio</h4>
<p><i>Berlino</i></p>
<p><i>Colonia</i></p>
</div>
</body>
</html>

Come abbiamo già avuto modo di osservare, la nostra pagina risulta piuttosto triste in quanto a design. Vediamo se c’è un modo per migliorarla?

Ovviamente esiste e si chiama ( è un acronimo, per non sbagliare) CSS. I Cascading Style Sheets, o fogli di stile, rappresentano il mezzo col quale si è riusciti a separare, nella progettazione delle pagine web, i contenuti dalla formattazione. Cerco di spiegare brevemente.

Fino a qualche anno fa, quando si scrivevano pagine web era abitudine definire le caratteristiche di un elemento direttamente all’interno della pagina html. Questo portò in breve a due problemi: il primo era che le pagine pesavano tantissimo e il secondo è che tutti quelli che si muovevano a vista codice all’interno della pagina (ad esempio gli spider di google per indicizzarla) non riuscivano a distinguere le informazioni importanti da quelle puramente estetiche. Da qui la necessità di fare in modo che vi fosse una divisione netta tra formattazione e contenuti. E fu così che nacquero i fogli di stile.  Al loro interno vengono inserite tutte quelle informazioni che servono a definire il design di una pagina. Ad esempio il colore di un font o l’altezza di un DIV o l’inserimento di una riga continua o un effetto contorno o il colore di sfondo della pagina.

Leggi il resto »

Pubblicato in Internet, Programmazione, Tutorial | 1 Commento »

« Pagina precedente
Pagina successiva »