AOT LAB - Università degli Studi di Parma

AOT
LAB
Agent and Object Technology Lab
Dipartimento di Ingegneria dell’Informazione
Università degli Studi di Parma
Fondamenti di Informatica
Reti di calcolatori e Internet
Michele Tomaiuolo
AOT
LAB
Reti di calcolatori
MODEM
MODEM
2
AOT
LAB
Reti di calcolatori
Una rete di calcolatore offre alcuni vantaggi
rispetto all’uso di un calcolatore isolato
Condivisione dell’informazione
Condivisione delle risorse
Accesso a risorse remote
Alta affidabilità
Convenienza economica
Crescita graduale
3
AOT
LAB
Reti di calcolatori
Le reti sono classificate in base alla loro
dimensione
Rete locale (LAN)
Rete Metropolitana (MAN)
Rete Geografica (WAN)
4
AOT
LAB
Reti locali
5
AOT
LAB
Reti di interconnessione
6
AOT
LAB
Prestazioni di una rete
Le prestazioni di una rete sono indicate con la larghezza di
banda
La larghezza di banda indica la quantità di informazione
che la rete è in grado di trasmettere nell’unità di tempo
La larghezza di banda viene misurata in bit al secondo
Un collegamento telefonico via modem (fino a 56 Kbps)
Un collegamento ISDN o ADSL (fino a ~20Mbps)
Un collegamento di una rete locale (fino ad alcuni Gbps)
7
AOT
LAB
Trasmissione dati
Doppino telefonico
Modem su linea telefonica commutata 56 kbit/s
ISDN 128 Kbit/s
ADSL 640 Kbit/s, fino ad alcuni Mbit/s
Cavo coassiale
Su brevi distanze 10 MBit/s
Su lunghe distanze 100 Kbit/s
Fibra ottica Tbit/s
Onde elettromagnetiche
BlueTooth (brevissime distanze) 700 kbit/s
WiFi (decine/centinaia di metri) 54 Mbit/s
Via satellite
8
AOT
LAB
Media
Linea telefonica
analogica
Trasmissione dati
Tipo
trasmissione
Diametro
Modulazione
56 Kbit/s
ISDN
128 Kbit/s
ADSL
640 Kbit/s-20Mbit/s
Cavo coassiale
< 1 Km
10 Mbit/s
> 1 Km
100 Kbit/s
Fibra ottica
Onde
elettromagnetiche
Velocità
Tbit/s
BlueTooth
< 100 m
700 Kbit/s
WiFi
< 500 m
54 Mbit/s
Satellite
9
AOT
LAB
Internet
Internet è una rete di calcolatori che permette la
comunicazione tra tutti i calcolatori del mondo
Un indirizzo diverso per ogni calcolatore (indirizzo IP)
Un stack di protocolli di comunicazione comune
(TCP/IP) per lo scambio di messaggi (pacchetti) tra i
calcolatori
Per ogni pacchetto viene scelto un percorso
• Commutazione di pacchetto anziché di circuito
10
AOT
LAB
Arpanet
Arpa – Advanced Research Projects Agency
Ottobre 1969: primi due nodi di Internet
Università della California di Los Angeles
Stanford Research Institute
Collegamento telefonico da computer a computer
1973: Transmission Control Protocol (Tcp)
1978: Internet Protocol (Ip)
1983: Milnet
1990: Inizia privatizzazione di Arpanet
11
AOT
LAB
Usenet
1974: Bell Labs rilasciano Unix
1978: Unix-to-unix copy protocol (Uucp)
1978: Due studenti dell’Università di Chicago
creano il Computer Bulletin Board System
1983: Fido, Fidonet (PC, Dos)
1979: Usenet News
1979: Primo ponte tra Arpanet e Usenet a
Berkeley, nasce Internet
12
AOT
LAB
Indirizzi IP
Un indirizzo IP è composto da una sequenza di
quattro numeri compresi tra 0 e 255
160.78.28.83
192.168.1.1
127.0.0.1
Esiste un sistema detto Domain Name Server
(DNS) che permette di associare dei nomi
simbolici agli indirizzi IP
www.repubblica.it
www.google.com
www.unipr.it, WWW.UniPR.IT
13
AOT
LAB
Indirizzi IP
I nomi simbolici associati agli indirizzi IP non sono
liberi, ma assegnati da uffici appositi
Il simbolo terminale (tld) è assegnato a livello
internazionale e può essere di due tipi:
Indicante il tipo di organizzazione
com, edu, gov, net, mil, org
Indicante la nazione
it, uk, fr, …
14
AOT
LAB
Pacchetto IP
15
AOT
LAB
Pacchetto IP
Version – 4 per IPv4
Internet Header Length – 4 bit, 5-15 parole da 32 bit
Type of Service
3 bit precedenza, latenza, throughput, affidabilità, 2 bit riservati
Identification
Identifica il datagram, assegnato dal mittente per aiutare il
destinatario ad assemblare i frammenti
Flags e fragment offset
Riservato, don’t fragment (DF), more fragments (MF)
Blocchi da 8 byte
Ethernet: Maximum transmission unit = 1500 bytes
Time to live – Decrementato ad ogni hop
Protocol – 6 = TCP, 17 = UDP (User datagram protocol)
16
AOT
LAB
Servizi di Internet
La rete internet fornisce quattro servizi principali:
FTP (File Transfer Protocol)
SMTP (Simple Mail Transfer Protocol)
TELNET
HTTP (HyperText Transport Protocol)
17
AOT
LAB
Modello OSI/ISO
Livello
Definizione
Descrizione
7
Applicazione
Applicazioni
6
Presentazione
Definizione standard
del formato dei dati utilizzati
5
Sessione
Protocolli dei servizi:
FTP, HTTP, SMTP, RPC, ...
4
Trasporto
Protocolli TCP e UDP
3
Rete
Protocollo IP
2
Collegamento dati
Trasmissione e ricezione dati
dipendente dal tipo di hardware
1
Fisico
Hardware
18
AOT
LAB
World Wide Web
Assieme alla posta elettronica, World Wide Web
(WWW o Web) è il modo più diffuso di utilizzare la
rete Internet
Il Web permette agli utenti di internet di mettere a
disposizione e di accedere a documenti via HTTP
Il Web si basa su due programmi
Il Web server
Il Web client (browser)
19
AOT
LAB
World Wide Web
1990: World Wide Web (Html+Http)
Sistema per la condivisione di informazioni in ipertesto
Sviluppato da Tim Berners-Lee
CERN (Centro Europeo per la ricerca nucleare)
1993: Mosaic, primo browser grafico
Marc Andreessen
1994: Netscape Navigator
1995: Internet Explorer
20
AOT
LAB
Standardizzato dal W3C (http://www.w3.org)
Html
HyperText Markup Language
Linguaggio per pubblicare informazioni a livello globale
Una sorta di lingua madre che tutti I computer sono potenzialmente
in grado di capire
HTML fornisce agli autori degli strumenti per:
Pubblicare documenti online con titoli, testo, tabelle, foto ecc.
Recuperare informazioni online attraverso collegamenti ipertestuali,
con un click del mouse
Disegnare module per condurre transazioni con servizi remoti, da
usare per cercare informazioni, prenotare, ordinare prodotti ecc.
Includere fogli di calcolo, video, audio e altre applicazioni
direttamente nei documenti
21
AOT
LAB
HTML dichiara tipi di elementi che permettono di strutturare
I documenti (paragrafi, collegamenti ipertestuali, liste,
tabelle, immagini ecc.)
Ogni dichiarazione di tipo di elemento generalmente
descrive tre parti: un tag di apertura, un contenuto e un tag
di chiusura
Testo normale. <b>Testo in grassetto.</b> Normale.
La maggior parte dei tag permette la definizione di attributi
Html
Tag ed elementi
Leggi su <a href="http://aot.ce.unipr.it">AOTLab</a>.
I tag semplici non hanno un contenuto
<img src="blueribbon.gif" />
22
AOT
LAB
Html
Anatomia di una pagina
Anatomia di una pagina Html
Tipo di documento – All’inizio e alla fine del file
Intestazione – Informazioni descrittive, come il titolo
Titolo – Deve essere nell’intestazione
Corpo – Parte principale della pagina, contenuto del documento
<html>
<head>
<title>Hello, world</title>
</head>
<body>
Hello, world.
</body>
</html>
23
AOT
LAB
Grassetto e corsivo
<strong>testo in grassetto</strong>
<em>testo in corsivo</em>
Titoli
Html
Tag di formattazione testo
<h1>Il titolo più grande</h1>
...
<h6>Il titolo più piccolo</h6>
Paragrafi
<p>Questo è un paragrafo.</p>
24
AOT
LAB
Testo preformattato
<hr />
Interruzioni di linea
<pre>viene usato un font a larghezza fissa, gli
spazi e I ritorni a capo sono preservati</pre>
Riga orizzontale di separazione
Html
Tag di formattazione testo
Prima linea.<br />Seconda linea.
Commenti
<!-- un commento html -->
25
AOT
LAB
Html
Url
Url è un acronimo per Uniform Resource Locator ed è un
riferimento (indirizzo) per una risorsa sul Internet
Il nome della risorsa è il suo indirizzo completo e dipende
interamente dal protocollo – Per Http include:
Nome dell’host – Il nome della macchina su cui risiede la risorsa
Numero di porta – Num porta a cui collegarsi (di solito omesso)
Nome del file – Percorso completo della risorsa sulla macchina
Frammento – Riferimento ad una sezione con id univoco all’interno
della risorsa, ad una porzione di testo (di solito omesso)
http://www.ietf.org:80/rfc/rfc2732.txt
26
AOT
LAB
Html
Collegamenti
Collegamenti ad altre pagine
<a href="http://aot.ce.unipr.it">AOTLab</a>
Collegamenti con immagini
<a href="http://www.google.com"><img
src="magnifying_lens.gif" /></a>
Se la risorsa (immagine o documento) si trova nella
stessa cartella della pagina, allora basta un url relativo
Collegamenti e-mail
Dì al <a href="mailto:[email protected]">
presidente</a> cosa pensi.
27
AOT
LAB
Html
Collegamenti
Un collegamento può indicare ad una parte della stessa
pagina, o al centro di un’altra pagina
Si deve assegnare all’elemento puntato un nome univoco con
l’attributo id, oppure porre dove richiesto un elemento di anchor
Si deve aggiungere un frammento alla url del collegamento
<html>
<body>
<p id="paragraph1">Il primo paragrafo. <a href="#paragraph2">Vai
al secondo paragrafo.</a></p>
<p><a name="paragraph2">Il secondo paragrafo.</a> <a
href="#paragraph1">Vai al primo paragrafo.</a></p>
<p>Il terzo paragrafo. <a
href="http://somehost.com/anotherpage.html#frag1">Vai ad un
frammento in un’altra pagina.</a></p>
</body>
</html>
28
AOT
LAB
Html
Liste non ordinate
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
29
AOT
LAB
Html
Liste ordinate
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
30
AOT
LAB
Html
Liste di definizione
<dl>
<dt>First term</dt>
<dd>Definition of first term.</dd>
<dt>Second term</dt>
<dt>Third term</dt>
<dd>Definition of second and third term.</dd>
<dd>Alternate definition of second and third term.</dd>
</dl>
31
AOT
LAB
Html
Tabelle
Le tabelle html permettono di mostrare dati
Le tabelle sono definite dal tag <table>
Il tag <table> contiene righe di celle, definite dal tag <tr>
Ogni tag <tr> contiene celle di dati, definite dal tag <td>
Le celle di titolo sono definite dal tag <th>
Le righe sono definite dall’alto verso il basso
Le celle sono definite da sinistra a destra
Ogni cella di dati può contenere tutto ciò che si vuole –
collegamenti, immagini, liste e anche altre tabelle
32
AOT
LAB
Html
Una tabella semplice
<table border="1">
<tr>
<td>northwest</td>
<td>northeast</td>
</tr>
<tr>
<td>southwest</td>
<td>southeast</td>
</tr>
</table>
33
AOT
LAB
Html
Una tabella con celle unite
<table border="1">
<caption><i>A test table with
merged cells</i></caption>
<tr>
<th rowspan="2"></th>
<th colspan="2">Average</th>
<th rowspan="2">Red eyes</th>
</tr>
<tr>
<th>height</th>
<th>weight</th>
</tr>
<tr><th>Males</th><td>1.9</td><td>0.003</td><td>40%</td></tr>
<tr><th>Females</th><td>1.7</td><td>0.002</td><td>43%</td></tr>
</table>
34
AOT
LAB
Html
Elementi di raggruppamento
Gli elementi div e span, assieme agli attributi id e
class, offrono un meccanismo generico per
aggiungere struttura ai documenti
L’elemento span raggruppa contenuto inline
L’elemento div raggruppa contenuto di livello blocco
Non impongono nessun altro vincolo di
presentazione al contenuto
Gli autori possono usare questi elementi assieme a fogli
di stile per adattare i doc html ai loro bisogni e gusti
35
AOT
LAB
Markup semantico
Linee guida generali
Definire un ricco vocabolario di classi semantiche
… la cui presentazione può essere specificata in fogli di stile validi
per tutto il sito web
Abbastanza da poter scrivere documenti lunghi e complessi senza
introdurre elementi di presentazione
Prendono il posto dei vecchi template di presentazione
La presentazione è ora definita nei fogli di stile, permettendo al
markup di rimanere semantico
Riferimenti per il markup di mozilla.org
http://www.mozilla.org/contribute/writing/markup
Tecniche e linee guida per l’accessibilità dei contenuti web
http://www.w3.org/TR/WCAG10-HTML-TECHS/
36
AOT
LAB
Markup semantico
Sezioni
Usare <p> per marcare I paragrafi
Usare I tag per racchiudere I paragrafi, non persepararli
Usere <div class="section"> per marcare le sezioni
all’interno di un documento
Racchiudere sia il titolo che il contenuto della sezione
Le sezioni sono tipicamente un po’ rientrate rispetto al testo vicino
<div class="section">
<h2 id="structure">General Structure</h2>
<p>...</p>
</div>
37
AOT
LAB
Markup semantico
Citazioni
Usare <blockquote> con <address>
Paragrafi o altri contenuti di livello blocco
Si può indicare una attribuzione con <address> proprio prima
del tag di chiusura
Epigraffi: “epigraph” come classe
<blockquote cite="http://www.faqs.org/rfcs/rfc1866.html">
<p>The BLOCKQUOTE element contains text quoted from another
source.</p>
<p>A typical rendering might be a slight extra left and right
indent, and/or italic font. The BLOCKQUOTE typically provides
space above and below the quote.</p>
<address><a href="http://www.faqs.org/rfcs/rfc1866.html">HTML
2.0</a></address>
</blockquote>
38
AOT
LAB
Linee guida mozilla.org
Note di vario tipo
Commenti dell’autore o dell’editor (in una bozza)
<div class="remark">
<span class="remark">
Note generiche
<span class="note">
<p class="note">
<div class="note">
Note chiave
<div class="key-point">
Avvisi importanti (cioè da leggere)
<* class="important">
39
AOT
LAB
Linee guida mozilla.org
Figure ed esempi
Figure
<div class="figure">
Esempi
<div class="example">
<div class="good example">
<div class="bad example">
Racchiudere frammenti di codice in blocchi <code>
40
AOT
LAB
Linee guida mozilla.org
Computer
Codice inline: <code>
Blocchi di codice: <pre class="code">
Comandi: <code class="command">
Nomi di file e url: <code class="filename">
Input da tastiera: <kbd>
Variabili e costanti: <var>
Catture di schermate testuali (blocchi di output)
<pre class="screen"> e <div class="screen">
Output inline: <samp>
41
AOT
LAB
Linee guida mozilla.org
Navigazione
Indice (table of contents):
<ol class="toc"> e <ul class="toc">
Navigazione locale:
<ul class="snav">
Breadcrumb (navigazione gerarchica) :
<p class="crumbs">
Riferimenti esterni al sito:
<a class="ex-ref">
42
AOT
LAB
Css
Cascading Style Sheets
Gli stili definiscono come visulalizzare gli elementi html
Gli stili sono di solito memorizzati in fogli di stile
Gli stili sono stati aggiunti ad html (v4.0) per risolvere un
problema
I fogli di stile esterni fanno risparmiare un sacco di lavoro
I fogli di stile esterni sono memorizzati in file css
Definizioni di stile multiple sono trattate a cascata in un una
sola definizione
43
AOT
LAB
Css
Gli stili risolvono un problema
I tag html erano stati in origine studiati per definire
il contenuto di un documento html
Dovevano dire: “Questo è un titolo", “Questo è un
paragrafo”, “Questa è una tabella", usando tag come
<h1>, <p>, <table>, e così via
Il layout del documento doveva essere preso in carica
dal browser, senza usare tag di formattazione
44
AOT
LAB
Css
Gli stili risolvono un problema
I due browser principali – Netscape e Internet
Explorer – hanno continuato ad aggiungere nuovi
tag e attributi (come il tag <font> e l’attributo color)
alle specifiche html originali
Sempre più difficile creare siti web dove il contenuto
fosse separato dal layout di presentazione
Per risolvere questo problema, il W3C ha creato gli
stili in aggiunta ad Html 4.0
Gli stili in Html 4.0 definiscono la visualizzazione degli
elementi, sostituendo <font> e color di Html 3.2
Sia Netscape 4.0 che Internet Explorer 4.0 supportano i
Cascading Style Sheets
45
AOT
LAB
Css
Gli stili fanno risparmiare lavoro
Css segna una svolta nei progetti web perché
permette agli sviluppatori di controllare in un sol
colpo lo stile e la disposizione di molte pagine web
Stili normalmente in un file esterno alle pagine html
Uno sviluppatore web può definire uno stile per ciascun
elemento html ed applicarlo a tutte le pagine che vuole
Modifica globale - es. modificare il font o il colore
di tutti i titoli in tutte le pagine di un sito
Basta cambiare lo stile, e tutti gli elementi nel sito si
aggiornano automaticamente
Css può far risparmiare un sacco di lavoro
46
AOT
LAB
Css
Come inserire un foglio di stile
Fogli di stile esterni
Fogli si stile interni
Stile inline
47
AOT
LAB
Css
Fogli di stile esterni
Foglio esterno: ideale per l’applicazione a molte pagine
Si può cambiare l’aspetto di un intero sito modificando un solo file
Ogni pagina deve essere collegata al foglio di stile per
mezzo del tag <link>
Il tag <link> va all’interno della sezione head
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
Il browser leggerà le definizioni di stile dal file mystyle.css, e
formatterà il documento di conseguenza
Un foglio di stile esterno può essere scritto in qualsiasi
editor di testo
Il file non deve contenere alcun tag html
Il foglio di stile deve essere salvato con estensione .css
Un esempio di foglio di stile è mostrato sotto:
body {background-image: url("images/back40.gif")}
p {margin-left: 20px}
48
AOT
LAB
Css
Fogli di stile interni
Un foglio di stile interno può essere usato quando un
documento html ha uno stile unico
Un foglio di stile interno si definisce nella sezione head
usando il tag <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, e formatterà il
documento in accordo ad esse
49
AOT
LAB
Css
Stile inline
Uno stile inline fa perdere molti dei vantaggi dei fogli di
atile, perché mischia il contenuto con la presentazione
Metodo da usare con parsimonia, quando uno stile deve essere
applicato ad una solo occorrenza di un elemento in un documento
Per definire uno stile inline si usa l’attributo style
dell’elemento da formattare
L’attributo style può contenere qualsiasi proprietà css
L’esempio mostra come cambiare il colore e il margine sinistrao di
un singolo paragrafo
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
50
AOT
LAB
Css
Ordine di cascata
I fogli di stile permettono di specificare informazioni di stile
in vario modo
Gli stili possono essere specificati in un singolo elemento html, nella
sezione <head> di una pagina html, o in un file css esterno
È possibile fare riferimento pure a diversi fogli esterni in una stessa
pagina html
Quale stile sarà usato quando è specificato più di uno stile per un
elemento html?
Tutti gli stili vengono raccolti a cascata in un nuovo foglio di
stile virtuale secondo le seguenti regole
Default del browser default (priorità più bassa)
Foglio di stile esterno
Foglio di stile interno (nella sezione <head>)
Stile inline (nell’elemento html – priorità più alta)
51
AOT
LAB
Css
Sintassi
La sintassi css è composta di tre parti: un selettore, una
proprietà ed un valore:
selector {property: value}
Il selettore è di colito l’elemento/tag html che si vuole definire
La proprietà è l’attributo che si vuole cambiare, ed ogni proprietà
può avere un valore
La proprietà e il valore sono separati da due-punti e racchiusi tra
parentesi graffe
body {color: black}
52
AOT
LAB
Css
Sintassi
Se il valore è composto da più parole, bisogna racchiuderlo
tra virgolette doppie
Se si vuole specificare più di una proprietà, bisogna
separarle con un punto-e-virgola
L’esempio sotto mostra come definire un paragrafo con
allineamento centrato e colore del testo rosso
p {
text-align: center;
color: red;
font-family: "sans serif";
}
53
AOT
LAB
Css
Raggruppare i selettori
Si possono raggruppare i selettori: bisogna
separare i selettori con una virgola
Nell’esempio sotto, gli elementi di titolo sono
raggruppati; ogni elemento di titolo sarà verde
h1, h2, h3, h4, h5, h6 {
color: green;
}
54
AOT
LAB
Css
Selettore di classe
Con il selettore di classe si possono definire stili
diversi per uno stesso tipo di elemento html
Es. due tipi di paragrafo: uno allineato a destra e uno
allineato al centro
p.signature {text-align: right}
p.important {text-align: center}
Bisogna impostare l’attributo class nel doc html
<p class="signature">
This paragraph will be right-aligned.
</p>
<p class="important">
This paragraph will be center-aligned.
</p>
Si può specificare solo un attributo class per ciascun
elemento html
55
AOT
LAB
Css
Selettore di classe
Si può anche omettere il nome di tag nel selettore
per definire uno stile da applicare a tutti gli
elementi html di una certa classe
Allineare al centro tutti gli elementi di classe important
.important {text-align: center}
Sia l’elemento h1 che quello p sono di classe important;
questo significa che entrambi gli elementi seguiranno le
regole del selettore .important
<h1 class="important">
This heading will be center-aligned
</h1>
<p class="important">
This paragraph will also be center-aligned.
</p>
56
AOT
LAB
Css
Selettore di id
Il selettore id è diverso dal selettore class
Mentre un selettore class può applicarsi a molti elementi su una
pagina, il selettore id si applica ad un solo elemento
Un attributo id deve essere unico all’interno del documento
La regola di stile qui sotto sarà applicata ad un elemento p
che ha il valore di id posto a para1
p#para1 {
text-align: center;
color: red;
}
La regola di stile qui sotto sarà applicata al primo elemento
avente id con valore wer345
#wer345 {color: green}
<h1 id="wer345">Some text</h1>
57
AOT
LAB
Css
Commenti
Per spiegare le regole, si possono inserire nel css
dei commenti, che possono essere d’aiuto quando
il codice sorgente deve essere in seguito
modificato
I commenti vengono ignorati dal browser
Un commento css comincia con /* e termina con */
/* This is a comment */
p {
text-align: center;
/* This is another comment */
color: black;
font-family: arial;
}
58
AOT
LAB
Css
Sfondo
background-color – Imposta il colore di sfondo di un elemento - colorrgb, color-hex, color-name, transparent
background-image – Imposta una immagine come sfondo – url, none
background-repeat – Imposta la ripetizione di una immagine di sfondo
– repeat, repeat-x, repeat-y, no-repeat
background-attachment – Immagine di sfondo fissa o che scorre con
il testo – scroll, fixed
background-position – Posizione di partenza di una immagine di
sfondo – top left, top center, top right, center left, center center, center
right, bottom left, bottom center, bottom right, x-% y-%, x-pos y-pos
background – Imposta tutte assieme le proprietà dello sfondo
59
AOT
LAB
Css
Testo
color – Colore del testo – color
direction – Direzione del testo – ltr, rtl
text-align – Allineamento – left, right, center, justify
text-decoration – Decorazione – none, underline, overline, linethrough, blink
text-indent – Indentazione della prima riga – length, %
text-shadow – Ombra – none, color, length
text-transform – Controlla le lettere – none, capitalize, uppercase,
lowercase
white-space – Trattamento degli spazi bianchi – normal, pre, nowrap
60
AOT
LAB
Css
Font
font-style – Stile, corsivo – normal, italic, oblique
font-variant – Maiuscoletto o normale – normal, small-caps
font-weight – Peso, grassetto – normal, bold, bolder, lighter, 100, 200,
300, 400, 500, 600, 700, 800, 900
font-size – Dimensione – xx-small, x-small, small, medium, large, xlarge, xx-large, smaller, larger, length, %
font-family – Lista con priorità di nomi di famiglie di font e/o nomi di
famiglie generiche – family-name, generic-family
font – Imposta tutte le proprietà del font
61
AOT
LAB
Css
Box model
62
AOT
LAB
Css
Bordi
border-width – Ampiezza dei quattro bordi, accetta da uno a quattro
valori – thin, medium, thick, length
border-style – Quattro bordi, accetta da uno a quattro stili – none,
hidden, dotted, dashed, solid, double, groove, ridge, inset, outset
border-color – Colore, da uno a quattro valori – color
border – Imposta tutte le proprietà dei bordi
I bordi top, right, bottom, left possono essere cambiati
indipendentemente usando proprietà separate: es. border-top-width
63
AOT
LAB
Css
Margini esterni e interni
margin – Spazio attorno agli elementi
È possibile usare valori negativi per sovrapporre il contenuto
I margini top, right, bottom, left possono essere cambiati
indipendentemente usando propietà separate, es. margin-top
Possibile usare scorciatoia margin per impostare tutti i margini
padding – Spazio tra il bordo e il contenuto degli elementi
Non sono ammessi valori negativi
I padding top, right, bottom, left possono essere cambiati
indipendentemente usando proprietà separate, es. padding-top
Possibile usare scorciatoia padding per impostare tutti i padding
64
AOT
LAB
Css
Dimensioni
width – Ampiezza – auto, length, %
height – Altezza – auto, length, %
IE5 bug (?)
Se si vuole un box largo 100 pixel con 10 pixel di padding e 10 pixel
di bordo, bisogna impostare una regola così:
width: 100px; padding: 10px; border: 10px
Per ottenere lo stesso effetto in Internet Explorer 5.x, si dovrebbe
alterare la regola di stile a questo modo, per evitare di ottenere un
box di 40 pixel più piccolo
width: 140px; padding: 10px; border: 10px
IE6 è finalmente conforme alle specifiche Css sulle dim del box
box-sizing – Proprietà Css3 per specificare se le
dimensioni del box comprendono bordi e margini o no –
border-box, content-box
65
AOT
LAB
Css
Posizione
bottom – Distanza del limite inferiore di un
elemento rispetto all’elemento che lo contiene –
auto, %, length
left – Sinistra … – auto, %, length
right – Destra … – auto, %, length
top – Superiore – auto, %, length
vertical-align – Allineamento verticale – baseline,
sub, super, top, text-top, middle, bottom, textbottom, length, %
66
AOT
LAB
Css
Visibilità
Visibilità
z-index – Ordine nello stack (profondità) – auto, number
overflow – Impostazione per contenuto più ampio dell’area disponibile
– visible, hidden, scroll, auto
visibility – Visibilità – visible, hidden
67