Come utilizzare gli stili CSS
0 - Categoria: CSS
Come abbiamo precedentemente detto i fogli di stile possono essere inclusi nelle pagine HTML in 3 modi differenti:
- In linea ai tag
- Interno alla pagina
- Foglio esternoalla pagina
L’inserimento “in linea” avviene direttamente all’interno di un prederminato tag HTML nel corpo del documento;
L’inserimento “interno” avviene nell’intestazione del documento tra i tag <head> e </head>;
Ll’inserimento “esterno” viene effettuato da un file apposito con estensione “.css” che vienerichiamato con un semplice link all’interno dell’intestazione di ciascuna pagina.
Stile in linea ai tag
<html> <head> <title>Titolo del documento</title> </head> <body> <p style=”gli elementi di stile vanno inseriti qui”></p> </body> </html>
Si utilizza questo metodo, quando si ha la necessità veloce di modificare l’ aspetto di un tag, e quindi di un aparte del documento.
Per esempio, il titolo di questa lezione, non è altro un paragrafo <p> che deve avere determinate caratteristiche ma con la certezza che queste non siano estese a tutti gli altri paragrafi <p> contenuti all’interno dello stesso documento. Vediamo come creare un testo con linea sopra:
<p style=”text-decoration:overline;”> Testo di prova </p>
TESTO DI PROVA
Stile interno alla pagina
Si utilizza questo metodo, quando allo stesso stile fanno riferimento diversi elementi (tags) html. Sarebbe assolutamente da pazzi oltre che estremamente laborioso, definire lo stesso stile per tutti i tag html che richiedono la stessa caratteristica.
Decisamente piu comodo definirlo una sola volta, ad inizio pagina. Così facendo tutti gli elementi interessati seguiranno quello stesso stile. Per questa tecnica faccio un utilizzo anche di classi e Identificatori se necessario, ma li vedremo nella prossima lezione.
Adesso vediamo come posizionare i nostri stili all’interno del documento:
<html>
<head>
<title>Titolo del documento</title>
<style type=”text/css”>
gli elementi di stile vanno inseriti qui
</style>
</head>
<body>
<p>I contenuti della pagina vanno qui</p>
</body>
</html>
Come si può bene notare, abbiamo messo il nostro codice di stile utilizzando un nuovo tag dedicato ai css, e stiamo parlando di <style> e </style>, il tutto racchiuso fra tag <head> e </head> del nostro codice html. Questo metodo non impedisce di fare uso anche di eventuali definizioni di stile in linea, le quali però avrebbero priorità sulle dichiarazioni di stile inserite ad inizio pagina.
Vediamo adesso un esempio di utilizzo dei fogli di stile incorporati alla pagina.
<html>
<head>
<title>Inserire i fogli di stile in un documento</title>
<style type=”text/css”>
body {
background: #FFFFCC;
}
</style>
</head>
<body></html>
Questo esempio visualizzera una pagina con sfondo giallo paglierino. Come si vede il codice inizia con l’apertura del tag <STYLE>. Esso può avere due attributi:
- type (obbligatorio)
- media (opzionale)
per i quali valgono le osservazioni viste in precedenza. Seguono le regole del CSS e la chiusura di </STYLE>.
Foglio di stile esterno alla pagina
Per caricare un foglio esterno in un documento esistono due possibilità. La prima e più compatibile è quella che fa uso dell’elemento <LINK>. La dichiarazione va, come per i fogli incorporati, sempre collocata all’interno della sezione <HEAD> del documento HTML:
<html> <head> <title>Inserire i fogli di stile in un documento</title> <link rel=”stylesheet” type=”text/css” href=”stile.css”> </head> <body></html>
Il tag <LINK> presenta una serie di attributi di cui è importante spiegare significato e funzione:
- rel: descrive il tipo di relazione tra il documento e il file collegato. E’ obbligatorio. Per i CSS due sono i valori possibili: stylesheet e alternate stylesheet. Approfondimenti nella lezione 5.
- href: serve a definire l’URL assoluto o relativo del foglio di stile. E’ obbligatorio.
- type: identifica il tipo di dati da collegare. Per i CSS l’unico valore possibile è text/css. L’attributo è obbligatorio.
- media: con questo attributo si identifica il supporto (schermo, stampa, etc) cui applicare un particolare foglio di stile. Attributo opzionale.
A questo punto è lecito chiedersi: quando, quale e perchà usare l’una o l’altra soluzione? I risultati nella formattazione del documento non cambiano. La giusta soluzione sarà quindi quella richiesta dalla nostra pagina.
Il consiglio sentito è semplice: pianificate, pensate in anticipo a quella che dovrà essere la struttura delle pagine del sito, e qui è compito del webdesigner. Mettetevi su un pezzo di carta e pianificate creando una vera “road map” per gli stili da utilizzare.
Buona norma è creare, almeno inizialmente, un foglio di stile generico ed esterno, da applicare a tutte le pagine del sito. Esso conterrà le regole per formattare gli elementi o le sezioni presenti in tutte queste pagine.
