Lezione 12: Layout (CSS)
Non sarebbe forte se tu riuscissi a dare alle tue pagine il layout che si meritano?
Certo, ma come?
Per dare un layout al tuo sito web usa i Cascading Style Sheets (CSS) (in italiano, Fogli di Stile). In questa lezione vedrai una breve introduzione ai CSS. In seguito potrai imparare tutto sui CSS dall'inizio, con il nostro tutorial sui CSS. Quindi per favore, considera questa lezione soloo come un aperitivo.
CSS è la metà migliore dell'HTML. Per quanto riguarda il codice le condizioni sono diverse: l'HTML si prende cura della materia grezza (la struttura), mentre i CSS danno il tocco attraente (layout).
Come mostrato nella Lezione 7, i CSS possono essere aggiunti con l'attributo style. Per esempio, per un paragrafo puoi definire il tipo di carattere (font) e la sua grandezza:
Esempio 1:
<p style="font-size:20px;">Questo è scritto con dimensione 20</p>
<p style="font-family:courier;">Questo è Courier</p>
<p style="font-size:20px; font-family:courier;">Questo è Courier di dimensione20</p>
Sul browser si vedrà così :
Questo è scritto con dimensione 20
Questo è Courier
Questo è Courier di dimensione 20
Nell'esempio sopra abbiamo usato l'attributo style
per specificare il tipo di carattere da utilizzare (con il comando font-family
) e la dimensione del carattere (con il comando font-size
). Nota come abbiamo definito insieme il tipo di carattere e la sua grandezza nell'ultimo paragrafo, con un segno di punto e virgola come separazione.
Sembra un sacco di lavoro?
Una delle caratteristiche intelligenti del CSS è la possibilità di controllare il tuo layout centralmente. Invece di usatre l'attributo style
per ogni tag, puoi dire al browser una sola volta come deve fare il layout di tutto il testo della pagina:
Esempio 2:
<html>
<head>
<title>La mia prima pagina web</title>
<style type="text/css">
h1 {font-size: 30px; font-family: arial;}
h2 {font-size: 15px; font-family: courier;}
p {font-size: 8px; font-family: "times new roman";}
</style>
</head>
<body>
<h1>La mia prima pagina web</h1>
<h2>Benvenuto nella mia prima pagina con i CSS</h2>
<p>Qui puoi vedere come funzionano i CSS</p>
</body>
</html>
Nell'esempio sopra i CSS sono stati inseriti nella sezione head e pertanto vengono applicati a tutta la pagina. Per fare questo, usa solo il tag <style type="text/css">
che informa il browser del fatto che stai scrivendo un CSS.
Nell'esempio tutti i titoli di primo livello della pagina saranno in Arial di dimensioni 30px. Tutti i sottotitoli saranno in Courier con dimensione 15px. E tutto il testo nei paragrafi semplici sarà in Times New Roman con dimensione 8px.
Un'altra opzione è quella di scrivere i CSS in un documento separato. Scrivendo i CSS in un documento separato puoi controllare il layout di molte pagine contemporaneamente. Molto furbo se vuoi cambiare il tipo di font o la dimensione su tutto il sito web fatto di centinaia o migliaia di pagine. Non approfondiremo questo aspetto che potrai invece imparare più tardi con il nostro tutorial sui CSS.
Cosa posso fare ancora con i CSS?
I CSS possono essere usati per molto di più che il semplice tipo di font o dimensione. Per esempio, puoi aggiungere colori o sfondi. Qui ci sono alcuni esempi con cui puoi fare pratica:
<p style="color:green;">Testo verde</p>
<h1 style="background-color: blue;"Titolo con sfondo blu</h1>
<body style="background-image: url('http://www.html.net/logo.png');">
Prova ad inserire l'esempio sopra in qualcuna delle tue pagine - sia come mostrato sopra che come CSS nella sezione head.
I CSS sono solo colori e tipi di font?
Oltre a inserire caratteristiche per i colori, i tipi di font, ecc., i CSS possono anche controllare la disposizione e la presentaizone della pagina (margini, fluttuazioni, allineamenti, larghezza, altezza, ecc.). Definendo i diversi elementi con i CSS sarai in grado di organizzare in maniera elegante e precisa le tue pagine.
Esempio 3:
<p style="padding:25px;border:1px solid red;">Amo i CSS</p>
Sul tuo browser si vedrà così :
Amo i CSS
Con la proprietà float
un elemento può fluttare sia a destra che a sinistra. L'esempio che segue ti illustra il principio:
Esempio 4:
<img src="bill.jpg" alt="Bill Gates" style= "float:left;" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat...</p>
Sul browser si vedrà così :
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat...
Nell'esempio un elemento (l'immagine) fluttua sulla sinistra e l'altro elemento (il testo) riempie il buco.
Con la proprietà position
, puoi posizionare un elemento esattamente dove vuoi nella pagina:
Esempio 5:
<img src="bill.jpg" alt="Bill Gates" style="position:absolute;bottom:50px;right:10px;" />
Nell'esempio l'immagine viene posizionata 50 pixel dal bordo inferiore e 10 pixel dal bordo destro del tuo browser. Puoi posizionarlo esattamente dove vuoi. Prova. facile e divertente, vero?
Divertente, sicuro. Ma facile?
Imparerai i CSS in 10 minuti. E, come abbiamo detto prima, questa lezione è solo una breve introduzione. Più tardi imparerai molto di più con il nostro Tutorial sui CSS.
Per ora concentrati sull'HTML e vai avanti con la prossima lezione dove imparerai come fare per pubblicare il tuo sito web su Internet in modo che tutto il mondo lo possa vedere!