Corso di HTML

Esempi di fogli di stile

 

Come detto nella puntata precedente, i fogli di stile possono essere implementati con modalità in linea, incorporata o esterna.

Esaminiamo subito la più semplice delle modalità, quella in linea, applicata ad un paragrafo:

<html>
<head>
<title>Prova con i fogli di stile in linea </title>
</head>

<body bgcolor="#FFFFFF">
<p style ="font: 16pt; color: #0000ff">
Questo &egrave; un paragrafo formattato utilizzando i fogli di stile
</p>
<span style ="font: 14pt; color: #ff0000">
<p>Questo &egrave; un paragrafo formattato utilizzando i fogli di stile con SPAN
</span>
<div style ="font: 12pt; color: #00ff00">
<p>Questo &egrave; un paragrafo formattato utilizzando i fogli di stile con DIV

</div>
</body>
</html>

 

In questo esempio abbiamo visto come utilizzare un foglio di stile in linea nei tre modi possibili, quello standard e quello utilizzando i tag SPAN e DIV. Con questi ultimi si può applicare lo stile anche a più tag contemporaneamente, la differenza è che SPAN è utilizzato per blocchi di testo lunghi, mentre DIV per blocchi di testo più brevi ( anche singole parole o lettere ).

Nell'esempio per i singoli paragrafi abbiamo ridefinito l'altezza del font e il colore.

Vediamo ora l'esempio di un foglio di stile incorporato:

<html>
<head>
<title>Prova fogli di stile incorporati</title>
</head>
<style>

BODY { background: #000000; color: #FFFFFF; margin-left: 20pt; text-align: center}

H1 { font: 12pt arial; color: #FF0000 }
H3 { font: 18pt times; margin-left: 50px; text-align: left}
</style>

<body bgcolor="#FFFFFF">
<H3>Testo formattato con tag H3</H3>
<H1>Testo formattato con tag H1!! - Nota che normalmente H1 crea un font di dimensioni maggiori di H3!!!</H1>
</body>
</html>

In questo esempio abbiamo definito lo stile generale di pagina con BODY ed abbiamo inoltre ridefinito il comportamento dei tag H1 e H3. Normalmente infatti il tag H1 crea il font più grande, mentre H6 quello più piccolo, invece noi abbiamo fatti si che succedesse esattamente il contrario!!. Nel caso in oggetto certo non stiamo facendo un uso intelligente dei fogli di stile ( anzi... ), ma ne mettiamo comunque in luce le potenzialità.

Abbiamo anche visto come settare il margine, l'allineamento del testo e il tipo di font.

L'approccio appena visto è uno dei maggiormente utilizzati per definire lo stile pagina per pagina, se invece abbiamo bisogno di uno stile globale per tutto il sito, ecco che vengono in aiuto i fogli di stile esterni ( o collegati ).

Per provare seguite questi semplici passi:

  1. Copiate dall'esempio precedente tutto ciò che è compreso tra i tag <style> e </style> escludendo questi ultimi.
  2. Incollate tutto in un file di testo che chiamate per esempio stile.css ( il nome non è importante, lo è invece l'estensione ).
  3. Inserite il seguente costrutto tra i tag <head> ed </head>:
    <link rel="stylesheet" href="stile.css" type="text/css">
  4. Provate se funziona :-)

Come vedete l'uso è veramente semplicissimo, la difficoltà sta solo nell'avere una buona ispirazione artistica, magari quella di un buon grafico.

A quanto detto fino ad ora voglio aggiungere che è possibile combinare le tecniche per implementare i fogli di stile, ad esempio utilizzando contemporaneamente un CSS linkato esternamente più un foglio di stile incorporato. In questo modo è possibile personalizzare ulteriormente il proprio sito in base al contenuto particolare di qualche pagina.

Si ricordi che in caso di conflitto, i fogli in linea prevalgono su quelli incorporati che a loro volta prevalgono su quelli esterni. Ovviamente vale la proprietà transitiva e quindi i fogli in linea prevalgono su quelli esterni.

Ricordo, per chi è alle prime armi e possiede una tastiera italiana, che le parentesi graffe sono inseribili con la combinazioni dei codici ASCII. Conoscendo infatti il codice ASCII ( leggesi aschi ) di un carattere, è possibile riprodurlo su schermo tenendo premuto il tasto ALT e digitando il detto codice. Ad esempio il codice delle parentesi graffe è: 123 per quella aperta e 125 per quella chiusa. ( se vi può interessare il codice della tilde '~' è 126 ).

Nella prossima puntata vedremo in dettaglio alcuni attributi dei fogli di stile, per ora cominciate a fare degli esperimenti con quanto detto o meglio scritto. ;-)

 

Torna all'indice Generale del corso di Corso di HTML di Software Planet