Want to create interactive content? It’s easy in Genially!
<CSS
FABRIZIO SALVATORELLI
Created on March 7, 2025
Start designing with a free template
Discover more than 1500 professional designs like these:
Transcript
<CSS
Introduzione>
START >
FABRIZIO SALVATORELLI 10/03/2025
>
>
00
01
02
Selettori
proprietà CSS
Cosa è il CSS?
03
04
05
layout responsivo
Griglie/Layout in css
Animazioni
<COSA E' IL CSS E COME FUNZONA>
>
>
è un linguaggio di programmazione utilizzato per descrivere l'aspetto e la formattazione di pagine HTML.
Selettori CSS: come targetizzare gli elementi HTML. Proprietà CSS: stile per testo, spaziature, colori, e altro.
Layout responsivi: come adattare il design ai diversi dispositivi.
Tecniche avanzate: animazioni e transizioni.
<01> selettori
Nelle slide seguenti capiremo: 1. Cosa sono i selettori 2. Come funzionano
start >
>
>
I selettori sono regole che dicono al CSS su quali elementi HTLM applicare gli stili. Possiamo identificare tipologie principali di selettori:
- Selettore di tipo -> seleziona tutti gli elementi di un certo tipo ad esempio permette di cambaire il colore di tutti i titoli presenti nella pagina.
- Selettore di ID -> permette di cambaire un solo elemento con un determinato id ( id="titolo") senza influenzare altri
- Selettore di classe -> Seleziona piu elementi che condividono la stessa classe (ad esempio può cambiare il colore di tutti gli elementi con
- Selettore Universale -> permette di selezionare tutti gli elementi presenti nella pagina, utile anche per resettare gli stili predefiniti
>
>
// SELETTORE DI TIPO (utilizzo)
<html> <head> <style> h1 {color: red; } p {color: blue;}</head></style><body><h1>Selettore di tipo</h1> <p>PARAGRAFO</p></body></html>
>
>
// selettore universale
<html><head> <style> *{padding: 5px } h1 { color: red text-align: center; } <body><h1>selettore universale</h1></body></html>
>
>
// Selettore di class
.selettore{background-color: yellow;} p{ font-size 20px;} <h1> Selettore universale</h1> <p class= "selettore"></p>
selettore id->
<02>PROPRIETà
In queste slide verranno mostrate alcune delle proprietà CSS.
START >
>
>
// RISULTATO IN UN PAGINA HTML
// color
La proprietà COLOR viene utilizzata per impostare il colore del testo di un elemento
>
>
// proprietà font - size
La proprietà font-size viene utilizzate per modificare la dimensione del testo. Utile anche per miglirare la leggibilità.
//risultato
>
>
// BACK ground color
In questo esempio capiamo come funziona la proprietà background-color. Questa proprietà è utile se ad esempio si vuole evidenziare una sezione specifica presente nella pagina.
<03> layout responsivo
START >
>
>
// layout responsivo
Il layout responsivo è una tecnica di design che permette alle pagine di adattarsi automaticamente, ad esempio, alla dimensione dello schermo. Possiamo indivduare delle tecniche: 1. FLEXBOX E GRID: sistemi per creare layout dinamici. 2. UNITA' DI MISURA FLESSIBILI : aiutano a rendere gli elementi scalabili.
<04> GRIGLIE e layout in css
Nelle slide seguenti capiremo come creare un griglia o un semplice layout
START >
CSS GRID
>
>
Un layut a griglia ci permette di organizzare dei contenuti o elementi in righe e colonne. CSS offre 2 metodi principali per creare layout uNo di questi è il CSS GRID. Il CSS GRID è utile per strutture bidimensionali quindi con più righe e colonne, in questo esempio viene utilizzato il metodo appena citato.
>
>
// FLEXBOX
Flexbox è un altro metodo che si può utilizzare per righe e colonne, è perfetto per inserire elementi in una riga o in una colonna a differenza di CSS GRID questo è utilizzato per allineamenti più semplici e quindi per struttre monodimensionali (una riga o una colonna).
<animazioni >
Nelle slide succesive vedremo come animare graficamnete una pagina html.
START >
>
>
// EFFETTI HOVER
Le animazioni css ci permettono di creare effetti dinamici senza utilizzare javascript, è possibile animare colori, dimensioni e molto altro. In questo codice troviamo un pulsante che cambia colore nel momento in cui il mouse ci passa sopra.
Quando si passa il mouse sopra il pulsante cambierà colore in 0,3 secondi grazie alla proprietà transition
//Resources
00
Unit completed
// write an awesome title
Use this space to briefly describe your graph and its evolution.
+ INFO
SELETTORE ID
Il selettore id in CSS viene utilizzato per selezionare un elemento HTML che ha un identificatore unico
#nomeID { proprietà: valore;}
// write an awesome title
Use this space to briefly describe your graphic and its evolution.
+ INFO
// write an awesome title
Use this space to briefly describe your graphic and its evolution.
+ INFO