Cheat sheet CSS rapido e pratico di Toptal
Pubblicato: 2022-03-11Cascading Style Sheets, o CSS in breve, è un linguaggio per fogli di stile scritto in un linguaggio di markup. CSS definisce la presentazione, l'aspetto e gli elementi di formattazione dei documenti Web, come il layout, i colori e i caratteri.
La sintassi CSS è completa e non è facile conoscere sempre la sintassi esatta o conoscere tutte le proprietà CSS disponibili e i valori corrispondenti. Per aiutare gli sviluppatori e i designer CSS, Toptal ha creato una guida di riferimento rapido e l'ha offerta alla comunità come download gratuito. La guida di riferimento CSS include la sintassi CSS, i selettori, le proprietà, le dimensioni e le unità più importanti e altre utili informazioni CSS in un formato breve e informativo. Ci auguriamo che troverai il cheat sheet CSS una risorsa preziosa.
Puoi anche controllare le pagine delle risorse di Toptal per ulteriori informazioni sugli errori CSS comuni, una guida alle assunzioni CSS, domande sui colloqui CSS e suggerimenti e migliori pratiche CSS.
Fare clic qui per scaricare il cheat sheet CSS
Foglio di trucchi CSS
Sintassi | Modello a scatola | |||
/* Commenti */ @tipo di supporto { selettore { valore della proprietà; } } Nota: il tipo di supporto è opzionale |  | |||
Stile in linea <tag> | ||||
Stile incorporato <testa> <tipo di stile="testo/css"> selettore { proprietà: valore; } </stile> </testa> | ||||
Foglio di stile esterno <testa> <link rel="foglio di stile" type="text/css" href="style.css" /> </testa> | Scatole | |||
margine | margine superiore | |||
Selettori | imbottitura | imbottitura | ||
* | Tutti gli elementi | |||
etichetta | Tutti gli elementi di tag | frontiera | bordo superiore | |
tag * | Tutti gli elementi all'interno del tag | |||
tag tag2 | tag2 elementi all'interno di tag | colore del bordo | colore bordo superiore | |
tag, tag2 | Tutti gli elementi tag e tag2 | |||
tag > tag2 | tag2 è figlio di tag | stile del bordo | stile bordo superiore | |
tag + tag2 | tag2 preceduto da tag | |||
.classe | Elementi con classe 'classe' | larghezza del bordo | larghezza del bordo superiore | |
tag.class | Tutti i tag con classe 'classe' | |||
#ID | Elemento con ID 'id' | Dimensioni e colori | ||
tag#id | Tag con ID 'id' | Dimensioni relative | em | rem | ex | cap vw | v | vmin | vmax | % | |
Pseudo-selettori | ||||
:attivo | Aggiunge stile all'elemento attivo | Dimensioni assolute | cm | mm | in px | punto | pc | |
:dopo | Aggiunge contenuto dopo elemento | |||
:prima | Contenuto degli annunci prima dell'elemento | Colori | Esadecimale #ff00ff | |
:Primogenito | Aggiunge stile al primo figlio | RGB RGB(255,0,255) | ||
:prima lettera | Aggiunge stile al primo carattere | Posizionamento | ||
:prima linea | Aggiunge stile alla prima riga  | posizione | assoluto | fisso | parente | statico | ereditare | |
:messa a fuoco | Aggiunge stile all'elemento focalizzato | |||
: passa il mouse | Aggiunge stile quando il mouse è sopra | galleggiante | sinistra | giusto | nessuno | ereditare | |
:collegamento | Aggiunge stile al collegamento non visitato | |||
:visitato | Aggiunge stile al link visitato | in alto a destra, | Imposta l'offset dal bordo | |
Testo | ||||
famiglia di font | Specifica la famiglia di caratteri | chiaro | sinistra | giusto | entrambi | nessuno | ereditare | |
dimensione del font | Specifica la dimensione del carattere | |||
stile carattere | normale | corsivo | obliquo | ereditare | Schermo | Specifica il posizionamento dell'elemento nel flusso del documento | |
font-variante | normale | maiuscola | ereditare | traboccare | visibile | nascosto | scorrere | auto | ereditare | |
font -peso | normale | grassetto | più audace | più leggero | int (100- 900) | ereditare | |||
visibilità | visibile | nascosto | collasso | ereditare | |||
colore | Imposta il colore del testo | |||
altezza della linea | normale | int | % | ereditare | indice z | auto | int | ereditare | |
allineamento del testo | sinistra | giusto | centro | giustificare | ereditare | Dimensioni | ||
altezza | auto | int | % | ereditare | |||
testo- decorazione | nessuno | sottolineare | in linea | line-through | lampeggiare | ereditare | altezza massima | nessuno | int | % | ereditare | |
larghezza massima | nessuno | int | % | ereditare | |||
indentatura del testo | int | % | ereditare | altezza minima | int | % | ereditare | |
testo- trasformare | nessuno | capitalizzare | maiuscolo | minuscolo | ereditare | larghezza minima | int | % | ereditare | |
larghezza | auto | int | % | ereditare | |||
verticale -allineare | int | % | linea di base | sub | super | in alto | testo in alto al centro | in basso | testo in basso | ereditare | Altro | ||
sfondo | Formato: sfondo (colore) (immagine) (ripetere) (posizione) | |||
bianco -spazio | normale | nowrap | pre | prelinea | preconfezionare| ereditare | |||
cursore | Imposta il tipo di cursore | |||
spaziatura delle parole | normale | lunghezza | ereditare | citazioni | Imposta il tipo di virgolette | |