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 1 a 7 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; background-color: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