Guida HTML5 e CSS3 Completa
HTML5
a:link
L’attributo href specifica la destinazione del link:
<a href=”http://”></a>
abbr
il tag <abbr> serve ad inserire abbreviazioni e acronimi in una porzione di testo.
<abbr title=””></abbr>
base
Il tag <base> specifica l’URL di base e/o il target per tutti gli URL relativi in un documento.
<base href=”” />
basefont
Il tag <basefont> veniva utilizzato per specificare un colore di testo predefinito, una dimensione del carattere o un tipo di carattere per tutto il testo in un documento HTML.
<basefont />
br
il tag <br> non si chiude si usa per lasciare uno spazio vuoto
<br>
frame
<frame />
hr
serve per poter mettere una riga orrizontale
<hr />
bdo
Questo tag scrive la frase al suo interno da destra verso sinistra
<bdo dir=””></bdo>
col
Il tag <col> specifica le proprietà delle colonne per ogni colonna all’interno di un elemento <colgroup>.
Il tag <col> è utile per applicare stili a intere colonne, invece di ripetere gli stili per ogni cella, per ogni riga.
<col />
link
serve per collegare il foglio di stile e un esterno
<link rel=”stylesheet” href=”” />
link:print
Questo frammento di codice HTML rappresenta un collegamento a un file CSS specificato per essere utilizzato quando la pagina viene stampata
<link rel=”stylesheet”
href=”print.css” media=”print” />
link:favicon
<link rel=”shortcut icon”
type=”image/x-icon” href=”favicon.
ico” />
link:touch
<link rel=”apple-touch-icon”
href=”favicon.png” />
link:rss
<link rel=”alternate”
type=”application/rss+xml”
title=”RSS” href=”rss.xml” />
link:atom
<link rel=”alternate”
type=”application/atom+xml”
title=”Atom” href=”atom.xml” />
link:import, link:im
<link rel=”import”
href=”component.html” />
meta
<meta />
meta:utf
<meta http-equiv=”Content-Type”
content=”text/html;charset=UTF-8″
/>
meta:win
<meta http-equiv=”ContentType” content=”text/
html;charset=windows-1251″ />
meta:vp
<meta name=”viewport”
content=”width=device-width, userscalable=no, initial-scale=1.0,
maximum-scale=1.0, minimumscale=1.0″ />
meta:compat
<meta http-equiv=”X-UA-Compatible”
content=”IE=7″ />
style
è un attributo usato per aggiungere uno stile al elemento come puo
essere colore, font, size e altro
<style></style>
script
<script></script>
script:src
<script src=””></script>
img
questo attributo permette di poter mettere un imagine
<img src=”” alt=”” />
img:srcset, img:s
L’attributo srcset consente di specificare una serie di URL di immagini e delle dimensioni corrispondenti
<img srcset=”” src=”” alt=”” />
img:sizes, img:z
<img sizes=”” srcset=”” src=””
alt=”” />
picture
L’uso più comune dell’elemento <picture> sarà per la direzione artistica nei design responsivi.
<picture></picture>
source, src
Il tag <source> viene utilizzato per specificare molteplici risorse multimediali per elementi multimediali, come <video>, <audio> e <picture>.
<source />
iframe
Il tag iframe specifica
<iframe src=”” frameborder=”0″></
iframe>
embed
serve per incorporare un imaggine al testo
<embed src=”” type=”” />
object
Il tag <object> definisce un contenitore per una risorsa esterna.
HTML5 e CSS3
La risorsa esterna può essere una pagina web, un’immagine o un lettore multimediale
<object data=”” type=””></object>
param
L’utilizzo del tag <param> viene utilizzato per definire parametri per un elemento <object>.
<param name=”” value=”” />
map
il tag <map> viene utilizzato per definire una mappa immagine. Una mappa immagine è un’immagine con aree cliccabili.
<map name=””></map>
area
Il tag <area> definisce un’area all’interno di una mappa immagine (una mappa immagine è un’immagine con aree cliccabili)
<area shape=”” coords=”” href=””
alt=”” />
—————————————————————
Questo vale per d,c,r,p
L’attributo shape specifica la forma di un’area.
L’attributo shape viene utilizzato insieme all’attributo coords per specificare le dimensioni, la forma e la posizione di un’area.
area:d
<area shape=”default” href=””
alt=”” />
area:c
<area shape=”circle” coords=””
href=”” alt=”” />
area:r
<area shape=”rect” coords=””
href=”” alt=”” />
area:p
<area shape=”poly” coords=””
href=”” alt=”” />
Form, Input, Button
form
I form (moduli) sono una delle parti più importanti del web. Senza di essi, non ci sarebbe un modo facile per raccogliere dati, cercare risorse o effettuare un’iscrizione per ricevere informazioni preziose
<form action=””></form>
form:get
L’attributo method definisce il metodo HTTP utilizzato per inviare i dati del formulario al server. In questo caso, GET indica che i dati del formulario saranno inclusi nell’URL come stringa di query quando inviati al server.
Questo metodo è comunemente utilizzato per richieste non sensibili e per inviare dati leggeri, come query di ricerca o filtri.
<form action=”” method=”get”></
form>
form:post
POST indica che i dati del formulario saranno inviati al server nel corpo della richiesta HTTP, non direttamente visibili nell’URL come nel metodo GET
<form action=”” method=”post”></
form>
label
Il tag <label> viene utilizzato per associare un’etichetta descrittiva a un campo di input all’interno di un formulario.
<label for=””></label>
input
Quindi, <input type=”text” /> crea un semplice campo di input di testo in cui gli utenti possono inserire qualsiasi testo desiderato.
<input type=”text” />
inp
questo codice HTML crea un campo di input di testo senza associare un nome o un identificatore univoco ad esso.
<input type=”text” name=”” id=””
/>
input:hidden, input:h
type specifica il tipo di campo di input. Quando è impostato su “hidden”, viene creato un campo di input nascosto. I campi di input nascosti sono invisibili all’utente e non vengono visualizzati nella pagina web
<input type=”hidden” name=”” />
input:text, input:t
uesto tipo di campo di input è utilizzato per raccogliere numeri di telefono. Quando viene utilizzato, alcuni browser mostreranno una tastiera numerica sul dispositivo mobile per agevolare l’inserimento dei numeri di telefono
<input type=”text” name=”” id=””
/>
input:search
L’attributo type=”search” per l’elemento <input> in HTML definisce un campo di input di ricerca. Questo tipo di campo di input è progettato specificamente per raccogliere query di ricerca dagli utenti.
<input type=”search” name=”” id=””
/>
input:email
è progettato per raccogliere gli indirizzi email dagli utenti. Quando viene utilizzato, alcuni browser possono fornire controlli aggiuntivi per assicurarsi che l’indirizzo email inserito abbia un formato valido.
<input type=”email” name=”” id=””
/>
input:url
Il campo di input specificato con type=”url” è progettato per raccogliere gli URL dagli utenti.
<input type=”url” name=”” id=”” />
input:password, input:p
l’attributo type dell’elemento <input> in HTML e sono utilizzati per creare campi di input per la password.
<input type=”password” name=””
id=”” />
input:datetime
type=”datetime” non esiste in HTML standard. Tuttavia, esistono altri tipi di campo di input datetime supportati, come datetime-local, date, time, month, e week.
<input type=”datetime” name=””
id=”” />
input:date
type=”date” per l’elemento <input> in HTML crea un campo di input per selezionare una data tramite un calendario o un controllo di selezione, a seconda dell’implementazione del browser.
<input type=”date” name=”” id=””
/>
input:datetime-local
Type=”datetime-local” per l’elemento <input> in HTML crea un campo di input che permette agli utenti di selezionare una data e un’ora tramite un controllo di selezione.
<input type=”datetime-local”
name=”” id=”” />
input:month
L’attributo type=”month” per l’elemento <input> in HTML crea un campo di input per selezionare un mese e un anno tramite un controllo di selezione.
<input type=”month” name=”” id=””
/>
input:week
L’attributo type=”week” per l’elemento <input> in HTML crea un campo di input per selezionare una settimana e un anno tramite un controllo di selezione.
<input type=”week” name=”” id=””
/>
input:time
L’attributo type=”time” per l’elemento <input> in HTML crea un campo di input per selezionare un’ora tramite un controllo di selezione.
<input type=”time” name=”” id=””
/>
input:tel
L’attributo type=”tel” per l’elemento <input> in HTML crea un campo di input per raccogliere numeri di telefono.
<input type=”tel” name=”” id=”” />
input:number
L’attributo type=”number” per l’elemento <input> in HTML crea un campo di input per raccogliere numeri
<input type=”number” name=”” id=””
/>
input:color
L’attributo type=”color” per l’elemento <input> in HTML crea un campo di input per selezionare un colore utilizzando una paletta di colori.
<input type=”color” name=”” id=””
/>
input:checkbox, input:c
Entrambi i valori checkbox e c specificano lo stesso tipo di campo di input nell’elemento <input> di HTML. Questo tipo di campo consente agli utenti di selezionare una o più opzioni da un elenco di opzioni.
<input type=”checkbox” name=””
id=”” />
input:radio, input:r
Entrambi i valori radio e r specificano lo stesso tipo di campo di input nell’elemento <input> di HTML. Questo tipo di campo consente agli utenti di selezionare una sola opzione da un elenco di opzioni.
<input type=”radio” name=”” id=””
/>
input:range
L’attributo type=”range” per l’elemento <input> in HTML crea un campo di input per selezionare un valore da un intervallo di valori.
<input type=”range” name=”” id=””
/>
input:file, input:f
Entrambi i valori file e f specificano lo stesso tipo di campo di input nell’elemento <input> di HTML
<input type=”file” name=”” id=”” />
input:submit, input:s
Entrambi i valori submit e s specificano lo stesso tipo di campo di input nell’elemento <input> di HTML
<input type=”submit” value=”” />
input:image, input:i
L’elemento <input> con l’attributo type=”image” è utilizzato per creare un pulsante di invio nell’aspetto di un’immagine.
<input type=”image” src=”” alt=””
/>
input:button, input:b
L’elemento <input> con l’attributo type=”button” crea un pulsante generico senza alcuna azione predefinita associata.
È spesso utilizzato in combinazione con JavaScript per eseguire azioni personalizzate quando l’utente fa clic sul pulsante.
<input type=”button” value=”” />
isindex
L’elemento <isindex> in HTML 4 era utilizzato per creare un campo di ricerca all’interno di un formulario. Quando l’utente inviava il formulario, il testo inserito nel campo di ricerca veniva inviato al server come parte della query di ricerca.
<isindex />
input:reset
L’elemento <input> con l’attributo type=”reset” crea un pulsante che ripristina i valori di tutti i campi del formulario ai valori predefiniti.
<input type=”reset” value=”” />
select
Questo codice HTML crea un elemento <select> che permette agli utenti di selezionare una singola opzione da un elenco di opzioni predefinite.
<select name=”” id=””></select>
select:disabled, select:d
Questo codice HTML crea un elemento <select> che permette agli utenti di selezionare una singola opzione da un elenco di opzioni predefinite, ma è disabilitato, il che significa che non sarà interattivo e non sarà possibile selezionare o modificare le opzioni.
<select name=”” id=””
disabled=”disabled”></select>
option, opt
Questo codice HTML rappresenta un’opzione all’interno di un elemento <select>. Le opzioni sono gli elementi figli di un <select> e definiscono le scelte disponibili per l’utente
<option value=””></option>
textarea
Questo codice HTML crea un elemento <textarea> che permette agli utenti di inserire e modificare del testo multiriga.
<textarea name=”” id=”” cols=”30″
rows=”10″></textarea>
marquee
L’elemento <marquee> è stato utilizzato in HTML per creare un testo o un contenuto in movimento all’interno di una pagina web.
Tuttavia, è stato deprecato in HTML5 a causa delle sue implicazioni sull’accessibilità e sul design web responsivo, e non è più raccomandato per l’uso
<marquee behavior=””
direction=””></marquee>
menu:context, menu:c
L’elemento <menu> in HTML è stato utilizzato per definire una lista di comandi o opzioni, ma è stato deprecato in HTML5 e non è più raccomandato per l’uso
<menu type=”context”></menu>
menu:toolbar, menu:t
L’elemento <menu> in HTML, con l’attributo type=”toolbar”, è stato utilizzato per definire una lista di comandi o opzioni simile a una barra degli strumenti
<menu type=”toolbar”></menu>
video
<video src=””></video>
audio
L’elemento <audio> in HTML viene utilizzato per incorporare file audio all’interno di una pagina web.
Assimilabile all’elemento <video>, richiede un percorso al file audio da riprodurre tramite l’attributo src
<audio src=””></audio>
html:xml
L’attributo xmlns (XML namespace) nell’elemento <html> viene utilizzato per dichiarare il namespace XML predefinito per un documento HTML. Questo namespace viene utilizzato per definire il tipo di documento e per specificare il vocabolario o le regole che il documento segue
<html xmlns=”http://www.
w3.org/1999/xhtml”></html>
keygen
L’elemento <keygen> in HTML è stato utilizzato per generare una coppia di chiavi pubbliche e private per l’invio sicuro dei dati tra il client e il server.
<keygen />
command
L’elemento <command> in HTML era utilizzato all’interno dell’elemento <menu> per definire un comando o un’azione eseguibile dall’utente.
Tuttavia, sia l’elemento <command> che l’elemento <menu> sono stati deprecati in HTML5 e non sono più raccomandati per l’uso.
<command />
button:submit, button:s, btn:s
Questo codice HTML crea un pulsante di invio all’interno di un formulario.
<button type=”submit”></button>
button:reset, button:r, btn:r
Questo codice HTML crea un pulsante di reset all’interno di un formulario.
<button type=”reset”></button>
button:disabled, button:d, btn:d
Questo codice HTML crea un pulsante disabilitato.
<button disabled=”disabled”></
button>
fieldset:disabled, fieldset:d, fset:d, fst:d
Questo codice HTML crea un insieme di campi disabilitato utilizzando l’elemento <fieldset>.
<fieldset>: Questo è l’elemento che raggruppa un insieme di campi all’interno di un formulario.
html
disabilita i campi all’interno
<fieldset disabled=”disabled”></
fieldset>
bq
L’elemento <blockquote> è utilizzato per citare un blocco di testo estratto da un’altra fonte
<blockquote></blockquote>
fig
L’elemento <figure> in HTML è utilizzato per rappresentare un contenuto autonomo, come ad esempio un’immagine, un diagramma, una tabella o un video, insieme a una didascalia.
<figure></figure>
figc
L’elemento <figcaption> in HTML è utilizzato per definire la didascalia per un contenuto contenuto all’interno di un elemento <figure>
<figcaption></figcaption>
pic
L’elemento <picture> in HTML è utilizzato per fornire una serie di alternative di immagini per un elemento <img>, consentendo al browser di scegliere quale immagine caricare in base alle caratteristiche del dispositivo dell’utente, come ad esempio la risoluzione dello schermo o la larghezza del viewport.
<picture></picture>
ifr
Un elemento <iframe> è utilizzato in HTML per incorporare un’altra pagina web all’interno di una pagina web
<iframe src=”” frameborder=”0″></
iframe>
emb
L’elemento <embed> in HTML viene utilizzato per incorporare contenuti multimediali, come audio o video, direttamente nella pagina web.
<embed src=”” type=”” />
obj
L’elemento <object> in HTML viene utilizzato per incorporare vari tipi di contenuti all’interno di una pagina web, come ad esempio immagini, audio, video, file PDF e altro ancora.
<object data=”” type=””></object>
cap
L’elemento <caption> in HTML viene utilizzato all’interno di elementi come <table> per fornire una didascalia o un’intestazione per la tabella stessa.
<caption></caption>
colg L’elemento <colgroup> in HTML viene utilizzato all’interno di elementi come <table> per definire un gruppo di colonne che condividono determinate proprietà.
<colgroup></colgroup>
fst, fset
viene utilizzato per raggruppare insieme elementi correlati all’interno di un modulo.
<fieldset></fieldset>
btn
viene utilizzato per creare un pulsante interattivo all’interno di una pagina web. Ecco alcune informazioni importanti sull’elemento <button>
<button></button>
optg
viene utilizzato all’interno di un elemento <select> per raggruppare opzioni correlate in un menu a discesa
<optgroup></optgroup>
tarea
è utilizzato per creare un’area di testo modificabile all’interno di un modulo web
<textarea name=”” id=”” cols=”30″
rows=”10″></textarea>
leg
è utilizzato all’interno di un elemento <fieldset> per fornire una descrizione o un titolo per il gruppo di controlli all’interno del <fieldset>
<legend></legend>
sect
utilizzato per organizzare e raggruppare contenuti correlati all’interno di una pagina web
<section></section>
art
utilizzato per definire un’area di contenuto che può essere considerata un’entità completa e indipendente, come un articolo di giornale, un post di blog, un commento o un widget.
<article></article>
hdr
Serve per includere elementi introduttivi o di navigazione all’inizio di un contenuto web, come loghi, menu di navigazione, titoli, ecc.
<header></header>
ftr
Serve per includere elementi di chiusura, come informazioni di contatto, copyright, link utili, ecc., alla fine di una sezione o di un documento web
<footer></footer>
adr
Serve per includere le informazioni di contatto, come l’indirizzo, il numero di telefono o l’indirizzo email, all’interno di una pagina web.
<address></address>
dlg
Serve per creare una finestra di dialogo modale che può contenere testo, pulsanti, campi di input o altri elementi interattivi
<dialog></dialog>
str
serve per evidenziare una parte di testo che ha un’importanza maggiore rispetto al resto del contenuto.
<strong></strong>
prog
Serve per mostrare la percentuale di completamento di un’operazione in corso, come il caricamento di un file, il download di dati o qualsiasi altra attività che richiede un progressivo avanzamento.
<progress></progress>
mn
Serve per indicare la sezione principale di una pagina web, che contiene il contenuto centrale e rilevante per gli utenti.
<main></main>
tem
Viene utilizzato per contenere blocchi di codice HTML che possono essere clonati e inseriti dinamicamente nella pagina web tramite JavaScript.
<template></template>
ri:dpr, ri:d
viene utilizzato per inserire un’immagine all’interno di una pagina
<img srcset=”” src=”” alt=”” />
ri:viewport, ri:v
può essere utilizzato con diversi attributi per gestire in modo ottimale l’inserimento di immagini all’interno di una pagina web
<img sizes=”” srcset=”” src=””
alt=”” />
ri:art, ri:a
<picture>
<source media=”(min-width: )”
srcset=”” />
<img src=”” alt=”” />
</picture>
ri:type, ri:t
<picture>
<source srcset=”” type=”image/”
/>
<img src=”” alt=”” />
</picture>
ol+
<ol>
<li></li>
</ol>
ul+
<ul>
<li></li>
</ul>
dl+
<dl>
<dt></dt>
<dd></dd>
</dl>
map+
<map name=””>
<area shape=”” coords=””
href=”” alt=”” />
</map>
table+
permette di creare una tabella
<table>
<tr>
<td></td>
</tr>
</table>
colgroup+, colg+
<colgroup>
<col />
</colgroup>
tr+
<tr>
<td></td>
</tr>
select+
<select name=”” id=””>
<option value=””></option>
</select>
optgroup+, optg+
<optgroup>
<option value=””></option>
</optgroup>
pic+
<picture>
<source srcset=”” />
<img src=”” alt=”” />
</picture>
CSS3
Visual Formatting
pos
Utilizzato per posizionare un elemento in base alla sua posizione originale nel flusso del documento
position:relative;
pos:s
è il valore predefinito di posizionamento degli elementi in CSS e indica che l’elemento viene disposto nel flusso normale del documento, senza alcun posizionamento speciale.
position:static;
pos:a
viene utilizzata per posizionare un elemento in modo assoluto rispetto al primo genitore posizionato o all’elemento contenitore più vicino che abbia un posizionamento diverso da static.
position:absolute;
pos:r
utilizzata per posizionare un elemento in modo relativo rispetto alla sua posizione normale nel flusso del documento. Quando si applica position: relative; a un elemento, è possibile spostarlo rispetto alla sua posizione originale utilizzando le proprietà top, right, bottom e left.
position:relative;
pos:f
viene utilizzata per posizionare un elemento in modo fisso rispetto alla finestra del browser, indipendentemente dallo scorrimento della pagina. Quando si applica position: fixed; a un elemento, questo resta sempre visibile nella stessa posizione rispetto alla finestra del browser.
position:fixed;
t
top viene utilizzata insieme alla proprietà position per posizionare un elemento in verticale rispetto al suo contenitore posizionato. Quando si imposta il valore di top, si sta definendo la distanza tra il bordo superiore dell’elemento e il bordo superiore del suo contenitore posizionato.
top:;
t:a
viene utilizzata per impostare il valore predefinito per la posizione verticale di un elemento, annullando qualsiasi valore specifico precedentemente definito per la proprietà top. Quando si imposta top: auto;, si consente all’elemento di seguire il flusso naturale del documento e di essere posizionato come se non fosse stato specificato alcun valore per top.
top:auto;
r
utilizzata per posizionare un elemento rispetto al bordo destro del suo contenitore posizionato. Quando si imposta il valore di right, si sta definendo la distanza tra il bordo destro dell’elemento e il bordo destro del suo contenitore posizionato.
right:;
r:a
si permette all’elemento di seguire il flusso normale del layout senza specificare una posizione esplicita rispetto al bordo destro del suo contenitore posizionato. Questo valore di auto per right imposta la posizione orizzontale dell’elemento in base al comportamento predefinito del browser.
right:auto;
b
bottom viene utilizzata per posizionare un elemento rispetto al bordo inferiore del suo contenitore posizionato.
Quando si imposta il valore di bottom, si sta definendo la distanza tra il bordo inferiore dell’elemento e il bordo inferiore del suo contenitore posizionato.
bottom:;
b:a
si permette all’elemento di seguire il flusso normale del layout senza specificare una posizione esplicita rispetto al bordo inferiore del suo contenitore posizionato. Questo valore di auto per bottom imposta la posizione verticale dell’elemento in base al comportamento predefinito del browser.
bottom:auto;
l
viene utilizzata per posizionare un elemento rispetto al bordo sinistro del suo contenitore posizionato. Quando si imposta il valore di left, si sta definendo la distanza tra il bordo sinistro dell’elemento e il bordo sinistro del suo contenitore posizionato.
left:;
l:a
si lascia che l’elemento segua il flusso normale del layout senza specificare una posizione esplicita rispetto al bordo sinistro del suo contenitore posizionato. Questo valore di auto per left imposta la posizione orizzontale dell’elemento in base al comportamento predefinito del browse
left:auto;
z
CSS z-index controlla lo stack order degli elementi posizionati. Questo significa che determina l’ordine in cui gli elementi vengono sovrapposti l’uno sull’altro lungo l’asse Z (profondità) all’interno del layout della pagina web. Quando si imposta un valore per z-index, si determina quale elemento appare “sopra” gli altri in caso di sovrapposizione.
z-index:;
z:a
index: auto; in CSS, si lascia al browser la gestione dell’ordine di sovrapposizione degli elementi senza specificare un valore esplicito per lo stack order lungo l’asse Z. Di solito, auto è il valore predefinito per z-index e indica che l’elemento segue l’ordine naturale all’interno del contesto di posizionamento.
z-index:auto;
fl
su un elemento, si fa in modo che l’elemento venga spostato il più a sinistra possibile all’interno del suo contenitore, consentendo agli altri elementi di posizionarsi a destra di esso. Questo crea un layout a riga in cui gli elementi successivi verranno posizionati a destra dell’elemento con float: left;. float:left;
fl:n
un elemento, si annulla qualsiasi float precedentemente applicato all’elemento.
Questo significa che l’elemento non verrà più spostato a sinistra o a destra all’interno del suo contenitore, ripristinando il flusso normale di layout dell’elemento all’interno del documento.
float:none;
fl:l
un elemento, si fa in modo che l’elemento venga spostato il più possibile a sinistra all’interno del suo contenitore, consentendo agli altri elementi di posizionarsi a destra di esso. Questo crea un layout a riga in cui gli elementi successivi verranno posizionati a destra dell’elemento con float: left.
float:left;
fl:r
su un elemento, si fa in modo che l’elemento venga spostato il più possibile a destra all’interno del suo contenitore, consentendo agli altri elementi di posizionarsi a sinistra di esso.
Questo crea un layout a riga in cui gli elementi successivi verranno posizionati a sinistra dell’elemento con float: right.
float:right;
cl
un elemento, si indica che l’elemento non può posizionarsi a destra né a sinistra di alcun elemento float, ma deve essere posizionato sotto qualsiasi elemento float presente prima di esso.
clear:both;
cl:l
su un elemento, si indica che l’elemento non può posizionarsi a sinistra di alcun elemento float, ma deve essere posizionato sotto qualsiasi elemento float che si trova a sinistra di esso.
clear:left;
cl:r
su un elemento, si indica che l’elemento non può posizionarsi a destra di alcun elemento float, ma deve essere posizionato sotto qualsiasi elemento float che si trova a destra di esso.
clear:right;
cl:b
both; in CSS su un elemento, si indica che l’elemento non può posizionarsi né a sinistra né a destra di alcun elemento float, ma deve essere posizionato sotto qualsiasi elemento float che si trova sia a sinistra che a destra di esso.
clear:both;
d
block; in CSS su un elemento, si indica che l’elemento deve essere considerato come un elemento di tipo blocco, il che significa che occupa l’intera larghezza disponibile e inizia su una nuova linea.
display:block;
d:n
none; in CSS su un elemento, si indica che l’elemento non deve essere visualizzato sulla pagina. Questo valore di visualizzazione rende l’elemento completamente invisibile e non occupa spazio nella struttura della pagina.
display:none;
d:b
su un elemento, si indica che l’elemento deve essere considerato come un elemento di tipo blocco, il che significa che occupa l’intera larghezza disponibile e inizia su una nuova linea.
display:block;
d:f
in CSS su un contenitore padre, si attiva il modello di layout flessibile (Flexbox) per gestire il posizionamento e l’allineamento dei figli all’interno di quel contenitore. Questo offre un maggiore controllo sulla disposizione degli elementi all’interno di un layout.display:flex;
d:if
in CSS su un contenitore padre, si attiva il modello di layout flessibile (Flexbox) mantenendo però il comportamento inline dell’elemento contenitore.
Questo è utile quando si desidera che il contenitore Flexbox si comporti come un elemento inline, consentendo agli altri elementi di fluire intorno ad esso come se fosse un elemento di tipo inline.
display:inline-flex;
d:i
su un elemento, si imposta il comportamento inline per quell’elemento. Ciò significa che l’elemento si comporterà come se fosse una parola o una frase all’interno del flusso di testo, senza creare un nuovo blocco. Ecco alcune caratteristiche importanti di display: inline
display:inline;
d:ib
in CSS su un elemento, si combina il comportamento degli elementi inline e degli elementi blocco
display:inline-block;
d:li
su un elemento, si imposta il comportamento di quel elemento come un elemento di una lista
display:list-item;
d:ri
su un elemento, si specifica che l’elemento può essere visualizzato come un elemento blocco o come un elemento inline a seconda del contesto
display:run-in;
d:tb
table; viene utilizzata per specificare che un elemento HTML deve essere visualizzato come una tabella
display:table;
d:itb
viene utilizzata per specificare che un elemento HTML deve essere visualizzato come una tabella, ma all’interno di un flusso di testo come se fosse un elemento inline
display:inline-table;
d:tbcp
utilizzata per rendere un elemento HTML simile a un’etichetta di tabella. Ecco alcune informazioni importanti su display: table-caption;:
display:table-caption;
d:tbcl
di per sé non esiste. Tuttavia, è possibile utilizzare le seguenti proprietà CSS relative alle colonne di una tabella
display:table-column;
d:tbclg
utilizzata per definire un gruppo di colonne all’interno di una tabella HTML
display:table-column-group;
d:tbhg
table-header-group; viene utilizzata per definire un gruppo di righe di intestazione all’interno di una tabella HTML
display:table-header-group;
fl:r
viene utilizzata per spostare un elemento verso destra all’interno del suo contenitore
float:right;
cl
viene utilizzata per assicurarsi che un elemento non venga affiancato da elementi floating a destra o a sinistra, ma venga posizionato sotto di essi.
clear:both;
cl:l
viene utilizzata per assicurare che un elemento non venga affiancato da elementi floating a sinistra, ma venga posizionato sotto di essi.
clear:left;
cl:r
viene utilizzata per assicurare che un elemento non venga affiancato da elementi floating a destra, ma venga posizionato sotto di essi
clear:right;
cl:b
viene utilizzata per assicurare che un elemento non venga affiancato da elementi floating né a sinistra né a destra, ma venga posizionato sotto di essi
clear:both;
d
La proprietà CSS display: block; viene utilizzata per rendere un elemento un blocco a livello di blocco, che occupa l’intera larghezza disponibile e inizia su una nuova riga
display:block;
d:n
viene utilizzata per nascondere un elemento dalla visualizzazione sullo schermo senza occupare spazio nella struttura della pagina.
display:none;
d:b
viene utilizzata per rendere un elemento un blocco a livello di blocco, che occupa l’intera larghezza disponibile e inizia su una nuova riga
display:block;
d:f
viene utilizzata per creare un contenitore flessibile che contiene un gruppo di elementi (figli) disposti in modo flessibile all’interno di esso.
display:flex;
d:if
crea un contenitore flessibile in linea
display:inline-flex;
d:i
viene utilizzata per rendere un elemento un elemento in linea anziché un blocco separato
display:inline;
d:ib
combina le caratteristiche degli elementi in linea e dei blocchi
display:inline-block;
d:li
viene utilizzata per rendere un elemento un elemento di lista.
display:list-item;
d:tb
viene utilizzata per specificare che un elemento deve essere visualizzato come una tabella
display:table;
d:itb
viene utilizzata per specificare che un elemento deve essere visualizzato come una tabella, ma con il comportamento di un elemento inline.
Quando viene applicata a un elemento, questo elemento viene trattato come una tabella, ma viene posizionato come un elemento inline all’interno del flusso del testo.
display:inline-table;
d:tbcp
viene utilizzata per definire un elemento come una caption per una tabella. Quando viene applicata a un elemento, questo elemento viene visualizzato come la didascalia di una tabella.
display:table-caption;
d:tbhg
viene utilizzata per specificare che un elemento HTML deve essere visualizzato come un gruppo di intestazioni all’interno di una tabella. Questo gruppo di intestazioni appare sopra le righe regolari della tabella e normalmente include righe che fungono da intestazioni per le colonne della tabella.
display:table-header-group;
d:tbfg
viene utilizzata per specificare che un elemento HTML deve essere visualizzato come un gruppo di piè di pagina all’interno di una tabella.
Questo gruppo di piè di pagina appare sotto le righe regolari della tabella e normalmente include righe che fungono da piè di pagina per le colonne della tabella.
display:table-footer-group;
d:tbr
viene utilizzata per specificare che un elemento HTML deve essere visualizzato come una riga all’interno di una tabella
display:table-row;
d:tbrg
iene utilizzata per specificare che un insieme di righe all’interno di una tabella deve essere visualizzato come un gruppo di righe.
display:table-row-group;
d:tbc
viene utilizzata per specificare che un elemento HTML deve essere visualizzato come una cella all’interno di una tabella.
display:table-cell;
d:rb
viene utilizzata per definire un elemento come un contenitore per il testo ruby, che è un’annotazione testuale breve o un’altra forma di testo associata a un carattere o a una parola per scopi di spiegazione o pronuncia in lingue come il giapponese
display:ruby;
d:rbb
ruby-base; viene utilizzata per definire un elemento come il contenitore per il testo base di ruby, che è il testo principale a cui è associata un’annotazione testuale breve o un’altra forma di testo per spiegazione o pronuncia in lingue come il giapponese
display:ruby-base;
d:rbt
viene utilizzata per definire un elemento come il contenitore per il testo ruby, che è un’annotazione testuale breve o un’altra forma di testo che fornisce spiegazioni o pronunce per il testo base associato. Questo è spesso utilizzato nelle lingue come il giapponese per indicare la pronuncia dei caratteri.
display:ruby-text;
d:rbtg
ruby-text-group; non esiste nelle specifiche CSS standard. Potrebbe esserci stato un fraintendimento o un errore nella denominazione.
display:ruby-text-group;
v
viene utilizzata per nascondere un elemento senza occupare spazio nella pagina visibility:hidden;
v:v
iene utilizzata per rendere visibile un elemento che è stato precedentemente reso invisibile con visibility:hidden;. visibility:visible;
v:h
visibility:hidden; viene utilizzata per nascondere un elemento senza occupare spazio nella pagin
visibility:hidden;
v:c
non è valida per gli elementi HTML, ma è valida per le celle delle tabelle
visibility:collapse;
ov
overflow:hidden; viene utilizzata per gestire il comportamento di un elemento quando il suo contenuto supera le dimensioni dell’elemento stesso.
overflow:hidden;
ov:v
specifica che il contenuto dell’elemento può fuoriuscire dai limiti dell’elemento stesso se è più grande di quanto l’elemento possa contenere.
overflow:visible;
ov:h
viene utilizzata per gestire il comportamento di un elemento quando il suo contenuto supera le dimensioni dell’elemento stesso
overflow:hidden;
ov:s
overflow:scroll;
viene utilizzata per gestire il comportamento di un elemento quando il suo contenuto supera le dimensioni dell’elemento stesso.
ov:a
overflow:auto;
è una combinazione di overflow:hidden; e overflow:scroll;, e viene utilizzata per gestire automaticamente il comportamento di scorrimento di un elemento quando il suo contenuto supera le dimensioni dell’elemento stesso.
ovx
overflow-x:hidden;
viene utilizzata per nascondere il contenuto oltre i limiti dell’elemento lungo l’asse orizzontale, impedendo così lo scorrimento orizzontale.
ovx:v
overflow-x:visible;
viene utilizzata per consentire al contenuto di un elemento di essere visibile anche quando supera i limiti dell’elemento lungo l’asse orizzontale
ovx:h
overflow-x:hidden;
viene utilizzata per nascondere il contenuto che supera i limiti di un elemento lungo l’asse orizzontale, impedendo lo scorrimento orizzontale.
ovx:s
overflow-x:scroll;
overflow-x:scroll; viene utilizzata per aggiungere uno scorrimento orizzontale all’interno di un elemento HTML solo lungo l’asse x (orizzontale).
ovx:a
overflow-x:auto;
permette al browser di decidere se aggiungere o meno una barra di scorrimento orizzontale in base al contenuto dell’elemento.
ovy
overflow-y:hidden;
viene utilizzata per nascondere lo scorrimento verticale all’interno di un elemento HTML
ovy:v
overflow-y:visible;
viene utilizzata per consentire lo scorrimento verticale all’interno di un elemento HTML
ovy:h
overflow-y:hidden;
iene utilizzata per nascondere lo scorrimento verticale all’interno di un elemento HTML
ovy:s
overflow-y:scroll;
viene utilizzata per aggiungere una barra di scorrimento verticale a un elemento HTML solo quando il contenuto supera i limiti verticali dell’elemento stesso
ovy:a
overflow-y:auto;
determina il comportamento dello scorrimento verticale in un elemento HTML in base al contenuto al suo interno
Margin & Padding
m
margin:;
La proprietà margin è utilizzata per definire lo spazio esterno di un elemento e può assumere diversi valori a seconda delle esigenze di layout.
m:a
margin:auto;
Quando si applica margin: auto; a un elemento con una larghezza definita, l’elemento viene centrato orizzontalmente all’interno del contenitore.
mt
margin-top:;
è una parte della proprietà margin che controlla lo spazio superiore di un elemento rispetto agli elementi circostanti. Tuttavia, la regola margin-top necessita di un valore per specificare l’ammontare del margine superiore.
mt:a
margin-top:auto;
Quando si applica margin-top: auto; a un elemento con una certa altezza definita e si utilizza Flexbox, l’elemento viene centrato verticalmente all’interno del contenitore padre.
mr
margin-right:;
è parte della proprietà margin che controlla lo spazio destro di un elemento rispetto agli elementi circostanti.
mr:a
margin-right:auto;
si utilizza questa regola per centrare un elemento all’interno del suo contenitore orizzontalmente. Questa tecnica è comunemente usata insieme a Flexbox per allineare un elemento nel centro orizzontale.
mb
margin-bottom:;
è parte della proprietà margin che controlla lo spazio inferiore di un elemento rispetto agli elementi circostanti. Tuttavia, per far funzionare correttamente questa regola, è necessario specificare un valore per definire l’ammontare del margine inferiore.
mb:a
margin-bottom:auto;
si utilizza questa regola per centrare un elemento all’interno del suo contenitore verticalmente.
ml
margin-left:;
parte della proprietà margin che controlla lo spazio sinistro di un elemento rispetto agli elementi circostanti. Tuttavia, per far funzionare correttamente questa regola, è necessario specificare un valore per definire l’ammontare del margine sinistro.
ml:a
margin-left:auto;
si utilizza questa regola per centrare un elemento all’interno del suo contenitore sull’asse orizzontale. Questa tecnica è spesso utilizzata insieme ad altre proprietà CSS per creare layout flessibili e centrati.
p
padding:;
iene utilizzata per aggiungere spazio intorno al contenuto all’interno di un elemento HTML. Questo spazio extra può essere applicato sia all’interno che all’esterno del bordo di un elemento e può essere specificato per ogni lato (superiore, destro, inferiore, sinistro) separatamente o in un’unica dichiarazione.
pt
padding-top:;
La proprietà padding-top viene utilizzata per definire lo spazio di riempimento sopra l’elemento selezionato all’interno del suo contenitore.
pr
padding-right:;
La proprietà padding-right viene utilizzata per definire lo spazio di padding sul lato destro dell’elemento selezionato all’interno del suo contenitore.
pb
padding-bottom:;
La proprietà padding-bottom viene utilizzata per definire lo spazio di padding sotto l’elemento selezionato all’interno del suo contenitore.
pl
padding-left:;
La proprietà padding-left viene utilizzata per definire lo spazio di padding sul lato sinistro dell’elemento selezionato all’interno del suo contenitore.
Box Sizing
bxz
box-sizing:border-box;
viene utilizzata per modificare il modello di box-sizing di un elemento. Quando si applica box-sizing:border-box; a un elemento, il padding e il bordo dell’elemento vengono inclusi nella larghezza e nell’altezza totali dell’elemento stesso.
bxz:cb
box-sizing:content-box;
in CSS è il modello predefinito di box-sizing per gli elementi HTML. Quando non viene specificato alcun box-sizing, di default gli elementi utilizzano il modello content-box.
bxz:bb
box-sizing:border-box;
in CSS viene utilizzata per modificare il modello di box-sizing di un elemento. Quando si applica box-sizing:border-box; a un elemento, il padding e il bordo dell’elemento vengono inclusi nella larghezza e nell’altezza totali dell’elemento stesso.
bxsh
box-shadow:inset hoff voff blur
color;
viene utilizzata per aggiungere ombre a un elemento. L’ombra può essere esterna, come di solito si vede, o interna
bxsh:r
box-shadow:inset hoff voff blur
spread rgb(0, 0, 0);
indica che stai applicando un’ombra interna all’elemento con specifiche posizioni orizzontali e verticali, sfocatura, diffusione e colore.
bxsh:ra
box-shadow:inset h v blur spread
rgba(0, 0, 0, .5);
sta creando un’ombra interna all’elemento con una certa posizione orizzontale (h), posizione verticale (v), sfocatura (blur), estensione (spread) e colore (rgba(0, 0, 0, .5)). Puoi sostituire h, v, blur, spread e il colore con i valori che preferisci per ottenere l’effetto desiderato.
bxsh:n
box-shadow:none; w
width:;
rimuove l’ombra dall’elemento
w:a
width:auto;
fa sì che l’elemento si adatti automaticamente alla larghezza del suo contenuto,
h:a
height:auto;
consente all’elemento di espandersi o contrarsi in base al suo contenuto, garantendo che tutto il contenuto venga visualizzato senza essere tagliato o nascosto.
maw
max-width:;
consente di impostare la larghezza massima consentita per un elemento, oltre la quale l’elemento non si espanderà ulteriormente.
maw:n
max-width:none;
Rimuove qualsiasi limite massimo imposto alla larghezza di un elemento
mah
max-height:;
onsente di impostare l’altezza massima consentita per un elemento
mah:n
max-height:none;
Rimuove qualsiasi limite massimo imposto all’altezza di un elemento
miw
min-width:;
consente di impostare la larghezza minima consentita per un elemento
mih
min-height:;
consente di impostare l’altezza minima consentita per un elemento
Font
f
font:;
consente di impostare contemporaneamente diverse proprietà di un carattere in un’unica riga di codice
f+
font:1em Arial,sans-serif;
imposta il carattere per un elemento specificando la dimensione del carattere
fw
font-weight:;
consente di specificare il peso del carattere per un elemento. Il peso del carattere determina quanto spesso o quanto pesantemente viene visualizzato il testo.
fw:n
font-weight:normal;
imposta il peso del carattere al valore predefinito, che corrisponde al peso normale del carattere.
fw:b
font-weight:bold;
imposta il peso del carattere al valore “bold” (grassetto)
fw:br
font-weight:bolder;
aumenta il peso del carattere rispetto al valore corrente, rendendo il testo più spesso e visivamente più evidente rispetto al peso normale.
fw:lr
font-weight:lighter;
riduce il peso del carattere rispetto al valore corrente, rendendo il testo visivamente più leggero rispetto al peso normale.
fs, fs:i
font-style:italic;
imposta lo stile del carattere su “italic” (corsivo)
fs:n
font-style:normal;
impposta lo stile del carattere su “normal”. Ciò significa che il testo sarà visualizzato con lo stile di carattere predefinito, senza alcuna inclinazione o corsivo.
fs:o
font-style:oblique;
mposta lo stile del carattere su “oblique”. Ciò comporta una leggera inclinazione del testo, simile al corsivo, ma senza modificare effettivamente la forma dei glifi, a differenza dello stile “italic”.
fv
font-variant:;
utilizzata per specificare la variante del carattere, che determina la modalità in cui il testo viene visualizzato rispetto alla forma standard dei glifi
fv:n
font-variant:normal;
Imposta la variante del carattere al valore predefinito, che visualizza il testo utilizzando la forma standard dei glifi senza alcuna variazione.
fv:sc
font-variant:small-caps;
imposta la variante del carattere per visualizzare il testo utilizzando lettere maiuscole più piccole rispetto alle minuscole, creando l’effetto di lettere maiuscole più grandi.
fz
font-size:;
imposta la dimensione del carattere per un elemento.
fza
font-size-adjust:;
utilizzata per regolare la dimensione del carattere in un tipo di carattere che potrebbe essere ridimensionato in modo incoerente tra browser e sistemi operativi
fza:n
font-size-adjust:none;
imposta il valore della proprietà font-size-adjust su none. Questo significa che non viene applicato alcun aggiustamento della dimensione del carattere basato sulla proprietà font-size-adjust.
ff
font-family:;
è utilizzata per specificare la famiglia di caratteri utilizzata per il testo all’interno di un elemento HTML
ff:s
font-family:serif;
imposta la famiglia di caratteri per il testo all’interno di un elemento HTML su una famiglia di caratteri serif generica.
ff:ss
font-family:sans-serif;
imposta la famiglia di caratteri per il testo all’interno di un elemento HTML su una famiglia di caratteri sans-serif generica.
ff:c
font-family:cursive;
Imposta la famiglia di caratteri per il testo all’interno di un elemento HTML su una famiglia di caratteri cursive generica.
ff:f
font-family:fantasy;
imposta il tipo di carattere fantasy per un elemento HTML.
ff:m
font-family:monospace;
imposta il tipo di carattere monospace per un elemento HTML
ff:a
font-family: Arial, „Helvetica
Neue”, Helvetica, sans-serif;
imposta una serie di tipi di carattere di fallback per un elemento HTML.
ff:t
font-family: „Times New Roman”,
Times, Baskerville, Georgia, serif;
imposta una serie di tipi di carattere di fallback per un elemento HTML.
ff:v
font-family: Verdana, Geneva,
sans-serif;
imposta una serie di tipi di carattere di fallback per un elemento HTML.
fef
font-effect:;
utilizzata per applicare effetti speciali ai caratteri del testo, come ad esempio increspature, ombreggiature, sfumature o altri effetti decorativi.
fef:n
font-effect:none;
viene utilizzata per rimuovere eventuali effetti speciali predefiniti applicati al testo
Text
va
vertical-align:top;
si indica che l’elemento deve essere allineato in alto rispetto alla linea di base del contenitore.
va:sup
vertical-align:super;
si ordina al contenuto di essere allineato in alto rispetto alla linea di base e di essere posizionato leggermente sopra il testo normale nella riga di testo circostant
va:t
vertical-align:top;
viene utilizzata per allineare un elemento verticalmente in alto rispetto alla linea di base del contenitore in cui si trova
va:tt
vertical-align:text-top;
viene utilizzata per allineare un elemento verticalmente in modo che il bordo superiore dell’elemento si allinei con il bordo superiore del contenitore padre. Ecco alcuni punti chiave da tenere presente riguardo a vertical-
va:m
vertical-align:middle;
utilizzata per allineare un elemento verticalmente in modo che il suo centro sia allineato rispetto alla linea di base del contenitore in cui si trova. Ecco alcuni punti importanti
va:bl
vertical-align:baseline;
viene utilizzata per allineare un elemento verticalmente in modo che il suo linea di base si allinei con la linea di base del contenitore in cui si trova.
va:b
vertical-align:bottom;
utilizzata per allineare un elemento verticalmente in modo che il suo margine inferiore si allinei con il margine inferiore del contenitore in cui si trova.
va:tb
vertical-align:text-bottom;
viene utilizzata per allineare un elemento verticalmente in modo che il suo margine inferiore si allinei con il margine inferiore della linea di testo circostante
va:sub
vertical-align:sub;
utilizzata per posizionare un elemento in modo che il suo contenuto venga spostato verso il basso rispetto alla linea di testo circostante, come se fosse una parte di un testo in pedice
ta, ta:l
text-align:left;
viene utilizzata per allineare il testo all’interno di un elemento a sinistra
ta:c
text-align:center;
viene utilizzata per allineare il testo all’interno di un elemento al centro
ta:r
text-align:right;
viene utilizzata per allineare il testo all’interno di un elemento a destra
ta:j
text-align:justify;
justify viene utilizzata per allineare il testo all’interno di un elemento in modo che i margini destro e sinistro siano allineati, creando un aspetto giustificato.
ta-lst
text-align-last:;
viene utilizzata per specificare come l’allineamento dell’ultimo riga o l’ultima linea di un blocco di testo deve essere gestito all’interno di un elemento
tal:a
text-align-last:auto;
definisce text-align-last con il valore auto come un’impostazione predefinita che consente al browser di determinare l’allineamento dell’ultima riga di un blocco di testo in base al contesto e alle regole di layout definite
tal:l
text-align-last:left;
si specifica che l’ultima riga di un blocco di testo deve essere allineata a sinistra
tal:c
text-align-last:center;
si specifica che l’ultima riga di un blocco di testo deve essere allineata al centro
tal:r
text-align-last:right;
si specifica che l’ultima riga di un blocco di testo deve essere allineata a destra
td, td:n
text-decoration:none;
si specifica che nessun decorazione deve essere applicata al testo all’interno dell’elemento
td:u
text-decoration:underline;
si specifica che il testo all’interno dell’elemento deve essere sottolineato.
td:o
text-decoration:overline;
si specifica che il testo all’interno dell’elemento deve essere sovrastato da una linea sopra le parole
td:l
text-decoration:line-through;
indica che il testo all’interno dell’elemento deve essere barrato da una linea orizzontale
te
text-emphasis:;
si specifica che il testo all’interno dell’elemento deve essere enfatizzato con un effetto visivo.
te:n
text-emphasis:none;
si indica che l’enfasi del testo deve essere rimossa o disabilitata per il testo all’interno dell’elemento specificato
te:ac
text-emphasis:accent;
si sta applicando un effetto di enfasi al testo utilizzando un accento specifico.
te:dt
text-emphasis:dot;
si applica un effetto di enfasi al testo utilizzando dei punti per evidenziarlo.
te:c
text-emphasis:circle;
si applica un effetto di enfasi al testo utilizzando dei cerchi per evidenziarlo
te:ds
text-emphasis:disc;
si applica un effetto di enfasi al testo utilizzando dei dischi per evidenziarlo
te:b
text-emphasis:before;
text-emphasis è utilizzata per applicare enfasi al testo, ma non esiste un valore “before” per questa proprietà. I valori validi per text-emphasis sono none, accent, dot, circle, disc, ideographic, e marx.
te:a
text-emphasis:after;
text-emphasis non ha un valore “after”. I valori validi per text-emphasis sono none, accent, dot, circle, disc, ideographic e marx.
ti
text-indent:;
viene utilizzata per impostare l’indentazione del primo carattere di un blocco di testo
ti:-
text-indent:-9999px;
viene utilizzata per impostare l’indentazione del primo carattere di un blocco di testo. Puoi utilizzare questa proprietà per spostare il testo all’interno del suo contenitore, creando un rientro all’inizio del paragrafo o di un altro elemento di testo.
tj
text-justify:;
viene utilizzata per controllare il modo in cui il testo viene giustificato all’interno di un elemento
tj:a
text-justify:auto;
ndica che il browser sceglie il metodo di giustificazione più appropriato in base al contenuto e alle impostazioni predefinite.
tj:iw
text-justify:inter-word;
indica che il testo viene giustificato distribuendo lo spazio tra le parole
tj:ii
text-justify:inter-ideograph;
iene utilizzata per controllare il modo in cui il testo contenente ideogrammi (caratteri cinesi, giapponesi, coreani, ecc.) viene giustificato all’interno di un elemento
tj:ic
text-justify:inter-cluster;
viene utilizzata per controllare il modo in cui il testo contenente cluster di caratteri viene giustificato all’interno di un elemento
tj:d
text-justify:distribute;
text-justify con il valore distribute viene utilizzata per controllare la distribuzione dello spazio tra le parole all’interno di un blocco di testo giustificato
tj:k
text-justify:kashida;
è utilizzata per controllare la giustificazione del testo in modo specifico per le lingue che utilizzano kashida, una caratteristica tipografica che allunga determinate lettere per migliorare la giustificazione del testo.
tj:t
text-justify:tibetan;
è utilizzata per controllare la giustificazione del testo in lingue che seguono le regole tipografiche tibetane
Background
bg
background:#000;
server per mettere un colore come sfondo
bg+
background:#fff url() 0 0
no-repeat;
imposta lo sfondo di un elemento con colore bianco (#fff), senza alcuna immagine di sfondo (url()), posizionato in alto a sinistra (0 0) e senza ripetizione (no-repeat).
bg:n
background:none;
rimuove qualsiasi sfondo impostato per un elemento, lasciandolo trasparente rispetto allo sfondo sottostante
bgc
background-color:#fff;
imposta il colore di sfondo di un elemento come bianco
bgc:t
background-color:transparent;
imposta il colore di un sfondo di un elemento come trasparente-
bgi
background-image:url();
imposta l’immagine di sfondo di un elemento utilizzando l’URL specificato.
bgi:n
background-image:none;
rimuove l’immagine di sfondo di un elemento, rendendo il background trasparente o del colore specificato.
bgr
background-repeat:;
Specifica come un’immagine di sfondo deve essere ripetuta
bgr:n
background-repeat:no-repeat;
specifica che l’immagine di sfondo non deve essere ripetuta. Quindi, l’immagine di sfondo verrà visualizzata solo una volta senza essere duplicata orizzontalmente o verticalmente.
bgr:x
background-repeat:repeat-x;
L’Immagine viene ripetuta solo orizzontalmente, quindi si estenderà orizzontalmente per riempire il contenitore ma non verrà ripetuta verticalmente
bgr:y
background-repeat:repeat-y;
L’immagine viene ripetuta solo verticalmente, quindi si estenderà verticalmente per riempire il contenitore ma non verrà ripetuta orizzontalmente
bga
background-attachment:;
determina se un’immagine di sfondo scorre con il contenuto della pagina o rimane fissa mentre si scorre la pagina
bga:f
background-attachment:fixed;
determina se un’immagine di sfondo scorre con il contenuto della pagina o rimane fissa mentre si scorre la pagina
bga:s
background-attachment:scroll;
determina se un’immagine di sfondo scorre con il contenuto della pagina o rimane fissa mentre si scorre la pagina
bgp
background-position:0 0;
viene utilizzata per impostare la posizione di un’immagine di sfondo all’interno del suo contenitore
bgpx
background-position-x:;
viene utilizzata per impostare la posizione orizzontale di un’immagine di sfondo all’interno del suo contenitor
bgpy
background-position-y:;
viene utilizzata per impostare la posizione verticale di un’immagine di sfondo all’interno del suo contenitore. Quando si imposta “background-position-y
bgbk
background-break:;
specifica come un’immagine di sfondo deve essere ripartita tra le linee in un blocco multicolonna.
bgbk:bb
background-break:bounding-box;
specifica che l’immagine di sfondo deve essere ripartita tra le linee in un blocco multicolonna all’interno del rettangolo che contiene il contenuto, senza interruzioni
bgbk:c
background-break:continuous;
specifica che l’immagine di sfondo viene continuata su entrambi i lati dell’area di interruzione senza interruzion
bgcp
background-clip:padding-box;
determina l’area a cui è applicato il background di un elemento (come colore, immagini, gradienti, ecc.). Utilizzando il valore padding-box, il background si estende fino al bordo interno del padding dell’elemento. Vediamo in dettaglio come funziona
bgcp:bb
background-clip:border-box;
indica che il background viene ridimensionato in modo che inizi e finisca al bordo esterno del bordo del contenitore.
bgcp:pb
background-clip:padding-box;
specifica che il back ground viene ridimensionato per iniziare e terminare al bordo esterno del padding del contenitore, escludendo l’area del bordo e del margine.
bgcp:cb
background-clip:content-box;
etermina che il background (colore, immagine, gradiente, ecc.) di un elemento si estende solo fino all’area del contenuto, escludendo sia i bordi che il padding.
bgo
background-origin:;
specifica l’area di posizionamento del background di un elemento. Questa proprietà determina l’origine del posizionamento del background rispetto alla scatola di contenimento dell’elemento.
bgo:pb
background-origin:padding-box;
specifica che l’origine del background di un elemento è il bordo interno del padding. Questo significa che l’immagine di sfondo o il colore inizierà a essere posizionato dall’area del padding, escludendo i bordi.
bgo:bb
background-origin:border-box;
specifica che l’origine del background di un elemento è il bordo esterno dell’elemento stesso. Questo significa che l’immagine di sfondo o il colore inizierà a essere posizionato dall’area del bordo, coprendo anche i bordi.
bgo:cb
background-origin:content-box;
specifica che l’origine del background di un elemento è il bordo dell’area del contenuto. Questo significa che l’immagine di sfondo o il colore inizierà a essere posizionato dall’area del contenuto, escludendo sia i bordi che il padding.
bgsz
background-size:;
specifica le dimensioni di un’immagine di sfondo. Può essere utilizzata per ridimensionare l’immagine di sfondo rispetto all’elemento in cui è applicata.
bgsz:a
background-size:auto;
specifica che l’immagine di sfondo deve mantenere le sue dimensioni originali. Questo è il comportamento predefinito se non viene specificato alcun valore per background-size.
bgsz:ct
background-size:contain;
pecifica che l’immagine di sfondo deve mantenere le sue dimensioni originali. Questo è il comportamento predefinito se non viene specificato alcun valore per background-size.
bgsz:cv
background-size:cover;
è utilizzata per ridimensionare l’immagine di sfondo di un elemento in modo che copra completamente l’area del contenitore. L’immagine manterrà le sue proporzioni originali, ma potrebbe essere ritagliata per adattarsi completamente al contenitore.
Color
c
color:#000;
viene utilizzata per specificare il colore del testo all’interno di un elemento HTML. Il valore della proprietà può essere specificato in diversi formati, tra cui i nomi dei colori, i codici esadecimali o RGB.
c:r
color:rgb(0, 0, 0);
mposta il colore del testo all’interno degli elementi HTML su nero, utilizzando il formato di specifica del colore RGB.
c:ra
color:rgba(0, 0, 0, .5);
imposta il colore del testo all’interno degli elementi HTML su nero con un’opacità del 50%, utilizzando il formato RGBA per specificare il colore.
op
opacity:;
imposta il livello di trasparenza di un elemento e di tutti i suoi contenuti, inclusi il testo e gli altri elementi figlio. Questo valore può variare da 0 a 1
Generated content
cnt
content:”;
viene utilizzata principalmente con i pseudo-elementi (::before e ::after) per inserire contenuti generati tramite CSS. Questa proprietà permette di aggiungere del contenuto testuale o di generare del contenuto tramite i valori speciali come attr().
cnt:n, ct:n
content:normal;
iene utilizzata principalmente con i pseudo-elementi (::before e ::after) per inserire contenuti generati tramite CSS.
cnt:oq, ct:oq
content:open-quote;
in CSS viene utilizzata per inserire automaticamente il carattere di apertura delle virgolette specificato dal sistema di scrittura, come specificato nella proprietà quotes.
cnt:cq, ct:cq
content:close-quote;
n CSS viene utilizzata per inserire automaticamente il carattere di chiusura delle virgolette specificato dal sistema di scrittura, come definito dalla proprietà quotes.
cnt:ncq, ct:ncq
content:no-close-quote;
non è una sintassi standard in CSS. Tuttavia, puoi utilizzare content: close-quote; seguito da un’altra regola per rimuovere effettivamente le virgolette chiuse.
cnt:a, ct:a
content:attr();
viene utilizzata per inserire il valore di un attributo HTML come contenuto all’interno di un elemento, principalmente in combinazione con i pseudo-elementi (::before e ::after).
cnt:c, ct:c
content:counter();
viene utilizzata per inserire il valore di un contatore CSS come contenuto all’interno di un elemento, principalmente in combinazione con i pseudo-elementi (::before e ::after).
cnt:cs, ct:cs
content:counters();
viene utilizzata per inserire i valori di più contatori CSS come contenuto all’interno di un elemento, principalmente in combinazione con i pseudo-elementi (::before e ::after).
ct
content:;
il che significa che non inserisce alcun contenuto aggiuntivo all’interno dell’elemento o del suo pseudo-elemento (::before o ::after).
q
quotes:;
viene utilizzata per specificare i simboli da utilizzare per i livelli di annidamento degli elementi di un documento durante la formattazione tramite content: open-quote e content: close-quote.
q:n
quotes:none;
disabilitare l’uso delle virgolette nei contenuti generati
q:ru
quotes:‘\00AB‘ ‚\00BB‘ ‚\201E‘
‚\201C‘;
viene utilizzata per definire le coppie di virgolette da utilizzare per i diversi livelli di annidamento degli elementi di un documento. Ogni coppia di virgolette è definita come due stringhe separate da uno spazio, dove la prima stringa rappresenta il simbolo di apertura delle virgolette e la seconda stringa rappresenta il simbolo di chiusura delle virgolette.
q:en
quotes:‘\201C‘ ‚\201D‘ ‚\2018‘
‚\2019‘;
viene utilizzata per definire le coppie di virgolette da utilizzare per i diversi livelli di annidamento degli elementi di un documento. Ogni coppia di virgolette è definita come due stringhe separate da uno spazio, dove la prima stringa rappresenta il simbolo di apertura delle virgolette e la seconda stringa rappresenta il simbolo di chiusura delle virgolette.
coi
counter-increment:;
iene utilizzata per incrementare il valore di uno o più contatori CSS
cor
counter-reset:;
viene utilizzata per impostare il valore di uno o più contatori CSS su un valore specifico o su 0
Outline
ol
outline:;
iene utilizzata per impostare lo stile, lo spessore e il colore dell’outline (contorno) di un elemento HTML
ol:n
outline:none;
viene utilizzata per rimuovere l’outline (contorno) predefinito dagli elementi HTML.
olo
outline-offset:;
utillizzata per impostare lo spazio tra l’elemento e il suo controno
olw
outline-width:;
a proprietà CSS outline-width viene utilizzata per impostare lo spessore dell’outline di un elemento
olw:tn
outline-width:thin;
viene utilizzata per impostare lo spessore dell’outline di un elemento HTML
olw:m
outline-width:medium;
Specifica per impostare lo spessore medio di un eleemento HTML
olw:tc
outline-width:thick;
si specifica che l’outline dell’elemento avrà uno spessore spesso
ols
outline-style:;
viene utilizzata per impostare lo stile dell’outline di un elemento HTML
ols:n
outline-style:none;
rimuove lo stile dell’outline da un elemento HTML
ols:dt
outline-style:dotted;
per mettere uno stile di linea di punti per l’outline di un elemento HTML
ols:ds
outline-style:dashed;
si definisce uno stile di linea trateggiata per l’outline di un elemento HTML
ols:s
outline-style:solid;
ols:db
outline-style:double;
ols:g
outline-style:groove;
ols:r
outline-style:ridge;
si definisce uno stile di linea continua per l’outline di un HTML
ols:i
outline-style:inset;
serve per ottenere un effeto che simula un’ombra interna risetto al bordo dell’elemento
ols:o
outline-style:outset;
si ottiene un effetto che simula un rilievo esterno rispetto al bordo dell’elemento
olc
outline-color:#000;
definisce il colore dell’outline di un elemento HTML
olc:i
outline-color:invert;
definisce il colore dell’outline di un elemento HTML come invertito
Tables
tbl
table-layout:;
definisce lo stile di layout di una tabella HTML
tbl:a
table-layout:auto;
definisce lo stile di layout di una tabella HTML, Le colonne si adattano automaticamente della dimensione del contenuto.
cps
caption-side:;
definisce il lato in cui appare la didascalia di una tabella HTML. Il valore vuoto o non specificato non applica alcuna posizione specifica per la didascalia,
cps:t
caption-side:top;
si specifica che la didascalia della tabella dovrebbe apparire nella parte superiore della tabella stessa.
cps:b
caption-side:bottom;
si specifica che la didascalia della tabella dovrebbe apparire nella parte inferiore della tabella stessa
ec:s
empty-cells:show;
si specifica che le celle vuote devono essere visualizzate. Di conseguenza, il browser mostrerà le celle vuote all’interno della tabella
ec:h
empty-cells:hide;
si specifica che le celle vuote devono essere nascoste. Di conseguenza, il browser non mostrerà le celle vuote all’interno della tabella.
Border
bd
border:;
La proprietà border in CSS viene utilizzata per definire lo stile, lo spessore e il colore dei bordi di un elemento.
bd+
border:1px solid #000;
l’elemento avrà un bordo di 1 pixel di spessore, di colore nero e di tipo continuo.
bd:n
border:none;
si sta specificando che non ci saranno bordi visibili per gli elementi selezionati.
bdbk
border-break:close;
si sta specificando il comportamento di come i bordi degli elementi di una tabella vengono gestiti e visualizzati
bdbk:c
border-break:close;
si sta specificando il comportamento di come i bordi degli elementi di una tabella vengono gestiti e visualizzati
bdcl
border-collapse:;
si sta specificando il comportamento di come i bordi degli elementi di una tabella vengono gestiti e visualizzat
bdcl:c
border-collapse:collapse;
si sta specificando il comportamento di come i bordi degli elementi di una tabella vengono gestiti e visualizzati
bdcl:s
border-collapse:separate;
si sta specificando il comportamento di come i bordi degli elementi di una tabella vengono gestiti e visualizzati
bdc
border-color:#000;
si sta specificando il colore dei bordi degli elementi. In questo caso, #000 rappresenta il colore nero. Quindi, questa proprietà imposta il colore dei bordi degli elementi a nero.
bdc:t
border-color:transparent;
si sta specificando che i bordi degli elementi devono essere trasparenti, cioè non visibili. Questo è utile quando si desidera creare un effetto di assenza di bordi intorno a un elemento.
bdi
border-image:url();
consente di specificare un’immagine da utilizzare come bordo per un elemento. Tuttavia, per utilizzare questa proprietà correttamente, è necessario specificare l’URL dell’immagine da utilizzare tra parentesi tonde all’interno delle parentesi graffe.
bdi:n
border-image:none;
Questo comando rimuove l’immagine di sfondo precedentemente definita come bordo e restituisce il bordo predefinito dell’elemento
bdf
border-image-repeat,
utilizzata per specificare come ripetere o ridimensionare un’immagine di bordo
bdlen
border-width
Imposta la larghezza del bordo di un elemento
bdlen:a
border-width: auto;
viene impostata manualmente specificando un valore in pixel, em, rem o un’altra unità di misura
bdsp
border-spacing:;
per specificare lo spazio tra i bordi di celle adiacenti in tabelle HTM
bds
border-style:;
viene utilizzata per specificare lo stile dei bordi di un elemento HTML
bds:n
border-style:none;
si sta essenzialmente dichiarando che non si desidera alcun bordo visibile per l’elemento specificato. Questo stile rimuoverà completamente il bordo dall’elemento, creando un aspetto senza bordi.
bds:h
border-style:hidden;
Questo stile è simile a none, poiché non visualizza un bordo attorno all’elemento, ma con una sottile differenza. Mentre none non riserva spazio per il bordo, hidden riserva lo spazio per il bordo, ma non lo visualizza.
bds:dt
border-style:dotted;
viene utilizzata per creare un bordo con uno stile a puntini intorno a un elemento
bds:ds
border-style:dashed;
viene utilizzata per creare un bordo con uno stile a tratteggio intorno a un elemento
bds:s
border-style:solid;
viene utilizzata per creare un bordo con uno stile solido intorno a un elemento
bds:db
border-style:double;
viene utilizzata per creare un bordo con uno stile a doppia linea intorno a un elemento
bds:g
border-style:groove;
crea un effetto di incavo tridimensionale intorno all’elemento
bds:r
border-style:ridge;
crea un effetto di rilievo tridimensionale intorno all’elemento.
bds:i
border-style:inset;
crea un effetto di incavo intorno all’elemento. Ecco come viene visualizzato il bordo con lo stile “inset”
bds:o
border-style:outset;
crea un effetto di rilievo intorno all’elemento. Ecco come viene visualizzato il bordo con lo stile “outse
bdt, bt
border-top:;
uando si utilizza questa proprietà, è necessario specificare lo stile, lo spessore e il colore del bordo superiore.
bdt+
border-top:1px solid #000;
imposta un bordo superiore di 1 pixel di spessore, con uno stile solido e di colore nero (codice colore #000).
bdt:n
border-top:none;
Questo significa che non ci sarà alcun bordo visibile nella parte superiore dell’elemento.
bdtw
border-top-width:;
pecifica lo spessore del bordo superiore di un elemento HTML
bdts
border-top-style:;
serve per dare uno stile al bordo come più solido o puntini e cosi etc…
bdts:n
border-top-style:none;
fondamentalmente rimuovendo lo stile del bordo superiore di un elemento
bdtc
border-top-color:#000;
impostando il colore del bordo superiore di un elemento come nero. Questo valore indica che il bordo superiore dell’elemento sarà di colore nero.
bdtc:t
border-top-color:transparent;
si sta essenzialmente rendendo trasparente il colore del bordo superiore di un elemento
bdr, br
border-right:;
viene utilizzata per impostare lo stile, lo spessore e il colore del bordo destro di un elemento
bdr+
border-right:1px solid #000;
imposta un bordo destro con le seguenti caratteristiche:
Spessore: 1 pixel
Stile: solid (bordo continuo)
Colore: #000 (nero)
bdr:n
border-right:none;
viene utilizzata per rimuovere il bordo destro di un elemento. Quando si imposta none come valore per il bordo destro, il bordo non verrà visualizzato su quel lato dell’elemento.
bdrw
border-right-width:;
per indicare lo spessore del bordo destro di un elemento
bdrst
border-right-style:;
richiede di specificare uno stile per il bordo destro di un elemento
Lists
lis:n
list-style:none;
viene utilizzata per rimuovere tutti i marcatori degli elementi di un elenco, rendendo gli elementi dell’elenco privi di simboli o numeri di elencazione.
lisp
list-style-position:;
viene utilizzata per specificare se i marcatori di un elenco devono essere posizionati all’interno o all’esterno del contenuto dell’elemento dell’elenco.
lisp:i
list-style-position:inside;
specifica che i marcatori degli elementi di un elenco devono essere posizionati all’interno del contenuto dell’elemento dell’elenco. Ciò significa che i marcatori (come punti o numeri di elencazione) saranno allineati con il testo dell’elemento dell’elenco.
lisp:o
list-style-position:outside;
specifica che i marcatori degli elementi di un elenco devono essere posizionati all’esterno del contenuto dell’elemento dell’elenco. Ciò significa che i marcatori (come punti o numeri di elencazione) saranno posizionati al di fuori del flusso normale del testo.
list
list-style-type:;
tilizzata per specificare il tipo di marcatore da utilizzare per gli elementi di un elenco
list:n
list-style-type:none;
viene utilizzata per rimuovere completamente i marcatori dagli elementi di un elenco, rendendo l’elenco senza punti, numeri o altri tipi di marcatori.
list:d
list-style-type:disc;
si specifica che i marcatori di elenco saranno dei dischi pieni
list:c
list-style-type:circle;
su un elemento di elenco, si specifica che i marcatori di elenco saranno dei cerchi vuoti
list:s
list-style-type:square;
su un elemento di elenco, si specifica che i marcatori di elenco saranno dei quadrati vuoti
list:dc
list-style-type:decimal;
su un elemento di elenco, si specifica che i marcatori di elenco saranno numeri decimali
list:dclz
list-style-type:decimal-leadingzero;
su un elemento di elenco, si specifica che i marcatori di elenco saranno numeri decimali con uno zero iniziale per numeri inferiori a 10
list:lr
list-style-type:lower-roman;
su un elemento di elenco, si specifica che i marcatori di elenco saranno numeri romani minuscoli.
list:ur
list-style-type:upper-roman;
u un elemento di elenco, si specifica che i marcatori di elenco saranno numeri romani maiuscoli.
lisi
list-style-image:;
consente di specificare un’immagine da utilizzare come marcatori per gli elementi di un elenco
lisi:n
list-style-image:none;
su un elemento di elenco, si specifica che non deve essere utilizzata alcuna immagine come marcatori per gli elementi dell’elenco
Print
pgbb
page-break-before:;
viene utilizzata per specificare se deve essere inserito un’interruzione di pagina prima di un elemento
pgbb:au
page-break-before:auto;
ecide se inserire un’interruzione di pagina prima dell’elemento. In pratica, il browser valuterà il contenuto della pagina e deciderà se è necessario inserire un’interruzione di pagina prima dell’elemento specificato.
pgbb:al
page-break-before:always;
Indica che verrà sempre inserita un’interruzione di pagina prima dell’elemento specificato
pgbb:l
page-break-before:left;
indica che verrà inserita un’interruzione di pagina prima dell’elemento specificato solo se la pagina successiva è una pagina dispari (sinistra)
pgbb:r
page-break-before:right;
indica che verrà inserita un’interruzione di pagina prima dell’elemento specificato solo se la pagina successiva è una pagina pari (destra)
pgbi
page-break-inside:;
viene utilizzata per specificare se un elemento può essere spezzato all’interno di una pagina durante la stampa.
pgbi:av
page-break-inside:avoid;
viene utilizzata per specificare se un elemento può essere spezzato all’interno di una pagina durante la stampa.
permette all’elemento di essere spezzato all’interno di una pagina. Se impostato su avoid,
pgba
page-break-after:;
È utile per controllare la formattazione della stampa di documenti o pagine web, consentendo di gestire meglio la disposizione degli elementi su pagine
pgba:au
page-break-after:auto;
che non forza alcuna interruzione di pagina dopo l’elemento. Altri valori includono always per forzare sempre un’interruzione
pgba:al
page-break-after:always;
viene utilizzata per forzare l’inserimento di un’interruzione di pagina dopo l’elemento specificato durante la stampa di un documento
pgba:l
page-break-after:left;
viene utilizzata per forzare l’inserimento di un’interruzione di pagina dopo l’elemento specificato in modo che l’elemento successivo venga posizionato sulla pagina sinistra quando si stampa un documento in formato di pagina doppia.
pgba:r
page-break-after:right;
viene utilizzata per forzare l’inserimento di un’interruzione di pagina dopo l’elemento specificato in modo che l’elemento successivo venga posizionato sulla pagina destra quando si stampa un documento in formato di pagina doppia.
orp
orphans:;
viene utilizzata per controllare il numero minimo di righe che devono essere visualizzate in fondo a una pagina prima che venga inserita un’interruzione di pagina
wid
widows:;
viene utilizzata per controllare il numero minimo di righe che devono essere visualizzate all’inizio di una nuova pagina prima che venga inserita un’interruzione di pagina. Questa proprietà è comunemente utilizzata nella formattazione della stampa dei documenti.
Others
!
important
viene utilizzato per assegnare la massima priorità a una regola CSS specifica, ignorando qualsiasi altra regola che possa sovrascriverla
@f
@font-face {
font-family:;
src:url(|);
}
utilizzata per definire nuovi font personalizzati da utilizzare nelle pagine web
ac
align-content:;
viene utilizzata nei layout di tipo flexbox per allineare le righe di elementi all’interno di un contenitore flessibile lungo l’asse del blocco (perpendicolare all’asse principale)
ac:c
align-content:center;
viene utilizzata in un layout flexbox per allineare le righe di elementi al centro del contenitore lungo l’asse del blocco (asse verticale).
ac:fe
align-content:flex-end;
viene utilizzata in un layout flexbox per allineare le righe di elementi alla fine del contenitore lungo l’asse del blocco (asse verticale).
ac:fs
align-content:flex-start;
viene utilizzata in un layout flexbox per allineare le righe di elementi all’inizio del contenitore lungo l’asse del blocco (asse verticale).
ac:s
align-content:stretch;
viene utilizzata in un layout flexbox per far sì che le righe di elementi all’interno del contenitore si estendano per riempire uniformemente l’altezza dell’asse trasversale.
ac:sa
align-content:space-around;
viene utilizzata nei layout flexbox per distribuire uniformemente lo spazio tra le righe di elementi all’interno del contenitore, lasciando spazi uguali su entrambi i lati di ogni riga e uno spazio aggiuntivo alla fine e all’inizio.
ac:sb
align-content:space-between;
viene utilizzata nei layout flexbox per distribuire uniformemente lo spazio tra le righe di elementi all’interno del contenitore, lasciando spazi uguali tra le righe e nessuno spazio extra all’inizio e alla fine.
ai
align-items:;
viene utilizzata per allineare gli elementi lungo l’asse trasversale del contenitore flessibile
ai:b
align-items:baseline;
in un layout flexbox, gli elementi vengono allineati in base alla loro linea di base. Questo significa che i bordi inferiori degli elementi vengono allineati lungo una linea immaginaria, chiamata “linea di base”.
ai:c
align-items:center;
gli elementi vengono allineati verticalmente al centro del contenitore flessibile lungo l’asse trasversale. Questo significa che gli elementi saranno posizionati al centro rispetto all’altezza del contenitore flessibile.
ai:fe
align-items:flex-end;
elementi vengono allineati verso la fine del contenitore lungo l’asse trasversale. Ciò significa che saranno posizionati alla fine rispetto all’altezza del contenitore flessibile. In altre parole, gli elementi saranno allineati all’estremità opposta rispetto a quella da cui inizia il flusso dei contenuti.
ai:fs
align-items:flex-start;
gli elementi vengono allineati verso l’inizio del contenitore lungo l’asse trasversale. Questo significa che saranno posizionati all’inizio rispetto all’altezza del contenitore flessibile. In altre parole, gli elementi saranno allineati all’estremità da cui inizia il flusso dei contenuti
ai:s
align-items:stretch;
viene utilizzata per allineare gli elementi all’interno di un contenitore flessibile lungo l’asse trasversale e far sì che essi si estendano per occupare l’intera altezza del contenitore.
Animation
anim
animation:;
viene utilizzata per specificare le animazioni da applicare agli elementi. Quando si utilizza animation, è possibile definire diversi aspetti dell’animazione, come la durata, il tipo di animazione, il ritardo prima che l’animazione inizi, il numero di volte che l’animazione deve ripetersi e altro ancora.
anim-
animation:name duration timingfunction delay iteration-count
direction fill-mode;
consente di combinare diverse sotto-proprietà per definire un’animazione per un elemento.
animdel
animation-delay:time;
viene utilizzata per specificare il ritardo prima che un’animazione inizi sull’elemento interessato. Questo ritardo può essere espresso in unità di tempo come secondi (s) o millisecondi (ms).
animdir
animation-direction:normal;
specifica che l’animazione viene riprodotta in avanti e poi si ripete da capo. Quando si imposta normal, l’animazione scorre dalla prima alla ultima iterazione nella sequenza definita senza invertire la direzione.
animdir:a
animation-direction:alternate;
specifica che l’animazione viene riprodotta in avanti, poi all’indietro e così via, alternando la direzione ad ogni iterazione. Quando si imposta alternate, l’animazione scorre avanti e indietro in modo ciclico.
animdir:ar
animation-direction:alternatereverse;
specifica che l’animazione viene riprodotta all’indietro, poi in avanti e così via, alternando la direzione ad ogni iterazione. Quando si imposta alternatereverse, l’animazione scorre all’indietro e poi in avanti in modo ciclico
animdir:n
animation-direction:normal;
specifica che l’animazione viene riprodotta in avanti senza cambiare direzione. Quando si imposta normal, l’animazione scorre in avanti in modo continuo.
animdir:r
animation-direction:reverse;
specifica che l’animazione viene riprodotta all’indietro anziché in avanti. Quando si imposta reverse, l’animazione scorre all’indietro invece che in avanti.
animdur
animation-duration:0s;
in CSS specifica la durata di un’animazione, espressa in secondi o millisecondi. Quando si imposta 0s, si indica che l’animazione ha una durata di zero secondi, quindi viene eseguita istantaneamente senza transizioni o effetti di animazione visibili.
animfm
animation-fill-mode:both;
è utilizzata per specificare come gli stili devono essere applicati prima e dopo l’esecuzione di un’animazione. Quando si imposta both, significa che gli stili definiti nelle fasi iniziali e finali dell’animazione (keyframes) devono essere applicati sia prima che dopo l’animazione.
animfm:b
animation-fill-mode:backwards;
viene utilizzata per specificare come gli stili devono essere applicati prima che inizi un’animazione. Quando si imposta backwards, significa che gli stili definiti nella prima fase dell’animazione (keyframe 0%) devono essere applicati all’elemento animato prima che l’animazione inizi effettivamente.
animfm:bt, animfm:bh
animation-fill-mode:both;
è utilizzata per specificare come gli stili devono essere applicati prima e dopo l’esecuzione di un’animazione. Quando si imposta both, gli stili definiti nelle fasi iniziali e finali dell’animazione (keyframes) vengono applicati sia prima che dopo l’animazione stessa
animfm:f
animation-fill-mode:forwards;
viene utilizzata per specificare come gli stili devono essere applicati dopo che un’animazione è stata completata. Quando si imposta forwards, gli stili definiti nell’ultimo frame dell’animazione (keyframe al 100%) vengono mantenuti dopo il termine dell’animazione.
animic
animation-iteration-count:1;
viene utilizzata per specificare quante volte un’animazione deve essere riprodotta. Quando si imposta il valore a 1, l’animazione verrà eseguita una sola volta.
animic:i
animation-iteration-count:infinite;
viene utilizzata per specificare che un’animazione deve essere riprodotta un numero infinito di volte, ovvero continuamente.
animn
animation-name:none;
iene utilizzata per rimuovere un’animazione da un elemento. Quando si imposta none come valore per animation-name, l’elemento non applicherà alcuna animazione.
animps
animation-play-state:running;
viene utilizzata per specificare che un’animazione deve essere in esecuzione. Questo significa che l’animazione verrà riprodotta normalmente.
animps:p
animation-play-state:paused;
ene utilizzata per mettere in pausa un’animazione. Quando si imposta paused come valore per animation-play-state, l’animazione si fermerà al suo stato corrente.
animps:r
animation-play-state:running;
viene utilizzata per specificare che un’animazione deve essere in esecuzione. Quando si imposta running come valore per animation-play-state, l’animazione riprenderà la sua esecuzione.
animtf
animation-timing-function:linear;
viene utilizzata per specificare la modalità di transizione tra i diversi stati di un’animazione. Quando si imposta linear come valore per animation-timing-function, l’animazione si sviluppa in modo costante nel tempo.
animtf:cb
animation-timing-function:cubicbezier(0.1, 0.7, 1.0, 0.1);
definisce una funzione di temporizzazione cubica di Bezier per controllare il modo in cui un’animazione cambia nel tempo. Questa funzione consente di creare transizioni più complesse e personalizzate rispetto ai valori predefiniti come linear o ease.
animtf:e
animation-timing-function:ease;
viene utilizzata per specificare una funzione di temporizzazione predefinita che fornisce un’animazione con una transizione graduale all’inizio e alla fine, ma più veloce nel mezzo
animtf:ei
animation-timing-function:ease-in;
viene utilizzata per specificare una funzione di temporizzazione che fornisce un’inizio graduale all’animazione. Questo significa che l’animazione inizia lentamente e poi accelera verso la fine.
animtf:eio
animation-timing-function:ease-inout;
viene utilizzata per specificare una funzione di temporizzazione che fornisce un’inizio graduale, una transizione graduale nel mezzo e una fine graduale all’animazione. Questo valore combina gli effetti di ease-in e ease-out, creando un’animazione che inizia e finisce gradualmente mentre accelera e decelera nel mezzo.
animtf:eo
animation-timing-function:ease-out;
viene utilizzata per specificare una funzione di temporizzazione che fornisce un’inizio rapido all’animazione seguito da una decelerazione graduale verso la fine. Questo significa che l’animazione inizia rapidamente e poi rallenta gradualmente mentre si avvicina alla fine.
animtf:l
animation-timing-function:linear;
iene utilizzata per specificare una funzione di temporizzazione lineare per un’animazione. Questo significa che l’animazione si svolgerà con un movimento costante, senza accelerazioni o decelerazioni durante tutto il suo corso.
ap
appearance:${none};
viene utilizzata per rimuovere lo stile predefinito del sistema operativo dai controlli dell’interfaccia utente, consentendo quindi di personalizzare l’aspetto di elementi come i bottoni, le caselle di controllo e le caselle di testo.
as
align-self:;
viene utilizzata all’interno di un contenitore flessibile (display: flex o display: grid) per controllare l’allineamento di un singolo elemento lungo l’asse trasversale del contenitore. Questa proprietà sostituisce l’allineamento trasversale definito dal contenitore per un singolo elemento.
as:a
align-self:auto;
il valore predefinito di align-self all’interno di un contenitore flessibile (display: flex o display: grid). Quando si imposta align-self: auto;, l’elemento eredita il valore di align-items del contenitore.
as:b
align-self:baseline;
viene utilizzata all’interno di un contenitore flessibile (display: flex o display: grid) per far sì che un singolo elemento si allinei sulla linea di base del testo degli altri elementi nel contenitore lungo l’asse trasversale.
as:c
align-self:center;
viene utilizzata all’interno di un contenitore flessibile (display: flex o display: grid) per centrare verticalmente un singolo elemento rispetto all’asse trasversale del contenitore.
bfv
backface-visibility:;
è utilizzata per controllare la visibilità della superficie posteriore di un elemento durante le animazioni 3D. Questa proprietà aiuta a ottimizzare le prestazioni durante l’animazione di oggetti 3D, nascondendo la superficie posteriore di un elemento quando non è visibile all’utente.
bfv:h
backface-visibility:hidden;
viene utilizzata per nascondere la superficie posteriore di un elemento durante le trasformazioni 3D. Quando si imposta questa regola su un elemento, la sua superficie posteriore non sarà visibile durante le animazioni o le trasformazioni 3D.
bfv:v
backface-visibility:visible;
viene utilizzata per rendere visibile la superficie posteriore di un elemento durante le trasformazioni 3D. Quando si imposta questa regola su un elemento, la sua superficie posteriore sarà visibile durante le animazioni o le trasformazioni nello spazio 3D.
cm
/* ${child} */
è un commento in un file di codice, in particolare sembra essere un commento in JavaScript
colm
columns:;
è una proprietà shorthand che consente di impostare sia il numero di colonne che la larghezza delle colonne per il layout multi-colonna di un elemento.
colmc
column-count:;
viene utilizzata per specificare il numero di colonne in cui il contenuto di un elemento deve essere suddiviso.
colmf
column-fill:;
controlla come il contenuto viene distribuito tra le colonne di un layout multi-colonna. Questa proprietà è utile quando si desidera gestire la distribuzione del contenuto per ottimizzare l’aspetto visivo delle colonne.
colmg
column-gap:;
in layout di griglia e flexbox) viene utilizzata per specificare lo spazio (gap) tra le colonne di un layout multi-colonna.
colmr
column-rule:;
è una proprietà shorthand utilizzata per definire l’aspetto della linea (regola) che separa le colonne in un layout multi-colonna. Questa proprietà consente di specificare la larghezza, lo stile e il colore della linea di separazione in un’unica dichiarazione.
colmrc
column-rule-color:;
viene utilizzata per specificare il colore della linea di separazione tra le colonne in un layout multi-colonna. È una delle proprietà individuali che possono essere impostate utilizzando la proprietà shorthand column-rule.
colmrs
column-rule-style:;
viene utilizzata per specificare lo stile della linea di separazione tra le colonne in un layout multi-colonna.
colmrw
column-rule-width:;
viene utilizzata per specificare la larghezza della linea di separazione tra le colonne in un layout multi-colonna.
colms
column-span:;
viene utilizzata per specificare se un elemento deve attraversare più colonne in un layout multi-colonna. Questo è utile per creare titoli o altre sezioni che devono coprire l’intera larghezza del contenitore multi-colonna.
colmw
column-width:;
viene utilizzata per specificare la larghezza ideale delle colonne in un layout multi-colonna. Il browser utilizzerà questo valore come una guida per determinare il numero di colonne in cui suddividere il contenuto dell’elemento.
Flex
fx
flex:;
È utilizzata per specificare il comportamento flessibile degli elementi all’interno di un flex container.
fxb
flex-basis:;
viene utilizzata per specificare la dimensione base degli elementi flessibili all’interno di un flex container prima che lo spazio rimanente venga distribuito.
fxd
flex-direction:;
viene utilizzata per specificare la direzione principale in cui gli elementi flessibili di un flex container vengono disposti.
fxd:c
flex-direction:column;
gli elementi flessibili all’interno di un flex container vengono disposti lungo una colonna anziché lungo una riga, come sarebbe con il valore predefinito
fxd:cr
flex-direction:column-reverse;
gli elementi flessibili all’interno di un flex container vengono disposti lungo una colonna, ma in ordine inverso rispetto a flex-direction: column;
fxd:r
flex-direction:row;
gli elementi flessibili all’interno di un flex container vengono disposti lungo una riga orizzontale, dall’elemento iniziale all’elemento finale.
fxd:rr
flex-direction:row-reverse;
gli elementi flessibili all’interno di un flex container vengono disposti lungo una riga orizzontale, ma in ordine inverso rispetto a flex-direction: row;
fxf
flex-flow:;
è una shorthand che combina le proprietà flex-direction e flex-wrap, consentendo di specificare contemporaneamente la direzione principale e il comportamento di wrappaggio degli elementi all’interno di un flex container.
fxg
flex-grow:;
determina la capacità di un elemento flessibile di espandersi all’interno di un flex container rispetto agli altri elementi flessibili.
fxsh
flex-shrink:;
determina la capacità di un elemento flessibile di ridursi all’interno di un flex container rispetto agli altri elementi flessibili quando lo spazio è limitato.
fxw
flex-wrap: ;
viene utilizzata per specificare se gli elementi flessibili all’interno di un flex container devono avvolgersi su righe o colonne multiple quando lo spazio disponibile non è sufficiente per tutti gli elementi.
jc
justify-content:;
viene utilizzata all’interno di un flex container per definire come gli elementi flessibili devono essere distribuiti lungo l’asse principale del container.
jc:c
justify-content:center;
viene utilizzata insieme a display:flex o display:inline-flex su un contenitore flessibile per allineare gli elementi lungo l’asse principale del contenitore. Quando si imposta justify-content: center;, gli elementi all’interno del contenitore vengono centrati lungo l’asse principale
jc:fe
justify-content:flex-end;
viene utilizzata insieme a display:flex o display:inline-flex su un contenitore flessibile per allineare gli elementi lungo l’asse principale del contenitore. Quando si imposta justify-content: flex-end;, gli elementi all’interno del contenitore vengono allineati verso la fine dell’asse principale
jc:fs
justify-content:flex-start;
viene utilizzata insieme a display:flex o display:inline-flex su un contenitore flessibile per allineare gli elementi lungo l’asse principale del contenitore. Quando si imposta justify-content: flex-start;, gli elementi all’interno del contenitore vengono allineati verso l’inizio dell’asse principale
jc:sa
justify-content:space-around;
viene utilizzata insieme a display:flex o display:inline-flex su un contenitore flessibile per distribuire gli elementi lungo l’asse principale del contenitore con spazio attorno a ciascun elemento. In questo modo, lo spazio tra gli elementi è uguale e c’è spazio aggiuntivo alla fine e all’inizio
jc:sb
justify-content:space-between;
viene utilizzata insieme a display:flex o display:inline-flex su un contenitore flessibile per distribuire gli elementi lungo l’asse principale del contenitore con spazio tra di essi. Tuttavia, diversamente da space-around, con space-between non c’è spazio aggiuntivo alla fine o all’inizio del contenitore
mar
max-resolution:res;
Potresti aver commesso un errore di battitura. Se desideri ottenere informazioni su come impostare la risoluzione massima per i media in CSS, potresti fare riferimento alla proprietà max-resolution utilizzata per i media queries per stabilire la risoluzione massima di un dispositivo di output
mir
min-resolution:res;
per stabilire la risoluzione minima di un dispositivo di output. Questa proprietà consente di applicare regole CSS solo se la risoluzione minima specificata è soddisfatta
op+
opacity: ;
filter: alpha(opacity=);
per impostare l’opacità di un elemento, di solito si utilizza la proprietà opacity, mentre la sintassi filter: alpha(opacity=); è specifica per Internet Explorer 8 e versioni precedenti. Ecco come utilizzare entrambe le proprietà:
opacity: La proprietà opacity specifica la trasparenza di un elemento, accettando valori compresi tra 0 (completamente trasparente) e 1 (completamente opaco)
Transform, Transition
trf
transform:;
transform viene utilizzata per applicare trasformazioni (come rotazione, scala, traslazione, inclinazione, ecc.) agli elementi HT
trf:r
transform: rotate(angle);
viene utilizzata per ruotare un elemento HTML di un determinato angolo specificato
trf:rx
transform: rotateX(angle);
consente di ruotare un elemento intorno all’asse X, cioè orizzontalmente, rispetto al suo punto di origine.
trf:ry
transform: rotateY(angle);
ruota un elemento intorno all’asse Y, cioè verticalmente
trf:rz
transform: rotateZ(angle);
consente di ruotare un elemento intorno all’asse Z, cioè lungo il piano bidimensionale dello schermo.
trf:sc
transform: scale(x, y);
è utile quando si desidera modificare le dimensioni di un elemento lungo X e/o Y senza influire sul layout del documento.
trf:sc3
transform: scale3d(x, y, z);
consente di ridimensionare un elemento lungo tutti e tre gli assi: X, Y e Z.
trf:scx
transform: scaleX(x);
consente di ridimensionare un elemento lungo l’asse X.
trf:scy
transform: scaleY(y);
onsente di ridimensionare un elemento lungo l’asse Y.
trf:scz
transform: scaleZ(z);
consente di ridimensionare un elemento lungo l’asse Z, ma è più comunemente utilizzata in contesti 3D
trf:skx
transform: skewX(angle);
consente di inclinare un elemento lungo l’asse X.
trf:sky
transform: skewY(angle);
consente di inclinare un elemento lungo l’asse Y.
trf:t
transform: translate(x, y);
consente di spostare un elemento lungo l’asse X e/o Y.
trf:t3
transform: translate3d(tx, ty,
tz);
consente di spostare un elemento lungo tutti e tre gli assi: X, Y e Z.
trf:tx
transform: translateX(x);
consente di spostare un elemento lungo l’asse X.
trf:ty
transform: translateY(y);
consente di spostare un elemento lungo l’asse Y.
trf:tz
transform: translateZ(z);
consente di spostare un elemento lungo l’asse Z in un contesto tridimensionale.
trfo
transform-origin:;
definisce il punto di origine di una trasformazione applicata a un elemento. Questo punto di origine è dove avviene la trasformazione.
trfs
transform-style:preserve-3d;
definisce come gli elementi figlio di un elemento con una trasformazione 3D devono essere resi nel contesto tridimensionale.
trs
transition:prop time;
consente di specificare una transizione fluida tra gli stati di un elemento quando cambia il suo stile.
trsde
transition-delay:time;
permette di specificare un ritardo prima che inizi una transizione sulle proprietà indicate.
trsdu
transition-duration:time;
imposta la durata di una transizione, cioè il tempo che impiega un elemento per passare da uno stato all’altro quando cambia un suo attributo.
trsp
transition-property:prop;
definisce quali proprietà CSS devono essere soggette a transizione quando cambiano i loro valori.
trstf
transition-timing-function:tfunc;
definisce la funzione di temporizzazione che specifica come cambia la velocità di una transizione durante il tempo.
us
user-select:${none};
consente di specificare se l’utente può selezionare il testo negli elementi della pagina.
wfsm
-webkit-fontsmoothing:${antialiased};
è una proprietà specifica di WebKit utilizzata per controllare il rendering dei caratteri e la resa del testo su schermi con diversi tipi di display.
wfsm:a
-webkit-font-smoothing:antialiased;
viene utilizzata per migliorare la leggibilità e la qualità del testo applicando un’antialiasing standard al testo renderizzato su schermi con elevata risoluzione.
wfsm:n
-webkit-font-smoothing:none;
viene utilizzata per disabilitare completamente l’antialiasing per il testo in un elemento su browser che supportano questa proprietà specifica di WebKit.
wfsm:s, wfsm:sa
-webkit-font-smoothing:subpixelantialiased;
viene utilizzata per applicare un’antialiasing subpixel al testo all’interno di un elemento su browser che supportano questa proprietà specifica di WebKit.
Guide complete di tutti i linguaggi con esempi su w3schools
La bibbia di ogni sviluppatore.
