Home | Search | Help  
Home Page Università di Genova

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
  1. in formato PDF, 2 diapositive per pagina (circa 420 KB)
  2. in formato PDF, 3 diapositive per pagina, con spazio per le note (circa 420 KB)
  3. 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.
  1. Proprietà del background
  2. Stile dei link
  3. Posizionamento mediante la proprietà float
  4. Posizionamento assoluto e uso della proprietà zindex
  5. Modifica della prima lettera di un paragrafo


Esercizi sui fogli di stile
  1. 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
  1. Tutorial sui CSS (in inglese)
    Per la stampa andate a fondo pagina e selezionate il link Printer friendly page

  2. Manuale sui CSS on line (in italiano)
  3. I CSS sul sito del W3C (... il W3C è il consorzio dove si decide il "futuro" del Web).
  4. Effective use of Style Sheets (consigli di Jakob Nielsen)


torna alla lezione precedente
torna alla prima pagina del corso
vai alla prossima lezione