Padroneggia la sintassi CSS essenziale con il nostro cheat sheet delle proprietà CSS3.

Il cheat sheet essenziale delle proprietà CSS3

Annuncio pubblicitario I fogli di stile CSS o CSS definiscono l'aspetto del web così come lo conosciamo. Mentre HTML e JavaScript si concentrano sul lato funzionale del web, CSS si occupa degli aspetti visivi di esso. Hai bisogno di aiuto per navigare nel mondo che è CSS3? Scarica oggi il nostro "Foglio informativo sulle proprietà CSS3 essenziali"! D

Annuncio pubblicitario

I fogli di stile CSS o CSS definiscono l'aspetto del web così come lo conosciamo. Mentre HTML e JavaScript si concentrano sul lato funzionale del web, CSS si occupa degli aspetti visivi di esso.

Hai bisogno di aiuto per navigare nel mondo che è CSS3? Scarica oggi il nostro "Foglio informativo sulle proprietà CSS3 essenziali"!

Dopo aver imparato a creare pagine Web statiche con HTML, è tempo di scoprire come modellarle e renderle presentabili con CSS. E il nostro cheat sheet delle proprietà CSS3 qui sotto può aiutarti! Copre la sintassi essenziale che devi conoscere in CSS3, che è l'ultima versione di CSS.

Una conoscenza pratica dei CSS ti aiuta a personalizzare colori, caratteri, bordi, sfondi, layout e molto altro su pagine Web in modo ottimizzato. Inoltre, è utile anche durante la progettazione di applicazioni Web e mobili.

DOWNLOAD GRATUITO: questo cheat sheet è disponibile come PDF scaricabile dal nostro partner di distribuzione, TradePub. Dovrai compilare un breve modulo per accedervi solo per la prima volta. Scarica il cheat sheet essenziale delle proprietà CSS3.

Il cheat sheet essenziale delle proprietà CSS3

scorciatoiaAzione
Proprietà di sfondo
sfondoDefinisce una varietà di proprietà di sfondo all'interno di una dichiarazione.
background-attachmentSpecifica se l'immagine di sfondo è fissa o scorre con la pagina Web.
colore di sfondoDefinisce il colore di sfondo di un elemento sulla pagina Web.
immagine di sfondoDefinisce l'immagine di sfondo di un elemento.
background-clip diSpecifica quanto si estendono le immagini di sfondo o il colore per un elemento.
background-origineSpecifica l'area di posizionamento delle immagini di sfondo.
background-positionDefinisce l'origine di un'immagine di sfondo.
background-repeatSpecifica come viene piastrellata l'immagine di sfondo.
background-sizeSpecifica la dimensione delle immagini di sfondo.
Proprietà del bordo
confineImposta la larghezza, lo stile e il colore del bordo per tutti e quattro i lati di un elemento.
border-bottomImposta la larghezza, lo stile e il colore per il bordo inferiore di un elemento.
border-bottom-colorImposta il colore del bordo inferiore di un elemento.
border-bottom-left-radiusDefinisce la forma dell'angolo del bordo inferiore sinistro di un elemento.
border-bottom-right-radiusDefinisce la forma dell'angolo del bordo inferiore destro di un elemento.
-Bottom border-styleImposta lo stile del bordo inferiore di un elemento.
border-bottom-widthImposta la larghezza del bordo inferiore di un elemento.
colore del bordoImposta il colore del bordo su tutti e quattro i lati di un elemento.
border-immagineSpecifica come utilizzare un'immagine al posto degli stili del bordo.
border-image-finSpecifica la quantità di estensione dell'area dell'immagine del bordo oltre la casella del bordo.
border-image-repeatSpecifica come viene affiancata l'immagine del bordo.
border-image-sliceSpecifica gli offset verso l'interno del bordo dell'immagine.
border-image-sourceSpecifica la posizione dell'immagine da utilizzare come bordo.
border-image-widthSpecifica la larghezza del bordo dell'immagine.
border-leftImposta la larghezza, lo stile e il colore del bordo sinistro di un elemento.
border-left-colorImposta il colore del bordo sinistro di un elemento.
border-left-styleImposta lo stile del bordo sinistro di un elemento.
border-left-widthImposta la larghezza del bordo sinistro di un elemento.
border-radiusDefinisce la forma degli angoli del bordo di un elemento.
border-rightImposta la larghezza, lo stile e il colore del bordo destro di un elemento.
border-right-colorImposta il colore del bordo destro di un elemento.
border-right-styleImposta lo stile del bordo destro di un elemento.
border-right-widthImposta la larghezza del bordo destro di un elemento.
stile del bordoImposta lo stile del bordo su tutti e quattro i lati di un elemento.
border-topImposta la larghezza, lo stile e il colore del bordo superiore di un elemento.
border-top-colorImposta il colore del bordo superiore di un elemento.
border-top-left-radiusDefinisce la forma dell'angolo del bordo superiore sinistro di un elemento.
border-top-right-radiusDefinisce la forma dell'angolo in alto a destra di un elemento.
-Top border-styleImposta lo stile del bordo superiore di un elemento.
border-top-widthImposta la larghezza del bordo superiore di un elemento.
larghezza del bordoImposta la larghezza del bordo su tutti e quattro i lati di un elemento.
Proprietà colore
coloreDefinisce e imposta il colore per il testo.
opacitàDefinisce la trasparenza di un elemento.
Proprietà dimensione
altezzaDefinisce l'altezza di un elemento.
altezza massimaDefinisce l'altezza massima di un elemento.
larghezza massimaDefinisce la larghezza massima di un elemento.
min-heightDefinisce l'altezza minima di un elemento.
min-widthDefinisce la larghezza minima di un elemento.
larghezzaSpecifica la larghezza di un elemento.
Proprietà del contenuto generato
soddisfareInserisce il contenuto generato.
citazioniSpecifica le virgolette per le citazioni incorporate.
counter-resetCrea o reimposta uno o più contatori.
counter-incrementIncrementa uno o più valori contatore.
Layout della scatola flessibile
allineare-contenutiSpecifica l'allineamento degli elementi del contenitore flessibile.
allineare-articoliSpecifica l'allineamento predefinito per gli articoli.
allineare-selfSpecifica l'allineamento per gli elementi selezionati.
flettereSpecifica i componenti di una lunghezza flessibile.
flex-baseSpecifica la dimensione principale iniziale dell'elemento flessibile.
flex-direzioneSpecifica la direzione degli articoli flessibili.
flex-flowUna proprietà abbreviata per le proprietà flex-direction e flex-wrap.
flex-growSpecifica la modalità di crescita dell'articolo flessibile rispetto agli altri articoli all'interno del contenitore flessibile.
flex-shrinkSpecifica come l'oggetto flessibile si ridurrà rispetto agli altri oggetti all'interno del contenitore flessibile.
flex-wrapSpecifica se gli articoli flessibili devono essere avvolti o meno.
justify-contenutiSpecifica come gli articoli flessibili vengono allineati lungo l'asse principale del contenitore flessibile dopo aver risolto eventuali lunghezze flessibili e margini automatici.
ordineSpecifica l'ordine in cui gli articoli flessibili vengono visualizzati e disposti all'interno di un contenitore flessibile.
Proprietà dei caratteri
fontDefinisce una varietà di proprietà del carattere all'interno di una dichiarazione come lo stile del carattere, la variante del carattere, lo spessore del carattere, la dimensione del carattere / l'altezza della linea e la famiglia di caratteri.
famiglia di fontDefinisce un elenco di caratteri per l'elemento.
dimensione del fontDefinisce la dimensione del carattere per il testo.
font-size-adjustPreserva la leggibilità del testo quando si verifica il fallback del carattere.
font-stretchSeleziona una faccia normale, ridotta o espansa da un carattere.
stile carattereDefinisce lo stile del carattere per il testo.
font-variantSpecifica la variante del carattere.
font-weightSpecifica lo spessore del carattere del testo.
Proprietà elenco
list-styleDefinisce lo stile di visualizzazione per un elenco e gli elementi dell'elenco.
list-style-imageSpecifica l'immagine da utilizzare come marcatore di elemento dell'elenco.
list-style-positionSpecifica la posizione del marcatore della voce di elenco.
list-style-typeSpecifica lo stile dell'indicatore per un elemento dell'elenco.
Proprietà del margine
margineImposta il margine su tutti e quattro i lati dell'elemento.
margin-bottomImposta il margine inferiore dell'elemento.
margin-leftImposta il margine sinistro dell'elemento.
margin-rightImposta il margine destro dell'elemento.
margin-topImposta il margine superiore dell'elemento.
Proprietà layout multi-colonna
column-countSpecifica il numero di colonne in un elemento a più colonne.
column-fillSpecifica come verranno riempite le colonne.
column-gapSpecifica lo spazio tra le colonne in un elemento a più colonne.
column-ruleSpecifica una linea retta, o "regola", da tracciare tra ciascuna colonna in un elemento a più colonne.
column-rule-colorSpecifica il colore delle regole disegnate tra le colonne in un layout a più colonne.
column-rule-styleSpecifica lo stile della regola disegnata tra le colonne in un layout a più colonne.
column-rule-widthSpecifica la larghezza della regola disegnata tra le colonne in un layout a più colonne.
Colonna spanSpecifica quante colonne attraversa un elemento in un layout a più colonne.
larghezza della colonnaSpecifica la larghezza ottimale delle colonne in un elemento a più colonne.
colonneUna proprietà abbreviata per l'impostazione della larghezza e del conteggio delle colonne.
column-countSpecifica il numero di colonne in un elemento a più colonne.
Proprietà del profilo
contornoImposta la larghezza, lo stile e il colore per tutti e quattro i lati del contorno di un elemento.
outline-colorImposta il colore del contorno.
delineare-offsetImposta lo spazio tra un contorno e il bordo del bordo di un elemento.
outline-styleImposta uno stile per un contorno.
outline-widthImposta la larghezza del contorno.
Proprietà di imbottitura
imbottituraImposta l'imbottitura su tutti e quattro i lati dell'elemento.
padding-bottomImposta l'imbottitura sul lato inferiore di un elemento.
padding-leftImposta l'imbottitura sul lato sinistro di un elemento.
padding-rightImposta l'imbottitura sul lato destro di un elemento.
padding-topImposta l'imbottitura sul lato superiore di un elemento.
Proprietà di stampa
page-break-afterInserisce un'interruzione di pagina dopo un elemento.
page-break-beforeInserisce un'interruzione di pagina prima di un elemento.
page-break-insideInserisce un'interruzione di pagina all'interno di un elemento.
Proprietà della tabella
border-collapseSpecifica se i bordi delle celle della tabella sono collegati o separati.
border-spacingImposta la spaziatura tra i bordi delle celle della tabella adiacenti.
caption-sideSpecifica la posizione della didascalia della tabella.
empty-cellsMostra o nasconde bordi e sfondi di celle di tabella vuote.
table-layoutSpecifica un algoritmo di layout di tabella.
border-collapseSpecifica se i bordi delle celle della tabella sono collegati o separati.
Proprietà del testo
direzioneDefinisce la direzione del testo / direzione di scrittura.
tab-sizeSpecifica la lunghezza del carattere di tabulazione.
text-alignImposta l'allineamento orizzontale del contenuto incorporato.
text-align-lastSpecifica in che modo viene allineata l'ultima riga di un blocco o di una linea immediatamente prima dell'interruzione forzata quando l'allineamento del testo è giustificato.
text-decorationSpecifica la decorazione aggiunta al testo.
text-decoration-colorSpecifica il colore della linea di decorazione del testo.
text-decoration-lineSpecifica quale tipo di decorazioni linea vengono aggiunte all'elemento.
text-decoration-styleSpecifica lo stile delle linee specificate dalla proprietà text-decoration-line
indentatura del testoRientra la prima riga di testo.
text-giustificareSpecifica il metodo di giustificazione da utilizzare quando la proprietà text-align è impostata per giustificare.
text-traboccoSpecifica come verrà visualizzato il contenuto del testo, quando trabocca i contenitori dei blocchi.
text-shadowApplica una o più ombre al contenuto testuale di un elemento.
text-transformTrasforma il caso del testo.
altezza della lineaImposta l'altezza tra le righe di testo.
vertical-alignImposta il posizionamento verticale di un elemento rispetto alla linea di base del testo corrente.
spaziatura del carattereImposta la spaziatura aggiuntiva tra le lettere.
word-spacingImposta la spaziatura tra le parole.
white-spaceSpecifica come viene gestito lo spazio bianco all'interno dell'elemento.
word-breakSpecifica come interrompere le linee all'interno delle parole.
word-wrapSpecifica se interrompere le parole quando il contenuto supera i limiti del suo contenitore.
Trasforma le proprietà
controfaccia visibilitàSpecifica se il lato "posteriore" di un elemento trasformato è visibile o meno di fronte all'utente.
prospettivaDefinisce la prospettiva dalla quale vengono visualizzati tutti gli elementi figlio dell'oggetto.
prospettiva origineDefinisce l'origine (il punto di fuga per lo spazio 3D) per la proprietà prospettiva.
trasformareApplica una trasformazione 2D o 3D a un elemento.
trasformare origineDefinisce l'origine della trasformazione per un elemento.
trasformare in stileSpecifica come vengono renderizzati gli elementi nidificati nello spazio 3D.
Proprietà di transizione
transizioneDefinisce la transizione tra due stati di un elemento.
transizione ritardoSpecifica quando inizierà l'effetto di transizione.
durata della transizioneSpecifica il numero di secondi o millisecondi che un effetto di transizione dovrebbe richiedere per il completamento.
transizione immobiliSpecifica i nomi delle proprietà CSS a cui applicare un effetto di transizione.
transizione-timing-functionSpecifica la curva di velocità dell'effetto di transizione.
Proprietà di formattazione visiva
SchermoSpecifica la modalità di visualizzazione di un elemento sullo schermo.
posizioneSpecifica come viene posizionato un elemento.
superioreSpecifica la posizione del bordo superiore dell'elemento posizionato.
giustoSpecifica la posizione del bordo destro dell'elemento posizionato.
parte inferioreSpecifica la posizione del bordo inferiore dell'elemento posizionato.
sinistraSpecifica la posizione del bordo sinistro dell'elemento posizionato.
galleggianteSpecifica se una casella deve essere mobile.
chiaroSpecifica il posizionamento di un elemento rispetto agli elementi fluttuanti.
z-indexSpecifica un ordine di stratificazione o sovrapposizione per gli elementi posizionati.
straripamentoSpecifica il trattamento del contenuto che trabocca nella casella dell'elemento.
troppopieno-xSpecifica come gestire il contenuto quando trabocca la larghezza dell'area del contenuto dell'elemento.
troppopieno-ySpecifica come gestire il contenuto quando trabocca l'altezza dell'area del contenuto dell'elemento.
ridimensionareSpecifica se un elemento è ridimensionabile dall'utente.
clipDefinisce la regione di ritaglio.
visibilitàSpecifica se è visibile o meno un elemento.
cursoreSpecifica il tipo di cursore.
box-ombraApplica una o più ombre alla scatola dell'elemento.
box-sizingModifica il modello di casella CSS predefinito.
Proprietà di animazione
animazioneSpecifica il comportamento di tutte le animazioni.
animazione ritardoSpecifica quando l'animazione inizierà con un ritardo.
animazione direzioneSpecifica se l'animazione deve essere riprodotta in avanti, indietro o in cicli alternati.
Animazione di durataSpecifica il numero di secondi o millisecondi che un'animazione dovrebbe richiedere per completare un ciclo.
Animazione-fill-modeSpecifica come un'animazione CSS deve applicare gli stili alla sua destinazione prima e dopo l'esecuzione.
animazione-iterazione-countSpecifica il numero di volte in cui un ciclo di animazione deve essere riprodotto prima dell'arresto.
Animazione-nomeSpecifica il nome delle animazioni definite @keyframes che devono essere applicate all'elemento selezionato.
Animazione-play-statoSpecifica se l'animazione è in esecuzione o in pausa.
animazione-timing-functionSpecifica come dovrebbe progredire un'animazione CSS per tutta la durata di ciascun ciclo.

Vai oltre le basi del CSS

Dopo aver imparato i mattoni del CSS, ti consigliamo di migliorare le tue abilità CSS. Avvia i tuoi progetti CSS con questo eBook GRATUITO! Dai il via ai tuoi progetti CSS con questo eBook GRATUITO! Questo ebook gratuito fornisce un ampio numero di esempi basati su CSS che ti aiuteranno a dare il via ai tuoi progetti web. Maggiori informazioni e apprendimento di JavaScript Che cos'è JavaScript e come funziona? Che cos'è JavaScript e come funziona? Che cos'è Javascript? È un linguaggio di programmazione utilizzato per migliorare le pagine Web. Include l'aggiornamento dinamico di pagine Web, interfacce utente e altro. Immergiamoci nel significato di Javascript. Leggi di più per portare le tue pagine Web a un nuovo livello di stupefacente.

Credito d'immagine: Nick Karvounis su Unsplash

Ulteriori informazioni su: Cheat Sheet, CSS, Web Design.