Appunti CSS 22-23 PDF

CSS
appunti
(ultimo aggiornamento 24-09-2022)
DOM (document object model)
● ogni pagina html può essere vista
come una struttura ad albero
● la radice è il tag <html> che
contiene tutti gli altri tag
● ogni nodo rappresenta una parte
del documento
● concetto fondamentale per capire
CSS e JavaScript
Cosa sono i CSS
● CSS = Cascading Style Sheets (fogli di stile a cascata)
● le regole CSS definiscono l’aspetto degli elementi html presenti nella pagina,
anche in relazione al device utilizzato (desktop, mobile, smart tv, ecc)
● a cascata perché una regola applicata ad un elemento padre verrà applicata
in cascata anche agli element figli (contenuti in esso), sempre che i figli non la
sovrascrivano
● vantaggi :
○ un file CSS può controllare l’aspetto di più pagine html.
○ cambiando un file css posso stravolgere l’aspetto di tutto il sito
○ se esterni, vengono mantenuti nella cache del browser, risparmiando banda
Sintassi di una regola CSS
● una regola CSS è composta da un selettore e un blocco di dichiarazioni ,
racchiuso tra parentesi graffe ( { } )
● il selettore individua l’elemento (o gli elementi) html a cui applicare la regola
● la dichiarazione, composta dalla coppia proprietà - valore separati da due
punti ( : ) ne definisce l’aspetto
● le dichiarazioni (di fatto, le regole) sono separate da un punto e virgola ( ; )
Esempio
● in questo esempio tutti i tag sono allineati al centro e sono di colore rosso
● p è il selettore
● color è una proprietà e red è il suo valore
● text:align è una proprietà e center è il suo valore
● i due punti ( : ) separano la proprietà dal valore e il punto e virgola ( ; ) separa
le dichiarazioni
● il blocco delle dichiarazioni è racchiuso tra parentesi graffe
Come usare i CSS
Esistono 3 modi per inserire regole CSS nei documenti html
● CSS esterni: le regole risiedono su un file separato

● CSS interni: le regole risiedono dell’intestazione <head> del documento html
● CSS inline: le regole risiedono nel tag iniziale di un singolo elemento html
Nota: Le regole esterne possono essere sovrascritte da quelle interne e le regole

interne possono essere sovrascritte da quelle inline
Nota: un caso particolare di uso delle regole CSS è quello in cui si usa il tag
 per assegnare una regola ad una porzione di testo, rientra però nel caso
inline
CSS esterni
● le regole risiedono su un file esterno alla pagina html (locale o remoto)
● possono valere per più di una pagina html
● il file esterno deve essere un file di testo, privo di elementi html, salvato con
estensione .css
● è necessario specificare nel tag <head> col tag <link> il file contenente le
regole CSS
Tag <link>
Da non confondere col tag <a>
<link rel="stylesheet" href="mystyle.css">
● è annidato all’interno del tag <head> (intestazione della pagina)

● informa il browser della presenza di un file esterno al documento corrente
● il collegamento può puntare ad un ad un file css, a un font o altro
● rel : attributo che specifica la relazione col file esterno (in pratica il tipo)
● href : attributo che specifica il percorso (assoluto o relativo) del file esterno
● media : attributo che identifica il supporto di visualizzazione
CSS interni
● sono regole che valgono solo per la
pagina web in cui sono inserite
● le regole sono all’interno del tag
<style> annidato all’interno del
tag <head>
CSS inline
● sono regole che si applicano ad un singolo elemento html
● sono inserite nel tag di apertura tramite l’attributo style
● vanno usati con attenzione, dato che un uso eccessivo vanificherebbe i
vantaggi derivanti dall'uso corretto dei CSS
Ordine di applicazione
L’ordine di applicazione delle regole CSS dipende dal tipo di regola usata e dal
concetto di specificità (si veda la relativa slide)
In breve:
● una regola esterna può venire sovrascritta da una interna

● una regola interna può venire sovrascritta da una di tipo inline
● conta l’ordine di apparizione delle regole
I commenti
● Esattamente come nei linguaggi di programmazione i commenti vengono usati
per rendere leggibile il codice a noi stessi e agli altri programmatori
/* questo è un commento */
I selettori
I selettori sono usati per selezionare uno o più elementi di cui si desidera impostare
l’aspetto.
I selettori si dividono in 5 categorie:
● semplici: basati sul nome, id o class

● combinatori (o di relazione): basati sulla relazione tra gli elementi
● pseudo-classi: basati su uno stato di un elemento
● pseudo-elementi: basati su una parte di un elemento
● di attributo: basati su un attributo di un elemento
Selettore di elemento
● si basa sul nome dell’elemento
● sono validi tutti i tag html
Selettore id
● l’attributo id si usa per assegnare un nome univoco ad un tag html
● il selettore id si usa per specificare le regole solo per quel singolo elemento
● la sintassi è la seguente: #id_univoco_del tag (hashtag)
 bla bla bla 

Selettore di classe (1/2)
● una classe serve a definire un insieme di oggetti omogenei
● una classe si crea con l’attributo class, un tag html può appartenere a più di
una classe. Le classi vanno separate da un spazio.
● il selettore di classe seleziona tutti i tag html appartenenti alla classe
● la sintassi è la seguente: .nome_della_classe (punto)
 bla bla bla 

Selettore di classe (2/2)
● è possibile anche specificare l’aspetto di uno specifico elemento appartenente
a quella classe
● la sintassi è la seguente: selettore_elemento.nome_della_classe
Ricorda: un tag html può appartenere a più di una classe, basta separare le classi
con uno spazio
 bla bla bla 

Raggruppare i selettori
Per raggruppare i selettori
basta scriverli sulla stessa
riga, separandoli da un
virgola ( , ) . Si risparmierà
un sacco di codice
Selettore universale
● come da tradizione l’asterisco è il selettore universale
● le regole inserite nel suo blocco di dichiarazioni verranno applicate a tutti gli
elementi della pagina
● utile per resettare le impostazioni di base (margini, bordi, ecc) dei vari browser
* {
margin: 0;
padding: 0;
}
Selettore di discendenza
● il selettore di discendenza è lo spazio
● seleziona tutti gli elementi che sono discendenti di un determinato selettore
(discendenti = annidati, contenuti)
● la sintassi è la seguente: selettore + spazio + selettore
Nell’esempio in figura, tutti i paragrafi annidati, anche oltre il primo livello, dentro un
div avranno uno sfondo giallo
Selettore figlio
● il selettore figlio è il simbolo di maggiore ( > )
● seleziona tutti gli elementi che sono figli (annidati un unico livello sotto) di un
determinato selettore
● la sintassi è la seguente: selettore > selettore
Nell’esempio in figura, tutti i paragrafi figli un div avranno uno sfondo giallo
Selettore di adiacenza
● il selettore di adiacenza è il simbolo dell’addizione ( + )
● seleziona l’elemento che è fratello adiacente di un determinato selettore
(fratello = stesso padre ; adiacente = posto immediatamente dopo)
● la sintassi è la seguente: selettore + selettore
Nell’esempio in figura, il solo paragrafo immediatamente successivo al tag div, con

lo stesso padre del tag div, avrà uno sfondo giallo
Selettore di adiacenza generale
● il selettore di adiacenza generale è il simbolo tilde ( ~ )
● seleziona gli elementi che sono fratelli di un determinato selettore (fratello =
stesso padre)
● la sintassi è la seguente: selettore ~ selettore
Nell’esempio in figura, tutti i paragrafi immediatamente successivi al tag div, con lo

stesso padre del tag div, avranno uno sfondo giallo
Pseudo-classi
Una pseudo-classe determina l’aspetto di un elemento in un determinato stato.
Ad esempio:
● quando il mouse si trova sopra un elemento

● quando un link è già stato visitato
● quanto un elemento della pagina ottiene il focus (tab o click)
Lo stato di un elemento si intercetta facendo seguire ad un selettore il simbolo dei

due punti ( : ) seguito dalla pseudo-classe, ovvero
selettore:pseudo-classe
Nota: Le pseudo-classi possono essere combinate con le normali classi

( .classe:pseudo-classe )
Pseudo-classi più usate
● :active : identifica un link attivo (quando viene cliccato)
● :link : identifica un link non visitato
● :visited : identifica un link già visitato
● :hover : identifica un elemento sopra il quale è posizionato il mouse
● :focus : identifica un elemento che ha ricevuto il focus
● :checked : identifica un elemento di input selezionato
● :first-child : identifica il primo elemento tra un gruppo di fratelli
● :last-child : identifica l’ultimo elemento tra un gruppo di fratelli
● … e molti altri
Pseudo-classi e link
Con i link bisogna rispettare alcune regole di precedenza, affinché tutto funzioni a
dovere
● :hover DEVE comparire sempre dopo :link e :visited

● :active DEVE comparire sempre dopo :hover
Nota: :hover risulta fondamentale per creare gradevoli barre di navigazione o per
evidenziare un pulsante, il cosiddetto effetto hover
Pseudo-elementi
Gli pseudo-elementi permettono di definire l’aspetto di alcune parti di un elemento.
Ad esempio:
● cambiare l’aspetto della prima lettera o della prima riga di un paragrafo

● inserire contenuti prima o dopo i contenuti di un elemento
Per individuare una parte specifica di un elemento basta far seguire ad un selettore
il simbolo dei due punti ripetuto due volte ( :: ) seguito dallo pseudo-elemento,
ovvero :
selettore::pseudo-elemento
Pseudo-elementi di uso comune
● ::after : permette di posizionarsi dopo un elemento (per inserirne uno
nuovo con la proprietà content)
● ::before : permette di posizionarsi prima di un elemento (per inserirne uno
nuovo con la proprietà content)
● ::first-letter : identifica la prima lettera del contenuto di un elemento di
blocco, tipicamente un paragrafo
● ::first-line : identifica la prima linea del contenuto di un elemento di
blocco, tipicamente un paragrafo
● ::selected : identifica una porzione di un elemento selezionato da un
utente
NOTA: ::after risulta fondamentale per applicare la tecnica clearfix hack

Selettori di attributo
I selettori di attributo permettono di riferirsi ad un elemento che ha
● un determinato attributo
● un determinato attributo con uno specifico valore
● un determinato attributo con un valore che contiene una specifica parola
● un determinato attributo con un valore che inizia con una specifica parola
● un determinato attributo con un valore che finisce con una specifica parola
I più usati sono i primi 2 della lista: a[target] e a[target=”_blank”]
Per approfondimenti visitare il seguente link

https://www.w3schools.com/css/css_attribute_selectors.asp
Gestione dei colori
I colori in CSS possono essere specificati con diverse modalità:
● un nome proprio (tomato, orange, yellow, gray, green, ecc ecc)

● la modalità RGB (3 valori da 0 a 255, rosso, verde, blu)
● la modalità esadecimale ( 3 coppie di valori da 00 a FF, ad es. #ff6347 )
● la modalità RGBA (3 valori da 0 a 255, rosso, verde e blu più una valore per la
trasparenza (alpha channel) da 0 a 1)
● la modalità HSL (3 valori in percentuale per tonalità, saturazione e luminosità)
● la modalità HSLA (3 valori in percentuale per tonalità, saturazione e luminosità
+ una valore per la trasparenza (alpha channel) da 0 a 1)
NOTA: coppie di valori esadecimali uguali possono essere abbreviare e 3 valori

RGB uguali tra loro (definiscono sempre un tono di grigio)
Proprietà di uso comune
Verranno illustrate alcune proprietà usate frequentemente, fermo restando che per
una trattazione completa dei CSS bisognerà fare riferimento ai manuali on line
https://www.w3schools.com/cssref/default.asp
● color ● font-size
● background-color ● font-weight
● background-image ● margins
● borders ● padding
● font-family ● height
● text-align ● width
● … e molti altri
Proprietà color
● la proprietà color permette di specificare il colore (con i metodi già visti) del
testo contenuto in un elemento html
Hello World

Proprietà font-family
● in CSS i font si dividono in 2 gruppi
○ font generic: accomunati dallo stile (serif, monospace, ecc)
○ font family: specificati mediante un nome
● la proprietà font-family permette di specificare il font del testo contenuto in un
elemento html
font-family: "Times New Roman", Times, serif;
Nota: di solito vengono specificati almeno 3 font, nel caso che uno o più font non
siano gestiti dal browser o dal sistema; il font finale solitamente è di tipo generico
Proprietà font-style e font-weight
● la proprietà font-style permette di specificare lo stile del testo contenuto in un
elemento html tra normal (default), italic e oblique
Hello World
● la proprietà font-weight permette di specificare lo spessore del testo

contenuto in un elemento html tra normal, lighter e bold
Hello World

Proprietà font-size
● la proprietà font-size permette di specificare la dimensione del testo
contenuto in un elemento html
● le dimensioni del testo possono essere:
○ ASSOLUTE:
■ impostate ad un specifico valore, non modificabile dall’utente
■ espresse in pixel
○ RELATIVE:
■ impostate in relazione al font-size corrente (elemento genitore), modificabile dall’utente
■ espresse in em (1 em = 16 pixel = testo di default)
Hello World
Hello World

Proprietà text-align
● la proprietà text-align permette di specificare l'allineamento orizzontale del
testo contenuto in un elemento html (vale anche per il tag img)
● i valori possibili sono:
○ center : testo centrato
○ left : testo allineato a sx (default)
○ right : testo allineato a dx
○ justify : testo giustificato
Hello World

Proprietà font
● è possibile usare una notazione più compatta e scrivere le proprietà relative al
test tutte su una riga come valore della proprietà font
 

Font esterni
● è possibile importare i font da fonti remote, ad esempio da google
(https://fonts.google.com/)
● basta aggiungere nel tag <head> il relativo link per recuperare i font
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia">
● scrivere la regola css basandosi su quanto suggerito da google
font-family: "Sofia", sans-serif;

Icone
● Usando delle librerie di terze parti è possibile inserire in una pagina web icone
in formato vettoriale, scalabili e personalizzabili via CSS.
● Tra le librerie di icone più utilizzate troviamo sicuramente Font Awesome e
Google Fonts.
● Come per i font è necessario includere i tag proposti nel file head ed usare le
regole css suggerite sui siti che ospitano le librerie.
● Spesso le icone sono racchiuse tra tag o tag 
Tutorial per Font Awesome

Proprietà background-color
● la proprietà background-color permette di specificare il colore di sfondo (con i
metodi già visti) di un elemento html
Lorem ipsum...
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>

La proprietà background-image
● La proprietà background-image specifica una immagine che verrà usata come
sfondo di un elemento html (usata con body e div, ma anche con altri tag)
● La sintassi è la seguente :
background-image: url("immagine.png");
● Spesso vanno impostate altre caratteristiche dell'immagine, come la modalità

di ripetizione, l’esatto posizionamento e la possibilità di scorrere con la
pagina
● È buona norma, scegliere una immagine che non comprometta la visibilità del
testo, se presente
La proprietà background-repeat
● La proprietà background-repeat specifica la modalità di ripetizione (o
affiancamento) di una immagine usata come background.
● I valori più usati sono :
○ repeat: valore di default, si ripete sia in orizzontale che in verticale
○ repeat-x: forza la sola ripetizione orizzontale
○ repeat-Y: forza la sola ripetizione verticale
○ no-repeat: nessuna ripetizione
○ space: si ripete finché c'è spazio, evitando il clipping
○ round: si ripete finché c'è spazio, ammettendo lo stretching
La proprietà background size
● La proprietà background-size specifica la dimensione di una immagine usata
come background.
○ auto : usa le dimensioni originali dell’immagine (default)
○ cover : adatta l’immagine al contenitore padre (con possibili distorsioni)
○ contain : assicura che l’immagine sia visibile per intero
○ dimensioni in pixel : specifica larghezza (e altezza) in pixel
○ dimensioni in percentuale : specifica larghezza (e altezza) in percentuale
La proprietà background-position
● La proprietà background-position specifica il posizionamento iniziale di
una immagine usata come background, rispetto al contenitore padre
● Di default, le immagini sono poste nell’angolo superiore sinistro
● I valori possibili sono coppie formate dalle seguenti keyword:
○ left
○ right
○ top
○ bottom
○ center
● Se viene specificato un solo valore, l’altro è sempre da considerarsi impostato
a center
La proprietà background-attachment
● La proprietà background-attachment specifica se l’immagine usata come
background dovrà scorrere assieme alla pagina o rimanere fissa
○ scroll: default, scorre con la pagina
○ fixed: resta fissa
○ local: scorre localmente al contenitore
Background con la regola contratta
● al solito, per accorciare il codice è possibile specificare le regole per il
background in maniera contratta.
● deve però essere rispettato il seguente ordine:
○ background-color
○ background-image
○ background-size
○ background-repeat
○ background-attachment
○ background-position
● se una proprietà viene omessa, verrà utilizzato il suo valore di default
background: #ffffff url("img_tree.png") no-repeat right top;

Il box model (1/3)
● Il box model è un riquadro (box) che racchiude ogni elemento html
● è composto da
○ margini: spazio vuoto e trasparente esterno al bordo
○ bordi: un bordo (anche colorato) che racchiude il padding e il contenuto
○ padding (imbottitura): spazio vuoto e trasparente tra il contenuto e il
bordo
○ contenuto: il contenuto vero e proprio dell’elemento (testo, immagini, ecc)
Il box model (2/3)
Il box model (3/3)
● altezza e larghezza del contenuto sono specificate con le proprietà width e
height, ma il risultato finale dipende dai valori del padding e dei bordi
● a meno di sovrascrivere la proprietà box sizing (si vedrà più avanti) il box
model impone le seguenti regole di calcolo
larghezza totale dell’elemento

=
margine sx + bordo sx + padding sx + larghezza + padding dx + bordo dx + margine dx
altezza totale dell’elemento

=
margine sup + bordo sup + paddling sup + altezza + padding inf + bordo inf + margine inf
Proprietà box-sizing
● la proprietà box-sizing definisce come calcolare larghezza e altezza
dell’elemento, in riferimento al box model
● spesso viene indicata nella fase di reset del documento (selettore universale)
● ha i seguenti valori
○ content-box : è il valore di default, si applicano le regole del box model
○ border-box : nell’altezza e nella larghezza totali dell’elemento sono inglobati, oltre al contenuto,
anche il padding e il bordo
○ initial : resetta la proprietà ai valori di default * {
○ inherit : eredità il valore dal padre
margin: 0;
padding: 0;
box-sizing: border box
}
Proprietà width e height
● le proprietà width e height specificano larghezza e altezza di un elemento
html (escludendo padding, bordi e margini)
● esistono 5 valori possibili
○ auto : valore di default, calcolato dal browser
○ length : valore numerico espresso in pixel, vw (viewport width), vh (viewport height), cm, ecc
○ % : valore percentuale che esprime larghezza e altezza in base all’elemento contenitore
○ initial : imposta al valore di default
○ inherit : i valori vengono ereditati dall’elemento padre
● Larghezza e altezza di un elemento hanno sempre un valore di default,
eventualmente sovrascritto da width e height
NOTA: l’altezza di un div (o dei tag semantici che definiscono il layout della pagina)
è sempre determinata dagli elementi figli (se non sovrascritta)
Proprietà max-min width e max-min height
● max-width e max-height: assegna un valore massimo alla larghezza o
all’altezza (larghezza e altezza restano fisse, il contenuto potrebbe fuoriuscire)
● min-width e min-height: assegna un valore minimo alla larghezza o all'altezza
(larghezza e altezza potrebbero aumentare)
● Queste proprietà, se presenti, sovrascrivono le proprietà width e height,
eventualmente presenti
Esempio: se ho un div con min-height:300px e il suo contenuto ha un

ingombro inferiore ai 300px l’altezza sarà di 300px, se il contenuto aumenta (anche
per effetto di ridimensionamento della finestra) l’altezza si modificherà per
contenere correttamente il contenuto
Proprietà margin (1/2)
● le proprietà margin specifica in un sol colpo i 4 margini di un elemento html
○ auto : valore di default, calcolato dal browser
○ length : valore numerico espresso in pixel, cm, ecc
○ % : valore percentuale che esprime i margini in base all’elemento contenitore
● se necessario è possibile impostare singolarmente ogni singolo margine
usando le proprietà:
○ margin-top
○ margin-right
○ margin-bottom
○ margin-left
Proprietà margin (2/2)
A seconda del numero di valori inseriti si impostano i margini in maniera diversa
margin: 25px 50px 75px 100px; 4 valori : sup = 25 dx = 50 inf = 75 sx = 100
margin: 25px 50px 75px; 3 valori : sup = 25 dx = 50 sx = 50 inf = 75
margin: 25px 50px; 2 valori : sup = 25 inf = 25 dx = 50 sx = 50
margin: 25px; 1 valore : tutti i margini a 25
NOTA: la coppia di proprietà width (espressa in forma percentuale) e margin-left e

margin-right (espresso con auto) viene usata sovente per ottenere un
allineamento orizzontale
Proprietà padding (1/2)
● le proprietà padding specifica in un sol colpo il padding di un elemento html
○ length : valore numerico espresso in pixel, cm, ecc
○ % : valore percentuale che esprime i margini in base all’elemento contenitore
● se necessario è possibile impostare singolarmente ogni singolo padding
○ padding-top
○ padding-right
○ padding-bottom
○ padding-left
Proprietà padding (2/2)
A seconda del numero di valori inseriti si imposta il padding in maniera diversa
padding: 25px 50px 75px 100px; 4 valori : sup = 25 dx = 50 inf = 75 sx = 25
padding: 25px 50px 75px; 3 valori : sup = 25 dx = 50 sx = 50 inf = 75
padding: 25px 50px; 2 valori : sup = 25 inf = 25 dx = 50 sx = 50
padding: 25px; 1 valore : tutti i padding a 25
NOTA: un elemento di tipo block ha il padding su tutti e quattro i lati mentre in un

elemento di tipo inline il padding sarà presente solo sul lato destro e sinistro.
Sovente si usa la regola display:inline-block per ottenere elementi di tipo
inline con il padding presente su tutti i lati.
Proprietà border-width
● la proprietà border-width determina lo spessore dei 4 bordi
● è espressa solitamente in pixel o in em o con valori predefiniti come thin,
medium e thick
● può avere da 1 a 4 valori, ad esempio:
○ 1 valore: tutti i 4 bordi dello spessore specificato
○ 2 valori: 1 per il bordo superiore ed inferiore e 1 per il bordo sinistro e destro
○ 4 valori: ogni valore esprime il valore di un singolo bordo (top, right, bottom, left)
● se necessario è possibile impostare singolarmente ogni singolo spessore
○ border-top-width
○ border-right-width
○ border-bottom-width
○ border-left-width
Proprietà border-style
● la proprietà border-style determina lo stile dei 4 bordi
● è espressa solitamente con stringhe predefinite come solid, dotted, double,
none, hidden, ecc (https://www.w3schools.com/css/css_border.asp)
○ 1 valore: tutti i 4 bordi dello stile specificato
○ 2 valori: 1 per il bordo superiore ed inferiore e uno per il bordo sinistro e destro
○ 4 valori: ogni stringa esprime lo stile di un singolo bordo (top, right, bottom, left)
● se necessario è possibile impostare singolarmente ogni singolo bordo usando
le proprietà:
○ border-top-style
○ border-right-style
○ border-bottom-style
○ border-left-style
Proprietà border-color
● la proprietà border-color determina il colore dei 4 bordi
● è espressa con i noti metodi: per nome, RGB, HEX, HLS, ecc
○ 1 valore: tutti i 4 bordi del colore specificato
○ 2 valori: 1 per il bordo superiore ed inferiore e 1 per il bordo sinistro e destro
○ 4 valori: ogni stringa esprime lo stile di un singolo bordo (top, right, bottom, left)
● se necessario è possibile impostare singolarmente il colore di ogni singolo
bordo usando le proprietà:
○ border-top-color
○ border-right-color
○ border-bottom-color
○ border-left-color
Nota: se il colore non viene specificato verrà ereditato

Proprietà border (regola contratta)
● le proprietà border specifica in un sol colpo il bordo di un elemento html
● un bordo è definito da:
○ spessore: espresso tipicamente in pixel o in em (5px)
○ stile: linea continua, linea tratteggiata, linea a pallini, nessuna linea, ecc ecc (solid)
○ colore: espresso con il nome o via RGB, HEX, HLS, oppure trasparente (red)
● se necessario è possibile impostare singolarmente ogni singolo bordo usando
le proprietà:
○ border-top
○ border-right
○ border-bottom
○ border-left
La proprietà display
● la proprietà display specifica come un elemento viene visualizzato
● è molto importante per controllare il layout della pagina web
● ogni elemento ha un valore di default (di solito è block o inline) che può
essere sovrascritto per esigenze di layout (ad es. navigation bar)
● può avere molti valori, i più usati sono:
○ block : visualizza l’elemento come un elemento di blocco
○ inline : visualizza l’elemento come un elemento di tipo inline
○ inline-block : visualizza l’elemento come un elemento di tipo inline ma con il padding su tutti i 4
lati
○ none : nasconde l’elemento (attenzione alla differenza con la proprietà visibility:hidden)
○ table : visualizza l’elemento come una tabella
○ flex o grid : visualizza l’elemento come un elemento di tipo contenitore flex o grid
Nota: display:none viene spesso usato con JS per creare effetti di pop up
La proprietà float
● la proprietà float specifica se un elemento debba galleggiare o meno
● un elemento può galleggiare (fluttuare) a destra o a sinistra, uscendo dal
normale flusso del documento
● usato inizialmente per far fluire del testo intorno ad una immagine e
successivamente per creare layout responsive
● può avere i seguenti valori:
○ left : l’elemento galleggia sulla sinistra del suo contenitore (tipicamente un div)
○ right : l’elemento galleggia sulla destra del suo contenitore (tipicamente un div)
○ none : nessun galleggiamento (valore di default)
○ inherit : valore ereditato dal genitore
Nota: con float tutti gli elementi perdono il valore originale della proprietà display e
diventano quasi tutti elementi di tipo block
La proprietà clear
● la proprietà clear specifica se un elemento può avere accanto elementi
flottanti
● usata spesso per resettare il flusso del documento (vedi clearfix hack)
● ha i seguenti valori:
○ none : lascia che ci siano elementi flottanti sia a destra che a sinistra
○ left : non ammette elementi flottanti alla sinistra
○ right : non ammette elementi flottanti alla destra
○ both : impedisce qualunque elemento flottante sia a destra che a sinistra
○ inherit : valore ereditato dal genitore
Esempio: se un elemento ha la proprietà clear impostata a left e a sinistra c’è un

elemento flottante, l’elemento in questione andrà su una nuova riga
La proprietà overflow
● la proprietà overflow specifica cosa succede quando il contenuto di un
elemento contenitore fuoriesce dallo stesso
● i valori più comuni sono:
○ visible : valore di default, il contenuto fuoriesce dal contenitore
○ hidden : il contenuto in eccesso viene nascosto
○ scroll : il contenuto viene tagliato ma appaiono entrambe le barre di scorrimento
○ auto : il contenuto viene tagliato e appaiono solo le barre di scorrimento strettamente
necessarie
● la proprietà funziona solo per gli elementi di blocco con una altezza
specificata.
Nota: overflow:hidden converte l’elemento in un cosiddetto “block formatting

context”. Viene usato spesso nei tag che contengono elementi flottanti come
alternativa al clearfix hack
La proprietà position (1/5)
● La proprietà position specifica il metodo di posizionamento di un elemento
● Ha 5 differenti valori:
○ static
○ relative
○ fixed
○ absolute
○ sticky
● Gli elementi vengono posizionati usando le proprietà:
○ top
○ bottom
○ left
○ right
Nota: position va sempre prima di top, bottom, left e right

Static
● valore di default, l’elemento è posizionato nel normale flusso della pagina

● non risente delle proprietà top, bottom, left e right
Relative
● l’elemento viene posizionato con un offset (sfruttando top, bottom, left e right)
rispetto alla sua normale posizione static
● lo spazio lasciato libero non viene riempito dagli altri elementi
Fixed
● l’elemento viene posizionato con un offset (in base a top, bottom, left e right)
rispetto al viewport (l’area visibile del browser)
● rimane sempre nella stessa posizione anche durante lo scrolling della pagina
● lo spazio lasciato libero viene riempito dagli altri elementi
● un elemento di blocco perde il riferimento della larghezza che va reimpostata
Absolute
● l’elemento viene posizionato con un offset (in base a top, bottom, left e right) ,
rispetto al contenitore padre “posizionato”
● se non non ha un padre “posizionato” fa riferimento al body e scorre con la
pagina
● l’elemento viene estratto completamente dal flusso
Nota: Un elemento si dice posizionato quanto ha la proprietà position non

impostata su static
Sticky
● l’elemento viene posizionato con un offset (in base a top, bottom, left e right) ,
rispetto alle operazioni di scrolling della pagina effettuate dall’utente
● un elemento “appiccicoso” oscilla tra il comportamento relative e fixed a
seconda della posizione dello scrolling
● è relative finchè lo scrolling non raggiunge il bordo della viewport, poi diventa
fixed
Clearfix hack (1/2)
● il problema nasce soprattutto quanto si ha uno o più elementi flottanti
racchiusi in un contenitore
● un elemento flottante viene estratto dal normale flusso della pagina,
generando spesso un problema di visualizzazione, perchè il contenitore, non
avendo più contenuto, collassa su se stesso
● nei casi semplici, come ad esempio le barre di navigazione o la gestione delle
immagini possiamo usare l’attributo overflow:hidden
● in generale o nei casi più complessi viene usata una classe particolare (che
garantisce maggior compatibilità con i browser obsoleti), la cosiddetta clearfix
hack, che va associata al tag contenitore
Clearfix hack (2/2)
● il trucco consiste nell’inserire un elemento invisibile (con la proprietà
content) che resetti il flusso dopo l’ultimo elemento flottante di un tag
contenitore
.clearfix::after {
content: "";
clear: both;
display: table;
}
Per approfondimenti o esempi:
https://www.html.it/articoli/clearfix-esempi-come-si-usa-tutorial/
https://www.w3schools.com/howto/howto_css_clearfix.asp
CSS Media Query
● Tecnica introdotta con la versione CSS3 per creare siti “responsive”
● Fa uso del selettore @media per applicare una serie di regole soltanto sotto
determinate condizioni dette “breakpoint”
● Media accettati:
○ screen (schermi di pc o tablet)
○ print (per la stampa di pagine web)
○ speech (screen reader)
Viewport
● Il viewport è l’area di una pagina web visibile all'utente
● Dipende dal dispositivo (laptop, tablet, smartphone)
● Per usare le media query correttamente è necessario includere il tag
sottostante “meta” nella sezione head del documento che setta la larghezza
dello schermo e il fattore di scala iniziale
Esempio
● L’esempio sottostante raffigura un breakpoint che attiverà la regola soltanto se
il dispositivo di visualizzazione è uno schermo (screen) e se la risoluzione
orizzontale dello schermo scende sotto i 600 pixel.
Specificità
● La specificità determina l’ordine di applicazione o la precedenza di una regola
sulle altre regole che si riferiscono allo stesso selettore
● in caso di specificità uguale, conta l’ordine di apparizione
● possiamo immaginare la specificità come un punteggio che viene assegnato
alla regola
● partendo da 0 è possibile calcolare il punteggio di una regola aggiungendo un
determinato valore per ogni elemento presente:
○ 1 : per ogni selettore semplice e pseudo elementi
○ 10 : per ogni classe, pseudo classe e attributi
○ 100 : per ogni selettore ID
○ 1000 : se la regola definita “in line” con attributo style
● per forzare l'applicazione di una regola posso usare la keyword !important
Per approfondimenti
● specificità: https://www.w3schools.com/css/css_specificity.asp
● usare icone da fonti esterne: https://www.w3schools.com/css/css_icons.asp
● centrare elementi verticalmente
● altezza al 100%
● dropdown menu
● gallerie di immagini
● sticky header e sticky footer
● proprietà flexbox e grid
● framework bootstrap
Fonti
● w3school.com

Appunti CSS 22-23 PDF

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Appunti CSS 22-23 PDF

Caricato da

Copyright:

Formati disponibili

CSS

● CSS esterni: le regole risiedono su un ﬁle separato

Nota: Le regole esterne possono essere sovrascritte da quelle interne e le regole

<link rel="stylesheet" href="mystyle.css">

● è annidato all’interno del tag <head> (intestazione della pagina)

● una regola esterna può venire sovrascritta da una interna

I selettori si dividono in 5 categorie:

● semplici: basati sul nome, id o class

<p id=”para1”> bla bla bla </p>

<p class=”center”> bla bla bla </p>

<p class=”classe1 classe2> bla bla bla </p>

Nell’esempio in ﬁgura, il solo paragrafo immediatamente successivo al tag div, con

Nell’esempio in ﬁgura, tutti i paragraﬁ immediatamente successivi al tag div, con lo

● quando il mouse si trova sopra un elemento

Lo stato di un elemento si intercetta facendo seguire ad un selettore il simbolo dei

Nota: Le pseudo-classi possono essere combinate con le normali classi

● :hover DEVE comparire sempre dopo :link e :visited

● cambiare l’aspetto della prima lettera o della prima riga di un paragrafo

NOTA: ::after risulta fondamentale per applicare la tecnica clearﬁx hack

I più usati sono i primi 2 della lista: a[target] e a[target=”_blank”]

Per approfondimenti visitare il seguente link

● un nome proprio (tomato, orange, yellow, gray, green, ecc ecc)

NOTA: coppie di valori esadecimali uguali possono essere abbreviare e 3 valori

<p style="color: tomato;">Hello World</p>

font-family: "Times New Roman", Times, serif;

<p style="font-style: italic;">Hello World</p>

● la proprietà font-weight permette di speciﬁcare lo spessore del testo

<p style="font-weight: bold;">Hello World</p>

<p style="font-size: 40px;">Hello World</p>

<p style="font-size: 2.5em;">Hello World</p>

<p style="text-align:center;">Hello World</p>

<p style="font: italic bold 12px Georgia, serif;"> </p>

● scrivere la regola css basandosi su quanto suggerito da google

font-family: "Sofia", sans-serif;

Tutorial per Font Awesome

<p style="background-color:Tomato;">Lorem ipsum...</p>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>

● Spesso vanno impostate altre caratteristiche dell'immagine, come la modalità

background: #ffffff url("img_tree.png") no-repeat right top;

larghezza totale dell’elemento

altezza totale dell’elemento

Esempio: se ho un div con min-height:300px e il suo contenuto ha un

margin: 25px 50px 75px 100px; 4 valori : sup = 25 dx = 50 inf = 75 sx = 100

margin: 25px 50px 75px; 3 valori : sup = 25 dx = 50 sx = 50 inf = 75

margin: 25px 50px; 2 valori : sup = 25 inf = 25 dx = 50 sx = 50

margin: 25px; 1 valore : tutti i margini a 25

NOTA: la coppia di proprietà width (espressa in forma percentuale) e margin-left e

padding: 25px 50px 75px 100px; 4 valori : sup = 25 dx = 50 inf = 75 sx = 25

padding: 25px 50px 75px; 3 valori : sup = 25 dx = 50 sx = 50 inf = 75

padding: 25px 50px; 2 valori : sup = 25 inf = 25 dx = 50 sx = 50

padding: 25px; 1 valore : tutti i padding a 25

NOTA: un elemento di tipo block ha il padding su tutti e quattro i lati mentre in un

Nota: se il colore non viene speciﬁcato verrà ereditato

Esempio: se un elemento ha la proprietà clear impostata a left e a sinistra c’è un

Nota: overflow:hidden converte l’elemento in un cosiddetto “block formatting

Nota: position va sempre prima di top, bottom, left e right

● valore di default, l’elemento è posizionato nel normale ﬂusso della pagina

Nota: Un elemento si dice posizionato quanto ha la proprietà position non

Per approfondimenti o esempi:

Potrebbero piacerti anche