Proprietà cSS3 - manichini - Social media 2025

Parte di CSS3 For Dummies Cheat Sheet

Alcune proprietà CSS3 sono utilizzato raramente; molti altri sono usati abbastanza frequentemente che gli sviluppatori dovrebbero conoscerli. Le proprietà e i relativi valori associati costituiscono la base della formattazione eseguita con CSS3. Ecco un elenco delle proprietà che utilizzerai più spesso quando lavori con CSS3:

background: definisce il contenuto per lo sfondo di un elemento. Il valore per questa proprietà è spesso una funzione, come linear-gradient ().
background-attachment : Specifica in che modo un'immagine può interagire con il resto di un elemento. Si utilizzano le seguenti parole chiave per configurare questa proprietà: scorrimento, fisso e locale.
background-color : Specifica il colore di sfondo di un'entità, come il colore della pagina sottostante. È possibile utilizzare una di queste tecniche per definire il colore di sfondo: valore esadecimale, nome del colore, funzione rgb (), funzione rgba (), funzione hsl () o funzione hsla ().
background-image : Fornisce il percorso di una risorsa da utilizzare come grafica per lo sfondo di un elemento. Si utilizza la funzione url () per specificare la posizione.
background-repeat : Consente di ripetere o non ripetere l'immagine di sfondo (utilizzando la parola chiave no-repeat) secondo necessità. È anche possibile scegliere di ripetere l'immagine solo nelle direzioni orizzontale (ripetizione-x) o verticale (ripetizione-y).
background-size : Determina la dimensione dell'immagine di sfondo come valore assoluto o percentuale.
border : Definisce il tipo di bordo da creare specificando una delle seguenti parole chiave: none, hidden, punteggiato, tratteggiato, solido, double, groove, ridge, inset, outset o inherit. È anche possibile modificare individualmente lo stile di ciascun lato di un bordo utilizzando le proprietà border-bottom-style, border-left-style, border-right-style e border-top-style.
border-color : Specifica il colore del bordo che circonda un'entità. È possibile utilizzare una di queste tecniche per definire il colore di sfondo: valore esadecimale, nome del colore, funzione rgb (), funzione rgba (), funzione hsl () o funzione hsla ().
border-image : Definisce un'immagine da utilizzare per il contenuto del bordo, piuttosto che un tipo di linea. Normalmente usi la funzione url () per specificare il valore di questa proprietà.
border-radius : Determina se gli angoli di un bordo sono arrotondati e la quantità di arrotondamento. Quando si crea un angolo arrotondato, si specifica la quantità di arrotondamento. Per rimuovere un angolo arrotondato, utilizzare la parola chiave none.
border-width : Determina lo spessore del bordo che circonda un elemento. È possibile definire la larghezza del bordo utilizzando una parola chiave (media, spessa o sottile) o una misurazione effettiva.
numero di colonne : Specifica il numero di colonne da creare. La larghezza delle colonne oscilla automaticamente quando l'utente ridimensiona la finestra del browser (oppure il browser visualizza una barra di scorrimento orizzontale per consentire lo scorrimento tra le colonne quando viene impostata anche una larghezza specifica).
riempimento colonna : Determina in che modo il browser riempie le colonne (riempiendo una colonna alla volta o riempendo tutte le colonne contemporaneamente con una quantità pari di contenuto).
column-gap : Crea uno spazio tra le colonne per rendere più facile determinare dove finisce una colonna e inizia un'altra.
rule-column : Crea una regola tra le colonne in modo che l'utente possa vedere un separatore fisico. Questa proprietà è composta da colore, stile e larghezza.
column-rule-color : Determina il colore della regola utilizzata tra le colonne.
column-rule-style : Determina lo stile della regola utilizzata tra le colonne.
column-rule-width : Determina la larghezza della regola utilizzata tra le colonne.
column-span : Specifica il numero di colonne che un oggetto può estendersi.
column-width : Specifica una larghezza della colonna.
colonne : Fornisce un metodo abbreviato per la definizione del conteggio delle colonne e delle proprietà della larghezza delle colonne.
colore : Specifica il colore di primo piano di un'entità, come il testo. È possibile utilizzare una di queste tecniche per definire il colore: valore esadecimale, nome del colore, funzione rgb (), funzione rgba (), funzione hsl () o funzione hsla ().
contenuto : Emette il testo o altra risorsa specificata come parte della presentazione dell'elemento. Questa proprietà viene spesso utilizzata per eseguire attività quali l'aggiunta di frecce a elementi visivi. Si specifica il valore utilizzando la funzione url (), il numero di carattere Unicode preceduto da una barra rovesciata (come 27A8) o una parola chiave.
display : Specifica come presentare determinati tipi di elementi sulla pagina. È possibile utilizzare una delle seguenti parole chiave per definire il tipo di visualizzazione: none, box (o flex-box), block, flex, inline, inline-block, inline-flex, inline-table, list-item, table, table- didascalia, tabella-cella, tabella-colonna, tabella-colonna-gruppo, tabella-footer-group, tabella-header-group, table-row o table-row-group.
float : Consente a un'immagine di fluttuare nella direzione specificata. Si definisce questa proprietà utilizzando le seguenti parole chiave: sinistra, destra o nessuna.
carattere-famiglia : Definisce il nome del carattere. Tre sono tre classificazioni di font tipicamente usate come parte del CSS (e la maggior parte delle pagine CSS usano tutte e tre le opzioni a meno che non si specifichi anche la proprietà src): specifica, sicura per il Web e generica.
font-size : Determina la dimensione del carattere rispetto ad altri tipi di carattere sulla pagina o fornisce una specifica dimensione del carattere. È possibile utilizzare una di queste tecniche per definire la dimensione del carattere: dimensione specifica, parola chiave (come grande o più grande) e percentuale.
stile carattere : Determina lo stile del carattere creato dal browser. Il browser deve supportare lo stile e il carattere deve fornire lo stile affinché questa proprietà abbia effetto. Le parole chiave di stile del carattere sono: normale, corsivo, obliquo (normalmente un corsivo più forte) ed ereditano.
font-variant : Specifica se il carattere deve essere presentato in un modulo variante. Non tutti i browser e i caratteri supportano questa funzionalità. Le parole chiave per questa proprietà sono normali, small-caps e inherit.
font : Determina l'oscurità relativa del font e la larghezza dei suoi tratti. Esistono due metodi per definire il peso del carattere: numerico e parola chiave (come grassetto).
height : Indica la dimensione verticale di un elemento.
sinistra : Indica la posizione all'estrema sinistra di un elemento su una pagina.
stile elenco : Definisce l'aspetto di un elemento di elenco. È possibile definire il tipo di marker da utilizzare, la posizione dei marker e se i marker sono effettivamente creati utilizzando le immagini, piuttosto che i caratteri standard.
margine : Specifica la quantità di spazio tra il bordo di un elemento e il margine di un altro elemento.
margin-bottom : Indica la posizione più in basso di un margine di elemento su una pagina.
margin-left : Indica la posizione all'estrema sinistra di un margine di elemento su una pagina.
margin-top : Indica la posizione più in alto di un margine di elemento su una pagina.
padding : Specifica la quantità di spazio tra il bordo di un elemento e il contenuto all'interno dell'elemento.
posizione : Indica il posizionamento di elementi in una pagina. Si specifica il posizionamento utilizzando queste parole chiave: statico (gli elementi sono scorrevoli), assoluto (gli elementi appaiono in una posizione specifica, anche se tale posizionamento sovrascriverebbe un altro elemento), fisso (gli elementi sono posizionati rispetto alla finestra del browser), o relativo (gli elementi sono posizionati rispetto agli elementi principali).
text-align : Specifica il posizionamento del testo su una riga. Si specifica l'allineamento usando le parole chiave giustificazione, destra, centro e sinistra.
text-decoration : Definisce l'aggiunta di una caratteristica, come sottolineatura, overline o line-through al carattere. Questa proprietà funziona ovunque, quindi non devi preoccuparti se qualcuno che visualizza la tua pagina su un televisore o utilizzando uno smartphone riceverà il tuo messaggio.
overflow di testo : Definisce l'azione che avverrà quando il testo trabocca dalla casella utilizzata per contenerlo. I valori accettabili sono: clip, ellissi o un valore di stringa fornito.
text-shadow : Visualizza un'ombra dei personaggi di destinazione alla stessa larghezza del carattere di destinazione. Il posizionamento, la forza e il colore dell'ombra sono determinati dalle seguenti proprietà: h-shadow (determina il posizionamento orizzontale dell'ombra), v-shadow (determina il posizionamento verticale dell'ombra), sfocatura (specifica la chiarezza del testo ombreggiato) e colore (definisce il colore del contorno).
visibilità : Specifica il livello di visibilità per un elemento. Si utilizzano le seguenti parole chiave per configurare questa proprietà: visibile, nascosta o compressa.
width : Indica la dimensione orizzontale di un elemento.
interruzione di parole : Determina il modo in cui il testo viene inserito all'interno di una casella di contenimento quando si lavora con una lingua non CJK (coreano giapponese cinese). I valori accettabili sono: normale, break-all e sillabazione.
word-wrap : Determina il modo in cui il testo viene interrotto e quindi spostato alla riga successiva in una casella di contenimento quando si lavora con una lingua non CJK. I valori accettabili sono: normale e break-word.