Download formato ppt

HTML
Lezione 3
Stili
Lo stile
• Lo stile è l’insieme delle caratteristiche grafiche con le
quali un elemento viene tracciato sulla pagina.
• Gli stili indicano al browser i colori dello sfondo e del
testo, il tipo di font, le dimensioni del font,
l’allineamento nella pagina, l’interlinea, ecc.
• Se non viene indicato nessuno stile, il browser traccia
l’elemento con degli stili predefiniti.
• Ad esempio, un paragrafo viene tracciato con il testo
nero su sfondo bianco, allineato a sinistra e con font
Times New Roman di dimensione 12px.
Attributi di un elemento
• Ogni elemento HTML ha delle proprietà (dette attributi),
alle quali HTML ha dato un nome e alle quali lo
sviluppatore assegna un valore
• Il valore di una proprietà può essere un numero, una
misura, una parola specifica del linguaggio, un codice di
colore, etc.
• In HTML le proprietà di un elemento vengono scritte
all’interno del tag iniziale dell’elemento con la sintassi
nome="valore"
Esempio di attributo
• Ad esempio nella sintassi
<p align="center">testo tracciato al centro</p>
l’attributo align (allineamento) riceve il valore center, il
che significa che si dice al browser di tracciare il testo
del paragrafo centrato orizzontalmente nella pagina
• Se non viene specificato nulla, l’attributo align assume il
valore left (a sinistra)
Altri valori sono right (a destra) e justify (giustificato)
HTML e lo stile
• HTML è semplice ma non dà molte possibilità riguardo lo
stile per gli elementi
• Per il testo, ad esempio, HTML ha l’elemento FONT che
permette di scegliere il tipo di carattere, la dimensione
del font (ma solo tra sette dimensioni!!) ed il colore del
testo
• Questo elemento è oggi deprecato dalle specifiche
ufficiali dell’HTML, nel senso che viene suggerito di non
usarlo più e di sostituirlo con gli stili CSS.
Esempio per l’elemento FONT
• Esempio
<p><font face=“Tahoma" size="2" color="red">testo
del paragrafo</font></p>
• L’attributo face riceve come valore il tipo di font
• L’attributo size riceve come valore un numero che va da
1a7
• L’attributo color riceve come valore o un nome di colore
o un codice di colore
Come viene tracciato nel browser
(è confrontato con un paragrafo senza font)
Gli stili CSS
• Nel 1996 il W3C (il consorzio ) introdusse un nuovo sistema
per lo stile degli elementi, da affiancare all’HTML, invitando
gli sviluppatori a non usare più l’HTML per lo stile degli
elementi
• Il nuovo sistema di istruzioni si chiama CSS (Cascading
Style Sheets = Fogli di Stile a Cascata)
• Fogli: gli stili possono anche essere scritti in file di testo
esterni alla pagina HTML e chiamati dalla pagina
A cascata: lo stile di un elemento viene scritto o per
l’elemento stesso o per gli elementi che lo contengono
secondo delle precise regole di ereditarietà
Le versioni CSS
• La prima specifica ufficiale di CSS (CSS1) risale al dicembre
del 1996.
• Nel maggio 1998 è stata la volta della seconda versione:
CSS2 che consisteva di molte aggiunte rispetto alla prima.
• E' attualmente allo stato di studio la nuova specifica CSS3.
• Il perché del ritardo del rilascio di nuove versioni è dovuto
al fatto che i produttori di browser non si accordano sugli
standard (occorrerebbe fare in modo che tutti i browser
interpretassero le istruzioni di una pagina web nello stesso
modo e che la pagina web venisse resa uguale in tutti
browser)
Inserire gli stili CSS
• Gli stili possono essere inseriti in tre modi
– In linea o locali, nel singolo elemento, quando si desidera
applicare lo stile a quell’elemento
– Interni, scritti nell’intestazione (elemento HEAD) della
pagina HTML, quando si desidera applicare a tutti gli
elementi della pagina
– Esterni, cioè scritti in un altro file di testo, che viene
acquisito dalla pagina web; questo metodo è il più usato
per i siti web, perché lo stesso stile può essere utilizzato
per centinaia di pagine con una sola istruzione.
Stili locali
• Per applicare uno stile in un elemento HTML:
– Digitare style=“ all’interno del tag iniziale
dell’elemento
– Scrivere le varie regole con la sintassi
proprietà:valore; proprietà:valore; ….
– Digitare le virgolette finali “
Esempio di stili locali
•Stile in un paragrafo
<p style="font-family:Tahoma;font-size:14px;color:red"> testo del
paragrafo</p>
<p style="font-family:Verdana;font-size:18px;color:red; backgroundcolor:black;"> testo del paragrafo</p>
Il nome delle proprietà usate è stato scelto dai programmatori in modo
semplice ed evidente (solo che sono in inglese!) ed anche il valore da
assegnare è abbastanza intuitivo (la famiglia è il nome del tipo di
carattere, size è il numero e l’unità di misura e color è il codice di un
colore)
L’effetto che si ottiene