CSS  »  Guide  »  Guida CSS di base 

Font-family

Questo paragrafo è in Georgia. Notate nel codice l'uso della famiglia generica (alla fine!) e le virgolette intorrno al nome Times New Roman. per la definizione dei paragrafi dell'esempio abbiamo usato delle classi.

Codice:

.p1 {
font-family: Georgia, "Times New Roman", serif;
}

---

Font-size: pixel

Il testo di questo paragrafo è in Verdana 12px.

Codice:

.p2 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
}

---

Font-size: percentuale

Il testo di questo paragrafo è definito in percentuale: 120%.

Codice:

.p2 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 120%;
}

---

Font-size: medium

Il testo di questo paragrafo è definito dalla parola chiave medium.

Codice:

.p2 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: medium;
}

---

Font-weight: bold

Il testo di questo paragrafo è in grassetto.

Codice:

.p3 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
}

 

---

Font-weight: bolder

Il testo di questo paragrafo è normale.

Il testo di questo pargrafo dovrebbe essere più pesante, più scuro del precedente.

Codice:

.p3 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bolder;
}

 

---

Font-style

Il testo di questo paragrafo è in corsivo: italic.

Codice:

.p12 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: italic;
}

---

Line-height: normal

Lo spazio tra le righe di questo paragrafo è quello standard del browser che state usando: line-height: normal;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Codice:

.p4 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: normal;
}

---

Line-height: pixel

Lo spazio tra le righe di questo paragrafo è impostato in pixel: 20px;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Codice:

.p5 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 20px;
}

 

---

Line-height: nunerica

Lo spazio tra le righe di questo paragrafo è impostato su un semplice valore numerico, senza unità di misura: line-height: 1.5;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Codice:

.p6 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 1.5;
}

---

Text-align: center

Il testo di questo paragrafo è centrato: text-align: center;

Codice:

.p7 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
}

---

Text-align: justify

Il testo di questo paragrafo è giustificato.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Codice:

.p7 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: justify;
}

---

Text-decoration: underline

Il testo di questo paragrafo è sottolineato: text-decoration: underline;

Codice:

.p8 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: underline;
}

 

---

Text-decoration: overline

Esempio di overline.

Codice:

.p8 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: overline;
}

 

---

Text-decoration: line-through

Esempio di line-through.

Codice:

.p8 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: line-through;
}

 

---

Font

Qui abbiamo usato la sintassi abbreviata con la proprietà font.

Codice:

.p9 {
font : bold 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
}

---

Uso dei font di sistema

Il testo di questo paragrafo dovrebbe essere lo stesso di quello che usate per definire i menu del vostro sistema operativo. Provate a cambiare le impostazioni (carattere e dimensione, per esempio) e il testo del paragrafo cambierà automaticamente.

Codice:

.p10 {
font : menu;
}

---

Altri articoli

Altre guide

Altre newsletter