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.

Gli pseudo-elementi

In un documento Xhtml, se vogliamo cambiare o formattare delle parti a nostro piacimento, dobbbiamo ricorrere all'uso dei cosidetti pseudo-elementi, che purtroppo sono supportati solo dai browser di nuova generazione, quindi incontrano grossi problemi di compatibilità.

Fondamentalmente gli pseudo-elementi servono per variare le caratteristiche di tutte quelle parti del documento che non sono rappresentate da nessun tag in particolare. Una regola molto importante, è che essi non possono essere dichiarati da soli, ma vanno sempre collegati ad altri selettori. Non importa di che tipo essi siano. Analizziamo il primo:

A- :first-letter: con questo selettore è possibile formattare la prima lettera di qualunque elemento contenente del testo. Le proprietÓ modificabili sono ovviamente tutte quelle relative al carattere e al testo, ma anche quelle legate al colore, allo sfondo, ai margini e al padding. La sintassi di tutti gli pseudo-elementi è soggetta alla stesse regole.

     p:first-letter {color: red; font-weight: bold;}

All'interno del foglio di stile è possibile anche usare classi:

     p.select:first-letter {color: red; font-weight: bold;}

oppure anche selettori di tipo id:

     #topleft_id:first-letter {color: red; font-weight: bold;}

In tutti questi tre esempi, la prima lettera del testo sarà rossa e in grassetto.

B- :first-line: usando questo selettore, formattiamo solamente la prima riga di un paragrafo contenente del testo. Valgono le stesse regole che abbiamo visto per :first-letter.

     p:first-line {color: blue;}
     p2:first-line {color: green;}
     p.testonero:first-letter {color: blue;}
     td#topright_id:first-letter {color: blue;}

C- :before: grazie a questo pseudo-elemento, è possibile inserire nel documento un contenuto non presente nello stesso, o meglio si inserisce contenuto prima dell'elemento definito nel selettore. Questo contenuto si definisce tramite la proprietà content e può essere una semplice stringa di testo, un URL, cioè un indirizzo che punti a un'immagine o ad un'altro documento, oppure delle semplici virgolette, ecc.

Nell'esempio sottostante, abbiamo inserito un'immagine particolare prima del titolo (<h1>).

     h1:before {content: url  (immagine_di_prova.gif);}

Se inseriamo una stringa, questa và inserita tra le virgolette:

     h1:before {content: "il linguaggio di marcatura per ipertesti";}

:before non è supportato da Internet Explorer, almeno fino alla versione 6.

D- :after: utilizzando quest'ultimo pseudo-elemento, il contenuto viene inserito dopo l'elemento specificato nel selettore.

     h1:after {content: url  (immagine_di_prova.gif);}
     h1#leftitem_id {content: "Xhtml e fogli di stile";}

Per capire meglio la sintassi di questi pseudo-elementi guardiamo questi esempi

Esempi e codice anche in questa pagina.

^ 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