-
mariuskunk.
User deleted
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:CODICE<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ì :CODICE[size=7]Questo è scritto con dimensione 20[/size]
[font=Courier]Questo è Courier
[/font]
[size=7][font=Courier]Questo è Courier di dimensione 20[/font][/size]
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:CODICE<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:CODICE<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.
.
Lezione 12: Layout (CSS) |
