regolamenti aziendali e sul posto di lavoro

Come aggiungere un collegamento ipertestuale a CSS esterno

I fogli di stile CSS (CSS) sono istruzioni del browser per lo styling di elementi HTML che possono essere aggiunti alle pagine Web in uno dei tre modi seguenti: esternamente, internamente o in linea. Due vantaggi dell'utilizzo di fogli di stile esterni sono che gli stili di una pagina possono essere gestiti separatamente dal contenuto della pagina e gli stessi stili possono essere inclusi in più pagine Web. Gli utenti possono anche modificare i riferimenti ai file CSS interagendo con l'interfaccia utente della pagina (collegamenti ipertestuali), una funzionalità che consente ai visitatori di modificare in modo dinamico alcuni o tutti gli stili di una pagina specifica.

1.

Apri un editor di testo e crea un nuovo file chiamato "externalBlue.css". In genere, il processo per creare un nuovo file di testo in un editor di testo è selezionare "Nuovo" dal menu "File".

2.

Definire un singolo stile in externalBlue.css. Questo stile è l'impostazione predefinita e indica che il colore di sfondo (corpo) della pagina Web deve essere blu. Assicurati di utilizzare la sintassi di stile appropriata (selettore, stile, attributo) come segue:

body {background: blue;}

Salvare il file externalBlue.css e quindi chiudere l'editor di testo.

3.

Creare un secondo file denominato "externalGreen.css" a cui si accederà quando l'utente seleziona un collegamento ipertestuale sulla pagina. Definisci uno stile che indichi che il colore di sfondo (corpo) della pagina deve essere verde, quindi salva e chiudi il file:

body {background: green;}

4.

Crea un terzo file chiamato "externalCSS.html". Aggiungi i tag HTML di base al file - "", "", "", "", "" e "" - come segue:

5.

Aggiungi il foglio di stile externalBlue.css a externalCSS.html ponendo un tag di collegamento ("") tra i tag "" e "" di chiusura del file. Aggiungi il tag "", imposta l'attributo "rel" del tag a "stylesheet", l'attributo "href" a "externalBlue.css" e l'attributo "id" a "styles". Il link "stili" ora fa riferimento al foglio di stile externalBlue.css in externalCSS.html.

6.

Aggiungi un tag "" JavaScript aperto al file. Imposta l'attributo "tipo" del tag su "text / javascript". Posiziona questo insieme di tag sotto il riferimento al tag link "styles".

7.

Aggiungi una funzione JavaScript chiamata "changeStyle ()" a externalCSS.html tra l'apertura e la chiusura Clicca qui per cambiare il foglio di stile

9.

Aprire externalCSS.html in un browser Web. Fare clic sul collegamento ipertestuale "Fare clic qui per cambiare il foglio di stile" e verificare che il foglio di stile externalGreen.css si apra e lo sfondo cambi da blu a verde.

Cose necessarie

  • Editor di testo
  • Accesso al server Web
  • Browser Web con JavaScript abilitato

Suggerimenti

  • I fogli di stile esterni possono essere modificati utilizzando script sul lato server, sebbene questo metodo richieda una richiesta del server.
  • L'attributo "tipo" in un tag può essere utilizzato per specificare i tipi di supporto, consentendo ai browser che non supportano un particolare tipo di supporto di ignorare il CSS.
  • L'attributo "media" in un tag può essere utilizzato per specificare un supporto utilizzato dal foglio di stile. Questi media includono opzioni come stampa, schermo e tty.
  • Alcune versioni precedenti di Internet Explorer potrebbero non implementare completamente JavaScript.

avvertimento

  • Non tutti i browser supportano tutti gli stili CSS e alcuni possono implementarli in modo diverso. Assicurati di tenerlo a mente quando usi stili che cambiano l'aspetto generale della pagina web.

none

Raccomandato