La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

Storia dei fogli di stile HTML non consentiva di separare la formattazione dal contenuto. Codice HTML sempre più complesso e pasticciato paragrafo con.

Presentazioni simili


Presentazione sul tema: "Storia dei fogli di stile HTML non consentiva di separare la formattazione dal contenuto. Codice HTML sempre più complesso e pasticciato paragrafo con."— Transcript della presentazione:

1 Storia dei fogli di stile HTML non consentiva di separare la formattazione dal contenuto. Codice HTML sempre più complesso e pasticciato paragrafo con formattazione all'interno dei tag Il W3C interviene per mettere un po di ordine Nel 1996 definizione dei fogli di stile (CSS Level 1 o CSS-1) Nel 1998 aggiorna le specifiche: CSS-2

2 CSS: Cascading Style Sheets 1. Specifiche del formato del documento tramite un linguaggio 2. Come modelli.dot di Word 3. Separazione del formato dal contenuto 4. Differenza con html: necessita di un tag iniziale e finale per delimitare box dove agisce lo stile

3 Vantaggi dei CSS Separazione stile-contenuto Contenuto con il minimo di struttura necessario Stili specificati a parte Possibilità di applicare lo stesso stile a più contenuti Possibilità di riutilizzo di uno stesso contenuto con stili diversi Aderenza agli standard Maggiore durata nel tempo del progetto Maggiore compatibilità Facilità di manutenzione Maggiore controllo stilistico

4 Facilità di manutenzione - I fogli di stile possono essere globali per il sito Le regole stilistiche stanno in un posto solo e sono utlizzate da tutte le pagine del sito - Facilità di sviluppo e gestione Più facile sviluppate siti consistenti dal punto di vista visuale Facilità nella manutenzione del sito: se si vuole cambiare uno stile si cambia in un posto solo - Codice HTML semplificato e pulito Eliminando tag e rientri forzati con decine di Maggiore chiarezza sullinterpretazione da parte dei browser - Visualizzazione delle pagine più rapida Evitando tabelle annidate Riducendo il peso dei file

5 Maggiore controllo stilistico Con i fogli di stile si riescono a controllare aspetti stilistici che non si possono controllare in altro modo Le famiglie di tipi (font, dimensioni, interlinea) La sottolineatura dei link La possibilità di HOVER sui link Divisione della pagina in sezioni (div, span) con stili diversi Controllo di margini e bordi I colori, gli sfondi atro...

6 - In HTML si puo' specificare il formato delle singole istanze di elementi del documento ma non di un tipo di elemento (es. H1,H2,ecc.) CAPITOLO 1 - CSS permette di dare specifiche di formato per tutte le occorrenze di un elemento come H1: H1 {color: blue; background: red}

7 REGOLE CSS: elemento html selettore H1 {color: blue; background: red} attributo valore

8 Fogli di stile esterni Passi da seguire: 1. Si crea il foglio di stile 2. Si salva con estensione.css (es stile.css) 3. Nella sezione head della pagina HTML a cui vogliamo applicare lo stile: … … Nome del file css esterno

9 Fogli di stile incorporati(embedded) Se vogliamo definire uno stile che vale solo per il documento: … I commenti servono per i browser che non supportano i CSS e per evitare lindicizzazione da parte dei motori di ricerca

10 Fogli di stile in linea (inline) Per cambiare gli stili localmente in una porzione di un documento Supponiamo che lo stile del documento preveda il tipo Arial, dimensione 12px, di colore nero … Questo è importante e lo voglio mettere in rosso e in corsivo!!

11 Tre modi di usare gli stili IN LINEA Allinterno dei tag: testo Con i CSS si adoperano due TAG con lo scopo di fare da "contenitore e Avrei potuto ottenere la stessa cosa usando un contenitore a questo modo: testo INCORPORATI In una dichiarazione nel tag La mia pagina web ESTERNI In un foglio di stile associato a più pagine pagina web File separato

12 Il vantaggio dei CSS esterni Un file di formattazione per tutto il sito Titolo CSS h1 { color:red } CSS h1 { color:red } Sito web Titolo 1

13 File con foglio di stile esterno:... Lo stesso documento apparira' in formati diversi a seconda del foglio di stile collegato Utenti con esigenze diverse e mezzi diversi di visualizzazione Formato aziendale per un sito

14 Il contenuto di uno style sheet: valori e unità di misura Colori Con nome: red, gray, purple Con i livelli RGB: h1 { color: rgb(75%,60%,20%) } Codice esadecimale h1 { color: #ff0011 } Unità di misura Valori percentuali Assolute: cm, mm, pt, pc h1 { font-size: 12pt } Relative: em, ex, px h1 { font-size: 0.1em; line-height: 14px } URL #header { background-image: url(logo.gif) }

15 Esempio di cascata di stili p {font-size:24pt;color:green; border-width:thick;border-style:ridge; border-color:red} p.red {color:red} Pippo Pluto

Topolino

16 Elementi di formattazione Element width Element height Box top Box left Box width Box height Margin Space Border Space Padding Space ContentSpace

17 Concetti Base: Il box model high width content left padding right padding top padding bottom padding left border right border top border bottom border left margin right margin bottom margin top margin

18 Esempio di posizionamento: #aposition{position:relative;left:30;top:20} a {color:red} p {font-size:24pt;color:green;border-width:thick; border-style=ridge;border-color=red} p.red {color:red} Pippo

Pluto

Topolino

Topolino"> Esempio di posizionamento: #aposition{position:relative;left:30;top:20} a {color:red} p {font-size:24pt;color:green;border-width:thick; border-style=r

19 Elementi di formattazione color:color background-color:color background-image:url font-family:name font-size:xx-small|x-small|small|medium|large|x-large|xx-large| larger|smaller|absoluteSize|relativeSize|percentage|lenght font-style:normal|italic font-weight:bold|bolder|lighter|normal|100|200|...|800|900

20 Elementi di formattazione line-height:normal|length|percentage text-align:left|center|right|justify text-decoration:blink|line=through|overline|underline text-indent:lenght|percentage text-transform:none|capitalize|uppercase|lowercase

21 Elementi di formattazione border-bottom-width,border-top-width, border-right-width,border-left-width:thin|medium|thick|n border-color:color border-style:double|groove|none|inset|outset|ridge|solid border-width:thin|medium|thick|length margin:thickness thin thick margin-bottom,margin-left,margin-right,margin-top :thickness padding :thickness padding-bottom,padding-left,padding-right,padding-top :thickness

22 Posizionamento elementi HTML HTML visualizza elementi uno di seguito all'altro in base a occorrenza nel documento DHTML permette di posizionare un elemento dove si vuole nel documento Posizionamento assoluto e relativo Primi e secondi piani Possibilita' di cambiare posizione agli oggetti

23 Proprieta' di posizionamento: top: y left: x width: ampiezza height: altezza z-index: profondita' posizion: tipo di riferimento x y clip: area visualizzata visibility: visualizzazione o meno float: posizionamento immagine slegata da testo

24 Esempi di posizionamento sono qui.logo {position: absolute; top: 100px; left=10%}

25 Assoluto e relativo hanno significato rispetto ad un contesto: inizio contesto span assoluto fine contesto inizio contesto fine contesto span assoluto inizio contesto fine contesto span relativo

26 Wrapping text on an element Un testo molto molto molto molto molto molto lungo. Un testo molto molto molto molto molto molto lungo. Un testo molto molto molto molto molto molto lungo

27 Elementi di formattazione - liste line-style:decimal|lower-alpha|lower-roman|upper-alpha|upper-roman line-style:circle|disc|square

28 Fine

29 Come si applica uno stile CSS -1 - Si ridefinisce ogni singolo tag h1 { color: red; } h2, h3, h4 { color: green; font-family: serif; } p { color: black; } body { color: blue; } - Si assegna una class.contenuto { margin: 5px; } h1.pagina { padding: 6px; } Titolo Mio contenuto - Si ridefinisce un id #header { background-color: red; }

30 EREDITARIETA': se un elemento non specifica una certa proprieta' del formato, questa viene ereditata dagli elementi sovrastanti Testo rosso (Attenzione a background) Testo rosso

31 EREDITARIETA': valori relativi a contesto Testo piu' piccolo Testo piu' piccolo

32 Ordinamento elementi: documento forma un albero in base all'inclusione degli elementi: Capitolo Uno Testo del capitolo body h1 div em

33 Descrittori elemento HTML: H1 {color: blue} classe: si specifica le proprieta' di una classe a cui possono appartenere le occorrenze dei diversi elementi:.italico {font-style: italic} Testo italico

34 Combinazione di descrittori: elementi annidati: LI LI {font-size: smaller} H1 DIV {font-size: smaller} (Attenzione! L1, H1 {color: blue} e' un grouping) classi limitate ad elementi: h1.italico {font-style: italic} Capitolo italico Capitolo normale

35 Identificatore unico: #nome #qui {color: red} Testo identificato Permette di riferirsi ad una istanza tramite Javascript: crea un oggetto nel DOM Attenzione: se non e' unico si genera errore: "oggetto non esistente"

36 Pseudoclassi: p:first-letter {fontsize: 150%} a:link {color: red} a:visited {color: blue}

37 Javascript e Cascading Style Sheets Controllo proprieta' di stile per mezzo di javscript Creazione di effetti di movimento, apparizione, visualizzazione parziale, scrittura testo Leggere differenze fra Netscape 4.0x e Internet Explorer 4

38 ESTENSIONE MODELLO OGGETTI Javascript si riferisce alle occorrenze di elementi tramite gli identificatori unici: testo In Netscape: document.layers["qui"].color='blue'; in Explorer: document.all.qui.style.color='blue';

39 ESEMPIO: oggetto che scompare Non avvicinarti function movedown(layername){ document.layers[layername].top+=10;} N.B.: codice per Netscape 4

40 CODICE COMPATIBILE CON N e IE: var layerRef="", styleSwitch=""; function init(){ if (navigator.appName == "Netscape") { var layerRef="document.layers"; var styleSwitch=""; }else{ var layerRef="document.all"; var styleSwitch=".style";}} eval(layerRef + '["' + layername + '"]' + styleSwitch + '.' + property + "=" + value); document.layers document.all.style argomenti funzione

41 ESEMPIO: function setproperty(layername, property, value){ eval(layerRef + '["' + layername + '"]' + styleSwitch + '.' + property + "=" + value);} function movedown(layername){ eval(layerRef + '["' + layername + '"]' + styleSwitch + '.top+=10');}


Scaricare ppt "Storia dei fogli di stile HTML non consentiva di separare la formattazione dal contenuto. Codice HTML sempre più complesso e pasticciato paragrafo con."

Presentazioni simili


Annunci Google