Cheat sheet HTML e CSS: ricercabile, stampabile, con demo | We.Inc
Cerca ogni tag HTML e proprietà CSS comune in un unico foglio: layout semantico, testo, form, media, selettori, unità, layout e aspetto visivo, con mini demo dal vivo e un layout adatto alla stampa.
Cheat sheet HTML e CSS
Questo foglio elenca i tag HTML e le proprietà CSS usati in quasi ogni sito web, raggruppati per funzione: impostazione del documento, layout semantico, testo, elenchi, media, form, selettori, unità, layout e stile visivo. Scrivi nel filtro per trovarne uno, apri una mini demo per vederlo in azione o premi Stampa per una copia cartacea pulita.
Cosa c'è nel foglio
Parte
Voci
HTML
CSS
Con una demo dal vivo
Filtra per parola chiave o passa da HTML a CSS, e l'elenco si restringe mentre scrivi. Le voci con una demo aprono una piccola anteprima in sandbox. Il layout di stampa nasconde i controlli e tiene unita sulla pagina la tabella di ogni gruppo.
Scrivi un tag, una proprietà o un compito, per esempio table, sticky o email, nella casella del filtro.
Restringi a HTML o CSS con i pulsanti, oppure lasciali attivi entrambi.
Premi Mostra demo su una voce per vederla resa, e Copia per prendere la sintassi.
Premi Stampa per ottenere una copia su carta o in PDF senza gli elementi della pagina.
Usa un elemento semantico prima di un div. header, nav, main e footer danno gratis dei landmark agli screen reader.
Ogni controllo di un form ha bisogno di un'etichetta. Il testo placeholder sparisce mentre si scrive e non la sostituisce.
Inizia ogni foglio di stile con box-sizing: border-box su tutto. Così le larghezze significano quello che ti aspetti.
Preferisci rem per dimensioni dei caratteri e spaziature che devono seguire l'impostazione del testo del lettore, px per i bordi sottilissimi.
Domande frequenti
Quanti tag HTML esistono?
L'HTML Living Standard definisce ben più di cento elementi, ma le pagine di tutti i giorni ne usano qualche decina. Questo foglio copre quelli che incontrerai in quasi ogni sito; MDN mantiene il riferimento completo degli elementi.
Qual è la differenza tra un tag e un elemento?
Un tag è il markup che scrivi, come <p> o </p>. Un elemento è l'insieme che il browser costruisce a partire da esso: il tag di apertura, il suo contenuto e il tag di chiusura. Gli elementi vuoti come <img> e <br> non hanno alcun tag di chiusura.
Posso stampare questo cheat sheet?
Sì. Il pulsante Stampa apre la finestra di stampa del browser con un layout che elimina filtro, pulsanti e demo e mantiene le tabelle con la sintassi. Scegli Salva come PDF per conservarne una copia digitale.
Devo imparare prima il CSS o un framework come Tailwind?
Impara prima le proprietà CSS. I framework utility sono abbreviazioni di quelle proprietà, quindi sapere che p-4 significa padding: 1rem rende il framework più facile, e il debug negli strumenti per sviluppatori mostra sempre il CSS sottostante.
Come HTML e CSS si dividono il lavoro
L'HTML dice cos'è ogni contenuto: un titolo, un elenco, un campo di un form, un blocco di navigazione. Il CSS dice che aspetto ha e dove va. Tenerli separati significa che un solo foglio di stile può ridisegnare centinaia di pagine e il markup resta leggibile per i motori di ricerca e le tecnologie assistive.
Quando non sai quale elemento usare, chiediti come si chiamerebbe quel contenuto in un documento stampato. Un elenco di passaggi è un ol, un insieme di dati è un dl o una table, una nota a margine è un aside.
Leggere le regole CSS
Una regola è un selettore seguito da parentesi graffe che contengono coppie di proprietà e valore separate da punto e virgola. Quando due regole puntano allo stesso elemento vince il selettore più specifico; in caso di parità vince quella che viene dopo nel foglio di stile.
Tutto insieme in una piccola pagina
Markup semantico più qualche riga di CSS
Un header, il contenuto principale con un form e un footer, stilizzati con una manciata delle proprietà del foglio.
Prima riga di ogni pagina; attiva la modalità standard
Elemento radice; lang imposta la lingua della pagina
Metadati, titolo, collegamenti a CSS e script
Charset, viewport, descrizione e tag social
Collega fogli di stile, icone e preload
Carica JavaScript; defer lo esegue dopo il parsing
Introduzione o barra superiore di una pagina o sezione
Un blocco di link di navigazione principali
Il contenuto principale unico; uno per pagina
Un gruppo di contenuti a tema, di solito con un titolo
Contenuto autonomo come un post o la card di un prodotto
Contenuto correlato ma secondario, come una barra laterale
Informazioni di chiusura: contatti, note legali, link
Widget nativo per mostrare e nascondere, senza script
Una finestra di dialogo modale o non modale
Titoli in ordine; la norma è un solo h1 per pagina
Un paragrafo
Forte importanza ed enfasi, in grassetto e corsivo di default
Testo evidenziato
Codice inline e blocchi preformattati
Una citazione estesa
Abbreviazione con la sua forma estesa
Una data o un'ora leggibile dalle macchine
A capo dentro il testo; separazione tematica tra blocchi
Elenchi non ordinati e ordinati
Elenco descrittivo di coppie nome e valore
Dati tabellari con didascalia, intestazione e corpo
Cella di intestazione; scope la collega alla sua colonna o riga
Un link; aggiungi target e rel per le nuove schede
Un'immagine; alt, width e height sono attesi
Art direction e formati di fallback
Media autonomo con una didascalia
Video incorporato
Incorpora un'altra pagina
Grafica vettoriale inline
Racchiude gli input e li invia
Dà un nome a un controllo; cliccarla porta il focus sul controllo
Text, email, number, date, checkbox, radio e altro
Elenco a discesa
Inserimento di testo su più righe
Un pulsante; imposta type per evitare invii accidentali
Raggruppa controlli correlati sotto una didascalia
Controlli integrati prima dell'invio
Selettori per nome dell'elemento, classe e ID
Qualsiasi profondità contro solo figli diretti
Fratello successivo, o qualsiasi fratello seguente
Corrisponde in base a presenza o valore di un attributo
Stati di puntatore sopra e focus da tastiera
Seleziona elementi in base alla posizione
Corrispondenza sul genitore e raggruppamento di selettori
Contenuto generato prima o dopo un elemento
Pixel CSS assoluto
Relativo alla dimensione del font radice / alla dimensione del font dell'elemento
Relativo al genitore (la dimensione dipende dalla proprietà)
Unità del viewport; dvh tiene conto delle barre degli strumenti su mobile
Larghezza del glifo 0, utile per la lunghezza delle righe
Quota dello spazio libero in una grid
Valore fluido tra un minimo e un massimo
La larghezza include padding e bordo
Spazio fuori e dentro il bordo
Come il box partecipa al layout
Righe o colonne monodimensionali
Righe e colonne bidimensionali
Toglie un box dal flusso normale, o lo fissa al suo interno
Ordine di sovrapposizione degli elementi posizionati
Cosa succede al contenuto che non ci sta
Stili per una dimensione dello schermo o una preferenza
Colore del testo e sfondo
Peso, dimensione, interlinea e famiglia in una riga
Contorno e angoli arrotondati
Ombra attorno al box
Trasparenza dell'intero elemento
Sposta, ruota, scala o inclina senza influire sul layout