Introduzione

1
Introduzione

• CSS è lacronimo di Cascading Style Sheets (fogli
  di stile a cascata).
• È un linguaggio standard del W3C.
• Le evoluzioni
• CSS1 la prima specifica ufficiale risale al
  dicembre 1996.
• CSS2 nel maggio 1998 è rilasciata la seconda
  versione che si arricchisce di molte proprietà in
  più rispetto alla prima versione.Lultima
  versione è la level 2 revision 1 (CSS 2.1).
• CSS3 ancora in fase di studio (Working Draft).

2
A cosa servono?

• A separare Presentazione e contenuto.
• Modularizzare aspetti legati alla presentazione.
• Modificare laspetto di più pagine con il minimo
  sforzo.

3
La sintassi dei CSS

• Un foglio di stile è un insieme di regole.
• Ogni regola prevede la seguente sintassi

selettore
proprietà valore

• Per esempio la seguente regola
• p color red
• colora di rosso il testo allinterno del
  paragrafo.
• Gli spazi, linvio a capo e le tabulazioni non
  contano.

selettore
proprietà
valore
4
Come includere i CSS in HTML

• Tre sono i modi per associare le regole ai tag
  HTML
• CSS Interni
• CSS in linea
• CSS Esterni
• Foglio di stile interno
• ltstyle type"text/css"gt
• h1
• font-size 18pt
• text-align center
• lt/stylegt
• Stile in linea
• ltp style"font-size 12pt colorred"gtEsempiolt/p
  gt

5
CSS esterni

• Le regole vengono scritte in un file di testo e
  salvato con estensione css.
• Ci sono due metodi di inclusione di CSS esterni
• Usare lelemento ltlinkgt allinterno della sezione
  ltheadgt
• ltlink rel"stylesheet href"nomefile.css"
  type"text/css"gt
• rel indica il tipo di relazione (stylesheet o
  alternate stylesheet per i fogli di stile
  alternativi).
• href url del foglio.
• type il tipo MIME (tipo di dati) del foglio.
• Usare la direttiva _at_import (a volte risolve
  problemi di compatibilità tra browser)
• ltstylegt _at_import url(nomefile.css)lt/stylegt

6
Lattributo MEDIA 1/2

• Il diffondersi delle tecnologie, ha permesso di
  poter visitare siti con differenti dispositivi
  computer, palmari, smartphone, telefonini, ecc.
• Il problema è che la corretta visualizzazione di
  ogni pagina richiede un foglio di stile
  personalizzato per ogni dispositivo.
• Lattributo media dei tag ltlinkgt e ltstylegt,
  permette di poter impostare un foglio di stile
  diverso per ogni supporto.
• Il seguente esempio imposta, nelle due diverse
  sintassi, un foglio di stile specifico per i
  palmari
• ltlink rel"stylesheet" type"text/css"
  mediahandheld" hrefstile.css" /gt
• ltstyle type"text/css" media" handheld
  "gt...lt/stylegt

7
Lattributo MEDIA 2/2

• I possibili valori sono
• all CSS applicato a tutti i dispositivi di
  visualizzazione.
• screen normali browser web.
• print stile usato solo in fase di stampa.
• aural usato per i browser a sintesi vocale.
• braille Il CSS viene usato per supporti basati
  sull'uso del braille.
• embossed stampanti braille.
• handheld Palmari e simili.
• projection Usato per presentazioni e proiezioni
  a tutto schermo.
• tty Dispositivi a carattere fisso.
• tv Web-tv.
• Tra gli esempi c'è un foglio di stile specifico
  per la stampa

8
Sintassi dei Selettori 1/3

• / I commenti sono simili a quelli di Java o del
  C /
• / selettore per nome di elemento /
• span colorred
• / insieme di elementi, si separano con la
  virgola /
• h1, em colorred
• / annidamento di tag tramite lo spazio/
• h1 em colorred
• / seleziona i lttaggt con attributo idsezione"
  /
• sezione backgroundyellow
• / seleziona il tag ltpgt con attributo
  class"italico" /
• p.italico font-styleitalic

9
Sintassi dei Selettori 2/3

• / seleziona tutti i tag con attributo
  classsezione" /
• .sezione font-weightbold
• / seleziona i tag ltpgt contenuti nel tag con
  attributo idsezione" /
• sezione p backgroundyellow
• / si possono usare i diversi costrutti insieme
  /
• h1 b,h2 b,h1 em,h2 em colorred
• / si può indicare un carattere jolly per
  selezionare tutti i tag nel documento /
• colorred

10
Sintassi dei Selettori 3/3

• / child seleziona tutti i tag ltpgt diretti
  discendenti del tag ltspangt, non funziona con IE
  (solo IE 7) /
• span gt p font-weightbold
• / selettori adiacenti solo il tag p vicino al
  tag div gt, non funziona con IE (solo IE 7) /
• div p backgroundyellow
• / selettori in base allattributo seleziona i
  tag in base ai loro attributi o valori (non
  ancora supportato dai browser) /

11
Alcune proprietà dei CSS

• Font properties
• font-family, font-style, font-variant,
  font-weight, font-size, font
• Color and background properties
• color, background-color, background-image,
  background-repeat, background-attachment,
  background-position, background
• Text properties
• word-spacing, letter-spacing, text-decoration,
  vertical-align, text-transform, text-align,
  text-indent, line-height
• Box properties
• margin-top, margin-right, margin-bottom,
  margin-left, margin, padding-top, padding-right,
  padding-bottom, padding-left, padding,
  border-top-width, border-right-width,
  border-bottomwidth, border-left-width,
  border-width, border-color, borderstyle,
  border-top, border-right, border-bottom,
  border-left, border, width, height, float, clear

12
Ereditarietà

• I CSS godono dellereditarietà le impostazioni
  applicate ad un elemento ricadono anche sui suoi
  discendenti.
• Ma basta definire una nuova regola per
  interrompere lereditarietà.
• Non tutte le proprietà sono ereditate (margini,
  padding ecc. sono escluse).
• Le regole definite per gli ID hanno la priorità
  sulle classi e queste ultime prevalgono sui
  semplici elementi.

13
Gestire i Font

• I CSS permettono una completa gestione dei font
  (simile a quella di un word processor).
• Questo evita lutilizzo del tag ltfontgt ormai
  deprecato!
• È possibile quindi modificare
• il font da usare (font-family)
• la sua dimensione (font-size)
• lo stile dei font (font-style)
• la sua consistenza (font-weight)
• il maiuscoletto (font-variant)

14
Proprietà di testo

• Le proprietà di testo influenzano varie
  caratteristiche dei caratteri e delle parole,
  quali
• lallineamento (text-align)
• Il rientro dei paragrafi (text-indent)
• effetti di sottolineatura o cancellazione
  (text-decoration)
• la distanza tra caratteri e parole
  (letter-spacing e word-spacing)
• Interlinea (line-height)
• Trasformazione del testo in maiuscolo o minuscolo
  (text-transform)

15
Il colore e gli sfondi

• Diverse sono le proprietà per la gestione dei
  colori e degli sfondi
• color imposta il colore del testo
• background-color imposta il colore di sfondo.
• background-image imposta le immagini di sfondo.
• Le immagini di sfondo possono essere ripetute sia
  verticalmente che orizzontalmente.
• Questo permette la creazione di sfondi usando
  piccole texture.

16
Il box model
Border
Height
Width
Margin
Padding
17
Elementi blocco e inline

• Un documento HTML ha una struttura gerarchica e
  ogni elemento può essere suddiviso in due
  categorie
• Blocco sono elementi che possono contenerne
  degli altri, quando vengono inseriti generano una
  nuova riga.
• Inline non possono contenere elementi blocco ma
  solo altri elementi inline e non generano una
  nuova riga.

18
I bordi

• Le proprietà di bordo permettono l'impostazione
  dei contorni di qualsiasi elemento HTML.
• Permettono di impostare vari aspetti
• Impostare uno solo dei bordi (border-top,
  border-bottom, border-left e border-right)
• Impostare la larghezza (border-width o in unione
  con border-top-width ecc.)
• Colore del bordo (border-color)
• Lo stile del bordo (border-style), ad esempio
  linea continua, tratteggiato, ecc.

19
Le dimensioni

• È possibile impostare le dimensioni di un
  elemento sia in altezza che larghezza (width e
  height).
• Con i CSS si possono vincolare le dimensioni di
  un elemento a campi di variabilità
• min-height imposta una altezza minima.
• min-width imposta una larghezza minima.
• max-height imposta una altezza massima.
• max-width imposta una larghezza massima.
• Queste proprietà non sempre sono supportate
  correttamente dai browser

20
Le liste

• Abbiamo visto come impostare liste ordinate e non
  ordinate in HTML utilizzando i tag ltolgt e ltulgt.
• Con i CSS è possibile addirittura controllare la
  rappresentazione di ogni singolo componente della
  lista (ltligt).
• Per esempio
• list-style-type imposta il tipo di lista (disc,
  circle, decimal, ecc.)
• list-style-image imposta una immagine come
  elemento della lista puntata (list-style-image
  url(nomeImmagine))

21
Pseudo-classi

• Il modello a elementi e classi non sempre è
  sufficiente per descrivere tutti gli stili
• Le Pseudo-classi si utilizzano per selezionare i
  tag in base agli eventi.
• Utili per impostare gli stili delle ancore
• alink colorred / link non ancora visitato /
• avisited colorblue / link già visitato /
• aactive colorlime/link attualmente
  selezionato/
• ahover colorgreen / link quando il puntatore
  del
• mouse ci passa sopra /

22
Gestire i link

• Grazie ai CSS è possibile trasformare un semplice
  elenco di link, in menu personalizzati senza far
  uso di JavaScript.

23
I selettori ID

• I selettori ID possono essere associati a
  qualsiasi tag HTML.
• Ma di solito si utilizzano con il tag ltdivgt per
  il posizionamento di blocchi di testo o di
  immagini (layout pagina).
• testo1
• position absolute
• top 20
• width 20
• left 5
• Il selettore class viene invece usato per
  applicare lo stesso stile a più elementi.

24
Posizionamento degli elementi

• position è la proprietà fondamentale per la
  gestione della posizione degli elementi.
• Si applica a tutti gli elementi e non è
  ereditata
• ltselettoregt position ltvaloregt
• I valori possibili sono
• static è il valore di default, lelemento è
  posizionato nel flusso normale del documento.
• absolute lelemento viene rimosso dal flusso e
  posizionato in base alle coordinate definite con
  top, bottom, left e right. Il posizionamento
  avviene in base allelemento contenitore (se non
  posizionato in maniera statica).
• fixed simile ad absolute solo che lelemento
  resta fisso nella finestra del browser (non
  scorre). Non è supportato da IE di Windows.
• relative lelemento viene posizionato in base
  allelemento precedente del documento HTML.

25
Gestione della posizione

• Top, bottom, left e right il loro significato
  cambia a seconda della modalità di
  posizionamento. Nel posizionamento relativo
  definisce lo spostamento rispetto al bordo
  contenitore (è possibile impostare valori
  negativi).
• visibility questa proprietà determina se
  lelemento deve essere visibile (visible) o
  nascosto (hidden).
• z-index con questa proprietà è possibile
  stabilire il livello di posizionamento degli
  elementi (un valore più grande indica una
  priorità di visualizzazione maggiore)

26
Proprietà display

• Definisce il trattamento e la presentazione di un
  elemento.
• Tale proprietà dispone di numerosi valori ma solo
  pochi sono supportati da tutti i browser
• inline L'elemento assume le caratteristiche
  degli elementi inline.
• block L'elemento viene trattato come un elemento
  blocco.
• list-item L'elemento si trasforma in un elemento
  lista.
• none lelemento non viene mostrato (diverso da
  visibilityhidden dove lelemento viene inserito
  nel documento ma non è visibile).