Violetta Lonati
CSS
(Cascading Style Sheets)
Informatica e laboratorio
Biotecnologie 2005-2006

Foglio di stile

Regola:
selezionatore { proprietà : valore }

Regole che dicono al browser COME visualizzare le informazioni contenute nel documento HTML.

Definiscono l’ APPARENZA del documento.

Vedi http://www.w3schools.com/css/demo_default.htm

Anatomia delle regole

selezionatore { proprietà : valore }

selezionatore: si riferisce ad un tag

proprietà: corrisponde ad un attributo

valore: è il valore da dare all'attributo

Esempi:

h1 { color : green; }

ul { font-style : italic; }

h2 { border-color : gray; }

ul { list-style-type: disc; }

body {background: #AAAAAA; }

Struttura documento

<html>

<head>

<title>Home page</title>

</head>

<body>

…

</body>

</html>

<style>

…

</style>

Come inserire i fogli di stile

Foglio di stile esterno
<head>
<link rel="stylesheet" type="text/css"	href="mystyle.css" />
</head>

Foglio di stile interno
<head>
<style type="text/css">
regole
</style>
</head>

In linea, all'interno del tag
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

Raggruppamenti:
Multi-Selezionatore

h1 { font-weight: bold }

h2 { font-weight: bold }

h3 { font-weight: bold }

h1, h2, h3 { font-weight: bold }

Raggruppamenti:
Multi-Dichiarazione

H1 { color: green }

h1 { font-style: italic }

h1 { text-align: center }

H1 {

color: green;

font-style: italic;

text-align: center

}

Ereditarietà

Gli elementi HTML ereditano dai loro “antenati” proprietà stilistiche

HTML

head

title

body

h1

p

ul

li

li

li

Ereditarietà cont.

Per l’ereditarietà si ha che

h1, p, li { color : green }

equivale a

body { color : green }

HTML

head

title

body

h1

p

ul

li

li

li

Body è un selettore molto utile per impostare regole per l’intero documento

Proprietà che non si ereditano

body {

background : url(texture.gif) white;

color : black;

}

background non viene ereditato: l’immagine copre tutta la pagina, mentre i singoli elementi hanno background trasparente (a meno di dichiarazione esplicita diversa)

Conflitto di regole

<style type=“text/css”>

body { color : green }

h1 {color : navy }

</style>

<style type=“text/css”>

h1 {color : navy }

body { color : green }

</style>

La regola più specifica prevale su quella più generale

L’ordine è irrilevante!

Conflitto di regole

Se c'è conflitto tra regole definite in punti diversi, viene rispettata questa scala di priorità decrescente

Stile in linea interno al tag HTML

Foglio di stile interno (nel tag di intestazione <head>)

Foglio di stile esterno

Default del browser

Problema

Supponiamo di dover scrivere un documento su come maneggiare il plutonio.

Avremo bisogno di introdurre in vari punti degli avvertimenti (warning) su cose da fare o da non fare.

Vogliamo che tali avvertimenti siano in grassetto per essere ben visibili.

Tuttavia non sappiamo a quale porzione di testo (paragrafo, titolo, lista, …) l’avvertimento si riferirà: non possiamo definire una semplice regola che faccia riferimento ad un unico elemento HTML.

Abbiamo bisogno di applicare un particolare stile alle porzioni del documento etichettate in un certo modo, indipendentemente dagli elementi HTML coinvolti.

Selezionatori Class

Definiscono stili indipendentemente da specifici elementi del documento.

Permettono così di applicare quel particolare stile a qualunque elemento del documento se etichettato opportunamente

Selezionatori di tipo “Class“

Nel foglio di stile inseriamo la regola:

.warning {font-weight: bold;}

il “.” dice al browser che si tratta di un selezionatore di tipo “class”

Nel documento HTML si dovrà precisare l’attributo “warning” dove necessario
<p class=“warning”>While handling plutonium, care must be taken to avoid the formation of a critical mass</p>
<p>During this step, <span class=“warning”> the possibility of implosion is very real, and must be avoided at all costs</span>. This can be accomplished by keeping the varous masses separate … </p>

Selezionatori di tipo “Class“

E’ possibile definire anche selezionatori riferiti ad un solo particolare elemento HTML:

p.warning { font-style: italic; }

Questo permette di applicare lo stile “warning” solo a paragrafi che specificano tale attributo

Può essere specificato unitamente alla regola generale: .warning {font-weight: bold;}

Questo permette di aggiungere una specifica allo stile generico warning: tutti i warning sono in grassetto e in più i paragrafi con attributo warning sono in italico.

Selezionatori Pseudo-Class

Permettono di assegnare uno stile in funzione dello stato del documento. Nel foglio di stile avremo:

a:link { color : silver;}

a:visited{ text-decoration : none}

a:active{ text-size : 2em }

a:hover { background : cyan}

Nota: i “:” individuano le pseudo-class

Nota: nel documento HTML non dovremo precisare nessun attributo corrispondente: lo stile dipende dallo stato del documento e non da proprietà statiche date a priori

I colori

Nomi: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow

Es: h1 {color : maroon }

Percentuali:	rgb(100%,0%,0%)	/*rosso puro*/
rgb(0%,100%,0%)	/*verde puro*/
rgb(0%,0%,100%)	/*blu puro*/
rgb(20%,20%,20%)	/*grigio scuro*/
rgb(80%,80%,80%)	/*grigio chiaro*/
rgb(100%,40%,0%)	/*arancione*/
rgb(100%,80%,0%)	/*oro*/

Colori cont.

Numeri: rgb(255,0,0)	/*rosso puro*/
rgb(0,255,0)	/*verde puro*/
rgb(0,0,255)	/*blu puro*/
rgb(255,102,0) /*arancione*/

Esadecimali:	#000000 /*nero*/
#FF0000 /*rosso*/
#00FF00 /*verde*/
#0000FF /*blu*/

Unità di misura

Assolute:	in	inches
cm	centimetri
mm	millimetri
pt	punti (in un inch ci sono 72 punti)

Relative:	em	1 em corrisponde alla dimensione	del font a cui si fa riferimento
%	fa riferimento alla dimensione di	riferimento

Es:	h1 { font-size : 24pt }
h1, h2, p { margin-left : 1em}
h1 { line-height : 150% }

Proprietà del testo

text-indent	rientro del testo

text-align	allineamento del testo

line-height	altezza del testo

word-spacing	separazione tra parole

letter-spacing	separazione tra lettere

text-decoration	decorazione del teso
p {
text-indent : 0.25in;
text-align : center;
line-height : 1.2em;
text-decoration : underline;
}

Font

Font-family	arial, verdana, helvetica...

Font-weight	grassetto

Font-size	dimensione del carattere

Font-style	corsivo
p {
font-family : Verdana, Arial, sans-serif;
font-weight: bold;
font-size: 12px;
font-style: italic;
}

NOTA: indicando più font e la famiglia generica si garantisce che, se un browser non dovesse avere a disposizione il font scelto, cercherà di usare il secondo, o i successivi, e nel caso nessuno sia disponibile sceglierà quello che ha a disposizione appartenente alla famiglia indicata

Colore

Color

Valore:	<colore>

Valore iniziale:	UA specific

Ereditarietà:	sì

Si applica a:	tutti gli elementi

Es:	body {color : black;}
p {color : gray;}
.warning {color : #FF0000;} /* equivale a red*/

Sfondo

Background-color	colore di sfondo

Background-image	immagine di sfondo

Background-repeat	ripetizione dello sfondo

Background-posizion	alto, basso, dx, sx...

body {
background-color: white;
background-image : url(texture.jpg);
background-repeat : no-repeat;	background-position : top right;
background-scroll : fixed;
}

Box

Tutti gli elementi html generano una “scatola” rettangolare intorno ad essi, detta element box.

Tre proprietà permettono di modificare l’aspetto delle “element box”:

Width e Height: fanno riferimento rispettivamente alla larghezza e all’altezza fisicamente occupata dall’ elemento in questione (quindi da testo, immagini, …)

Padding: è un’imbottitura che si aggiunge all’interno dell’element box

Margin: è un’imbottitura che si aggiunge all’esterno dell’element box

Border: è il bordo del box

Box

Il testo sta nella parte definita da “width” e “height”

L’ ”element box” include anche il “padding”

Il “margin” è esterno all’ “element box”

Width, Height

Padding

Margin

Bordi

border-style	tratteggio, a puntini, doppio

border- width	spessore del bordo

border-color	colore del bordo

Tutti insieme o singolarmente

border-top, border-bottom, border-right e border-left
h2 {
border-style : dashed;
border-width : thin;
border-left-color: red;
}

Liste

List-style-type	cerchio, disco, numeri, lettere

List-style-image	immagine da usare come puntino

List-style-position	inside, outside

Esempio:	ul {list-style-image: URL;}

Esempio per liste annidate:
ul ul {
list-style-type: circle;
list-style-type : decimal;
list-style-position : inside;
}

Informatica per biotecnologie - css

vito Calabretta

2002-03-01T19:34:37