Le Property

Proprietà di Layout

Proprietà Descrizione Possibili Valori Esempio
display Specifica il comportamento di visualizzazione (il tipo di riquadro) di un elemento
  • block
  • flex
  • grid
display: inline;
position Definisce il metodo di posizionamento di un elemento.

Proprietà di Colore

Proprietà Descrizione Esempio
color Imposta il colore del testo
color:red
opacity Imposta il livello di opacità di un elemento
opacity: 0.5;

Proprietà di Sfondo e Bordo

Proprietà Descrizione Valori possibili Esempio
background-color Imposta il colore di sfondo di un elemento
  • Un codice Esadecimale
  • Un codice rgb
  • Il nome di un colore (yellow, white, tomato, black ecc...)
background-color: #00ff00;
background-image Imposta l'immagine di sfondo per un elemento Il percorso dell'immagine
background-image: url('immagine.jpg');
background-position Imposta la posizione iniziale dell'immagine di sfondo
  • top
  • bottom
  • center
  • right
  • left
  • right-top / right-bottom / right-center
  • left-top / left-bottom / left-center
  • coordinatax, coordinatay (in pixel o percentuale)
background-position: top right;
background-repeat Imposta come verrà ripetuta l'immagine di sfondo
  • repeat → Ripete l'immagine sia in verticale che in orizzontale.
  • repeat-x → Ripete l'immagine in orizzontale
  • repeat-y → Ripete l'immagine in verticale
  • no-repeat
background-repeat: no-repeat;
background-attachment Imposta come si relaziona l'immagine di sfondo ai comportamenti della pagina.
  • Fixed → Fissa
  • Scroll → Scorre con il resto della pagina
background-attachment: fixed;
background-size Specifica la dimensione dell'immagine di sfondo
  • auto → L'immagine viene visualizzata nelle sue dimensioni
  • x% y%
  • xpx ypx
  • cover → Ridimensiona l'immagine per coprire tutto il container, anche a costo di stretcharla o di tagliarle i bordi.
background-size: cover;
border Imposta tutte le proprietà del bordo.
Per andare nello specifico, si può usare border-right; border-right-color ecc...
  • Dimensione
  • Stile
    • solid → pieno
    • dotted → tratteggiato
    • double → doppio
  • Colore
border: 1px solid black;
border-radius Imposta tutte le quattro proprietà border-*-radius Dimensione del raggio degli angoli in px
border-radius: 15px;

Proprietà di dimensione

Proprietà Descrizione Valori possibili Esempio
width Definisce la larghezza di un elemento. lunghezze (px, em, %, etc.)
width: 100px;
height Definisce l'altezza di un elemento. lunghezze (px, em, %, etc.)
height: 200px;