FOGLI DI STILE CSS E SCRIPTS COLLEGATI
ALLA PAGINA PER FORMATTARE LE PAGINE WEB
Lino Bertuzzi - Roma Agosto 2014
(definizioni anche da wikipedia)
Per separare i contenuti dalla formattazione e permettere una programmazione più chiara e facile da utilizzare, sia per gli autori delle pagine HTML che per gli utenti, garantendo contemporaneamente anche il riuso di codice ed una sua più facile manutenibilità sono stati creati i fogli di stile.
Gli script con i quali possiamo svolgere certe funzioni ed eseguire certi comandi nella pagina web possono anche usare i fogli di stile.
Sia lo stile della pagina che lo script, possono consistere anche di poche righe di istruzione.
Lo stile CSS può essere scritto nella sezione <head> o anche in linea, gli script anche nella sezione head, o alla fine del corpo pagina.
FOGLI DI STILE: CSS (in inglese Cascading Style sheets)
Il CSS (Cascading Style Sheets, in italiano fogli di stile in cascata) è un linguaggio usato per definire la formattazione di documenti HTML, XHTML e XML ad esempio in siti web e relative pagine web.
Le regole per comporre il CSS sono contenute in un insieme di direttive (Recommendations) emanate a partire dal 1996 dal W3C.
Se volete conoscere gli elementi di base sui fogli di stile studiandoli su un sito creato da professionisti, si può cliccare questo link.
Nozioni elementari sull'uso dei CSS
I CSS possono essere incorporati nella pagina, oppure la pagina può fare riferimento ad essi con una riga di istruzione che si scrive tra i TAG <head> e </head> del codice di una pagina web. L'istruzione per il link è ad esempio:
<link href="css/stilenuovo.css" rel="stylesheet" type="text/css" />
con questa istruzione la pagina web si collega a un css; che abbiamo chiamato stilenuovo.css e che risiede nella cartella css, la quale a sua volta risiede immediatamente nella cartella dove è alloggiato il sito web.
Per lo stile in linea incorporato nella pagina :
- si può usare una classe definita in <head> o in un file css collegato - Per esempio formattare il contenuto della riga di una tabella con
<tr>
o anche il contenuto di una DIV
<td class="miaclasse">...contenuto della riga...</td>
</tr>
<div class="miaclasse">...contenuto della div </div>
- Formattare il contenuto di un paragrafo
<p class="miaclasse">...contenuto del paragrafo...</p>
- Formattare un tratto di un paragrafo
<p>...primo pezzo di contenuto dentro il paragrafo ... <span class="miaclasse">...contenuto dentro la riga...</span> ...continua il contenuto della riga...</p>
- Invece del comando class="miaclasse" inserire direttamente lo stile
<p style="font-size:large; font-color:#000; text-align: justified;">........ contenuto del paragrafo .................... </p>
In questo caso abbiamo imposto che la grandezza del carattere sia large che il colore del carattere sia il nero, e che l'allineamento sia justified. La singola istruzione di stile termina con un punto e virgola. L'insieme delle istruzioni è compreso tra virgolette. Ogni TAG ha una parte di istruzioni in comune, ma ce ne possono essere anche esclusive per quel TAG.
Per usare i CSS sarebbe opportuno conoscere la lingua inglese, per capire il significato dei comandi, e scegliere tra le varie parole che costituiscono il linguaggio.
Usare un software specifico come DREAMWEAVER di ADOBE, è la cosa migliore, perché mentre si scrive lo stile il sistema apre menú a tendina con le parole permesse, e consente, cliccando, di portarle nel file che stiamo scrivendo. In alternativa potremmo procurarci delle tabelle cartacee o su supporto digitale. Ma il software consente di vedere contestualmente l'effetto di ciò che si scrive, mentre lo si scrive. SE SIETE ALLE PRIME ARMI STUDIATE PRIMA LA PAGINA WEB HTML
SCRIPT
Ecco un esempio di script collegato al relativo CSS. Entrambi il collegamenti sono definiti tra i TAG <head>....</head>. Come leggiamo nella istruzione la pagina web si co llega a SpryAccordion.css e che risiede nella cartella css, e lo scriptcollegato SpryAccordion.js a sua volta risiede nella cartella scripts. Tutte e due le cartelle sono immediatamente nella stessa cartella dove è alloggiato il sito web.
<link href="css/SpryAccordion.css" rel="stylesheet" type="text/css">
<script src="scripts/SpryAccordion.js" type="text/javascript"></script>
Importante ribadire che i collegamenti a css e scripts cambiano a seconda della posizione della pagina nella struttura dl sito. Il collegamento è relativo.
Per quanto riguarda il nostro sito di esempio, se la pagina fosse alloggiata in una cartella tre livelli più in basso, il collegamento deve
- salire di 3 livelli ../../../
- riferirsi alla cartella css ../../../css/
e alla cartella scripts ../../../scripts/
Il termine script in informatica designa un tipo particolare di programma, scritto in una particolare classe di linguaggi di programmazione, detti linguaggi di scripting.
Una classe specifica di tali programmi sono i cosiddetti shell script, ossia script concepiti per essere eseguiti all'interno di una shell di un sistema operativo.
Un esempio di script di shell per Windows è cmd.exe , che con una sintassi simile a quella di MSDOS di una volta consente di fare operazioni di copia , spostamento di file, avviare altre applicazioni etc...
La distinzione tra un programma normale ed uno script non è netta, ma generalmente negli script si possono individuare le seguenti caratteristiche:
- complessità relativamente bassa;
- utilizzo di un linguaggio interpretato;
- integrazione in un processo di configurazione automatica del sistema (ad esempio ad ogni avvio, o ad ogni login di un dato utente), in una pagina web (tipicamente utilizzando il linguaggio JavaScript), o comunque per svolgere mansioni accessorie e molto specifiche;
- una certa linearità (uno script può anche accettare input dall'utente, ma solitamente input diversi non modificano sostanzialmente la struttura del diagramma a blocchi che descrive il comportamento dello script);
- mancanza di una propria interfaccia grafica;
- richiamo di altri programmi per svolgere operazioni più sofisticate;
Gli script che ci interessano qui sono i js (javascripts), con i quali possiamo svolgere certe funzioni ed eseguire certi comandi nella pagina web. Per formattare la pagina si usano i fogli di stile ad essi collegati..