Foglio informativo sulle proprietà CSS3 essenziali

Schermata delle proprietà CSS di esempio utilizzate in uno snippet di codice

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

scorciatoia Azione
Proprietà di sfondo
sfondo Definisce una varietà di proprietà di sfondo all'interno di una dichiarazione.
background-attachment Specifica se l'immagine di sfondo è fissa o scorre con la pagina Web.
colore di sfondo Definisce il colore di sfondo di un elemento sulla pagina Web.
immagine di sfondo Definisce l'immagine di sfondo di un elemento.
background-clip di Specifica quanto si estendono le immagini di sfondo o il colore per un elemento.
background-origine Specifica l'area di posizionamento delle immagini di sfondo.
background-position Definisce l'origine di un'immagine di sfondo.
background-repeat Specifica come viene piastrellata l'immagine di sfondo.
background-size Specifica la dimensione delle immagini di sfondo.
Proprietà del bordo
confine Imposta la larghezza, lo stile e il colore del bordo per tutti e quattro i lati di un elemento.
border-bottom Imposta la larghezza, lo stile e il colore per il bordo inferiore di un elemento.
border-bottom-color Imposta il colore del bordo inferiore di un elemento.
border-bottom-left-radius Definisce la forma dell'angolo del bordo inferiore sinistro di un elemento.
border-bottom-right-radius Definisce la forma dell'angolo del bordo inferiore destro di un elemento.
-Bottom border-style Imposta lo stile del bordo inferiore di un elemento.
border-bottom-width Imposta la larghezza del bordo inferiore di un elemento.
colore del bordo Imposta il colore del bordo su tutti e quattro i lati di un elemento.
border-immagine Specifica come utilizzare un'immagine al posto degli stili del bordo.
border-image-fin Specifica la quantità di estensione dell'area dell'immagine del bordo oltre la casella del bordo.
border-image-repeat Specifica come viene affiancata l'immagine del bordo.
border-image-slice Specifica gli offset verso l'interno del bordo dell'immagine.
border-image-source Specifica la posizione dell'immagine da utilizzare come bordo.
border-image-width Specifica la larghezza del bordo dell'immagine.
border-left Imposta la larghezza, lo stile e il colore del bordo sinistro di un elemento.
border-left-color Imposta il colore del bordo sinistro di un elemento.
border-left-style Imposta lo stile del bordo sinistro di un elemento.
border-left-width Imposta la larghezza del bordo sinistro di un elemento.
border-radius Definisce la forma degli angoli del bordo di un elemento.
border-right Imposta la larghezza, lo stile e il colore del bordo destro di un elemento.
border-right-color Imposta il colore del bordo destro di un elemento.
border-right-style Imposta lo stile del bordo destro di un elemento.
border-right-width Imposta la larghezza del bordo destro di un elemento.
stile del bordo Imposta lo stile del bordo su tutti e quattro i lati di un elemento.
border-top Imposta la larghezza, lo stile e il colore del bordo superiore di un elemento.
border-top-color Imposta il colore del bordo superiore di un elemento.
border-top-left-radius Definisce la forma dell'angolo del bordo superiore sinistro di un elemento.
border-top-right-radius Definisce la forma dell'angolo in alto a destra di un elemento.
-Top border-style Imposta lo stile del bordo superiore di un elemento.
border-top-width Imposta la larghezza del bordo superiore di un elemento.
larghezza del bordo Imposta la larghezza del bordo su tutti e quattro i lati di un elemento.
Proprietà colore
colore Definisce e imposta il colore per il testo.
opacità Definisce la trasparenza di un elemento.
Proprietà dimensione
altezza Definisce l'altezza di un elemento.
altezza massima Definisce l'altezza massima di un elemento.
larghezza massima Definisce la larghezza massima di un elemento.
min-height Definisce l'altezza minima di un elemento.
min-width Definisce la larghezza minima di un elemento.
larghezza Specifica la larghezza di un elemento.
Proprietà del contenuto generato
soddisfare Inserisce il contenuto generato.
citazioni Specifica le virgolette per le citazioni incorporate.
counter-reset Crea o reimposta uno o più contatori.
counter-increment Incrementa uno o più valori contatore.
Layout della scatola flessibile
allineare-contenuti Specifica l'allineamento degli elementi del contenitore flessibile.
allineare-articoli Specifica l'allineamento predefinito per gli articoli.
allineare-self Specifica l'allineamento per gli elementi selezionati.
flettere Specifica i componenti di una lunghezza flessibile.
flex-base Specifica la dimensione principale iniziale dell'elemento flessibile.
flex-direzione Specifica la direzione degli articoli flessibili.
flex-flow Una proprietà abbreviata per le proprietà flex-direction e flex-wrap.
flex-grow Specifica la modalità di crescita dell'articolo flessibile rispetto agli altri articoli all'interno del contenitore flessibile.
flex-shrink Specifica come l'oggetto flessibile si ridurrà rispetto agli altri oggetti all'interno del contenitore flessibile.
flex-wrap Specifica se gli articoli flessibili devono essere avvolti o meno.
justify-contenuti Specifica come gli articoli flessibili vengono allineati lungo l'asse principale del contenitore flessibile dopo aver risolto eventuali lunghezze flessibili e margini automatici.
ordine Specifica l'ordine in cui gli articoli flessibili vengono visualizzati e disposti all'interno di un contenitore flessibile.
Proprietà dei caratteri
font Definisce 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 font Definisce un elenco di caratteri per l'elemento.
dimensione del font Definisce la dimensione del carattere per il testo.
font-size-adjust Preserva la leggibilità del testo quando si verifica il fallback del carattere.
font-stretch Seleziona una faccia normale, ridotta o espansa da un carattere.
stile carattere Definisce lo stile del carattere per il testo.
font-variant Specifica la variante del carattere.
font-weight Specifica lo spessore del carattere del testo.
Proprietà elenco
list-style Definisce lo stile di visualizzazione per un elenco e gli elementi dell'elenco.
list-style-image Specifica l'immagine da utilizzare come marcatore di elemento dell'elenco.
list-style-position Specifica la posizione del marcatore della voce di elenco.
list-style-type Specifica lo stile dell'indicatore per un elemento dell'elenco.
Proprietà del margine
margine Imposta il margine su tutti e quattro i lati dell'elemento.
margin-bottom Imposta il margine inferiore dell'elemento.
margin-left Imposta il margine sinistro dell'elemento.
margin-right Imposta il margine destro dell'elemento.
margin-top Imposta il margine superiore dell'elemento.
Propr
ietà layout multi-colonna
column-count Specifica il numero di colonne in un elemento a più colonne.
column-fill Specifica come verranno riempite le colonne.
column-gap Specifica lo spazio tra le colonne in un elemento a più colonne.
column-rule Specifica una linea retta, o "regola", da tracciare tra ciascuna colonna in un elemento a più colonne.
column-rule-color Specifica il colore delle regole disegnate tra le colonne in un layout a più colonne.
column-rule-style Specifica lo stile della regola disegnata tra le colonne in un layout a più colonne.
column-rule-width Specifica la larghezza della regola disegnata tra le colonne in un layout a più colonne.
Colonna span Specifica quante colonne attraversa un elemento in un layout a più colonne.
larghezza della colonna Specifica la larghezza ottimale delle colonne in un elemento a più colonne.
colonne Una proprietà abbreviata per l'impostazione della larghezza e del conteggio delle colonne.
column-count Specifica il numero di colonne in un elemento a più colonne.
Proprietà del profilo
contorno Imposta la larghezza, lo stile e il colore per tutti e quattro i lati del contorno di un elemento.
outline-color Imposta il colore del contorno.
delineare-offset Imposta lo spazio tra un contorno e il bordo del bordo di un elemento.
outline-style Imposta uno stile per un contorno.
outline-width Imposta la larghezza del contorno.
Proprietà di imbottitura
imbottitura Imposta l'imbottitura su tutti e quattro i lati dell'elemento.
padding-bottom Imposta l'imbottitura sul lato inferiore di un elemento.
padding-left Imposta l'imbottitura sul lato sinistro di un elemento.
padding-right Imposta l'imbottitura sul lato destro di un elemento.
padding-top Imposta l'imbottitura sul lato superiore di un elemento.
Proprietà di stampa
page-break-after Inserisce un'interruzione di pagina dopo un elemento.
page-break-before Inserisce un'interruzione di pagina prima di un elemento.
page-break-inside Inserisce un'interruzione di pagina all'interno di un elemento.
Proprietà della tabella
border-collapse Specifica se i bordi delle celle della tabella sono collegati o separati.
border-spacing Imposta la spaziatura tra i bordi delle celle della tabella adiacenti.
caption-side Specifica la posizione della didascalia della tabella.
empty-cells Mostra o nasconde bordi e sfondi di celle di tabella vuote.
table-layout Specifica un algoritmo di layout di tabella.
border-collapse Specifica se i bordi delle celle della tabella sono collegati o separati.
Proprietà del testo
direzione Definisce la direzione del testo / direzione di scrittura.
tab-size Specifica la lunghezza del carattere di tabulazione.
text-align Imposta l'allineamento orizzontale del contenuto incorporato.
text-align-last Specifica 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-decoration Specifica la decorazione aggiunta al testo.
text-decoration-color Specifica il colore della linea di decorazione del testo.
text-decoration-line Specifica quale tipo di decorazioni linea vengono aggiunte all'elemento.
text-decoration-style Specifica lo stile delle linee specificate dalla proprietà text-decoration-line
indentatura del testo Rientra la prima riga di testo.
text-giustificare Specifica il metodo di giustificazione da utilizzare quando la proprietà text-align è impostata per giustificare.
text-trabocco Specifica come verrà visualizzato il contenuto del testo, quando trabocca i contenitori dei blocchi.
text-shadow Applica una o più ombre al contenuto testuale di un elemento.
text-transform Trasforma il caso del testo.
altezza della linea Imposta l'altezza tra le righe di testo.
vertical-align Imposta il posizionamento verticale di un elemento rispetto alla linea di base del testo corrente.
spaziatura del cara
ttere		 Imposta la spaziatura aggiuntiva tra le lettere.
word-spacing Imposta la spaziatura tra le parole.
white-space Specifica come viene gestito lo spazio bianco all'interno dell'elemento.
word-break Specifica come interrompere le linee all'interno delle parole.
word-wrap Specifica 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.
prospettiva Definisce la prospettiva dalla quale vengono visualizzati tutti gli elementi figlio dell'oggetto.
prospettiva origine Definisce l'origine (il punto di fuga per lo spazio 3D) per la proprietà prospettiva.
trasformare Applica una trasformazione 2D o 3D a un elemento.
trasformare origine Definisce l'origine della trasformazione per un elemento.
trasformare in stile Specifica come vengono renderizzati gli elementi nidificati nello spazio 3D.
Proprietà di transizione
transizione Definisce la transizione tra due stati di un elemento.
transizione ritardo Specifica quando inizierà l'effetto di transizione.
durata della transizione Specifica il numero di secondi o millisecondi che un effetto di transizione dovrebbe richiedere per il completamento.
transizione immobili Specifica i nomi delle proprietà CSS a cui applicare un effetto di transizione.
transizione-timing-function Specifica la curva di velocità dell'effetto di transizione.
Proprietà di formattazione visiva
Schermo Specifica la modalità di visualizzazione di un elemento sullo schermo.
posizione Specifica come viene posizionato un elemento.
superiore Specifica la posizione del bordo superiore dell'elemento posizionato.
giusto Specifica la posizione del bordo destro dell'elemento posizionato.
parte inferiore Specifica la posizione del bordo inferiore dell'elemento posizionato.
sinistra Specifica la posizione del bordo sinistro dell'elemento posizionato.
galleggiante Specifica se una casella deve essere mobile.
chiaro Specifica il posizionamento di un elemento rispetto agli elementi fluttuanti.
z-index Specifica un ordine di stratificazione o sovrapposizione per gli elementi posizionati.
straripamento Specifica il trattamento del contenuto che trabocca nella casella dell'elemento.
troppopieno-x Specifica come gestire il contenuto quando trabocca la larghezza dell'area del contenuto dell'elemento.
troppopieno-y Specifica come gestire il contenuto quando trabocca l'altezza dell'area del contenuto dell'elemento.
ridimensionare Specifica se un elemento è ridimensionabile dall'utente.
clip Definisce la regione di ritaglio.
visibilità Specifica se è visibile o meno un elemento.
cursore Specifica il tipo di cursore.
box-ombra Applica una o più ombre alla scatola dell'elemento.
box-sizing Modifica il modello di casella CSS predefinito.
Proprietà di animazione
animazione Specifica il comportamento di tutte le animazioni.
animazione ritardo Specifica quando l'animazione inizierà con un ritardo.
animazione direzione Specifica se l'animazione deve essere riprodotta in avanti, indietro o in cicli alternati.
Animazione di durata Specifica il numero di secondi o millisecondi che un'animazione dovrebbe richiedere per completare un ciclo.
Animazione-fill-mode Specifica come un'animazione CSS deve applicare gli stili alla sua destinazione prima e dopo l'esecuzione.
animazione-iterazione-count Specifica il numero di volte in cui un ciclo di animazione deve essere riprodotto prima dell'arresto.
Animazione-nome Specifica il nome delle animazioni definite @keyframes che devono essere applicate all'elemento selezionato.
Animazione-play-stato Specifica se l'animazione è in esecuzione o in pausa.
animazione-timing-function Specifica 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 aggiornare le tue abilità CSS e imparare JavaScript per portare
le tue pagine web a un nuovo livello di stupefacente.

Credito d'immagine: Nick Karvounis su Unsplash

Leggi l'articolo completo: il cheat sheet Essential CSS3 Properties