I CSS o Fogli di stile. Telematica per le arti e lo spettacolo a.a. 2006/07

Transcript

1 I CSS o Fogli di stile Telematica per le arti e lo spettacolo a.a. 2006/07

2 Quando è nato il web il problema principale era semplicemente quello della gestione dei contenuti, dato anche il basso numero di utenti. Col passare del tempo il web si è diffuso a macchia d'olio, gli utenti sono diventati moltissimi, e i designer hanno cominciato a curare l'aspetto comunicativo delle pagine e a preoccuparsi anche della loro presentazione grafica. È in questo momento che si scoprono tutti i problemi legati allo HTML e soprattutto alla sua gestione, i web designers si sono visti costretti ad aggirare i limiti stilistici che pone lo HTML scontrandosi però con nuovi problemi.

3 Vediamo quali sono i limiti pratici principali: conversione del testo in immagini uso di immagini per il controllo dello spazio bianco uso di tabelle per l'impaginazione scrittura di programmi in sostituzione dello HTML difficile gestione degli aggiornamenti modifiche da effettuare sui singoli file Abbiamo già avuto modo di vedere che le conoscenze che hai acquisito fino ad ora rendono molto complesse le pagine web, che sono poco flessibili e soprattutto creano barriere agli utenti disabili (pensiamo ai frame). I Cascade Style Sheets, che in italiano significa Fogli di stile a cascata, risolvono gran parte dei problemi di gestione e organizzazione delle pagine web.

4 Il vantaggio fondamentale che offrono i fogli di stile rispetto allo HTML è il controllo dello stile delle pagine web attraverso la separazione tra contenuti, struttura e stile. I fogli di stile ti permettono di specificare in modo semplice la spaziatura delle righe, i rientri, i colori usati per il testo e gli sfondi, il corpo e lo stile dei caratteri e una moltitudine di altri dettagli.

5 Vediamo la gestione di una riga di testo attraverso lo HTML: <font face=verdana size=2 COLOR=BLACK>questo è un testo</font> Attraverso questa riga di codice noi diciamo al browser di far visualizzare la scritta "questo è un testo" con un font Verdana di dimensioni 2 e di colore nero. Il testo e lo stile (font, dimensione e colore) con cui deve essere visualizzato sono uniti in un'unica riga di codice. Cosa succederebbe se dovessi cambiare il font di tutte le pagine del tuo sito, magari composto da più di 100 pagine? Dovresti aprire tutti i file e modificali uno ad uno!!! I fogli di stile, ti risolvono il problema perché separano lo stile dal contenuto Purtroppo uno dei limiti dei fogli di stile è che non sono compatibili con tutti browser nonostante siano stati approvati da il W3C. I browser che offrono la maggiore compatibilità sono Explorer (dalla versione 5.5) e Mozilla (ossia Netscape 7). Netscape 4 ha seri problemi di gestione dei CSS.

6 Come utilizzare i CSS Ma cosa si intende per stile? Uno stile è un gruppo di attributi di formattazione che definiscono l'aspetto di una parte di testo all'interno di un singolo documento.

7 Puoi utilizzare un foglio di stile CSS per controllare molti documenti contemporaneamente e comprendere in un unico foglio tutti gli stili di un documento. Attraverso l'uso combinato di un foglio di stile CSS e uno stile HTML hai il vantaggio di collegare più documenti. Di conseguenza quando vuoi aggiornare delle caratteristiche di formattazione delle pagine web devi solo modificare il foglio di stile e automaticamente modificherai la formattazione di tutti documenti che utilizzano quello stile CSS.

8 La formattazione HTML manuale ha la precedenza rispetto alla formattazione applicata da uno stile CSS. Per fare in modo che gli stili CSS controllino la formattazione di un paragrafo, è necessario eliminare tutta la formattazione HTML manuale o gli stili HTML.

9 I documenti HTML possono contenere regole di stile direttamente al loro interno o possono importare i fogli di stile (esterno). Separare i fogli di stile dai documenti HTML offre svariati benefici: puoi condividere i fogli di stile per un gran numero di documenti (e siti). puoi cambiare il foglio di stile senza che ciò richieda modifiche al documento.

10 Possiamo dividere i fogli di stile in 3 categorie: fogli di stile in linea: con questo metodo puoi utilizzare uno stile da applicare ad un singolo tag HTML. fogli di stile interni: con questo metodo definisci lo stile non per il singolo TAG, ma per tutta la pagina. fogli di stile esterni: con questo metodo lo stile che vai a definire può essere utilizzato da più pagine web, infatti la definizione viene data all'interno di un file esterno (con estensione.css ) che viene linkato alla pagina con un apposito costrutto.

11 La sintassi che devi usare nei fogli di stile è la seguente : inserisci gli attributi dentro le parentesi graffe { } separa gli argomenti consecutivi dal segno punto e virgola (;) invece che dalla virgola usa i due punti (:) al posto del segno uguale (=) separa con un trattino (-) gli attributi composti da piu' termini Quando un attributo è considerato proprieta' di un oggetto eliminalo e trasforma da minuscole in maiuscole le iniziali dei termini (per esempio: font-style diventa fontstyle)

12 Per inserire i fogli di stile su una pagina html bisogna inserire tra i TAG <head> il TAG <style> in questo modo : <head> <style type="text/css">... </stile> </head>

13 Come definire uno stile Si possono utilizzare gli attributi delle tag: <p align= center ><font color= #3399CC >testo</p> Un semplice stile può essere definito anche all interno di una tag con il parametro STYLE <p style= text-align: center;color:#3399cc >testo</p> STILE IN LINEA

14 CSS in HTML Il foglio di stile viene definito con la tag <STYLE>, che deve trovare posto nell intestazione (head) del documento, nella seguente maniera: <head> >>> <style type= text/css > <!-- STILE INTERNO (definizione dei vari stili) --> >>> </style> </head> Subito dopo la tag <style> viene inserita la parte iniziale della tag di commento (<!--), allo scopo di nascondere la definizione degli stili ai vecchi browser che non li supportano. Per lo stesso motivo il commento viene chiuso prima della tag </style>.

15 Esempio Definiamo l allineamento del testo al centro tramite la tag <style>: <style type= text/css >.centrato {test-align: center; color: #3399CC} </style> Abbiamo definito uno stile chiamato centrato. Il punto che precede la parola centrato è obbligatorio per gli stili definiti dall utente. All interno delle parentesi graffe sono caratteristiche dello stile separate da punto e virgola. definite le Ogni stile così definito viene chiamato regola. Per applicare al testo lo stile così definito possiamo usare il parametro class all interno di una tag da applicare al testo. Per esempio: <p class= centrato >testo</p>

16 Esempio Possiamo anche modificare le proprietà predefinite delle tag HTML <style type= text/css > p {text-align:center; color:#3399cc;} </style> Ogni volta che sarà utilizzata la tag <p> avrà queste caratteristiche. In questo caso il nome dello stile è la tag HTML.

17 Classificazione dei CSS I fogli di stile possono essere divisi in: Stili in linea: non sono vantaggiosi, sono applicati elemento per elemento come gli attributi HTML. (attributo style) Stili Interni: definisce gli stili di tutta la pagina, sono inseriti direttamente nel documento HTML tramite l'elemento <STYLE>. La dichiarazione va posta all'interno della sezione <HEAD>: Stili Esterni: definisce gli stili di più pagine, è unfoglio di stile definito in un file separato dal documento con estensione.css e viene utilizzato nell head tramite il tag LINK

18 STILI ESTERNI <link href="stile.css" type="text/css" rel="stylesheet" /> L'elemento <LINK> presenta una serie di attributi OBBLIGATORI di cui è importante spiegare significato e funzione: 1. href: serve a definire l'url assoluto o relativo del foglio di stile. 2. type: identifica il tipo di dati da collegare. Per i CSS l'unico valore possibile è text/css. 3. rel: descrive il tipo di relazione tra il documento e il file collegato. Per i CSS due sono i valori possibili: stylesheet e alternate stylesheet.

19 Proprietà Le proprietà che possono essere definite nei fogli di stile sono molteplici e di vario tipo. Allineamento del testo; Controllo dei colori e immagini di sfondo; Font; Bordi e margini.

20 Allineamento del testo Allineamento del testo Proprietà Parametri significato letter-spacing Un numero in diverse unità di misura. Spaziatura fra le lettere text-decoration vertical-align Underline, overline, blink, line-through, none. Sub, super, baseline, text-top, middle, bottom, text-bottom. Permette di creare testo sottolineato o barrato o con linee sopra di esso o intermittente. Allineamento verticale di elementi sulla stessa riga. text-align Left, right, center, justify. Allineamento orizzontale. text-transform Capitalize, uppercase, lowercase. Trasforma le lettere in maiuscolo, minuscolo o rende maiuscola solo la prima lettera della parola. text-indent Un numero in diverse unità di misura. Rientro di un paragrafo. line-height Un numero in diverse unità di misura. Altezza di un elemento, come una riga di testo (spazio fra due righe). Il parametro text-decoration è utile nel caso si voglia eliminare la riga di sottolineatura che compare in una parola linkata, come nel seguente esempio: <a href= pagina.htm style= text-decoration: none >testo linkato</a>

21 Colori, immagini e sfondo Colori e immagini di sfondo Proprietà Parametri significato Color Codice o nome di un colore. Colore del testo. Background-color Codice o nome di un colore Colore da usare come sfondo. Background-image URL Immagine da usare come sfondo Background-attachment Fixed, scroll Posizione fissa oppure scorrevole, rispetto alla finestra del browser, dell immagine di sfondo. Backgound-position Numeri in diverse unità di misura. Posizione dell immagine di sfondo Background-repeat Repeat, no-repeat, repeat-x, repeat-y Ripetizione dell immagine di sfondo -Quando viene definita un immagine di sfondo, se è più piccola dell elemento a cui è applicata, viene ripetuta fino a riempire completamente l elemento. I CSS consentono di definire se, e in quale maniera, l immagine debba essere ripetuta. -Se spostiamo le scroll bars, normalmente l immagine di sfondo si sposta all interno della finestra del browser. Con i CSS l immagine può rimanere fissa se si usa la proprietà backgroundattachment.

22 background Nel caso che si debbano definire diverse proprietà il cui nome inizia con background, si può usare anche la proprietà background, che permette di impostare in modo rapido tutti gli attributi. Ad esempio, la seguente definizione di stile:.stile {background-attachment: fixed; background-color: #9999FF; background-repeat: no-repeat} può essere fatta in forma abbreviata anche in altro modo:.stile {background: attachment: fixed #9999FF no-repeat}

23 Font Gestione dei font Proprietà Parametri significato font-family Nome di uno o più font (separati dalla virgola) Il font da utilizzare font-style Normal, italic, oblique Stile del font. font-variant Normal o small-caps Normale o lettere minuscole in maiuscoletto. font-weight Normal, bold, bolder, lighter oppure un numero da 100 a 900 Specifica lo spessore dei caratteri font-size Numero in diverse unità di misura Dimensione dei font Con le tags dell HTML la grandezza del font non può essere definita in modo preciso. La grandezza di default (3) è solo la grandezza che viene definita nelle impostazioni del browser e può essere modificata da menù. Se la grandezza del font definita nel CSS è espressa in pixel, questo numero corrisponde al corpo del font e non può essere modificato tramite le impostazioni.

24 Font Per impostare in maniera rapida diverse proprietà del font, può essere utilizzata la proprietà font, come nel seguente esempio:.provafont {font: italic 12px Arial, Helvetica, sans-serif} equivalente a:.provafont {font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-style: italic}

25 Bordi e margini Bordi e margini Proprietà parametri significato margin-top margin-bottom margin-left margin-right Numero in diverse unità di misura. Margini dell elemento. Spesso vengono applicati ad una cella della tabella o all intero documento. Margin Numero in diverse unità di misura. Valore unico per tutti e quattro i margini di cui sopra. Width Numero in diverse unità di misura. Larghezza dell elemento Height Numero in diverse unità di misura. Altezza dell elemento Float No, left, right Il blocco si dispone attorno ad un elemento. Clear No, left, right Il blocco è libero di spostarsi.

26 Bordi e margini