Storia dei fogli di stile HTML non consentiva di separare la formattazione dal contenuto. Codice HTML sempre più complesso e pasticciato <blockquote> <p align="center"><font color="#006600" size="5" face="Arial, Helvetica, sans-serif"><strong><em>paragrafo con formattazione all'interno dei tag </em></strong></font></p> </blockquote> 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
41
Embed
Storia dei fogli di stile HTML non consentiva di separare la formattazione dal contenuto. Codice HTML sempre più complesso e pasticciato paragrafo con.
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Storia dei fogli di stile HTML non consentiva di separare la formattazione dal contenuto.
Codice HTML sempre più complesso e pasticciato <blockquote> <p align="center"><font color="#006600" size="5" face="Arial, Helvetica, sans-
serif"><strong><em>paragrafo con formattazione all'interno dei tag </em></strong></font></p> </blockquote>
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
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
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
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 sull’interpretazione da parte dei browser
- Visualizzazione delle pagine più rapida Evitando tabelle annidate Riducendo il peso dei file
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 ...
- 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.)
<H1><FONT face="helvetica" color="blue“
size="+4">CAPITOLO 1</FONT></H1>
- CSS permette di dare specifiche di formato per tutte le occorrenze di un elemento come H1:
Fogli di stile incorporati(embedded) Se vogliamo definire uno stile che vale solo per il documento:
<head>…
<style type="text/css"> <!-- body {margin: 0; font-family: helvetica, arial, sans-serif
} --></style></head> I commenti servono per i browser che non
supportano i CSS e per evitarel’indicizzazione da parte dei motori di
ricerca
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 …
<p style="color: red; font-style: italic">
Questo è importante e lo voglio mettere
in rosso e in corsivo!! </p>
Tre modi di usare gli stili
IN LINEA All’interno dei tag:<h1 style="font-color:red;font-size:12px">testo</h1>Con i CSS si adoperano due TAG con lo scopo di fare da "contenitore”<div></div> e <span></span> Avrei potuto ottenere la stessa cosa usando un contenitore <div> a questo modo:<div style="font-color:red;font-size:12px"> testo </div>
• INCORPORATI In una dichiarazione nel tag <head><head><title>La mia pagina web</title><style type="text/css"><!--
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
Proprieta' di posizionamento: top: y left: xwidth: ampiezzaheight: altezza z-index: profondita'posizion: tipo di riferimento x y clip: area visualizzatavisibility: visualizzazione o meno float: posizionamento immagine slegata da testo
<P> Un testo molto molto molto molto molto molto lungo.Un testo molto molto molto molto molto molto lungo.<SPAN STYLE=“float:right; width:120”><IMG SRC=“UrlOfMyImage.gif” height=“90” width=“120”></SPAN>Un testo molto molto molto molto molto molto lungo.Un testo molto molto molto molto molto molto lungo</P>
Ordinamento elementi: documento forma un albero in base all'inclusione degli elementi:<body><h1>Capitolo <em> Uno</em> </h1><div>Testo del capitolo</div></body>
body h1 div em
Descrittori elemento HTML:
H1 {color: blue}
classe: si specifica le proprieta' di una classe a cui possono appartenere le occorrenze dei diversi elementi:
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";}}