Cascading Style Sheet (Fogli di Stile in Cascata) Introduzione ai CSS Cascading Style Sheet (Fogli di Stile in Cascata)
Cascading Style Sheet Riduzione dei tempi di realizzazione: I CSS rappresentano lo standard W3C per la presentazione visiva delle pagine web. Realizzare un sito usando i CSS può portare grandi benefici sotto molti punti di vista quali ad esempio: Riduzione dei tempi di realizzazione: Facilità nell’apportare modifiche di stile; Facilità nella navigazione da parte di utenti svantaggiati; Velocità di caricamento delle pagine;
Aggiunta di stili a pagine HTML E’ possibile applicare stili ai documenti in tre modi diversi: Stili inline; Fogli di stile incorporati; Fogli di stile esterni;
Stili inline In HTML, le informazioni di stile dei singoli elementi possono essere specificate mediante l’attributo style come nel seguente esempio: <p style=“color: red, background: yellow;”> Attenzione la presentazione di questo testo è allarmante! </p> senza Stile Prova con Stile Questa tecnica è sconsigliata a causa del fatto che incoraggia un livello scadente nella stesura del codice
Fogli di Stile incorporati E’ possibile incorporare un foglio di stile all’inizio di un documento HTML mediante il Tag Style, che deve comparire all’interno del tag Head, come nel seguente esempio: <html> <head> <title>foglio stile incorporato</title> <style type=“text/css”> h1 {color:purple;} p {font-size:smaller; color:gray;} </style> </head> ……… …….. </html> senza il Tag Style Prova Con il Tag Style
Fogli di stile esterni con la Direttiva @import con il Tag Link Gli stili possono essere specificati in un file. Il vantaggio principale di questo approccio è che la raccolta in un unico file di tutti i fogli stile di uso comune permette di aggiornare tutte le pagine che fanno riferimento ad esso con una sola operazione. Un altro vantaggio importante è che i fogli di stile esterni vengono memorizzati nella cache, e ciò può ridurre la richiesta di banda. Un foglio stile esterno può essere richiamato in due modi: con la Direttiva @import con il Tag Link
Fogli di stile esterni prova.css <head> <title>Pagina HTML </title> <style type=“text/css”> @import url(prova.css); </style> </head> body { font:10pt/14pt Verdana; } prova <head> <title> Pagina HTML </title> <link rel=“stylesheet” type=“text/css” href=“prova.css” media=“all”> </head> prova
Struttura di un foglio stile Un foglio di stile è composto da una o più regole che descrivono la presentazione degli elementi della pagina, e ogni regola ha due parti fondamentali: il selettore e il blocco di dichiarazione. dichiarazione dichiarazione h1 { } Color: red; background: yellow proprietà valore proprietà valore
Struttura di una regola All’inizio della regola si trova il selettore, che seleziona le parti del documento a cui deve essere applicata la regola. Alla fine si trova il blocco di dichiarazione, costituito da una o più dichiarazioni, ciascuna delle quali è una combinazione di una proprietà CSS e del rispettivo valore. Il blocco di dichiarazione è sempre tra parentesi graffe { }, e può contenere più dichiarazioni: ogni dichiarazione deve essere conclusa da un punto e virgola (;). L’unica eccezione è l’ultima dichiarazione del blocco, il cui punto e virgola è facoltativo. Ogni proprietà, che rappresenta un particolare parametro stilistico, è separata dal suo valore da due punti (:). I nomi delle proprietà nei CSS non sono sensibili alle maiuscole. I valori ammissibili per una proprietà sono definiti dalla descrizione della proprietà stessa. h1 { } Color: red; background: yellow
Una home page tradizionale Dal vero
Un restayling… all’essenziale Dal vero
e ora realizziamo il foglio stile ! body { font: 10pt/14pt Arial; } Qui stiamo dicendo al browser che tutto il testo compreso nel tag <body> sarà reso con un font “Arial” di dimensione tipografica di 10 punti , altezza della linea di 14 punti. div#container { padding: 10 px; } Qui stiamo dicendo al browser che tutto il div container sarà separato da 10 pixel rispetto al suo contenitore. div#banner { background-color: #0033CC; color: white; padding: 10px; text-align: center; } Qui stiamo dicendo al browser che per quanto riguarda il div banner esso avrà uno sfondo blu, le scritte in bianco allineate al centro e sarà separato dal suo contenitore di 10 pixel
ancora un po’ di fatica….. div#menu { background-color: #FFE6BF; border: 1px solid #8B96B9; text-align: center; } div#menu li { display: inline; margin-right: 10 px; div #news { background-color: #FFFFCC; float: left; margin: 18px 10px 0px 0px; padding: 10px; border: 1px solid #8B96B9; } Qui definiamo le proprietà del div menu specificando l’allineamento centrale lo spessore dei bordi, il colore di background; Le proprietà degli elenchi puntati; Le proprietà del div news tra cui i margini, la posizione e la dichiarazione che il testo possa scorrere sotto il riquadro del contenitore stesso; e salviamo il tutto in un file denominato “miostile.css”
colleghiamo il tutto alla pagina html Acme1.htm <html> <head> <title> Acme Inc.</title> <link rel=“stylesheet” href=“miostile.css” type=“text/css”> </head> ……… ……… proviamo