Tutorial Proprietá CSS
Indice:
Colore
I colori in HTML e CSS possono essere specificati tramite i valori RGB, HEX, HSL, RGBA, HSLA.
I colori possono essere usati per lo sfondo:
<p style="background-color:red;">Hello World!</p>
Hello World
I colori possono essere usati per il testo:
<p style="color:red;">Hello World!</p>
Hello World
I colori possono essere usati per il bordo:
<p style="border:2px solid red;">Hello World!</p>
Hello World
Background
Per definire gli sfondi o backgrounds degli elementi HTML ci sono molte proprietà:
background-colorbackground-imagebackground-attachment
Il background-color specifica il colore di sfondo di un elemento:
<p style="background-color:DodgerBlue;">Sfondo!</p>
Sfondo!
Il background-image specifica un'immagine come sfondo di un elemento:
h1 {
background-image: url("sfondo.jpg");
}
Sfondo!
Il background-attachment specifica se l'immagine di sfondo scorre o no:
Se l'immagine scorre:
body {
background-attachment: scroll;
}
Se l'immagine non scorre:
body {
background-attachment: fixed;
}
Font
É molto importante scegliere il font giusto in una pagina HTML, in quanto ciò può influenzare l'esperienza del lettore e rendere il tuo sito unico e di piacevole lettura.
Nel CSS esistono 5 famiglie principali di font ognuna con le proprie caratteristiche:
- Serif
- Sans-Serif
- Monospace
- Cursive
- Fantasy
La proprietà font-family è usata per specificare il font di un testo. In modo da essere
compatibile in più browser diversi, solitamente si scelgono diversi font della stessa famiglia:
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
Box model
Tutti gli elementi HTML sono contenuti all'interno di un blocco, o box model, suddiviso in:
Content= contenuto effettivo dell'elemento (testo, immagine, ecc.).Padding= area trasparente intorno al contenuto.Border= bordo che circona il padding e il contenuto.Margin= area trasparente intorno al bordo.
Modificando il box model tramite CSS si possono aggiungere bordi agli elementi e modificare gli spazi intorno ad essi.
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}