Istruzioni collegate: link per css
Abbiamo accennato come il linkaggio possa effettuarsi non solo tra pagine ma anche verso istruzioni esterne: il linkaggio verso un foglio di stile css è l'esempio più probabile nella costruzione di un sito web. Nel nostro articolo sportivo, gli attributi di stile sono stati compresi tra i tag<head></head>, se pure questa tecnica sia efficace e permessa anche dal W3C, nel caso dovessimo gestire un intero sito web, comporterebbe la scrittura degli attributi di stile su ogni pagina. Questo lavoraccio si può evitare linkando per ogni pagina un foglio di stile esterno css. Ma cosa è questo foglio di stile? Il foglio di stile è un semplice file di puro testo con estensione.css Incredibile ma vero, il foglio di stile per il nostro esempio contiene le sole righe:
h1 { color: black; background: yellow; }
#immagine{position:absolute;top:100px;right:200px;}
Solo questo e nulla in più. L'importante è che il nostro foglio di stile sia un file con estensione .css che chiameremo stile.css e dopo aver digitato la riga di cui sopra lo chiuderemo tranquillamente senza occuparci di altro, almeno per il momento. Nel frattempo il nostro file 01.htm dovrà essere così trasformato:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <link type="text/css" rel="stylesheet" href="stile.css" /> <html> <head> <title>0001: "Gol di Sergio Verdi"</title> </head> <body> <h1>"Gol di Sergio Verdi"</h1> <p> <div id="immagine"><img src="gol.jpg" align="right" alt="Gol" /></div> Oggi allo stadio grande esibizione<br /> del centrocampista Sergio Verdi. </p> <p><a href="02.htm">Segue</a> </p> <span> Marco Bianchi</span> </body> </html
In altre parole avremo tolto di mezzo ogni attributo di stile dai tag <head></head>, tanto li abbiamo nel file stile.css, ed al loro posto abbiamo messo la riga:
<link type="text/css" rel="stylesheet" href="stile.css" />
Questa riga è il link verso il foglio di stile css; quando un user agent la incontra, (nel nostro caso un browser web giacché stiamo scrivendo un documento per un sito) automaticamente è collegato, dal server, al relativo foglio di stile, il quale riversa sul documento in questione gli attributi contenuti. In Italiano la riga si potrebbe leggere così: collegamento ipertestuale di tipo testo/css relativo al foglio di stile di riferimento chiamato stile.css .In parole povere: questo file ha gli attributi di stile nel file stile.css quindi pescali da quel file e trasferiscili qui!!!
Ti potrebbe interessare anche
commenta la notizia
Luca