I fogli di stile a cascata offrono ai web designer il controllo dell’aspetto di ogni pagina del loro sito. Puoi risparmiare tempo di sviluppo sulla tua azienda o sul progetto del cliente utilizzando un singolo file CSS esterno per formattare ogni pagina su un sito web. Più file CSS possono dare un aspetto unico a ciascuna pagina o gruppo di pagine. Il segreto del layout CSS è definire elementi di pagina discreti all’interno del codice HTML e assegnare le loro proprietà di visualizzazione e posizioni nel file CSS.
HTML
1
Crea un file HTML. Inserisci un collegamento al file CSS all’interno della sezione con la dichiarazione:
Questo tag indica a un browser dove trovare le istruzioni di formattazione per questa pagina.
2
Definisci un elemento div con un ID “main” immediatamente dopo il tag di apertura:
Questo crea un contenitore che può essere utilizzato per controllare le caratteristiche generali della pagina. Posiziona il tag di chiusura per questo elemento div immediatamente sopra il tag del corpo di chiusura della pagina.
3
Apri un nuovo tag div con l’ID di “header” direttamente sotto la voce “main”:
Il contenuto va qui
Chiudi ogni elemento div, ad eccezione del contenitore “principale”, alla fine del contenuto della sezione.
4
Utilizzare lo stesso metodo per creare tre tag div aggiuntivi e assegnare loro gli ID “information1”, “information2” e “foot”.
CSS
1
Crea un file denominato “my_style.css” all’interno della stessa directory del file HTML precedente.
2
Definisci la larghezza complessiva della pagina e il colore di sfondo facendo riferimento al tag div “principale”:
principale{
larghezza: 960 px; colore di sfondo: blu; }
Utilizza il segno “#” per fare riferimento a un singolo elemento tramite il suo ID.
3
Specificare le proprietà di visualizzazione dell’intestazione e delle sezioni delle informazioni aggiungendo queste righe:
intestazione{
colore di sfondo: bianco; text-align: center; }
information1 {
colore di sfondo: grigio; larghezza: 480px; altezza: 200 px; galleggiante: sinistra; }
information2 {
colore di sfondo: verde; larghezza: 480px; altezza: 200 px; galleggiante: sinistra; }
Sposta entrambe le sezioni di informazioni a sinistra e assegna loro la stessa altezza per creare una visualizzazione a due colonne.
4
Posiziona il contenitore “foot” nella parte inferiore della pagina con le linee:
piede{
colore di sfondo: nero; colore bianco; chiaro: entrambi; }
Utilizza la proprietà “clear: both” per posizionare il piè di pagina sotto le due colonne mobili.
Referenze
-
W3Schools.com: CSS How To
-
W3Schools.com: CSS Float
-
W3Schools.com: layout HTML
Risorse
-
W3.org: CSS
Tip
-
Usa colori di sfondo unici per ogni sezione durante la progettazione del file CSS per ottenere una rapida panoramica del layout prima di aggiungere contenuti. Il modo migliore per familiarizzare con il design CSS è sperimentare le proprietà disponibili per ogni elemento. Questo esempio sfrutta solo alcune delle molte opzioni di formattazione possibili disponibili con CSS.
Scrittore Bio
Finn McCuhil è uno scrittore freelance con sede nel Michigan settentrionale. Ha lavorato come giornalista e editorialista nel sud della Florida prima di appassionarsi ai computer. Dopo aver studiato programmazione presso la University of South Florida, ha trascorso più di 20 anni a capo dei reparti IT di tre fornitori automobilistici di primo livello. Ora costruisce barche di legno nei boschi del nord.