Linguaggio CSS 1

Linguaggio CSS
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 3

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.
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 7

Vediamo adesso tutta la serie di proprietà utilizzabili nei CSS suddivise per categorie.
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
background- Imposta se una immagine di sfondo è fissa scroll
attachment oppure si muove durante lo scrolling. 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 top left
sfondo. 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 9

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 {text-decoration:overline}
h2 {text-decoration:line-through}
h3 {text-decoration:underline}
h4 {text-decoration:blink}
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
text- Decorazione del testo none
decoration 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 baseline
sub
super
top
text-top
middle
bottom
text-bottom
length
%
white-space normal
pre
nowrap
word-spacing 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 I font Serif sone “aggraziati”
Georgia
Sans-serif Arial I font "Sans Serif" (Sans significa “Senza”)
Verdana utilizzano caratteri senza grazie.
Monospace Courier New Tutti i caratteri monospace hanno la stessa
Lucida Console 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 normal
small-caps
inherit
font-weight 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-bottom- Larghezza del bordo inferiore border-width
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
padding- Padding inferiore length
bottom %
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-style-
type.
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 collapse
unico della tabella oppure no. separate
border-spacing Imposta la distanza tra le celle (solo per length length
collapse=”separate)
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 show
collapse=”separate) hide
table-layout Imposta l'algoritmo da usare per la visualizzazione della auto
tabella 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 auto
posizionato length
%
inherit
clip Imbriglia un elemento con posizione assoluta shape
auto
inherit
left Imposta il margine sinistro per un elemento auto
posizionato length
%
inherit
overflow Specifica cosa succede se il contenuto “sborda” da un auto
margine. 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 auto
posizionato 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