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.

Le proprietà avanzate del testo

Con le proprietà avanzate di gestione del testo si interviene su aspetti complessivamente poco importanti, e però per alcune di esse, il supporto dei browser non è affatto garantito. Come per la precedente lezione, vediamo una pagina di esempio che mostra i risultati dell'applicazione delle varie proprietà. Gli esempi sono accompagnati dal codice e da commenti su aspetti particolari. Vediamoli di seguito:

1- text-indent: La proprietà text-indent ci permette di aggiungere un tocco elegante ai paragrafi di testo, applicando una indentazione alla prima linea del paragrafo. Nell'esempio sotto abbiamo applicato una indentazione di 30px a tutti i paragrafi marcati con il tag <p>:

     p { text-indent:: 30px ;}

Visualizziamo questo esempio:


2- text-align: La proprietà text-align corrisponde all'attributo align, usato nelle precedenti versioni di Html. Usando questa proprietà il testo può essere allineato a sinistra, a destra o centrato, mentre il valore justify permetterà di allineare ogni linea del testo sia a destra che a sinistra. Nell'esempio sotto il testo nel titolo della tabella <th> verrà allineato a destra mentre i dati nella tabella <td> saranno centrati. Inoltre i normali paragrafi di testo saranno giustificati: È ereditata e si applica a tutti gli elementi.

      th {   text-align: right;  }
      td {   text-align: center;  }
       p {   text-align: justify;  }

Visualizziamo questo esempio:

I valori che si possono quindi applicare a questa proprietà sono:


3- text-decoration: La proprietà text-decoration permette di aggiungere al testo diverse decorazioni o effetti. Per esempio possiamo sottolineare il testo, inserire una linea sul testo o sopra il testo, ecc. Nell'esempio che segue, i titoli <h1> vengono sottolineati con una linea sotto il testo, i titoli <h2> vengono sottolineati con una linea sopra il testo e i titoli <h3> con una linea che attraversa il testo. Ereditabile e applicabile a tutti gli elementi.

      h1 {   text-decoration: underline;  }
      h2 {   text-decoration: overline;  }
      h3 {  text-decoration: line-through;  }

Visualizziamo questo esempio:

I valori che si possono quindi applicare a questa proprietà sono:


4- font-variant: La proprietà font-variant viene usata per scrivere il testo utilizzando invece di lettere minuscole, tutte lettere maiuscole di dimensioni leggermente più piccole. Proprietà ereditata.

      h1 {   font-variant: small-caps;  }
      h2 {   font-variant: normal;  }

Visualizziamo questo esempio:

I valori che si possono quindi applicare a questa proprietà sono:


5- text-transform: La proprietàtext-transform, viene usata per cambiare gli attributi del testo relativamente a tre aspetti: maiuscolo, minuscolo, prima lettera maiuscola. Proprietà ben supportata e comodissima se abbiamo grandi porzioni di testo tutto in maiuscolo da trasformare (o viceversa). Ereditata.

      h1 {   text-transform: uppercase;  }
        li {   text-transform: capitalize;  }

Visualizziamo questo esempio:

I valori che si possono quindi applicare a questa proprietà sono:


6- white-space: Con la proprietà white-space vengono definiti gli spazi bianchi in un testo. Chi conosce un minimo di codice Html, sà che nel codice di una pagina, se lasciamo spazi bianchi tra le parole, essi saranno automaticamente convertiti in un solo spazio quando questa pagina verrà visualizzata nel browser. A meno di non racchiudere il testo con tag come <PRE> o <CODE>. In questo caso spazi bianchi e fine riga saranno rispettati e manterranno l'aspetto che essi hanno nel codice. Uguale meccanismo è implementabile con i CSS con white-space. È ereditata.

      p {   white-space: pre;  }
    div {   white-space: nowrap;  }

I valori che si possono quindi applicare a questa proprietà sono:


7- letter spacing: Con la proprietà letter-spacing, si stabilisce lo spazio tra le lettere del testo che abbiamo inserito nella pagina web. Proprietà ben supportata e ereditata. Il valore della proprietà è semplicemente la distanza desiderata. Per esempio, se noi vogliamo tra i caratteri del testo di un paragrafo, uno spazio di 3px e una distanza tra i caratteri del titolo <h1> di 6px, il codice che dovremmo usare sarà:

      h1 {   letter-spacing: 6px;  }
        p {   letter-spacing: 3px;  }

Visualizziamo questo esempio:

I valori che si possono quindi applicare a questa proprietà sono:


8- word-spacing: Proprietà complementare a letter-spacing, ma in questo caso viene usata per aumentare lo spazio tra le parole comprese in un testo di un paragrafo. Proprietà ben supportata ed ereditata.

      p {   word-spacing: 1.5em;  }
      .select {   word-spacing: 5px;  }

Anche in questo ultimo caso, i valori che si possono applicare a questa proprietà sono:

^ 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