CSS

Cascading Style Sheets -> specifica come i contenuti devono apparire

Selettori
Selettori di attributi

Colori

Pseudo-classi relative a stati

I selettori possono essere combinati con le pseudo-classi che aggiungono attributo fittizio
a cui applicare specifiche proprietà:

• :link imposta lo stile dei link non visitati

• :visited imposta lo stile dei link visitati
• :hover imposta lo stile per gli elementi quando l’utente ci è sopra
• :focus imposta lo stile degli elementi quando hanno il focus
• :active imposta lo stile degli elementi quando sono attivati dall’utente
Pseudo-classi strutturali
Le pseudo-classi strutturali consentono di selezionare elementi difficili da raggiungere con
selettori semplici

• E:root
• E:first-child
• E:nth-child()
• E:nth-last-child()
• E:last-child
• E:only-child
• E:nth-of-type()
• E:nth-last-of-type()
• E:first-of-type
• E:last-of-type
• E:only-of-type
• E:empty

Immagini in background
background-repeat determina come l'immagine debba essere replicata:

• repeat (il default)

• repeat-x (replica orizzontalmente su una sola riga)
• repeat-y (replica verticalmente su una sola colonna)
• no-repeat (nessuna replica)

background-attachment permette di decidere se un'immagine di background deve

scrollare assieme al contenuto dell'elemento in cui è inserita (valore scroll, default) o se
deve rimanere fissa

background-size permette di definire la dimensione dell’immagine di sfondo:

• auto (default) usa la dimensione originale dell’immagine

• cover occupa tutto il container facendo stretch e tagli (mantenendo proporzioni)
• contain ridimensiona per far stare l’immagine intera (mantenendo proporzioni)
• un valore di lunghezza / percentuale (rispetto al padre) imposta la larghezza
(altezza è auto)
• due valori di lunghezza / percentuale impostano la larghezza e l’altezza

Gradienti

• lineari: da un lato all'altro linear-gradient() argomenti: direzione + minimo due

colori
• radicali: da un punto verso l'esterno radical-gradient() argomenti: forma
(ellipse/circle) + dimensione (raggio) + at + colori

http://www.colorzilla.com/gradient-editor/
Font
Si può specificare più di un font in ordine di preferenza.

• chiudere lo stack con un fallback (specifico un font-family alla fine)

Scelto un font possiamo cambiare:

• font-weight, cambia enfasi e contrasto (lighter, normal, bold, bolder)

• font-style, mette in obliquo e in corsivo (normal, oblique, italic)
• font-stretch, comprime o espande le lettere (condensed, normal, expanded)

@font-face -> fa scaricare font all'utente

--> posso usare più font, ma problemi di scaricamento, licenze, costi e compatibilità

• text-transform: uppercase, lowercase, capitalize

• font-variant: small-caps (maiuscoletto)
• letter-spacing e word-spacing
• text-decoration: underline, overline, line-through, blink, none
• text-shadow
• word-wrap
• text-align: left, right, center, giustify
• text-indent
• vertical-align: text-top, baseline, text-bottom
Box Model

• il box è invisibile, ma il suo contenuto è visibile

• Content area: spazio occupato dal contenuto
• Padding area: dipende dal valore del padding
• Border: bordo dell'elemento
• Margin area

Con CSS, possiamo controllare:

• Dimensione dei box

• Bordi attorno ai box
• Margini e padding («imbottitura»)
• Visibilità
• Posizione

Padding: spazio tra content area e border

Valori sono misure di lunghezza o percentuali riferite alla larghezza dell'elemento genitore

• padding (valori 4, 3, 2, 1)
• padding-top
• padding-right
 • padding-bottom
• padding-lef

Bordi: area opzionale tra padding e margin

Per specificarlo serve border-style (none, solid, double, dotted, dashed, groove, ridge,
inset, outset)

• border-width: permette di definire lo spessore con le unità di misura di lunghezza o

le parole chiave thin, medium e thick
• border-color: permette di specificare il colore (andando a sovrascrivere il foreground
definito con color) o la parola chiave transparent (rende il bordo trasparente, ma
mantiene le dimensioni)
• border-radius: permette di arrotondare gli angoli specificando i valori con le unità di
lunghezza o percentuale (riferita alla larghezza del box)

Bordi con immagini:

• border-image: definisce un bordo basato su un'immagine

• primo valore: specifica l'immagine
• secondo valora: divide l'immagine in 9 parti in termini di distanza dal bordo
• terzo valore: determina come viene gestita la parte centrale (stretch, repeat, round,
space)

Margini
Evitano che gli elementi finiscano uno attaccato all'altro, aggiunti di default dal browser
margin, margin-top, margin-right, ..., auto

• top e bottom vengono collassati

• anche margini negativi

Dimensione dei box

• grandi quanto basta per il contenuto (inline)

• larghi quanto la pagina e alti quanto basta (block)
• box-sizing specifica se le misure si applicano al contenuto (content-box) o al bordo
(border-box)
• limiti (max-width, min-width, max-height,min-heigth), utili in tabelle
• overflow (visible, hidden, scroll, auto) diciamo cosa succede quanto il contenuto non
sta nei limiti

box-shadow -> ombreggiattura, aggiunta all'esterno del bordo

display -> cambia la visualizzazione dell'elemento

• none -> eliminare elemento dalla visualizzazione

• visibility: hidden -> nasconde il contenuto, ma lascia lo spazio

border-collapse -> separate (ogni casella ha il uso bordo) collapse (un solo bordo)
empty-cells -> per decidere se visualizzare o meno i bordi delle celle vuote (show o hide)

-> alterare il flusso normale tramite elementi legati al floating o al positioning

float: muove l'elemento ad estrema sinistra (left) o ad estrema destra (right)

• si applica a tutti gli elementi

• influenza il contenuto circostante

floating di inline

• specificare width perchè dimensioni diverse da browser a browser

• si comporta come elemento di tipo blocco

floating di block

• Se non si imposta la width dell'elemento, questo occuperà tutto lo spazio che

occupa normalmente
• Un elemento floating di tipo blocco starà sempre al di sotto degli elementi blocco
che lo precedono
• Per posizionare un elemento floating nell'angolo in alto a sinistra della finestra, è
necessario che sia il primo nel codice html (o usare il posizionamento assoluto)
• Per allineare i margini superiori dell'elemento floating e dell'elemento seguente, è
necessario impostare il margine superiore dell'elemento floating a 0 (altrimenti usa il
default del browser)

annullare il floating
-> è necessario utilizzare la proprietà clear

• si applica agli elementi di tipo blocco e deve essere applicata all'elemento che si
vuole venga posizionato sotto all'elemento floating
• left -> posiziona l'elemento sotto a qualsiasi elemento con floating left
• right -> posiziona l'elemento sotto a qualsiasi elemento con floating right
• both -> posiziona sotto a qualsiasi elemento floating

Floating multipli non si sovrappongono mai, se tutti gli elementi sono floating il
contenitore "scompare" -> soluzione: overflow auto o hidden
float -> utilizzata per organizzare un layout in colonne

• rendere floating un primo <div> e aggiungere un margine sinistro ad un secondo div

• rendere floating right o left due <div>
• rendere un <div> floating right e un <div> floting left

POSITIONING
Consente di posizionare gli elementi sulla pagina
position

• static è il default visto finora

• relative
 • absolute
• fixed posiziona in modo fisso rispetto alla finestra del browser e la posizione viene
mantenuta anche durante lo scrolling
• top, right, bottom, left permettono di specificare l'offset (lunghezza o percentuale)
dell'elemento rispetto al contenitore/antenato/finestra (valori negativi definiscono un
offset nella direzione opposta

relative -> è posizionamento relativo rispetto al normale flusso

• muove un elemento rispetto al posto che questo avrebbe di default

• lo spazio viene mantenuto
• l'elemento posizionato può sovrapporsi

absolute -> posiziona in modo assoluto rispetto al primo antenato non statico

• lo spazio nel flusso non viene mantenuto

• non influisce sul posizionamento di altri elementi
• effettuato rispetto al più vicino antenato che utilizza position con valore diverso da
static
• uando l’antenato è block, il posizionamento viene calcolato rispetto al limite del
padding, mentre quando è inline, rispetto all'area del contenuto
• un inline posizionato in modo assoluto si comporta come un block

fixed

• simile ad absolute, la differenza è che lo spostamento degli elementi è sempre

relativo alla finestra del browser
• elementi fissi nella loro posizione sullo schermo

Sovrapposizioni

• z-index permette di modificare l'ordine con cui tali elementi vengono visualizzati
sullo schermo
• di default, gli elementi appaiono nell'ordine in cui vengono incontrati nel documento
html
• Il valore è un numero (positivo o negativo) che determina l'ordine: gli elementi
vengono visualizzati a partire dai valori più bassi (i valori utilizzati non sono
importanti, conta solo l’ordine relativo)

Strategie di layout

• Layout fisso: mantiene le proprie dimensioni indipendentemente dalla dimensione

della finestra del browser o del testo
o creati impostando in pixel la larghezza di pagina e componenti
o contenuto all'interno di un <div>
o svantaggio: non si adatta alla dimensione della finestra del browser
 • Layout fluido o liquido: le dimensioni del layout cambiano in modo proporzionale
alle dimensioni della finestra
o la dimensione delle pagine e delle colonne varia dinamicamente in funzione
dello spazio
o creati impostando in percentuale la larghezza di pagina e componenti
(oppure width: auto)
o svantaggio: possono portare a righe di testo e elementi molto lunghi o corti
o soluzione: per mitigare uso min-width e max-width
o Impostare la proprietà max-width dell'elemento <img> al valore 100%
affinché venga scalata per occupare solo lo spazio disponibile nel
contenitore quando diventa più piccolo dell'immagine (non impostare width
ed height)

• Layout elastico: le dimensioni del layout cambiano in modo proporzionale alla

dimensione del testo
o la dimensione delle pagine e degli elementi si adatta alla dimensione del
testo (righe con sempre stessa lunghezza)
o creati impostando in em le dimensioni degli elementi
o si applica meno bene a contenuti non testuali
• Layout multicolonna
o si possono realizzare con float e position

Responsive design -> tecnica che adatta il layout in base alla dimensione dello schermo

• viewport -> dimensione della finestra

o <meta> -> controlla la dimensione del viewport
o initial-scale definisce il livello di zoom iniziale (1=100%)
o vw, vh, wmin, wmax

Media query

• direttive CSS per specificare che determinate proprietà valgono per alcune media
con alcune proprietà
• @media "tipo di media" { ... }
• specificarle in CSS o due fogli di stile (uno base e uno con i @media)
Mobile first

• scrivo prima le regole per i dispositivi mobile

• poi media query con caratteristiche avanzate
• min-width per specificare proprietà visualizzabili da dispositivi con risoluzione
maggiore
• breakpoint usuali: 320, 768, 1024

FlexBox

• display: flex -> serve a definire un contenitore flessibile (come l’elemento con
sfondo blu in figura)
• I figli diretti di un contenitore flex diventano automaticamente item flex (come gli
elementi grigi numerati 1, 2 e 3 in figura)

Proprietà dei Flex

• flex-direction -> determina la direzione in cui dispone gli elementi

o coloumn -> verticale
o coloumn-reverse
o row -> orizzonatale
o row-reverse
• flex-wrap -> determina se gli elementi possono andare a capo
o wrap -> va a capo
o no-wrap
o wrap-reverse
• flex-flow -> specifica direzione e a capo
• justify-content -> serve per la disposizione sulla direzione principale
o center
o flex-start -> all'inizio del contenitore
o flex-end
o space-around -> spazio prima, dopo e tra gli elementi
o space-between -> spazio tra gli elementi
• align-items -> allineare rispetto alla direzione secondaria
o center
o flex-start
o flex-end
o stretch
o baseline
• align-content -> gestisce su più righe gli elementi
• order imposta l'ordine di comparsa
• flex-grow imposta fattore di crescita
• flex-shrink imposta fattore di compressione
• flex-basis imposta lunghezza iniziale
• align-self imposta comportamento di allineamento specifico
Flex e media query

• Tramite le proprietà flex è possibile specificare assieme flex-grow, flex-shrink e flex-

basis
• Usare flex anche per specificare una percentuale di spazio del contenitore da
occupare, ad esempio flex: 50%
• Combinando flex e media query si può cambiare direzione da riga a colonna (o
viceversa) e cambiare le percentuali dei flex su dispositivi a diverse risoluzioni
HTML
Liste ordinate
<ol> (ordered list) e <li> (list item)
<ol>
<li> … </li>
...
<li> ... </li>
</ol>

Liste non ordinate

<ul> (unordered list) e <li> (list item)
<ul>
<li> … </li>
...
<li> ... </li>
</ul>

Liste di definizione
<dl> (definition list), <dt> (definition term) >dd> (definiton description)
<dl>
<dt> … </dt>
<dd> ... </dd>
...
<dt> … </dt>
<dd> ... </dd>
</dl>

Tabelle

• table per definire la tabella

• tr (table row) per definire ciascuna riga
• td (table data) per specificare il contenuto di una cella di una riga
• th (table heading) per inserire le intestazioni (di riga o di colonna)
• l’attributo scope (con valori: col o row) per specificare se l’intestazione è di colonna
(scope="col") o di riga (scope="row")
• attributo colspan (in th) per definire la cella che occupa 2 colonne

<table border="1">
<tr> <th>Name</th> <th colspan="2">Telephone</th> </tr>
<tr> <td>Tim Berners-Lee</td> <td>55577854</td> <td> 55577855 </td> </tr>
</table>

• attributo rowspan (in th) per definire la cella che occupa 2 righe

<table border ="1">

<tr> <th>Name: </th> <td>Tim Berners-Lee </td> </tr>
<tr> <th rowspan="2">Telephone</th> <td>55577854</td> </tr>
<tr> <td> 55577855 </td></tr>
</table>

• Si può inserire un titolo per la tabella usando l’elemento caption immediatamente

dopo l’elemento table
Moduli
Un modulo (form) serve per raccogliere informazioni dall'utente, esprimere scelte o
avviare azioni specifiche.

<form action="url del programma", method="get" id="form1"> …. </form>

Metodo GET

• Col metodo get i dati (es. nome=valore) sono concatenati all'indirizzo (URL)
specificato dall'attributo action (si usa il carattere '?' per identificare l'inizio della
stringa di dati e il carattere '&' per separare i dati tra di loro)
• Il metodo produce una stringa che è visibile nella barra degli indirizzi del browser
• Questo metodo dovrebbe essere usato quando i dati da trasmettere sono pochi

Metodo POST

• Col metodo post i dati vengono inseriti nel corpo del messaggio HTTP di richiesta
• Dovrebbe essere usato quando i dati da trasmettere sono molti

Elementi del modulo

• Input di tipo testo (<input type=
"text" />)

• Input di tipo password (<input type=

"password" />)

• Input di tipo invia (<input type=

"submit" />)

• Pulsante (<input type=

"button" />)

• Textarea (<textarea>…</textarea>)

• Input di tipo radio (<input type="radio" />)

• Input di tipo checkbox (<input type="checkbox" />)

• Input di tipo checkbox (<input type="checkbox" />)

• Input di tipo immagine (<input type=

"image" />)

• Reset(<input type= "reset" />):

• Hidden (<input type= "hidden" />):

XML
XML (eXtensible Markup Language) è un meta-linguaggio di markup (linguaggio per la
costruzione di linguaggi di markup più specifici).

Elementi
Sono "contenitori" che incapsulano altri elementi o dati intesi come stringhe di caratteri
(character data)

<address><street>...</street></address>

<tel>513-555-7098</tel>

Attributi
Sono informazioni aggiuntive che vengono associate agli elementi.
Hanno un nome e un valore (per il nome valgono le regole viste nel caso degli elementi) e
vengono inseriti all'interno del tag di inizio, dopo il nome dell'elemento

<tel preferred="true"> 513-555-8889 <tel>

• nome dell'attributo: preferred

• valore dell'attributo: true

Entità
Un'entità è un riferimento ad una sequenza di caratteri. Ha un nome e un contenuto (una
sequenza di caratteri). Per inserire un'entità si utilizza il codice &nome-entità; (entity
reference), cioè il nome dell'entità tra ‘&' e ';'

Lista codici UNICODE in formato esadecimale: http://www.unicode.org/charts

Dichiarazione
La dichiarazione XML identifica il documento come un documento XML.
La forma più semplice di dichiarazione XML è: <?xml version="1.0"?>
Non è obbligatoria (consigliata), ma se presente deve iniziare nel primo carattere della
prima riga del documento.

Attributi opzionali:

o encoding: specifica la codifica dei caratteri adottata (default: UTF 8)

o standalone (yes | no): se yes, il documento è auto-contenuto, tutti i suoi
valori sono presenti in esso; se no (default), possono essere specificati valori
del documento in un DTD esterno.

ESEMPIO
<?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?>

Commenti
Sintassi: <!-- Questo è un commento -->
Documento XML ben formato

Un documento XML si dice ben formato se:

• ogni tag di inizio ha un corrispettivo tag di fine

• i valori degli attributi sono delimitati da apici o doppi apici
• un elemento non può avere due attributi con lo stesso nome
• gli elementi sono correttamente annidati
• c'è esattamente un "elemento radice"
• vale quanto detto in precedenza: validità nomi, escaping caratteri di markup,
commenti non all'interno del markup,…

DTD (Document Type Definition)

Il Document Type Definition (DTD) dichiara come un certo "tipo" di documento XML deve
essere scritto.
Un DTD è un documento in formato testuale composto da una lista di dichiarazioni,
ognuna delle quali è relativa ad un "oggetto" che può essere contenuto nell'XML.

Dichiarazione di elementi
<!ELEMENT nome_el contenuto_el>

<!ELEMENT nome_el EMPTY> Dichiara un elemento vuoto

Es. <!ELEMENT email EMPTY
quindi nell'XML è corretto: <email></email> (campo vuoto)

<!ELEMENT nome_el (#PCDATA)> Dichiara un elemento che può contenere solo testo
Es. <!ELEMENT name (#PCDATA)>
nel documento XML, è corretto: <name>John Doe</name>

<!ELEMENT nome_el ANY> Dichiara un elemento che può contenere qualunque altro elemento
dichiarato nel DTD (si usa raramente)
Es. <!ELEMENT entry ANY>
nel documento XML, è corretto mettere nel contenuto di entry
qualunque altro elemento dichiarato nel DTD

<!ELEMENT nome_el (expr)> Dichiara un elemento che deve contenere altri elementi, in un certo
ordine e numero definiti dall'espressione regolare expr

Es. <!ELEMENT address-book (entry)>

nel documento XML è necessario inserire l'elemento entry dentro ogni
elemento address-book
Es. corretto <address-book><entry>...</entry></address-book>

Indicatori di occorrenza
se il nome di un elemento è senza alcun simbolo di occorrenza, deve apparire
una e una sola volta
es.: <!ELEMENT address-book (entry)>

un elemento seguito da + deve apparire una o più volte

es.: <!ELEMENT address-book (entry+)>

un elemento seguito da * deve apparire zero o più volte

es.: <!ELEMENT address-book (entry*)>

un elemento seguito da ? deve apparire zero o una volta

es.: <!ELEMENT address-book (entry?)>

Indicatori di ordine
| permette di definire elementi da inserire in alternativa
es.: <!ELEMENT address (street | city | state)>
corretto: <address><street>…</street></address>
corretto: <address><city>…</city></address>
corretto: <address><state>…</state></address>

Dichiarazione di attributi
<!ATTLIST nome_el nome_attr tipo_attr uso_attr>

Valori possibili per uso_attr

• #REQUIRED il valore dell'attributo deve essere inserito nel documento

• #IMPLIED l’attributo è opzionale; non va fornito un valore di default
• #FIXED 'val': il valore dell'attributo è sempre val
• 'val' l'attributo, se omesso, ha il valore di default val

Valori possibili per tipo_attr

• CDATA: il valore dell'attributo è una sequenza di caratteri arbitraria

• ID: un identificatore univoco per l'attributo; il valore dell'attributo è un nome (e deve
seguire le regole viste sui nomi XML) che deve essere unico nel documento (lo
stesso valore non può essere assegnato a più elementi)
• IDREF: contiene il riferimento all’attributo ID di un elemento nel documento
• IDREFS: contiene riferimenti a più attributi ID di elementi nel documento
• NMTOKEN: name token, il valore dell'attributo è una parola senza spazi che può
contenere lettere, numeri e i simboli '-', '_', '.' e ':'
• NMTOKENS: il valore dell’attributo è un elenco di nmtoken separati da spazi
• (n1 | n2 | … | nk): il valore dell'attributo deve essere uno fra i nmtoken n1, n2, …,
nk
• ENTITY, ENTITIES, NOTATION: riferimenti a entità, elenco di riferimenti a entità
separati da spazi e informazioni su formati interpretabili da applicazioni esterne

Collegare un XML a un DTD

Per collegare un documento XML a un DTD, inserire nel documento XML (sulla riga
successiva all'eventuale dichiarazione XML) una document type declaration

<!DOCTYPE el_radice DTD>

esempio: <!DOCTYPE el_radice SYSTEM "URL" [DTD]>