docIntroduzione ai fogli di stile CSS
download 
Reclamo Transcript
Introduzione ai fogli di stile CSS
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
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.
<FONT FACE=VERDANA SIZE=3 COLOR=BLUE>Testo
comune</FONT>
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
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 (http://www.risorse.net/css/inlineacss.asp)
? Incorporati
(http://www.risorse.net/css/incorporaticss.asp)
? Esterni (http://www.risorse.net/css/esternicss.asp)
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
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:
<FONT
STYLE="font-family:tahoma;
font-size:10pt;
color:green">Testo scritto grazie ai Css</FONT>
In questo caso utilizzare la normale sintassi Html
sarebbe risultato identico. Vediamo lo stesso risultato
ottenuto con comuni tag Html.
<FONT
FACE=TAHOMA
SIZE=2
COLOR=GREEN>Testo scritto grazie a Html</FONT>
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
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
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}
</STYLE>
</HEAD>
<BODY>
<FONT>RISORSE.NET - scritto con i Css incorporati (di
20px, arial e nero)
</FONT> <BR><BR>
<P>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
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
Stile ed effetti sul testo (1)
Font family
E' l'equivalente dell'attributo FACE del tag <FONT> 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 " ".
<STYLE>
FONT {font-family:"times new roman", tahoma, arial}
</STYLE>
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 <I> o <EM> in Html.
??
oblique rende obliquo il testo.
<STYLE>
FONT { font-style:italic }
</STYLE>
Programmazione CGI - 8
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.
<STYLE>
FONT { font-size:10pt }
</STYLE>
Programmazione CGI - 9
Stile ed effetti sul testo (3)
Font weight
Come i tag <B> e <STRONG> 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.
<STYLE>
FONT { font-weight:bold }
</STYLE>
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
<STYLE>
FONT { font-variant: small-caps }
</STYLE>
Programmazione CGI - 10
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 <font> nel comune Html.
<STYLE>
FONT { color:gray }
</STYLE>
Text decoration
L'attributo da usare e' text-decoration e puo' assumere svariati
valori:
? none (default).
? underline
? overline
? line-through
? blink
Ad esempio:
<STYLE>
FONT { text-decoration: overline }
</STYLE>
Programmazione CGI - 11
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
<STYLE>
OL { list-style-type: decimal }
</STYLE>
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)
<STYLE>
UL { list-style-position: inside }
</STYLE>
Programmazione CGI - 12
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)
<STYLE>
UL { list-style-image: URL(http://server/img.gif }
</STYLE>
List style
Dichiara all'interno di una lista la punteggiatura, la posizione e
l'immagine che identifica ciascun elemento.
<STYLE>
UL { list-style: circle inside }
</STYLE>
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 <BR>
<STYLE>
p { white-space: pre }
</STYLE>
Programmazione CGI - 13
Effetti interattivi sui link (1)
? LINK NON SOTTOLINEATO
Sia Explorer che Netscape 4, permettono di eliminare la
sottolineatura ai collegamenti.
Ecco come fare.
<STYLE>
A:link, A:visited { text-decoration: none }
</STYLE>
? 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.
<STYLE>
A:link, A:visited { text-decoration: underline }
A:hover { text-decoration: none }
</STYLE>
? LINK SOPRALINEATO AL PASSAGGIO DEL MOUSE
Anche in questo caso, invertendo i valori overline e none, si
otterra' un effetto opposto.
<STYLE>
A:link, A:visited { text-decoration: overline }
A:hover { text-decoration: none } </STYLE>
Programmazione CGI - 14
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:
<STYLE>
A:link,
</STYLE>
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.
<STYLE>
A:link, A:hover { background:red }
</STYLE>
Programmazione CGI - 15
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(http://nomeserver/nomeimg.gif) }
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
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(http://nomeserver/nomeimg.gif) 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
body { background:gray url(http://tuosito.it/nomeimg.gif)
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:
<STYLE>
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}
</STYLE>
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:
<STYLE>
A:link { text-decoration: none } visited { text-decoration:
none }
</STYLE>
Programmazione CGI - 18
Editor per fogli si stile
Elenco dei piu' diffusi compilatori e debugger per Fogli di stile
a cascata:
? CoffeeCup StyleMaker ++ for creating style sheets
http://www.coffeecup.com/
? Style One for creating style sheets
http://www.3-t.com/3T/products/styleone/Homepage.html
? Prime Style css for creating style sheets
http://prime.nmnet.net/style/
? Style Pro for creating style sheets
http://www.leovdb.dircon.co.uk/
? Style Maker A visual tool for creating style sheets
http://www.danere.com/StyleMaker/
Programmazione CGI - 19
Per saperne di più …
Cascading Style Sheets, level 1 (CSS1)
http://www.w3.org/TR/REC-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)
http://www.w3.org/TR/REC-CSS2/
L'evoluzione dei CSS1 che in questa seconda stesura
presentano novita' di rilievo.
CSS secondo HTML 4 (italiano)
http://www.liberliber.it/biblioteca/w/world_wide_web_
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
http://www.w3.org/Style/CSS/
Ancora dal W3C, link e materiale informativo
Tutorial in lingua inglese sui CSS
Webreview
http://webreview.com/wr/pub/guides/style/style.html
Webdeveloper
http://www.webdeveloper.com/html/html_css_1.html
The WDVL
http://www.wdvl.com/Authoring/Style/Sheets/
DOT css
http://www.eskimo.com/~bloo/indexdot/css/index.html
Programmazione CGI - 20
Documenti analoghi
CSS - DISI
color:black; background-color:yellow; }
font-size:120%; font-style:italic; color:green; }
margin-left:10%; margin-right:10%; }
font-family: "Times New Roman", Arial; }
bold, top, left, bottom, no-repeat, repeat-x
large, medium, small, collapse, separated...
