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"!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. |
Proprietà 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 carattere | 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 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.