Struttura HTML
Hello World
Elementi Comuni
Testo e Intestazioni
Heading 1
...Heading 6
Paragraph text
Bold ItalicLink e Immagini
Liste
- Item
- First
Form
Tipi di Input
Select e Textarea
HTML Semantico
| <header> | Contenuto introduttivo o navigazione |
| <nav> | Link di navigazione |
| <main> | Contenuto principale della pagina (uno per pagina) |
| <section> | Raggruppamento tematico del contenuto |
| <article> | Contenuto autonomo |
| <aside> | Barra laterale o contenuto tangenziale |
| <footer> | Footer per sezione o pagina |
| <figure> | Immagine o diagramma con didascalia |
| <figcaption> | Didascalia per |
Selettori CSS
Selettori di Base
| element | p { } — tutti gli elementi |
| .class | .card { } — selettore di classe |
| #id | #main { } — selettore di id |
| * | Selettore universale (tutti gli elementi) |
Combinatori
| A B | Discendente (B dentro A) |
| A > B | Solo figlio diretto |
| A + B | Fratello adiacente (B subito dopo A) |
| A ~ B | Fratello generale (B dopo A) |
Pseudo-classi
| :hover | Mouse sull'elemento |
| :focus | Elemento con focus |
| :first-child | Primo figlio del genitore |
| :nth-child(n) | n-esimo figlio (2n = pari, odd = dispari) |
Box Model
.box {
margin: 10px; /* outside */
border: 1px solid #333; /* edge */
padding: 15px; /* inside */
width: 200px;
box-sizing: border-box; /* include pad+border */
}
Notazione Abbreviata
| margin: 10px | Tutti i lati |
| margin: 10px 20px | Alto/basso | sinistra/destra |
| margin: 10px 20px 15px | Alto | sinistra/destra | basso |
| margin: 10px 20px 15px 5px | Alto | destra | basso | sinistra |
Flexbox
Contenitore
.flex-container {
display: flex;
flex-direction: row; /* row | column */
justify-content: center; /* main axis */
align-items: center; /* cross axis */
gap: 10px;
flex-wrap: wrap;
}
Proprietà degli Elementi
| flex: 1 | Espandi per riempire lo spazio disponibile |
| flex-grow: 2 | Rapporto di crescita rispetto ai fratelli |
| flex-shrink: 0 | Non ridurre sotto la base |
| flex-basis: 200px | Dimensione iniziale prima di crescita/riduzione |
| align-self: flex-end | Sovrascrive l'allineamento del contenitore |
| order: -1 | Ordine visivo (default 0) |
Grid
Contenitore
.grid {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto;
gap: 10px;
}
Posizionamento Elementi
.item {
grid-column: 1 / 3; /* span col 1-2 */
grid-row: 1 / 2;
}
/* shorthand: repeat, minmax */
grid-template-columns: repeat(3, 1fr);
grid-template-columns:
repeat(auto-fit, minmax(200px, 1fr));
Posizionamento
| static | Flusso normale predefinito (nessun offset) |
| relative | Offset dalla posizione normale |
| absolute | Offset rispetto all'antenato posizionato più vicino |
| fixed | Offset rispetto alla viewport (rimane allo scroll) |
| sticky | Relativo fino alla soglia di scroll, poi fisso |
Esempio
.parent { position: relative; }
.child {
position: absolute;
top: 0; right: 0; /* top-right corner */
}
Media Query
/* Mobile-first: base styles for small screens */
.container { padding: 10px; }
@media (min-width: 768px) {
.container { max-width: 720px; }
}
@media (min-width: 1024px) {
.container { max-width: 960px; }
}
Breakpoint Comuni
| 480px | Telefoni piccoli |
| 768px | Tablet |
| 1024px | Desktop piccoli / tablet in orizzontale |
| 1280px | Desktop |