1 Cascading Style Sheets, meglio noti come CSS o fogli di stile.

Transcript

1 Sommario CSS 1 Cascading Style Sheets, meglio noti come CSS o fogli di stile Fogli di stile "in linea" Fogli di stile "interni" Fogli di stile "esterni" Che tipo di foglio di stile scegliere? Selettore di classe (class selector) Selettore di ID (id selector) Sfondi Immagine di sfondo Immagine di sfondo - Attachment Immagine di sfondo - Repeat LA FORMATTAZIONE DEI LINK PERCHÉ MODIFICARE L'ASPETTO DEI LINK? MENU GRAFICI CON ROLLOVER IL MENU COME LISTA ETICHETTE - MENU ORIZZONTALI Cascading Style Sheets, meglio noti come CSS o fogli di stile. Il termine "cascata" (cascading) indica una delle caratteristiche principali dei CSS, infatti questi possono essere inseriti più di uno nello stesso documento seguendo regole gerarchiche, quindi ci sono CSS più importanti e altri meno. I CSS sono supportati dai maggiori browser.. I fogli di stile possono essere inclusi nelle pagine HTML in 3 modi differenti: 1. in linea; 2. internamente; 3. esternamente. L'inserimento "in linea" avviene direttamente all'interno di un prederminato tag HTML nel corpo del documento; l'inserimento "interno" avviene nell'intestazione del documento tra i tag e ; l'inserimento "esterno" viene effettuato da un file apposito con estensione ".css" che viene richiamato con un semplice link all'interno dell'intestazione di ciascuna pagina.

2 1.1 Fogli di stile "in linea" <p style="gli elementi di stile vanno inseriti qui"></p> 1.2 Fogli di stile "interni" <style type="text/css">gli elementi di stile vanno inseriti qui 1.3 Fogli di stile "esterni" <LINK href="nomefile.css" rel="stylesheet" type="text/css"> Come si vede in quest'ultimo esempio il documento punta ad un file con estensione ".css" esterno. All'interno di questo file, preparato con il BloccoNote di Windows o con un qualunque altro editor di testo, vi saranno tutti gli elementi di stile. Questo file potrà avere un qualsiasi nome, ma sempre estensione ".css". Ovviamente il nome vero del file dovrà essere sostituito nell'esempio posto sopra a "nomefile.css". Nota: se il file esterno non fosse nella stessa cartella che contiene il documento HTML che lo richiama occorrerà modificare il percorso nella stringa. Se, ad esempio, si trovasse in una sottocartella chiamata stili il richiamo assumerebbe questa forma: <LINK href="stili/nomefile.css" rel="stylesheet" type="text/css">.

3 Se si trovasse in una cartella superiore chiamata sempre stili il richiamo assumerebbe questa forma: <LINK href="../stili/nomefile.css" rel="stylesheet" type="text/css">. Se si trovasse addirittura su un altro spazio web assumerebbe questa forma: <LINK href=" rel="stylesheet" type="text/css">. L'elemento <LINK> presenta una serie di attributi di cui è importante spiegare significato e funzione: 1. rel: descrive il tipo di relazione tra il documento e il file collegato. E' obbligatorio. Per i CSS due sono i valori possibili: stylesheet e alternate stylesheet. Approfondimenti nella lezione 5, "Fogli di stile alternativi". 2. href: serve a definire l'url assoluto o relativo del foglio di stile. E' obbligatorio. 3. type: identifica il tipo di dati da collegare. Per i CSS l'unico valore possibile è text/css. L'attributo è obbligatorio. 4. media: con questo attributo si identifica il supporto (schermo, stampa, etc) cui applicare un particolare foglio di stile. Attributo opzionale. Possibili valori di Media Value all Description Default. Suitable for all devices aural braille handheld projection print screen tty Speech synthesizers Braille feedback devices Handheld devices (small screen, limited bandwidth) Projectors Print preview mode/printed pages Computer screens Teletypes and similar media using a fixed-pitch character grid tv Television type devices (low resolution, limited scroll ability) 1.4 Che tipo di foglio di stile scegliere? Dipende dal tipo di sito, da quante pagine è formato, se le pagine devono avere tutte o gran parte di esse lo stesso stile. i fogli di stile "in linea" non sono molto pratici in quanto per ogni paragrafo interessato occorre inserirli manualmente, operazione che su pagine complesse può diventare molto lunga e ripetitiva; i fogli di stile "interni" sono adatti a siti formati da poche pagine oppure a siti che, pur avendo un certo numero di pagine, necessitano di stili differenti per ciascuna pagina o gruppo di pagine; i fogli di stile "esterni" sono adatti a siti di dimensioni medio grandi o grandi e che hanno

4 l'esigenza che tutte le pagine abbiano, in termini di stile, le medesime caratteristiche. Con un foglio di stile "esterno" è infatti estremamente facile cambiare le caratteristiche di tutte le pagine: se abbiamo un sito scritto tutto in "Arial 12" e vogliamo sostituire il carattere con un "Verdana 10" basterà cambiare il riferimento al font nel foglio di stile e, in un colpo solo, avremo modificato tutte le pagine! 1.5 Selettore di classe (class selector) Serve quando si ha la necessità di associare ad uno stesso tag XHTML differenti stili. Nei CSS i selettori class utilizzano. (il punto) p.centrato { text-align: center; In questo caso il paragrafo di classe CENTRATO avrà il testo allineato al centro; per richiamarlo nel foglio xhtml si inserirà : <p class= centrato > sono il testo centrato </p> Altro esempio:.contenitore { color: rgb(158,0,0); border: 1px solid Red; padding: 3px; margin-top: 05em; background: #f9f5de; <p class= contenitore > sono un testo dentro un contenitore </p> 1.6 Selettore di ID (id selector) I selettori di ID permettono di assegnare una regola CSS ad un unico elemento nella pagina XHTML che è specificato attraverso l' attributo ID. Comunemente sono utilizzati per applicare uno stile a BOX specifici. Nei CSS i selettori ID utilizzano # (il cancelletto) CODICE CSS #colonna-sx { float: left; width: 20%; CODICE XHTML <div id="colonna-sx"> <!-- eccetera --> </div>

5 Si può specificare un selettore ID nei seguenti modi: #menu { proprietà: valore; proprietà: valore; oppure div#menu { proprietà: valore; proprietà: valore; 2 Sfondi Il colore di sfondo predefinito di un documento HTML è il bianco, ma naturalmente si può cambiare con molta facilità. Vediamo coma farlo con un foglio di stile "interno": <style type="text/css">body { background:#ffff00; color:# body { background:#ffff00 cambierà il colore di sfondo in giallo. Si possono usare, al posto del formato esadecimale, anche i nomi dei colori in lingua inglese. Ad esempio con la stringa body { background:yellow si otterrà lo stesso risultato, ma l'utilizzo del formato esadecimale consentirà di adottare sfumature di colore altrimenti non ottenibili. Analogamente si possono usare colori anche in formato rgb utilizzando la stringa body { background:rgb(255,255,0) Nota 1: I colori espressi in formato esacimale devono essere preceduti dal simbolo della celletta # Nota 2: Come avrai notato, sono stati utilizzati due simboli, le parentesi graffe, non presenti in una normale tastiera. Poiché sono simboli ricorrenti

6 nella creazione dei fogli di stile, occorre spiegare come ottenerli: la parentesi graffa aperta { si ottiene tenendo premuti contemporaneamente i tasti "maiuscolo (Shift)", "control (Ctrl)", "alterna (Alt)", digitando la lettera è e rilasciando i tasti; la parentesi graffa chiusa si ottiene tenendo premuti contemporaneamente i tasti "maiuscolo(shift)", "control (Ctrl)", "alterna (Alt)", digitando il simbolo + (attenzione quello a fianco della lettera "è" e non quello del tastierino numerico!) e rilasciando i tasti. 2.1 Immagine di sfondo Ovviamente, al posto di un colore, potresti decidere di utilizzare un'immagine di sfondo. Vediamo coma farlo con un foglio di stile "interno": <style type="text/css">body { background-image: url("sfondo.jpg") body { background-image: url("sfondo.jpg") userà l'immagine "sfondo.gif" come background. Ovviamente il nome potrà essere anche diverso e potrai usare anche un'immagine ".gif". Nota: se l'immagine da utilizzare come sfondo non fosse nella stessa cartella che contiene il documento HTML, occorrerà modificare il percorso nella stringa. Se, ad esempio, si trovasse in una sottocartella chiamata img la stringa assumerebbe questa forma: body { background-image: url("img/sfondo.jpg") Se si trovasse in una cartella superiore chiamata sempre img la stringa assumerebbe questa forma: body { background-image: url("../img/sfondo.jpg") Se si trovasse addirittura su un altro spazio web assumerebbe questa forma:

7 body { background-image: url(" Abbiamo visto come inserire un'immagine di sfondo. Uno potrebbe chiedersi il perché inserire uno sfondo con un foglio di stile, anziché con un semplice comando HTML. Perché con un foglio di stile si possono assegnare delle particolari caratteristiche alle immagini di sfondo, impensabile con il solo HTML, o comunque di difficile attuazione. Vediamo alcuni elementi nei particolari Immagine di sfondo - Attachment Determina se lo sfondo deve rimanere fisso (default) oppure muoversi con il testo. Ha due possibili valori: fixed scroll <style type="text/css">body { background-image: url("sfondo.jpg"); background-attachment: fixed background-image: url("sfondo.jpg"); background-attachment: fixed fa si che l'immagine dello sfondo rimanga statica, mentre il contenuto della pagina scorre. <style type="text/css">body { background-image: url("sfondo.jpg"); background-attachment: scroll

8 background-image: url("sfondo.jpg"); background-attachment: scroll fa si che sia l'immagine dello sfondo che il contenuto della pagina scorrano assieme. 2.3 Immagine di sfondo - Repeat Determina come deve replicarsi l'immagine di sfondo. Ha quattro possibili valori: repeat-y repeat-x repeat no-repeat <style type="text/css">body { background-image: url("sfondo.jpg"); background-repeat: repeat-y background-image: url("sfondo.jpg"); background-repeat: repeat-y fa si che lo sfondo si ripeta solo in una colonna verticale posta sul lato sinistro del monitor lasciando vuoto il resto della pagina.

9 <style type="text/css">body { background-image: url("sfondo.jpg"); background-repeat: repeat-x background-image: url("sfondo.jpg"); background-repeat: repeat-x fa si che lo sfondo si ripeta solo in una riga orizzontale posta sul lato superiore del monitor lasciando vuoto il resto della pagina. <style type="text/css">body { background-image: url("sfondo.jpg"); background-repeat: repeat background-image: url("sfondo.jpg"); background-repeat: repeat fa sì che lo sfondo si ripeta su tutta la superficie della pagina. Formalmente equivale ad omettere il valore. <style type="text/css">body { background-image: url("sfondo.jpg"); background-repeat: no-repeat

10 background-image: url("sfondo.jpg"); background-repeat: no-repeat fa sì che lo sfondo non si ripeta. In pratica appare solo una tessera nell'angolo superiore sinistro della pagina che è poi il punto di origine. Nota: Gli argomenti si possono anche sommare tra loro, basta che non siano in contrasto. Uno stile come quello riportato qui sotto genererà una pagina <style type="text/css">body { background-image: url("sfondo.jpg"); background-attachment: fixed; background-repeat: repeat-y background-image: url("sfondo.jpg"); background-attachment: fixed; background-repeat: repeat-y farà sì che lo sfondo si ripeta in una colonna verticale posta sul lato sinistro del monitor e che non scorra con il resto del contenuto della pagina. Il codice CSS per il link (menu verticali e orizzontali) 3 LA FORMATTAZIONE DEI LINK -I link sono quanto di più irritante si possa trovare nel trattamento tipografico sul Web, soprattutto perché (tra le altre cose) cambiano il loro aspetto dinamicamente, cosa di cui la tipografia tradizionale non si era mai dovuta preoccupare. Tim Berners-Lee pensò che i link dovessero essere sottolineati; non fu una cattiva idea: la sottolineatura è rara in tipografia, e quindi non c'era rischio di possibili associazioni logiche. Decise anche che dovessero essere blu il che, ma se ne può discutere, non è stato forse altrettanto saggio. Questo è uno dei rari casi in cui l'uso di due variabili (il colore e la sottolineatura) per differenziare un elemento funziona veramente: una variabile (il colore) vi dice che l'elemento è diverso dal testo circostante e vi da informazioni di stato (visitato, non visitato); l'altra variabile indica che si tratta di un elemento dinamico. Dal momento che per default il colore di un link cambia in funzione del suo stato, mentre la sottolineatura non cambia, è quest'ultima che ha assunto il significato quasi universale di link.

11 Per questa ragione, di norma, conviene evitare l'uso della sottolineatura per cose diverse dai link.- (CSS hoepli) 3.1 PERCHÉ MODIFICARE L'ASPETTO DEI LINK? Se si usano colori o immagini particolari per lo sfondo della pagina o di una tabella, modificare i colori predefiniti risulta l'unico modo per visualizzare correttamente questi fondamentali ele-menti. Grazie ai CSS è possibile assegnare colori, decorazioni del testo, font o colori di sfondo diversi a seconda dello stato del link. Nel linguaggio dei CSS le configurazioni possibili dei link sono cinque e rientrano in una speciale categoria, quella delle pseudoclassi. Esse definiscono uno stile per un elemento al verificarsi di certe condizioni. La sintassi è: "elemento:condizione". Nelle specifiche dei CSS sì distinguono cinque possibili condizioni per i link: 1. a:link - Definisce un link non ancora visitato. 2. a:visited - Definisce un link visitato, ovvero presente nella memoria del browser. 3. a:hover - Definisce lo stato del link quando l'utente sposta il cursore su di esso (compare la manina). Tuttavia, seppur una minoranza, non tutti gli utenti utilizzano il mouse per selezionare i link, ma utilizzano invece il tab della tastiera e dato che la classe 'hover' è legata allo stumento con cui si interagisce (il mouse), con una navigazione da tastiera i link non vengono differenziati come avverrebbe con il mouse. La soluzione sarebbe utilizzare la pseudo classe 'focus'. Che però non è supportata da Internet Explorer. Per ottenere lo stesso effetto anche su IE si usa la pseudo classe 'active'. 4. a:focus - E importante questa condizione perché è abbinata al link puntato tramite la tastiera con il tasto tab (tabindex) o l accesskey. 5. a:active - Definisce lo stato del link mentre il tasto del mouse è premuto e non rilasciato o puntato da focus - Inseriamo il seguente codice html nel menu verticale: <a href="...">primo link</a> <a href="...">secondo link</a> <a href="...">terzo link</a> Esempi: Per modificare i colori nelle condizioni definiamo le pseudoclassi nei nel nostro foglio stile: /*---- LINK DA VISITARE ----*/ a.:link { color: #006699; text-decoration: none; /*---- LINK VISITATO ----*/ a.:visited { color: Lime; text-decoration: none;

12 /*---- LINK PUNTATO DAL MOUSE ----*/ a:hover { color: White; background-color: Blue; text-decoration: none; /*---- LINK ATTIVO ----*/ a.:active { color: Black; background-color: Fuchsia; text-decoration: none; /*---- LINK PUNTATO TRAMITE TASTIERA - TASTO TAB ----*/ a.:focus { color: Black; background-color: Aqua; text-decoration: none; 3.2 MENU GRAFICI CON ROLLOVER Orientare l'utente nella navigazione Prima di addentrarci nella realizzazione pratica dei menu, una piccola introduzione sull'usabilità di un menu di navigazione. Ci sono alcuni principi di cui si dovrebbe tenere sempre conto: l'utente dovrebbe poter capire facilmente dove può andare: è quindi indispensabile avere una navigazione chiara e ben distinta dal resto della pagina, sia a livello spaziale che di colore; è importante distinguere i link al passaggio del mouse: questo per far capire all'utente che il cambiamento di stato del link, grazie al rollover, indica un possibile cambiamento di pagina; l'utente dovrebbe poter capire immediatamente dove si trova: è quindi importante distinguere la pagina/sezione corrente tramite il menu. Il menu deve essere accessibile anche se il foglio stile non viene caricato (non vedenti) 3.3 IL MENU COME LISTA Per rendere i menu verticali compatibili con tutti i browser il codice (X)HTML è stato reso più semplice e chiaro possibile usando le liste. Il codice (X)HTML di un menu sarà, ad esempio, il seguente: <div id="menu"> <ul > <li ><a href="...">primo link</a></li>

13 <li><a href="...">secondo link</a></li> <li><a href="...">terzo link</a></li> </ul> </div> Attraverso le regole CSS trasformeremo una semplice lista di link in un semplice menu verticale. Per fare ciò elimineremo i marcatori di lista e la sottolineatura, aggiungeremo un effetto roll-over realizzato con i soli CSS senza l'uso del JavaScript e renderemo il link attivo non solo sul testo ma su tutta l'area orizzontale associata al link. Per realizzare tale trasformazione abbiamo adottato le seguenti regole CSS. div#menu { color: #000; div#menu ul { list-style: none; /* elimino i punti elenco */ margin: 0px 0px 0px 0px; /* elimino i rientri delle liste */ padding: 0px 0px 0px 0px; /* elimino i rientri delle liste */ Innanzitutto impostiamo il contenitore del menu, e definiamo le caratteristiche del nostro marcatore: eliminiamo i marcatori della lista ed annulliamo l'indentazione tipica delle liste. A questo punto il menu appare con una semplice lista di link, senza marcatori né indentazione. div#menu li{ margin: 0px; padding: 0px 0px 1px 0px; div#menu li a { padding: 3px 6px 3px 6px; display: block; /* il link occupa tutto lo spazio orizzontale */ color: white; background-color: #607e91; text-decoration: none;/* elimino la sottolineatura, che si tratta di un link si capisce dalla struttura */ height:2em; line-height:2em; /* altezza del link: height e line-height devono avere il medesimo valore */ Attraverso la dichiarazione display:block, il link occuperà tutta l'area orizzontale quindi non sarà cliccabile solo il testo del link ma tutta l'area della riga occupata dal link. Si elimina poi la sottolineatura del link poiché sarà la struttura stessa del menu ad indicare la presenza di collegamenti.

14 Attraveso il padding si discostano i link dal bordo del menu. Utilizzando le proprietà height e line-height è possibile determinare l'altezza dell'area occupata da ogni singolo link. Ciò si dimostra molto utile anche per un piacevole "effetto collaterale" che annulla un fastidioso bug di Internet Explorer. Su quest'ultimo browser, infatti, il link non occupa tutta l'area (nonostante la dichiarazione display:block) se è contenuto in un elemento di cui si è fissata la larghezza (come appunto l'elemento ul.menu1). Lo svantaggio di specificare l'altezza (necessario per sopperire ad un bug di Internet Explorer) consiste nel fatto che se il testo del link non entra tutto in una sola riga si possono avere spiacevoli sovrapposizioni fra link adiacenti. Infine si crea l'effetto roll-over, sfruttando la pseudo-classe a:hover semplicemente giocando con i colori dello sfondo e del testo dei link. 3.4 ETICHETTE - MENU ORIZZONTALI Prendiamo spunto dal menu verticale per realizzare il menu orizzontale. Inseriamo il codice html: <h1>testata</h1> <div id="nav"> <ul > <li><a href="index.html" >Home</a></li> <li><a href="mappa.html" >Mappa</a></li> <li><a href="aiuti.html" >Aiuti</a></li> </ul> </div> Ed il codice css: /* ==== NAVIGAZIONE ORIZZONTALE ===*/ div#nav{ color: #333366; background-color: #efefef; height: 20px; div#nav ul { list-style: none; /* elimino i punti elenco */ margin: 0px 0px 0px 0px; /* elimino i rientri delle liste */ padding: 0px 0px 0px 0px; /* elimino i rientri delle liste */

15 div#nav li { display: inline; /* mette gli elementi della lista in linea */ padding: 2px 5px 0px 5px; margin: 0px 0px 0px 5px; div#nav li a{ color: #333366; background-color: #efefef; text-decoration: none; div#nav li a:hover, div#nav li a:focus, div#nav li a:active { color: #333366; background-color: #fff; border-bottom: 5px solid #A5A5A5; L unica cosa importante e diversa è la linea evidenziata. Se vogliamo creare delle linguette della stessa lunghezza dobbiamo inserire i seguenti comandi In div#nav li a display: block; width: 65px; (lunghezza linguetta)