La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

Introduzione ai CSS Cascading Style Sheet (Fogli di Stile in Cascata)

Presentazioni simili


Presentazione sul tema: "Introduzione ai CSS Cascading Style Sheet (Fogli di Stile in Cascata)"— Transcript della presentazione:

1 Introduzione ai CSS Cascading Style Sheet (Fogli di Stile in Cascata)

2 Cascading Style Sheet 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à nellapportare modifiche di stile; Facilità nella navigazione da parte di utenti svantaggiati; Velocità di caricamento delle pagine;

3 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;

4 Stili inline In HTML, le informazioni di stile dei singoli elementi possono essere specificate mediante lattributo style come nel seguente esempio: Attenzione la presentazione di questo testo è allarmante! senza Stilecon Stile Prova Questa tecnica è sconsigliata a causa del fatto che incoraggia un livello scadente nella stesura del codice

5 Fogli di Stile incorporati E possibile incorporare un foglio di stile allinizio di un documento HTML mediante il Tag Style, che deve comparire allinterno del tag Head, come nel seguente esempio: foglio stile incorporato h1 {color:purple;} p {font-size:smaller; color:gray;} ……… …….. senza il Tag StyleCon il Tag Style Prova

6 Fogli di stile esterni 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 con il Tag Link

7 Fogli di stile esterni Pagina url(prova.css); Pagina HTML body { font:10pt/14pt Verdana; } prova.css prova

8 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. h1{ } Color: red;background: yellow dichiarazione proprietàvaloreproprietàvalore

9 Struttura di una regola Allinizio 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 (;). Lunica eccezione è lultima 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

10 Una home page tradizionale Dal vero

11 Un restayling… allessenziale Dal vero

12 e ora realizziamo il foglio stile ! body { font: 10pt/14pt Arial; } Qui stiamo dicendo al browser che tutto il div container sarà separato da 10 pixel rispetto al suo contenitore. div#container { padding: 10 px; } Qui stiamo dicendo al browser che tutto il testo compreso nel tag sarà reso con un font Arial di dimensione tipografica di 10 punti, altezza della linea di 14 punti. 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

13 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 lallineamento 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

14 colleghiamo il tutto alla pagina html Acme Inc. ……… ……… Acme1.htm proviamo


Scaricare ppt "Introduzione ai CSS Cascading Style Sheet (Fogli di Stile in Cascata)"

Presentazioni simili


Annunci Google