Introduzione ai fogli di stile CSS

Transcript

1 CdL in Ingegneria Elettronica e Informatica Modulo di Fondamenti di Informatica D Introduzione ai fogli di stile CSS Ing. Maurizio Vincini a.a. 2000/2001 Programmazione CGI - 1

2 Fogli di stile CSS Il Web nasce per la pubblicazione di contenuti, senza porre attenzione allo stile con il quale viene presentato. PROBLEMA: la diffuzione del WEB al di fuori della comunità scientifica e la creazione nuove professioni (Web Publishing) rendono evidente le limitazioni stilistiche dell HTML. SOLUZIONE: nascita di estensioni dell HTML quali JavaScript, VB Script e Cascade Style Sheet (Fogli di stile a cascata). Un normale documento Html unisce insieme contenuti, struttura e stile. Proviamo infatti a richiamare una normale riga di testo con font verdana, grandezza 3 e colore blu. Testo comune Come si può vedere, il contenuto (Testo comune) è accluso allo stile (font, size e color). Se volessimo modificare il font di un sito formato da 300 documenti, l'operazione, oltre che lunga, potrebbe risultare estenuante. I Css pongono rimedio a questo problema separando lo stile dal contenuto. Programmazione CGI - 2

3 Compatibilità ed uso dei fogli di stile CSS I CSS sono stati ufficialmente riconosciuti e standardizzati dal W3C (consorzio internazionale per lo sviluppo del Web) nelle raccomandazioni "CSS1" e successivamente "CSS2". Si rimanda a questi documenti ufficiali per ulteriori approfondimenti. Il termine "a cascata" (cascading) richiama una delle caratteristiche principali di questa tecnologia, per cui e' possibile incorporare nel documento differenti fogli di stile, ognuno dei quali, in base a regole gerarchiche, prevale sull'altro. compatibilità dei CSS: MS Internet Explorer 3 (parzialmente) MS Internet Explorer 4 MS Internet Explorer 5 Netscape navigator 4 (parzialmente) Esistono tre metodi per richiamare i Css nei documenti Html:? In linea ( Incorporati ( Esterni ( I primi, sono legati a doppio filo con il tag su cui devono agire, i secondi assegnano un tipo di stile a un intero documento, mentre gli utlimi possono influenzare interi siti web con migliaia di pagine Html. Programmazione CGI - 3

4 Fogli di stile in linea I fogli di stile in linea rappresentano una soluzione ottimale per chi vuole attribuire un particolare stile a uno solo o comunque pochi tags Html. Nell'esempio viene mostrato un tipico foglio di stile in linea: testo scritto grazie ai Css In questo caso utilizzare la normale sintassi Html sarebbe risultato identico. Vediamo lo stesso risultato ottenuto con comuni tag Html. Testo scritto grazie a Html Ecco i risultati a confronto. Testo scritto grazie ai Css Testo scritto grazie a Html Con questi semplici esempi si capisce che i Css in linea negano di fatto la separazione tra stile e contenuti. Programmazione CGI - 4

5 Convenzioni fogli di stile Esiste una diversa sintassi che regge gli attributi per i fogli di stile incorporati ed esterni rispetto ad HTML classico:?? gli attributi sono inseriti tra parentesi graffe { }?? al posto del segno = vengono usati i due punti :?? gli argomenti consecutivi sono separati dal segno ; invece che dalla virgola,?? Gli attributi composti da piu' termini sono separati da un trattino -?? Quando un attributo e' considerato proprieta' di un oggetto i trattini si eliminano e le iniziali dei termini diventano maiuscole (per esempio: font-style diventa FontStyle) Programmazione CGI - 5

6 Fogli di stile incorporati I Cascade Style Sheets incorporati sono inclusi tra i tag <HEAD> e </HEAD>, separando lo stile dai contenuti limitatamente al singolo documento HTML. Vediamoun esempio di foglio di stile incorporato: <HTML> <HEAD> <STYLE TYPE=text/css> P, TD {font-size:15px; font-family:verdana; color:green} FONT {font-size:20px; font-family:arial; color:black} </HEAD> <BODY> RISORSE.NET - scritto con i Css incorporati (di 20px, arial e nero) Il sito italiano sulle ultime tecnologie per fare web (di 15px, verdana e verde) </BODY> </HTML> Per attribuire a più tag gli stessi valori è sufficiente indicarli nello stesso foglio di stile sperati da una virgola (P, TD). Programmazione CGI - 6

7 Fogli di stile esterni I fogli di stile esterno separa completamente lo stile dai contenuti. Infatti lo stile viene definito in un file con estensione.css e richiamati con una semplice riga di codice da tutti i documenti Html a cui fanno riferimento. Come creare un foglio di stile esterno:?? Con qualunque editor di testi scrivere il foglio di stile (con la sintassi vista nel passo dedicato ai per i CSS incorporati.?? Richiamare il file contenente il foglio di stile nelle pagine Html. E' necessario inserire tra i tag <HEAD> e </HEAD> la riga: <LINK REL="stylesheet" TYPE="text/css" HREF="layout.css"> dove Link: indica che il collegamento Rel: identifica il tipo di file del collegamento Type: il tipo di formato Href: il percorso del file Programmazione CGI - 7

8 Font family Stile ed effetti sul testo (1) E' l'equivalente dell'attributo FACE del tag in HTML. Per attribuire piu' di un font a questo carattere (in modo che in assenza di uno il browser utilizzi il successivo) è necessario separarli da una virgola e, se si intendesse usare un font composto da piu' termini (per es.: Times New Roman) bisognera' raggrupparli sotto le " ". FONT {font-family:"times new roman", tahoma, arial} Font style Come si puo' intuire dal nome, questo attributo garantisce dello stile al font. I diversi valori possono essere:?? normal o roman, ovvero nessuno stile (default).?? italic corsivo, equivalente a o in Html.?? oblique rende obliquo il testo. FONT { font-style:italic } Programmazione CGI - 8

9 Stile ed effetti sul testo (2) Font size Imposta la grandezza del font, che, a differenza di Html, non soffre di alcun limite di grandezza e di precisione. Un'altra differenza con Html, risiede nel fatto che invece di possedere una sola unita' di misura (da 1 a 7), i Css possono essere scelti tra varie unità di misura. I possibili valori sono:?? absolute-size che possono essere: medium (default), small, x-small, xx-small large, x-large, xx-large.?? relative-size che sono smaller e larger.?? Unita' di misura quali pixel, centimetri ecc.?? Percentuale Non sono permessi valori negativi. Ecco un esempio su come utilizzare la proprietà Font size. FONT { font-size:10pt } Programmazione CGI - 9

10 Font weight Stile ed effetti sul testo (3) Come i tag e in Html, questo attributo specifica lo spessore del font. I valori da utilizzare sono:?? normal che equivale al valore 400.?? bold che equivale al valore 700.?? bolder relativo al peso ereditato dall'elemento parent.?? lighter relativo al peso ereditato dall'elemento parent.?? 100, 200, 300 fino a 900 sequenza ordinata dove ogni numero indica un peso. FONT { font-weight:bold } Font variant Assegna uno stile tutto maiscolo al testo accluso al tag a cui questo CSS fa riferimento. I valori sono:? normal (default).? small-caps FONT { font-variant: small-caps } Programmazione CGI - 10

11 Stile ed effetti sul testo (4) Color Imposta il colore al testo accluso al tag a cui si riferisce. E' lo stesso dell'attributo color del tag nel comune Html. FONT { color:gray } Text decoration L'attributo da usare e' text-decoration e puo' assumere svariati valori:? none (default).? underline? overline? line-through? blink Ad esempio: FONT { text-decoration: overline } Programmazione CGI - 11

12 Stile ed effetti sul testo (5) List style type Indica il tipo di punteggiatura degli elementi contenuti in una lista. I valori che puo' assumere sono:? circle? square? disc (default)? decimal? upper-roman? lower-roman? upper-alpha? lower-alpha? none OL { list-style-type: decimal } List style position Indica dove deve essere posizionato il marcatore rispetto alla rispettiva voce della lista.? inside la linea va a capo senza essere indentata.? outside la linea va a capo indentata. (default) UL { list-style-position: inside } Programmazione CGI - 12

13 Stile ed effetti sul testo (6) List style image Il comune marcatore viene sostituito da un'immagine. I possibili valori sono:? l'indirizzo dell'immagine.? none (default) UL { list-style-image: URL( } List style Dichiara all'interno di una lista la punteggiatura, la posizione e l'immagine che identifica ciascun elemento. UL { list-style: circle inside } White space Determina la gestione degli spazi all'interno di una pagina.? normal (default) mantiene la comune formattazione del testo dell'html (uno spazio);? pre preformatta il testo. Gli spazi, verranno quindi tutti considerati.? nowrap non permette un ritorno a capo, se non tramite il tag p { white-space: pre } Programmazione CGI - 13

14 Effetti interattivi sui link (1)? LINK NON SOTTOLINEATO Sia Explorer che Netscape 4, permettono di eliminare la sottolineatura ai collegamenti. Ecco come fare. A:link, A:visited { text-decoration: none }? LINK NON SOTTOLINEATO AL PASSAGGIO DEL MOUSE Elimina la sottolineatura solo quando ci si passa sopra con il mouse. Invertendo i valori underline con none si otterra' l'effetto contrario. A:link, A:visited { text-decoration: underline } A:hover { text-decoration: none }? LINK SOPRALINEATO AL PASSAGGIO DEL MOUSE Anche in questo caso, invertendo i valori overline e none, si otterra' un effetto opposto. A:link, A:visited { text-decoration: overline } A:hover { text-decoration: none } Programmazione CGI - 14

15 Effetti interattivi sui link (2)? LINK CON CAMBIO DI COLORE AL PASSAGGIO DEL MOUSE Una volta che il mouse passa sopra il link, questo cambia di colore. Il colore puo' essere espresso sia in valori esadecimali (per es. #000080) sia in inglese (navy). Ecco il codice: A:link, A:hover { color:navy }? CAMBIO DEL COLORE DI SFONDO AL PASSAGGIO DEL MOUSE E' possibile impostare un colore di sfondo ai link, anche solo quando si passa sopra con il mouse. A:link, A:hover { background:red } Programmazione CGI - 15

16 Definire lo sfondo e le proprietà del documento (1) Background-color Definisce un omogeneo colore di sfondo al documento. Questo comando si puo' applicare anche a normale testo in modo da ottenere una evidenziatura di sfondo. Il codice da utilizzare e': body { background-color: gray } Background-image Applica un'immagine di sfondo al documento. Anche in questo caso, e' possibile applicaere lo sfondo a un solo elemento. body { background-image: url( } Background-repeat Determina come l'immagine di sfondo deve essere riprodotta. I valori di questa proprieta' possono essere:? repeat Ripete l'immagine sia verticalmente che orizzontalmente.? repeat-y Ripete l'immagine verticalmente.? repeat-x Ripete l'immagine orizzontalmente.? no-repeat L'immagine non viene ripetuta. body { background-repeat: no-repeat } Programmazione CGI - 16

17 Definire lo sfondo e le proprietà del documento (2) Background-position Determina la posizione dell'immagine stabilendo le distanze del margine sinistro e del margine superiore. I valori che puo' assumere sono:? left sinistra? right destra? top alto? bottom basso? center centro body { background: url( left bottom } Background-attachment Se specificata, l'immagine di sfondo non scorre insieme al documento. I valori sono:? scroll l'immagine scorre insieme al documento (di default).? fixed l'immagine non scorre insieme al documento. body { background-attachment: fixed } Background Per unire piu' proprieta' a un solo tag, si utilizza la dicitura background, per esempio: Programmazione CGI - 17

18 body { background:gray url( norepeat } Definire le classi L'assegnazione di classi consente di definire un alto livello di variazione di singoli tag HTML. Ciò avviene aggiungendo un'estensione class ai tradizionali tag dell'html, dopo aver impostato le classi all'interno del foglio di stile. Questo il codice da impostare nel CSS: H2.top {font-family:verdana; font-size:15px; fontweight:bold; font-style:normal} H4.bottom {font-family:arial; font-size:10px; fontweight:bold; font-style:italic} Sussessivamente, all'interno del documento, va inserito il riferimento alla classe: <H4 class=bottom> Testo della pagina </H4> Altro concetto collegato è quello delle pseudoclassi: elementi di un solo tipo che soddisfano un certo criterio contestuale. Un esempio molto chiaro di pseudoclassi è quello relativo agli elementi anchor, che quando visitati costituiscono una pseudoclasse visited, quando attivi active e quando non visitati link. Una pesudoclasse viene specificata all'interno dello stile seguita dai due punti: A:link { text-decoration: none } visited { text-decoration: none } Programmazione CGI - 18

19 Editor per fogli si stile Elenco dei piu' diffusi compilatori e debugger per Fogli di stile a cascata:? CoffeeCup StyleMaker ++ for creating style sheets Style One for creating style sheets T/products/styleone/Homepage.html? Prime Style css for creating style sheets Style Pro for creating style sheets Style Maker A visual tool for creating style sheets Programmazione CGI - 19

20 Per saperne di più Cascading Style Sheets, level 1 (CSS1) La prima versione delle raccomandazioni ufficiali del World Wide Web Consortium sui fogli di stile, accettate da Microsoft e Netscape. Cascading Style Sheets, level 2 (CSS2) L'evoluzione dei CSS1 che in questa seconda stesura presentano novita' di rilievo. CSS secondo HTML 4 (italiano) consortium/specifiche_html40/html/present/styles.ht ml HTML 4 ha introdotto corpose novita' anche per i fogli di stile, gia' standardizzati nella versione 3.2. W3C e CSS Ancora dal W3C, link e materiale informativo Tutorial in lingua inglese sui CSS Webreview Webdeveloper The WDVL DOT css Programmazione CGI - 20