<link rel="stylesheet" href="style.css">

TESTO

ComandoDescrizione

text-align: center;

Allinea il testo o l'elemento. center, left, right, justify

text-decoration: none;

Assegna una decorazione al testo. none, underline, overline, line-through

font-family: Arial, Helvetica, sans-serif;

Font del Testo

font-size: 50px;

Grandezza del testo (indipendente dal tipo inserito in html, esempio h1, h2, p etc)

font-weight: bold;

Testo in Grassetto

COLORI e SFONDI

ComandoDescrizione

color: #fff;

Colore del testo o dell'elemento. #fff (Bianco), #000 (Nero), red, white, black, pink

background-color: #fff;

Colore dello sfondo. #fff (Bianco), #000 (Nero), red, white, black, pink

background-image: url("immagine.png");

Immagine per sfondo. Inserire il percorso dell'immagine dove è stata salvata.

background-repeat: no-repeat;

Nessuna ripetizione dell'immagine di sfondo

background-size: cover;

Ricopri l'intera pagina

background-attachment: fixed;

Immagine fissa anche durante lo scorrimento, scroll l'immagine scorre

background-position: center;

Posizione al centro della pagina, si possono usare anche valori numerici

MARGINI (Esterni)

ComandoDescrizione

margin: 10px;

Tutti i lati hanno un margine di 10px

margin: 10px 10px 10px 10px;

Superiore, DX, Inferiore, SX. E' possibile mettere anche auto

margin-top: 10px;

Modifica Margine Superiore

margin-right: 10px;

Modifica Margine DX

margin-bottom: 10px;

Modifica Margine Inferiore

margin-left: 10px;

Modifica Margine SX

BORDI

ComandoDescrizione

border: 1px solid #000;

Tutti i lati hanno un margine di 10px

border-top: 1px solid #000;

Bordo Superiore

border-right: 1px solid #000;

Bordo Destro

border-bottom: 1px solid #000;

Bordo Inferiore

border-left: 1px solid #000;

Bordo Sinistro

border-radius: 10px;

Arrotondamento degli Angoli, si può fare anche in %

border-style: solid;

Modifica solamente lo stile dei bordi. E' possibile mettere più di 1 stile

Tipi di stili

solid - double - hidden - none - dotted - dashed - groove - outset - ridge

SPAZIATURA (Interni)

ComandoDescrizione

padding: 10px;

Spazio interno

padding: 10px 10px 10px 10px;

Superiore, DX, Inferiore, SX. E' possibile mettere anche auto

padding-top: 10px;

Modifica Spaziatura Superiore

padding-left: 10px;

Modifica Spaziatura SX

padding-right: 10px;

Modifica Spaziatura DX

padding-bottom: 10px;

Modifica Spaziatura Inferiore

VISUALIZZAZIONE

ComandoDescrizione

display: block;

Mostra, altrimenti none corrisponde ad invisibile. block, none, inline

DIMENSIONI

ComandoDescrizione

width: 10px;

Larghezza

height: 10px;

Altezza

POSIZIONE

ComandoDescrizione

float: left;

Sposta al margine DX o SX: right, left

position: absolute;

Absolute segue l'elemento genitore, Relative è indipendente

top: 10px;

Superiore

left: 10px;

SX

bottom: 10px;

Inferiore

z-index: 1;

Ordine di rilievo, in ogni elemento se si sovrappongono, quello con il numero più alto sarà sopra a quello più basso

CURSORE

ComandoDescrizione

cursor: pointer;

Cambia l'icona del cursore nella manina