Passo 3: Troppe propietà da ricordare~
Ci sono moltissime proprietà, io vi elencherò le principali e vi posterò i link per altre. Per il resto ricordate che
Google è un ottima fonte.
Partiamo con:
width→ larghezza (si misura in px);
height→ altezza (si misura in px);
Esempio:
Testo Prova, 200x100px
CODICE
<div style="width: 200px; height: 100px; background: #fff">Testo Prova, 200x100px</div>
background→ rappresenta lo sfondo.
Ci sono 2 tipi di sfondo:
- tinta unita, e si scrive
background: #colore oppure
background-color: #colore- con immagine, e si scrive
background: url(link immagine) oppure
background-image: url(link immagine)- se non si vuole nessuna immagine di sfondo, si scrive
background: none oppure
background-image: noneEsempio:
Tinta Unita
CODICE
<div style="background: #fff">Tinta Unita</div>
Sfondo:
Tinta Unita
CODICE
<div style="background: url(http://i.imgur.com/L7AW5.jpg); width:200px; height: 100px">Tinta Unita</div>
repeat→ ripetizione nello sfondo.
Ci sono 4 tipi di ripetizione:
- totale, e si scrive
background-repeat: repeat- solo orizzontale, e si scrive
background-repeat: repeat-x- solo verticale, e si scrive
background-repeat: repeat-y- nulla, e si scrive
background-repeat: nonecolor→ colore del testo.
Il colore deve essere sempre accompagnato dal # davanti.
I colori li potete prendere da
qui.Si scrive
color: #colore.
Esempio:
Prova ciò che leggi di di Rosso
CODICE
<div style="color: #FF0000">Prova ciò che leggi di di Rosso</div>
font-family→ carattere del testo.
Su questo non c' molto da dire, si scrive
font-family: carattereEsempio:
Che carattere ti sembra?
CODICE
<div style="font-family: comic sans ms">Che carattere ti sembra?</div>
font-size→ dimensioni del testo.
Si possono misurare in pt oppure in px (ma io vi consiglio il px).
Si scrive
font-size: XXpx, dove XX è il numero.
Esempio:
Abbastanza Grande?
CODICE
<div style="font-size: 30px">Abbastanza Grande?</div>
text-align→ allineamento del testo.
Qui è come per l'align, solo che c'è il text- davanti.
Si scrive
text-align: posizione (left, right etc...)
line-height→ lo spazio tra le righe del testo.
Si può misurare in
%, ma anche in
px (e altri valori come .em o numeri puri).
Più piccolo è il numero, e più piccolo sarà lo spazio fra le linee.
Esempio:
Testo Sopra
testo sotto
CODICE
<div style="line-height: 40%">Testo Sopra
testo sotto</div>
Testo Sopra
testo sotto
CODICE
<div style="line-height: 120%">Testo Sopra
testo sotto</div>
Queste sono le proprietà pricipali, nel prossimo post descriverò quelle un pochino più particolari.
La cosa importante è provare finchè non si raggiunge un risultato che soddisfa.
Ottimo sito dove trovare maggiori spiegazione è
CSS.HTMIL.it =)