Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial
  • Lezione 48 di 55
  • livello principiante
Indice lezioni

Fogli di stile esterni

Definire le regole su classi ed elementi su file esterni
Definire le regole su classi ed elementi su file esterni
Link copiato negli appunti

Nelle lezioni precedenti in definivamo una classe una sola volta in una pagina per poi collegare ad essa vari paragrafi, ma è possibile definire una classe una sola volta per tutte le pagine del sito web.

Questa pratica porta il vantaggio di "alleggerire" il peso delle pagine web e la possibilità di poterne modificare l'aspetto modificando solo il foglio di stile senza dover aprire ogni pagina.

Dobbiamo creare allora un foglio di stile esterno e collegare ad esso le nostre pagine web.

Facciamo click destro in un punto qualsiasi del pannello "Stili CSS" e scegliamo "Nuovo". Appare il pannello che ci permette di definire una classe o ridefinire un tag. Possiamo scegliere indifferentemente una delle due. Decidiamo, ad esempio, di creare una nuova classe. Scegliamo quindi "Classe", assegniamogli il nome "TestoRosso", infine selezioniamo "(Nuovo foglio di stile)" e clicchiamo su "Ok".

Figura 1. Creare una nuova regola CSS
Creare una nuova regola CSS

Dreamweaver ci chiede di assegnare un nome al nuovo foglio di stile. Diamogli il nome "stile" (Dreamweaver aggiungerà al file l'estensione ".css") e scegliamo "Ok".

Si apre infine la finestra per la definizione della classe "TestoRosso". Scriviamo "#FF0000" nella casella "Colore" della scheda "Tipo" e premiamo "Ok".

Figura 2. Assegnare il colore rosso allo stile
Assegnare il colore rosso allo stile

La nuova classe è stata salvata nel file "stile.css". Possiamo vederlo anche dal pannello "Stili CSS" che visualizza la voce ".TestoRosso" nel sottoalbero "stile.css".

Figura 3. Visualizzare il foglio di stile esterno
Vista del foglio di stile esterno nel pannello Stili CSS

Dreamweaver oltre a creare il file del foglio di stile esterno lo ha anche collegato alla pagina corrente, infatti se scriviamo qualcosa nella pagina web e premiamo Invio (in modo da creare un paragrafo) possiamo selezionare il tag <p> tramite il selettore di tag e associargli la classe "TestoRosso".

Vediamo ora come associare il foglio di stile ad un'altra pagina web:

  • apriamo (o creiamo) una pagina HTML (in realtà la pagina può anche essere di tipo ASP, PHP, JSP, etc...);
  • facciamo click destro in un qualsiasi punto del pannello "Stili CSS" e scegliamo "Associa foglio di stile..."

Appare un pannello per il collegamento del foglio di stile esterno, nella prima casella dobbiamo specificare la posizione del foglio di stile. Se è presente nel nostro computer (come in questo esempio) premiamo "Sfoglia..." e cerchiamolo. Se invece è memorizzato su internet possiamo specificarne l'URL.

Figura 4. Pannello "Collega foglio di stile esterno"
Pannello

Il gruppo di scelte "Aggiungi come:" è molto importante.

  • Se scegliamo Collegamento allora nella pagina web attuale verrà soltanto specificato come raggiungere il file del foglio di stile e nient'altro.
  • Se scegliamo Importazione allora le regole contenute nel foglio di stile verranno copiate all'interno della pagina web corrente.

Il primo metodo è quello più utile e permette di beneficiare di alcuni dei vantaggi spiegati in precedenza.

Infine nella casella Media: è possibile specificare il tipo di "supporto" a cui è destinato il foglio di stile corrente. Ad esempio se stiamo aggiungendo un foglio di stile che contiene regole su come deve apparire la pagina al momento della stampa possiamo scegliere "print". Maggiori informazioni in merito sono fornite nelle indicazioni del W3C.

Ti consigliamo anche