TESTO |
|
---|---|
Comando | Descrizione |
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 |
|
---|---|
Comando | Descrizione |
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) |
|
---|---|
Comando | Descrizione |
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 |
|
---|---|
Comando | Descrizione |
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) |
|
---|---|
Comando | Descrizione |
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 |
|
---|---|
Comando | Descrizione |
display: block; |
Mostra, altrimenti none corrisponde ad invisibile. block, none, inline |
DIMENSIONI |
|
---|---|
Comando | Descrizione |
width: 10px; |
Larghezza |
height: 10px; |
Altezza |
POSIZIONE |
|
---|---|
Comando | Descrizione |
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 |
right: 10px; |
DX |
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 |
|
---|---|
Comando | Descrizione |
cursor: pointer; |
Cambia l'icona del cursore nella manina |