logo del sito

W3C

Al giorno d'oggi è importante che un sito Web, sia compatibile con gli standard del Consorzio Internazionale W3C.

HTML

Tutte le pagine dei siti web sono scritte in HTML, linguaggio che viene letto ed elaborato dal browser, il quale genera la pagina che viene visualizzata sullo schermo del nostro computer.

CSS

Con il termine CSS (dall'inglese Cascading Style Sheets) vengono semplicemente definiti appunto i "fogli di stile a cascata", usati per separare all'interno delle pagine di un sito, i contenuti dalla formattazione, permettendo una programmazione più facile per gli autori delle pagine HTML.

Il testo e le sue proprietà di base

Ogni web designer, che crea una pagina web, ha sempre neccessità di inserire al suo interno una qualunque scritta generica, quindi del testo. Ma un testo per essere facilmente leggibile ha bisogno di essere formattato, bisogna dargli uno stile, uno spessore, un colore e via dicendo. In questa lezione ci occuperemo appunto delle tante e sorprendenti opportunità che ci forniscono i CSS per aggiungere uno stile al testo.

Le proprietà del testo, sono veramente tante e di conseguenza è necessario suddividere questo argomento in un paio di lezioni, iniziando con il riassumere le proprietà di base del testo, le quali definiscono i seguenti aspetti;

Per aiutarci con la sintassi, in questa lezione facciamo riferimento a questa pagina di esempio che mostra l'uso delle proprietà esaminate con il relativo codice.

1- La proprietà font-family viene utilizzata per definire la lista dei caratteri da usare per visualizzare il testo di una pagina web. Si applica a tutti gli elementi ed è ereditata. Quando si scrivono i caratteri, è sempre meglio utilizzarne diversi della stessa famiglia, perchè se il primo font della lista non è stato istallato sul computer che accede al sito, allora verrà cercato il secondo font della lista e così via finchè non verrà trovato un font disponibile.

Questo per ovviare al problemi dei diversi caratteri presenti sulle varie piattaforme software, come Windows, Mac, Linux ecc. Vediamo l'es. sottostante:

     p { font-family: arial, Verdana, sans-serif ;}

È sempre una buona norma, quando si scrivono i font quella di inserire alla fine l'indicazione di una famiglia generica, che come potete vedere nell'es. è sans-serif in modo che la pagina potrà essere visualizzata con un font della stessa famiglia generica, nel caso in cui tutti i font listati non fossero disponibili. Infine, i nomi degli stessi font devono essere sempre separati da una virgola.

Le famiglie generiche sono cinque e sui sistemi operati Windows, ognuna di esse ha dei caratteri predefiniti, che potete vedere di seguito tra parentesi:

In questo secondo es. invece usiamo il carattere o font Times New Roman, che essendo composto da più parole, và sempre inserito tra virgolette. Egli appartiene alla famiglia generica serif:

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

Un esempio di lista di priorità dei font potrebbe essere fatta così:

      h1 { font-family: Arial, Verdana, sans-serif ;}
      h2 { font-family: "Times New Roman" serif ;}

Visualizziamo questo esempio

Di seguito vengono illustrate le varie differenze tra i font delle famiglie generiche:

i_font

2- La proprietà font-size è molto importante perchè permette di definire la grandezza del testo che abbiamo inserito nella pagina. Si applica a tutti gli elementi ed è ereditata. Per descrivere le dimensioni di un font si può scegliere tra diverse unità di misura (per esempio, pixel, percentuali, em ecc).

C'è una considerazione da fare per quanto riguarda queste unità di misura, e cioè che le dimensioni dei font si applicano come valori assoluti e valori relativi. Dimensione assoluta significa che essa dipende esclusivamente dall'unità di misura usata, mentre relativa stà a significare che essa viene calcolata in base alla dimensione del testo dell'elemento parente.

      h1 {  font-size: 30px;  }
      h2 {  font-size: 12pt;  }
      h3 {  font-size: 120%;  }
      p   {  font-size: 1em;  }

Guardiamo questo esempio


3- Con la proprietà font-weight si stabilisce il grado di neretto, o (chiamiamolo così) di "pesantezza", che dovrebbe avere il font. Un font può essere sia normal che bold. Alcuni browser supportano anche l'uso di una serie di numeri tra 100 e 900 (in centinaia). Si applica a tutti gli elementi ed è ereditata.

Anche in questo caso la "pesantezza" dei font, può essere espressa o con unità di misura o parole chiave, di seguito elencate:

      p  { font-family: Arial, Verdana, sans-serif ;}
      td { font-family: "Times New Roman", serif ;
             font-weight: bold ;
           }

Visualizziamo questo esempio


4- La proprietà font-style permette di impostare lo stile del testo, inserendo uno di questi valori: normal, italic, oblique.

      h1  { font-family: Arial, Verdana, sans-serif ;}
      h2  { font-family: "Times New Roman", serif ;
             font-style: italic ;
           }

Questo esempio ci dice che tutti i titoli marcati con <h2> verranno visualizzati in italico.


5- Con la proprietà line-height si stabilisce l'altezza di una riga di un testo, all'interno di un elemento blocco. Si applica a tutti gli elementi ed è ereditata. La proprietà line height, và impostata con questi valori:

      p  { line-height: 1.5;}
      body  { line-height: 1.5px;}

Il consiglio è di non usare mai la percentuale, ma di affidarsi senza problemi ai valori numerici.

^ Inizio pagina

Ricerca personalizzata


Lezione successiva successiva

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

Indice