Comments
Description
Transcript
CSS - Denisi Marco
CSS – Cascading Style Sheets
Introduzione
CSS è l’acronimo 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.
L’ultima versione è la level 2 revision 1 (CSS 2.1).
CSS3: ancora in fase di studio (Working Draft).
CSS – Cascading Style Sheets
A cosa servono?
A separare Presentazione e contenuto.
Modularizzare aspetti legati alla presentazione.
Modificare l’aspetto di più pagine con il minimo sforzo.
-2-
Giuseppe De Pietro
CSS – Cascading Style Sheets
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; }
selettore
proprietà
valore
colora di rosso il testo all’interno del paragrafo.
Gli spazi, l’invio a capo e le tabulazioni non contano.
-3-
Giuseppe De Pietro
CSS – Cascading Style Sheets
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
<style type="text/css">
h1 {
font-size: 18pt;
text-align: center;
}
</style>
Stile in linea
<p style="font-size: 12pt; color:red;">Esempio</p>
-4-
Giuseppe De Pietro
CSS – Cascading Style Sheets
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 l’elemento <link> all’interno della sezione <head>:
<link rel="stylesheet“ href="nomefile.css"
type="text/css">
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 @import (a volte risolve problemi di compatibilità tra
browser) :
<style>
@import url(nomefile.css);
</style>
-5-
Giuseppe De Pietro
CSS – Cascading Style Sheets
L’attributo 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.
L’attributo media dei tag <link> e <style>, 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:
<link rel="stylesheet" type="text/css" media=“handheld"
href=“stile.css" />
<style type="text/css" media=" handheld ">...</style>
-6-
Giuseppe De Pietro
CSS – Cascading Style Sheets
L’attributo 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
-7-
Giuseppe De Pietro
CSS – Cascading Style Sheets
Sintassi dei Selettori 1/3
/* I commenti sono simili a quelli di Java o del C */
/* selettore per nome di elemento */
span { color:red }
/* insieme di elementi, si separano con la virgola */
h1, em { color:red }
/* annidamento di tag tramite lo spazio*/
h1 em { color:red }
/* seleziona i <tag> con attributo id=“sezione" */
#sezione {background:yellow}
/* seleziona il tag <p> con attributo class="italico" */
p.italico { font-style:italic }
-8-
Giuseppe De Pietro
CSS – Cascading Style Sheets
Sintassi dei Selettori 2/3
/* seleziona tutti i tag con attributo
class=“sezione" */
.sezione { font-weight:bold }
/* seleziona i tag <p> contenuti nel tag con
attributo id=“sezione" */
#sezione p {background:yellow}
/* si possono usare i diversi costrutti insieme */
h1 b,h2 b,h1 em,h2 em {color:red }
/* si può indicare un carattere jolly per selezionare
tutti i tag nel documento */
* {color:red }
-9-
Giuseppe De Pietro
CSS – Cascading Style Sheets
Sintassi dei Selettori 3/3
/* child: seleziona tutti i tag <p> diretti
discendenti del tag <span>, non funziona con IE
(solo IE 7) */
span > p { font-weight:bold }
/* selettori adiacenti: solo il tag p vicino al tag
div >, non funziona con IE (solo IE 7) */
div + p {background:yellow}
/* selettori in base all’attributo: seleziona i tag
in base ai loro attributi o valori (non ancora
supportato dai browser) */
- 10 -
Giuseppe De Pietro
CSS – Cascading Style Sheets
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, texttransform, 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, borderleft-width, border-width, border-color, borderstyle, border-top,
border-right, border-bottom, border-left, border, width, height, float,
clear
- 11 -
Giuseppe De Pietro
CSS – Cascading Style Sheets
Ereditarietà
I CSS godono dell’ereditarietà: le impostazioni applicate ad un
elemento ricadono anche sui suoi discendenti.
Ma basta definire una nuova regola per interrompere l’ereditarietà.
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.
- 12 -
Giuseppe De Pietro
CSS – Cascading Style Sheets
Gestire i Font
I CSS permettono una completa gestione dei font (simile a quella di
un word processor).
Questo evita l’utilizzo del tag <font> 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)
- 13 -
Giuseppe De Pietro
CSS – Cascading Style Sheets
Proprietà di testo
Le proprietà di testo influenzano varie caratteristiche dei caratteri e
delle parole, quali:
l’allineamento (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)
- 14 -
Giuseppe De Pietro
CSS – Cascading Style Sheets
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.
- 15 -
Giuseppe De Pietro
Border
Margin
Height
CSS – Cascading Style Sheets
Il box model
Width
- 16 -
Padding
Giuseppe De Pietro
CSS – Cascading Style Sheets
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.
- 17 -
Giuseppe De Pietro
CSS – Cascading Style Sheets
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.
- 18 -
Giuseppe De Pietro
CSS – Cascading Style Sheets
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
- 19 -
Giuseppe De Pietro
CSS – Cascading Style Sheets
Le liste
Abbiamo visto come impostare liste ordinate e non ordinate in HTML
utilizzando i tag <ol> e <ul>.
Con i CSS è possibile addirittura controllare la rappresentazione di
ogni singolo componente della lista (<li>).
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))
- 20 -
Giuseppe De Pietro
CSS – Cascading Style Sheets
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:
a:link {color:red} /* link non ancora visitato */
a:visited {color:blue} /* link già visitato */
a:active {color:lime}/*link attualmente selezionato*/
a:hover {color:green} /* link quando il puntatore del
mouse ci passa sopra */
- 21 -
Giuseppe De Pietro
CSS – Cascading Style Sheets
Gestire i link
Grazie ai CSS è possibile trasformare un semplice elenco di link, in
menu personalizzati senza far uso di JavaScript.
- 22 -
Giuseppe De Pietro
CSS – Cascading Style Sheets
I selettori ID
I selettori ID possono essere associati a qualsiasi tag HTML.
Ma di solito si utilizzano con il tag <div> 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.
- 23 -
Giuseppe De Pietro
CSS – Cascading Style Sheets
Posizionamento degli elementi
position è la proprietà fondamentale per la gestione della posizione
degli elementi.
Si applica a tutti gli elementi e non è ereditata:
<selettore> {position: <valore>;}
I valori possibili sono:
static: è il valore di default, l’elemento è posizionato nel flusso normale
del documento.
absolute: l’elemento viene rimosso dal flusso e posizionato in base alle
coordinate definite con top, bottom, left e right. Il posizionamento
avviene in base all’elemento contenitore (se non posizionato in maniera
statica).
fixed: simile ad absolute solo che l’elemento resta fisso nella finestra del
browser (non scorre). Non è supportato da IE di Windows.
relative: l’elemento viene posizionato in base all’elemento precedente
del documento HTML.
- 24 -
Giuseppe De Pietro
CSS – Cascading Style Sheets
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 l’elemento 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)
- 25 -
Giuseppe De Pietro
CSS – Cascading Style Sheets
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: l’elemento non viene mostrato (diverso da visibility:hidden
dove l’elemento viene inserito nel documento ma non è visibile).
- 26 -
Giuseppe De Pietro