 CSS: Cascading Style Sheets
|
Argomento della lezione
Cascading Style Sheets (CSS) is a powerful tool for associating style to Web documents.
Instead of using FONT tags or single-pixel GIFs for mixing design elements and content
together, CSS allows the Web designer or Web developer to separate the presentation
from the content. The benefits from a practice that includes CSS are:
- Easier to update site designs
- Structured content in your Web documents
- More control over the design of your Web pages
- Permits you to design how Web pages look when printed
- And much more!
[la parte nel riquadro è scritta facendo uso dei CSS]
|
In questa lezione vediamo brevemente i fogli di stile (CSS: Cascading Style
Sheets) che sono stati introdotti per separare parzialmente
la presentazione e il contenuto di un documento HTML.
Ben presto, infatti, ci si è resi conto del fatto che l'introduzione di
molti tag e attributi HTML permetteva sì di introdurre
elementi grafici più o meno sofisticati nei documenti per il web,
ma portava anche a "mescolare" il contenuto di un documento
con gli aspetti legati alla sua presentazione.
Molti tag, inoltre, venivano usati - e vengono tutt'ora usati -
per uno scopo diverso da quello per cui erano stati pensati. Uno fra tutti,
il tag <table>, viene
usato non per descrivere tabelle di dati, ma per organizzare gli elementi
nella pagina (avendo l'accortezza di usare il valore 0 per l'attributo border).
Per definire l'aspetto grafico di una pagina si possono usare i fogli di stile.
Costituiscono una parte del Dynamic HTML e permettono di specificare
gli attributi di stile dei documenti (tipo di font, colore dei caratteri, margini)
e il posizionamento degli oggetti sulla pagina.
Ormai tutti i browser più recenti supportano i fogli di stile e
si possono scrivere programmi JavaScript per la loro modifica.
Purtroppo però ci sono ancora alcuni problemi di incompatibilità tra i vari browser.
Quindi, anche in questo caso è importante verificare l'aspetto dei documenti
HTML usando i browser principali, per evitare sorprese (in realtà se un
browser non supporta alcune specifiche di stile, usa le sue configurazioni di default).
|
|
Materiale scaricabile 
Lucidi della lezione
- in formato PDF, 2 diapositive per pagina (circa 420 KB)
- in formato PDF, 3 diapositive per pagina, con spazio
per le note (circa 420 KB)
- in formato PDF, 6 diapositive per pagina (circa 410 KB)
|
Esempi CSS
Guardate i sorgenti degli esempi cliccando con il tasto destro del mouse
nella finestra pop up che si apre quando selezionate un link.
Gli stili ***anche se non si dovrebbe fare*** sono scritti
all'interno del file HTML stesso. Ricordate che, poichè lo stesso foglio di stile
è solitamente condiviso da più file HTML, è opportuno usare
un foglio di stile esterno.
- Proprietà
del background
- Stile dei
link
- Posizionamento
mediante la proprietà float
- Posizionamento
assoluto e uso della proprietà zindex
- Modifica
della prima lettera di un paragrafo
|
Esercizi sui fogli di stile 
- Scrivete un foglio di stile esterno che modifica l'aspetto del testo e dei link.
Definite inoltre una classe per posizionare un'immagine (ad esempio un logo)
nello stesso punto in tutte le pagine di un sito.
|
Libro consigliato per questa parte 
Tiziano Daniotti, HTML 4.0 Flash, Apogeo
Altre risorse
- Tutorial sui CSS (in inglese)
Per la stampa andate a fondo pagina e selezionate il link Printer friendly page
- Manuale sui CSS on line (in italiano)
- I CSS sul sito del W3C
(... il W3C è il consorzio dove si decide il "futuro" del Web).
- Effective use of Style Sheets
(consigli di Jakob Nielsen)
|
