Linguaggio CSS

Linguaggio CSS
Linguaggio CSS
1
Linguaggio CSS
2
Introduzione
Cosa è il linguaggio CSS?
•
CSS sta per Cascading Style Sheets, cioè Fogli di Stile a Cascata
•
Gli stili definiscono come visualizzare gli elementi HTML
•
Gli stili sono normalmente memorizzati nei fogli di stile
•
Gli stili sono stati aggiunti all'HTML 4.0 per risolvere un problema
•
I fogli di stili esterni possono risparmiare un sacco di lavoro
•
I fogli di stile esterni sono memorizzati nei file CSS
•
Definizione multiple di uno stile confluiscono a cascata in uno solo
Gli stili risolvono un grosso problema
L'HTML originale non è stato pensato per contenere tag di formattazione di un documento, ma per
definirne il contenuto, come:
<p>This is a paragraph.</p>
<h1>This is a heading</h1>
Quando gli elementi come <font> e <color> furono aggiunti nelle specifiche HTML 3.2 è
cominciato un incubo per gli web developer. Lo sviluppo di siti grandi, dove font e colori dovevano
essere modificati in ogni singolo punto di ogni singola pagina divennero un lungo, faticoso e
spesso inutile lavoro.
Per risolvere questo problema, il consorzio W3C, reponsabile per la standardizzazione dell'HTML,
creò il linguaggio CSS in aggiunta all'HTML 4.0.
Dall'HTML 4.0, le informazioni di formattazione possono essere rimosse dai documenti HTML e
memorizzati in un file CSS separato.
Tutti i browser supportano i CSS oggi.
Gli stili possono essere specificati in vari modi:
•
all'interno di un documento HTML
•
all'interno della sezione head di un documento HTML
•
in un file .css separato
Linguaggio CSS
Inoltre è possibile far riferimento a multipli file css dentro lo stesso file HTML.
Ma quale stile sarà utilizzato quando ne viene specificato più di uno per lo stesso documento
HTML? In generale si dice che tutti gli stili convergono “a cascata” in un unico foglio di stile
“virtuale” secondo la seguente priorità crescente:
1. Browser default
2. Fogli di stile esterni
3. Fogli di stile interni (nella sezione HEAD)
4. stili inline (negli elementi HTML)
Quindi gli stili inline hanno la massima priorità rispetto a tutti gli altri, i fogli interni rispetto a
quelli esterni e alle impostazioni di default del browser e così via. Attenzione però, se il link al
foglio di stile esterno si trova dopo il foglio interno, questo avrà la priorità nonostante la regola
generale.
3
Linguaggio CSS
4
Sintassi CSS
La sintassi CSS è fatta di tre parti: un selettore, una proprietà ed un valore:
Selector {
property1:value1;
property2:value2
}
Il selettore è normalmente l'elemento HTML che vuoi definire, la proprietà è l'attributo che si vuole
cambiare e ovviamente ogni proprietà assume un valore. Proprietà e valori sono separati dai due
punti e circondate dalle parentesi graffe.
Si possono inoltre raggruppare i selettori, separandoli con una virgola:
h1,h2,h3,h4,h5,h6
{
color:green
}
Il selettore class
Con il selettore class si possono definire stile differenti per lo stesso tipo di elemento HTML.
Immagina di avere due paragrafi nel tuo documento: uno allineato a destra e uno al centro:
p.right {text-align:right}
p.center {text-align:center}
Così devi utilizzare l'attributo class nel tuo documento HTML:
<p class="right">This paragraph will be right-aligned.</p>
<p class="center">This paragraph will be center-aligned.</p>
Per applicare più di una classe ad un elemento scrivi:
<p class="center bold">This is a paragraph.</p>
E il paragrafo sopra sarà formattato secondo la classe "center" e la classe "bold".
Si può inoltre omettere il nome del selettore per definire uno stile da usare in tutti gli elementi
HTML che utilizzano una certa classe.
.center {text-align:center}
Linguaggio CSS
5
E nel documento HTML
<h1 class="center">This heading will be center-aligned</h1>
<p class="center">This paragraph will also be center-aligned.</p>
Non iniziare un nome di classe con un numero! Questa brutta pratica è supportata solo da
Internet Explorer.
Aggiungere stili agli elementi con attributi particolari
Si possono applicare stili solo a quegli elementi HTML che presentano particolari attributi.
Nell'esempio sotto verranno colorati con sfondo blue tutti gli elementi che contengono un attributo
type con valore “text”:
input[type="text"] {background-color:blue}
Il selettore id
Si possono definire stili per gli elementi HTML anche con il selettore id, che è definito tramite un
#. La regola di stile viene intercettata da tutti gli elementi che hanno lo stesso valore di id del
valore accanto a #:
#green {color:green}
Analogamente possiamo limitare il raggio del selettore id, restringendo il campo ad un solo
elemento HTML:
p#para1 {
text-align:center;
color:red
}
Ancora, non iniziare un nome di id con un numero! Questo è supportato solo da Internet Explorer.
Commenti CSS
I commenti vengono solitamente utilizzati per spiegare il codice e possono aiutare ad editare di
nuovo il codice in un secondo momento. I commenti sono ignorati dai browser. I commenti CSS
iniziano con “/*” e finiscono con “*/”:
/*This is a comment*/
p {
text-align:center;
Linguaggio CSS
6
/*This is another comment*/
color:black;
font-family:arial
}
Come inserire un foglio di stile
Esistendo tre tipologie di foglio di stile, esistono tre metodi per inserirne uno all'interno di un
documento HTML. Vediamo quali:
1) Fogli di stile esterni
Un foglio di stile esterno è la soluzione ideale per applicare lo stesso stile a più pagine. Con un
foglio di stile esterno, è possibile cambiare il look di un intero sito, semplicemente modificando un
file. Ogni pagina del sito deve contenere un link al foglio di stile tramite un elemento <link> da
inserire nella sezione head:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
Il browser leggerà le definizioni di stile contenute nel file mystile.css e formatterà il documento
secondo quelle.
2) Fogli di stile interni
Un foglio di stile interno dovrebbe essere usato quando un singolo documento ha uno stile unico.
E' possibile definirlo nella sezione head usando l'elemento <style>:
<head>
<style type="text/css">
hr {color:sienna}
p {margin-left:20px}
body {background-image:url("images/back40.gif")}
</style>
</head>
Il browser leggerà le definizioni di stile lì elencate e formatterà il documento secondo quelle.
3) Stili inline
Con lo stile inline si perdono praticamente tutti i vantaggi introdotti tramite i fogli di stile; va usato
dunque solo nel caso remoto in cui uno stile particolare vada applicato ad un singolo elemento.
Per utilizzare gli stili inline bisogna utilizzare l'attributo style disponibile in tutti gli elementi HTML:
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
Linguaggio CSS
Vediamo adesso tutta la serie di proprietà utilizzabili nei CSS suddivise per categorie.
7
Linguaggio CSS
8
Proprietà del Background
Le proprietà CSS del background definiscono gli effetti sullo sfondo di ogni elemento
Proprietà
Descrizione
Valori
background
La proprietà “riassuntiva” per mettere tutte le background-color
impostazioni in un'unica dichiarazione.
background-image
background-repeat
background-attachment
background-position
backgroundattachment
Imposta se una immagine di sfondo è fissa
oppure si muove durante lo scrolling.
scroll
fixed
background-color
Imposta il colore di sfondo
color-rgb
color-hex
color-name
transparent
background-image
Imposta l'immagine di sfondo
url(URL)
none
background-position
Imposta la posizione iniziale dell'immagine di
sfondo.
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y%
xpos ypos
background-repeat
Decide se l'immagine di sfondo sarà ripetuta a repeat
riempimento oppure no.
repeat-x
repeat-y
no-repeat
Linguaggio CSS
Proprietà del testo
Le proprietà CSS del testo definiscono come il testo sarà visualizzato
TextColor
La proprietà color è utilizzata per impostare il colore del testo. Il colore può essere impostato da:
•
name: definisce il nome di un colore, come "red"
•
RGB: specifica un valore RGB, come "rgb(255,0,0)"
•
Hex: specifica un valore esadecimale, come "#ff0000"
Il valore di default per una pagina è specificato nell'elemento body
body {color:blue}
h1 {color:#00ff00}
h2 {color:rgb(255,0,0)}
Text Alignment
La proprietà text-align è utilizzata per impostare l'allineamento orizzontale del testo, che può
essere centrato, allineato a destra, a sinistra o giustificato.
h1 {text-align:center}
p.date {text-align:right}
p.main {text-align:justify}
Text Decoration
La proprietà text-decoration è utilizzata per rimuovere decorazioni dal testo, come sottolineature
(nei link, ad esempio) o altro.
a {text-decoration:none}
Può inoltre essere utilizzata (ovviamente) per la decorazione del testo
h1
h2
h3
h4
{text-decoration:overline}
{text-decoration:line-through}
{text-decoration:underline}
{text-decoration:blink}
9
Linguaggio CSS
10
Non è comunque raccomandato sottolineare testo che non sia un link, per non confondere
l'utente.
Text Transformation
La proprietà text-transform è utilizzata per specificare lettere maiuscole a minuscole in un testo.
Può essere utilizzata, ad esempio, per modificare tutte le parole in minuscolo o mettere tutte le
parole con iniziale maiuscola.
p.uppercase {text-transform:uppercase}
p.lowercase {text-transform:lowercase}
p.capitalize {text-transform:capitalize}
Text Indentation
La proprietà text-indent è utilizzata per specificare l'indentazione della prima linea di un testo.
p {text-indent:50px}
Proprietà CSS per il testo
Proprietà
Descrizione
Valori
color
Imposta il colore del testo
color
direction
Imposta la direzione del testo
ltr
rtl
line-height
Imposta la distanza tra le linee
normal
number
length
%
letter-spacing Regola lo spazio tra i caratteri
normal
length
text-align
Allineamento del testo
left
right
center
justify
textdecoration
Decorazione del testo
none
underline
overline
line-through
blink
text-indent
Indenta la prima linea di testo di un elemento
length
Linguaggio CSS
11
%
text-shadow
none
color
length
text-transform Modifica le lettere in un testo
none
capitalize
uppercase
lowercase
unicode-bidi
normal
embed
bidi-override
vertical-align
Imposta l'allineamento verticale
white-space
word-spacing
baseline
sub
super
top
text-top
middle
bottom
text-bottom
length
%
normal
pre
nowrap
Regola lo spazio tra le parole
normal
length
Linguaggio CSS
12
CSS Font
Queste proprietà CSS definiscono tutte le caratteristiche relative ai font.
CSS Font Families
Nei CSS, ci sono due tipi di nomi per le famiglie di font:
•
generic family: un gruppo di famiglie di font con un look simile (Come “Serif” o
“Monospace”)
•
font family: una specifica famiglia di font (come "Times New Roman" o "Arial")
Generic family
Font family
Descrizione
Serif
Times New Roman
Georgia
I font Serif sone “aggraziati”
Sans-serif
Arial
Verdana
Courier New
Lucida Console
I font "Sans Serif" (Sans significa “Senza”)
utilizzano caratteri senza grazie.
Monospace
Tutti i caratteri monospace hanno la stessa
larghezza.
Font Family
La famiglia di font di un testo viene impostata con la proprietà font-family. Questa può contenere
diversi nomi di font come meccanismo “fallback”, nella speranza cioè che almeno uno di questi sia
presente nel sistema ospite.
p{font-family:"Times New Roman",Georgia,Serif}
Font Style
La proprietà font-style è utilizzata per specificare il testo corsivo, tramite tre valori:
•
normal: il testo viene mostrato normalmente
•
italic: il testo viene mostrato in corsivo
•
oblique: testo obliquo
Linguaggio CSS
13
p.normal {font-style:normal}
p.italic {font-style:italic}
p.oblique {font-style:oblique}
Font Size
La proprietà font-size definisce la dimensione del testo. Essere in grado di modificare la
dimensione del testo è cruciale nello web design moderno. La dimensione del testo può essere
assoluta o relativa:
Dimensione assoluta:
•
imposta il testo ad una dimensione specifica
•
non permette all'utente di cambiare la dimensione del testo in tutti i browser
Dimensione relativa:
•
Imposta il testo ad una dimensione relativa agli elementi circostanti
•
permette all'utente di cambiare la dimensione del testo in tutti i browser
Se non si specifica una dimensione precisa, la dimensione di default per il testo normale e
16px (16px = 1em).
Impostare la dimensione del testo utilizzando i pixel
Impostare la dimensione del testo tramite i pixel permette un controllo completo sulla dimensione
del testo:
h1 {font-size:40px}
h2 {font-size:30px}
p {font-size:14px}
L'esempio qui sopra permette a tutti i maggiori browser (tranne Internet Explorer) di
ridimensionare il testo, utilizzando lo zoom.
Impostare la dimensione del testo utilizzando Em
Per evitare i problemi citati con Internet Explorer, molti sviluppatori preferiscono utilizzare gli em
al posto dei pixel. L'unista di misura em della dimensione è quella raccomandata dal consorzio
W3C.
Linguaggio CSS
14
1em è uguale alla dimensione attuale del font e la dimensione di default dei browser abbiamo
visto essere 16px, quindi la dimensione reale può essere semplicemente calcolata tramite la
formula:
pixels/16=em
h1 {font-size:2.5em} /* 40px/16=2.5em */
h2 {font-size:1.875em} /* 30px/16=1.875em */
p {font-size:0.875em} /* 14px/16=0.875em */
Comunque, pur essendo questa la soluzione standard, presenta ancora problemi in Internet
Explorer, a causa di un ridimensionamento non proporzionale nello zoom.
Utilizzare una combinazione di percentuali e Em
La soluzione per far funzionare bene “anche” IE è quella di impostare una dimensione percentuale
nell'elemento body:
body {font-size:100%}
h1 {font-size:2.5em}
h2 {font-size:1.875em}
p {font-size:0.875em}
Questo codice funziona finalmente bene ovunque, anche con zoom e resize. Provare per credere!
Tutte le proprietà CSS per i font
Proprietà
Descrizione
Valori
font
Proprietà “riassuntiva”
font-style
font-variant
font-weight
font-size/line-height
font-family
caption
icon
menu
message-box
small-caption
status-bar
inherit
font-family
Specifica la font family per il testo
family-name
generic-family
Linguaggio CSS
15
inherit
font-size
Specifica la dimensione del font per il testo
xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
%
inherit
font-style
Specifica lo stile del font per il testo
normal
italic
oblique
inherit
font-variant
font-weight
normal
small-caps
inherit
Specifica lo spessore del font per il testo
normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
inherit
Linguaggio CSS
16
CSS Box Model
Tutti gli elementi HTML possono essere considerate come scatole (box). Nei CSS il termine “Box
Model” viene utilizzata per parlare di design e layout.
Per impostare la giusta dimensione agli elementi in tutti i browser devi capire come funziona il Box
Model. La figura sotto fa vedere come le proprietà margin, border e padding abbiano influenza
nella dimensione (altezza e larghezza) di ogni elemento.
Descriviamo ognuna delle parti:
•
Margin: realizza un'area intorno al bordo, non ha un colore di background ed è
completamente trasparente
•
Border: il bordo che racchiude il padding e il content. Il suo colore è influenzato dal colore
di background del box
•
Padding: realizza un'area intorno al content e come il border ha il suo colore è influenzato
dal colore di background del box
•
Content: il contenuto del box, dove appaiono testo e immagini.
Quando si specificano le dimensioni di un elemento tramite i CSS, si specifica solo la dimensione
del content. Per conoscere la dimensione completa dell'elemento (box), bisogna anche aggiungere
la dimensione del padding, del border e del margin.
Vediamo un esempio a proposito:
width:250px;
padding:10px;
border:5px solid gray;
margin:10px;
Qual è la dimensione totale del box?
Linguaggio CSS
17
CSS Border
Le proprietà CSS del bordo definiscono appunto il bordo attorno ad un elemento e permettono di
specificarne lo stile e il colore.
Border Style
La proprietà border-style specifica quale tipo di bordo deve essere visualizzato. Inoltre nessuna
delle altre proprietà del bordo avrà effetto finché la proprietà border-style è impostata.
Valori per la proprietà border-style:
•
none: nessun bordo
•
dotted: bordo punteggiato
•
dashed: bordo a trattini
•
solid: bordo solido
•
double: due bordi. La larghezza dei due bordi sono le stesse del valore border-width
•
groove: Definisce un bordo 3D scanalato. L'effetto dipende dalla proprietà border-color
•
ridge: Definisce un bordo 3D increspato. L'effetto dipende dalla proprietà border-color
•
inset: Definisce un bordo 3D intarsiato. L'effetto dipende dalla proprietà border-color
•
outset: Definisce un bordo 3D intarsiato verso l'esterno. L'effetto dipende dalla proprietà
border-color
Linguaggio CSS
18
Border Width
La proprietà border-width imposta la larghezza del bordo; questa può essere impostata in pixel o
tramite uno dei tre valori predefiniti: thin, medium, thick.
p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}
Border Color
La proprietà border-color property viene utilizzata per impostare il colore del bordo. Il colore può
essere impostato tramite:
•
name: definisce il nome di un colore, come "red"
•
RGB: specifica un valore RGB, come "rgb(255,0,0)"
•
Hex: specifica un valore esadecimale, come "#ff0000"
Inoltre, è possibile impostare il colore al valore “transparent”
p.one
{
border-style:solid;
border-color:red;
}
p.two
{
border-style:solid;
border-color:#98bf21;
}
In CSS è possibile specificare bordi diversi per lati diversi
p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
Linguaggio CSS
19
La proprietà border-style può prendere da 1 a 4 valori:
1. border-style:dotted;
◦
Tutti i bordi dotted
2. border-style:dotted solid;
◦
◦
top e bottom dotted
right e left solid
3. border-style:dotted solid double;
◦ top dotted
◦ right e left solid
◦ bottom double
4. border-style:dotted solid double dashed;
◦ top dotted
◦ right solid
◦ bottom double
◦ left dashed
Border, la proprietà riassuntiva
Come si è visto dagli esempi precedenti, ci sono molte proprietà relative ai bordi. Per semplificare
ed accorciare il codice, esiste la proprietà generale border, riassuntiva di tutte le altre:
border:5px solid red;
Con le proprietà nell'ordine:
1. width
2. style
3. color
Tutte le proprietà CSS per i bordi
Proprietà
Descrizione
Valori
border
Proprietà “riassuntiva”
border-width
border-style
border-color
border-bottom
Proprietà “riassuntiva” per il bottom
border-bottom-width
border-bottom-style
Linguaggio CSS
20
border-bottom-color
border-bottom-color Colore del bordo inferiore
border-color
border-bottom-style Stile del bordo inferiore
border-style
border-bottomwidth
Larghezza del bordo inferiore
border-width
border-color
Colore del bordo
color_name
hex_number
rgb_number
transparent
inherit
border-style
Stile del bordo
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit
border-width
Spessore del bordo
thin
medium
thick
length
inherit
Linguaggio CSS
21
CSS Outlines
Un outline è una linea che viene disegnata intorno agli elementi, fuori dai bordi, per evidenziare
ancor più un elemento
Proprietà
Descrizione
Valori
outline
Proprietà “riassuntiva”
outline-color
outline-style
outline-width
outline-color
Imposta il colore dell'outline
color
invert
outline-style
Imposta lo stile dell'outline
none
dotted
dashed
solid
double
groove
ridge
inset
outset
outline-width
Imposta la larghezza dell'outline
thin
medium
thick
length
Linguaggio CSS
22
CSS Margin
Le proprietà CSS dei margini definiscono lo spazio attorno agli elementi. Il margine rappresenta
un area rettangolare fuori dal bordo di un elemento, non ha un colore di sfondo ed è
completamente trasparente.
Anche qui abbiamo top, bottom, right e left margin che possono essere cambiati separatamente
oppure impostati assieme con la proprietà riassuntiva margin. È inoltre possibile specificare valori
negativi per sovrapporre i contenuti.
Possibili valori per il margine sono:
Valore
Descrizione
auto
Impostazione decisa dal browser
length
Margine fisso (in pixels, pt, em, etc.)
%
Margine percentuale
Vediamo un esempio:
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
Tutte le proprietà CSS sui margini
Proprietà
Descrizione
Valori
margin
Proprietà “riassuntiva”
margin-top
margin-right
margin-bottom
margin-left
margin-bottom Margine inferiore
auto
length
%
margin-left
Margine sinistro
auto
length
%
margin-right
Margine destro
auto
length
%
margin-top
Margine superiore
auto
length
%
Linguaggio CSS
23
CSS Padding
Le proprietà CSS sul padding definiscono lo spazio fra il contenuto e il bordo di un elemento. Il
padding viene influenzato dal colore di background di un elemento e analogamente a Border e
Padding, esiste la proprietà riassuntiva Margin.
Possibili valori per i margini sono:
Valore
Descrizione
length
Padding fisso (in pixels, pt, em, etc.)
%
Padding percentuale
Vediamo un esempio:
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
Tutte le proprietà CSS sul Padding
Proprietà
Descrizione
Valori
padding
Proprietà “riassuntiva”
padding-top
padding-right
padding-bottom
padding-left
paddingbottom
Padding inferiore
length
%
padding-left
Padding sinistro
length
%
padding-right
Padding destro
length
%
padding-top
Padding superiore
length
%
Linguaggio CSS
24
CSS List
Le proprietà CSS per le liste (ordinate o no) permettono all'utente (del linguaggio CSS, che
sarebbe lo sviluppatore web..) di modificare a piacimento i numeri o i pallini che fanno da
segnaposto per i vari item della lista, usando qualsivoglia carattere (o sequenza di) fino ad
utilizzare una immagine.
In HTML ci sono due tipi di liste:
•
Liste non ordinate, dove gli item sono marcati con pallini, tondini, quadratini o freccette
•
Liste ordinate, dove gli item sono ordinati con numeri o lettere.
È possibile specificare il tipo di marcatore per un item della lista tramite la proprietà list-styletype.
Vediamo un esempio:
ul.circle {list-style-type:circle}
ul.square {list-style-type:square}
ol.upper-roman {list-style-type:upper-roman}
ol.lower-alpha {list-style-type:lower-alpha}
Liste non ordinate, possibili valori
Valore
Descrizione
none
Nessun marker
disc
Default. Disco
circle
Cerchio
square
Quadrato
Liste ordinate, possibili valori
Valore
Descrizione
none
Nessun marker
circle
cerchio
disc
disco
square
quadrato
armenian
Numero armeno
Linguaggio CSS
25
decimal
Numero decimale
decimal-leading-zero
Numero decimale con zero iniziale (01, 02, 03, etc.)
georgian
Numero Georgiano (an, ban, gan, etc.)
lower-alpha
Lettere minuscole (a, b, c, d, e, etc.)
lower-greek
Lettere greche minuscole (alpha, beta, gamma, etc.)
lower-latin
Lettere minuscole (a, b, c, d, e, etc.)
lower-roman
Numeri romani minuscoli (i, ii, iii, iv, v, etc.)
upper-alpha
Lettere maiuscole (A, B, C, D, E, etc.)
upper-latin
Lettere latine minuscole (A, B, C, D, E, etc.)
upper-roman
Numeri romani maiuscoli (I, II, III, IV, V, etc.)
Posizionamento della lista
La proprietà list-style-position definisce l'indentazione di una lista: "outside" è il valore di default,
mentre "inside" indenta maggiormente gli items
ul.inside {list-style-position:inside}
ul.outside {list-style-position:outside}
È inoltre possibile utilizzare una immagine come marker per gli item della lista:
ul
{
list-style-image:url('arrow.gif');
}
La proprietà riassuntiva List
È possibile specificare in un'unica proprietà riassuntiva tutte le proprietà delle liste. La proprietà si
chiama list-style e i suoi valori devono rispettare il seguente ordine:
1. list-style-type
2. list-style-position
3. list-style-image
list-style:square inside;
Linguaggio CSS
26
Tutte le proprietà CSS per le liste
Proprietà
Descrizione
Valori
list-style
Proprietà “riassuntiva”
list-style-type
list-style-position
list-style-image
inherit
list-style-image
Imposta un immagine come marker
URL
none
inherit
list-style-position
Specifica la posizione dei marker rispetto al testo
inside
outside
inherit
list-style-type
Specifica il tipo di marker
none
disc
circle
square
decimal
decimal-leading-zero
armenian
georgian
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
lower-roman
upper-roman
inherit
Linguaggio CSS
27
CSS Table
Le proprietà CSS per le tabella permettono di modificare il layout delle tabelle. Vediamole tutte:
Proprietà
Descrizione
Valori
border-collapse Imposta se i bordi delle celle sono uniti a formare il bordo
unico della tabella oppure no.
collapse
separate
border-spacing Imposta la distanza tra le celle (solo per
collapse=”separate)
length length
caption-side
Imposta la posizione dell'etichetta della tabella
top
bottom
left
right
empty-cells
Imposta se mostrare o no le celle vuote (solo per
collapse=”separate)
show
hide
table-layout
Imposta l'algoritmo da usare per la visualizzazione della
tabella
auto
fixed
Linguaggio CSS
28
CSS Dimension
Le proprietà CSS sulle dimensioni permettono di controllare la larghezza e l'altezza degli elementi:
Proprietà
Descrizione
Valori
height
Imposta l'altezza di un elemento
auto
length
%
inherit
max-height
Imposta l'altezza massima
none
length
%
inherit
max-width
Imposta la larghezza massima
none
length
%
inherit
min-height
Altezza minima
length
%
inherit
min-width
Larghezza minima
length
%
inherit
width
Larghezza di un elemento
auto
length
%
inherit
Linguaggio CSS
29
CSS Classification
Le proprietà CSS di classificazione permettono di controllare come visualizzare un elemento,
impostano dove e se un elemento apparirà in un altro, la sua posizione relativa o assoluta e la sua
visibilità.
Proprietà
Descrizione
Valori
Clear
Imposta i lati di un elemento dove altri elementi float non sono permessi
left
right
both
none
cursor
Specifica il tipo di cursore
url
auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
display
Imposta come e se un elemento deve essere visualizzato
none
inline
block
list-item
run-in
compact
marker
table
inline-table
table-row-group
table-header-group
table-footer-group
table-row
table-column-group
table-column
table-cell
table-caption
float
Imposta dove un elemento deve apparire rispetto ad un altro elemento
left
right
none
position
Imposta la posizione di un elemento
static
relative
absolute
fixed
Visibility
Imposta se un elemento è visibile oppure no
visible
hidden
collapse
Linguaggio CSS
30
Posizionamento con CSS
Le proprietà CSS di posizionamento permettono di specificare la posizione top, right, bottom, left
di un elemento. Permettono inoltre di impostare la forma, inserire un elemento dentro un altro e
specificare cosa deve accadere se un elemento è troppo grande per entrare in una specifica area.
Proprietà
Descrizione
Valori
bottom
Imposta il margine inferiore per un elemento
posizionato
auto
length
%
inherit
clip
Imbriglia un elemento con posizione assoluta
shape
auto
inherit
left
Imposta il margine sinistro per un elemento
posizionato
auto
length
%
inherit
overflow
Specifica cosa succede se il contenuto “sborda” da un
margine.
auto
hidden
scroll
visible
inherit
position
Specifica il tipo di posizionamento di un elemento
absolute
fixed
relative
static
inherit
right
Imposta il margine destro per un elemento posizionato auto
length
%
inherit
top
Imposta il margine superiore per un elemento
posizionato
auto
length
%
inherit
z-index
Imposta l'ordine di “visualizzazione” degli elementi
number
auto
inherit
Linguaggio CSS
31
Pseudo-classi CSS
Le pseudo-classi CSS sono utilizzate per aggiungere effetti speciali ad alcuni selettori. Vediamo la
sintassi, specificando che le pseudo-classi non sono case-sensitive:
selector:pseudo-class {property:value}
Le classi CSS possono essere utilizzate anche con le pseudo-classi:
selector.class:pseudo-class {property:value}
Ad esempio, i link possono essere visualizzati in molti modi:
a:link {color:#FF0000} /* unvisited link */
a:visited {color:#00FF00} /* visited link */
a:hover {color:#FF00FF} /* mouse over link */
a:active {color:#0000FF} /* selected link */
Nel caso particolare dei link bisogna utilizzare questo stesso ordine di definizione (link, visited,
hover, active) per farli funzionare tutti insieme.
Le pseudo-classi possono essere combinate con le classi CSS:
a.red:visited {color:#00FF00}
<a class="red" href="css_syntax.asp">CSS Syntax</a>
Se il link viene visitato, viene visualizzato in verde.
La pseudo-classe :first-child
La pseudo-classe :first-child ricerca uno specifico elemento che è il primo figlio di un altro
elemento. Vediamo un esempio in cui si ricerca il primo elemento <p> all'interno di ogni altro
elemento.
<html>
<head>
<style type="text/css">
p:first-child
{ color:blue }
</style>
</head>
<body>
<p>I am a strong man.</p>
<p>I am a strong man.</p>
Linguaggio CSS
32
</body>
</html>
Ovviamente il risultato è che la prima linea viene scritta in blue. Nel secondo esempio si ricercano
i primi elementi <i> all'interno degli elementi <p>
<html>
<head>
<style type="text/css">
p > i:first-child
{ font-weight:bold }
</style>
</head>
<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</body>
</html>
La pseudo classe CSS :lang
La pseudo-classe :lang permette di specificare regole diverse per linguaggi diversi. Nell'esempio
proposto, la classe definisce le virgolette per gli elementi <q> con linguaggio “no”:
<html>
<head>
<style type="text/css">
q:lang(no)
{ quotes:"~" "~" }
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q>
Some text.</p>
</body>
</html>
Linguaggio CSS
33
Tutte le pseudo-classi CSS
Pseudo nome
Descrizione
:active
Aggiunge uno stile all'elemento attivo
:first-child
Aggiunge uno stile all'elemento che è il primo figlio di un altro elemento
:focus
Aggiunge uno stile all'elemento che ha il focus dalla tastiera
:hover
Aggiunge uno stile all'elemento che sorvoli col mouse
:lang
Aggiunge uno stile all'elemento che ha uno specifico attributo lang
:link
Aggiunge uno stile ad un link non visitato
:visited
Aggiunge uno stile ad un link visitato
Linguaggio CSS
34
Pseudo-elementi CSS
Gli pseudo-elementi CSS sono utilizzati per aggiungere degli effetti speciali ad alcuni selettori. La
sintassi degli pseudo-elementi è:
selector:pseudo-element {property:value}
Inoltre, è possibile utilizzare le classi CSS in combinazione con gli pseudo-elementi:
selector.class:pseudo-element {property:value}
Lo pseudo-elemento :first-line
Viene utilizzato per aggiungere uno stile speciale alla prima linea di testo di un selettore:
p:first-line {color:#0000ff;font-variant:small-caps}
<p>Some text that ends up on two or more lines</p>
Ovviamente questo pseudo-elemento può essere utilizzato solo con elementi block-level. Vediamo
l'elenco delle proprietà supportate:
•
font properties
•
color properties
•
background properties
•
word-spacing
•
letter-spacing
•
text-decoration
•
vertical-align
•
text-transform
•
line-height
•
clear
Lo pseudo-elemento :first-letter
Viene utilizzata per aggiungere uno stile speciale alla prima lettera di un testo dentro ad un
selettore:
Linguaggio CSS
35
p:first-letter {color:#ff0000;font-size:xx-large}
<p>The first words of an article...</p>
Supporta le seguenti proprietà:
•
•
•
•
•
•
•
•
•
•
•
•
font properties
color properties
background properties
margin properties
padding properties
border properties
text-decoration
vertical-align (solo se float="none")
text-transform
line-height
float
clear
Pseudo-elementi e Classi CSS
Gli pseudo-elementi possono essere combinati con le classi CSS:
p.article:first-letter {color:#ff0000}
<p class="article">A paragraph in an article</p>
Lo pseudo-elemento CSS :before
Viene utilizzato per aggiungere contenuto prima del contenuto di un elemento. Nell'esempio si
aggiunge un suono ad ogni occorrenza dell'elemento <h1>:
h1:before
{ content:url(beep.wav)
}
Lo pseudo-elemento CSS :after
Viene utilizzato per aggiungere contenuto dopo il contenuto di un elemento. Nell'esempio si
aggiunge un suono ad ogni occorrenza dell'elemento <h1>:
h1:after
{ content:url(beep.wav)
}
Linguaggio CSS
36
Tutti gli pseudo-elementi CSS
Pseudo nome
Descrizione
:after
Aggiunge un contenuto dopo un elemento
:before
Aggiunge un contenuto prima di un elemento
:first-letter
Aggiunge uno stile alla prima lettera di un testo
:first-line
Aggiunge uno stile alla prima linea di un testo
Linguaggio CSS
37
CSS Media Types
I CSS Media Types permettono di specificare come i documenti saranno presentati nei differenti
media. Ogni documento può essere visualizzato in maniera differente sullo schermo, su carta, etc.
Alcune proprietà dei CSS sono progettate per funzionare solo con certi media, ad esempio la
proprietà “voice-family” ha senso solo su dispositivi audiometrici (aural browsers), oppure ci sono
proprietò, come “font-size” che hanno senso sia su carta che su schermo, ma probabilmente con
valori differenti.
La regola @media
La regola @media permette di utilizzare stili differenti per media differenti nello stesso foglio di
stile. L'esempio qui sotto dice al browser di visualizzare un carattere Verdana di 14 px su schermo,
ma di utilizzare un Times New Roman di 10px per la stampa.
<html>
<head>
<style>
@media screen
{ p.test {font-family:verdana,sans-serif;font-size:14px}
@media print
{ p.test {font-family:times,serif;font-size:10px} }
@media screen,print
{ p.test {font-weight:bold} }
</style>
</head>
<body>....</body>
</html>
Elenco dei Media Types
Media Type
Descrizione
all
generico
aural
Sintetizzatori vocali
braille
Dispositivi braille
embossed
Stampanti braille
handheld
Palmari
print
stampanti
projection
slides
screen
Schermi PC
tty
teletypes a terminali
tv
TV
}