Fogli di stile
Una pagina web è formata fondamentalmente da due elementi: i contenuti veri e propri (HTML) e la formattazione, ovvero l'aspetto con cui i contenuti sono mostrati all'utente.
Il CSS(Cascading Style Sheets - Fogli di stile a cascata) è un linguaggio utilizzato per definire la formattazione dei fogli HTML, XHTML. Questa separazione rende la progettazione e la gestione del sito più pratica e veloce. Ci consente di cambiare singoli elementi senza andare a modificare una per una le pagine HTML.
Come collegare un foglio di stile alle diverse pagine di contenuto HTML?
Ci sono diversi modi per inserire i fogli di stile CSS in un documento. Prima di proseguire bisogna però distinguere tra fogli esterni e fogli interni.
Esterno: è esterno un foglio di stile definito in un file separato dal documento. Sono semplici documenti di testo editabili anche con il Blocco Note ai quali si assegna l’estensione .css
Interno: un foglio è interno quando il suo codice è compreso in quello del documento. A seconda che si lavori con un CSS esterno o interno variano la sintassi e le modalità di inserimento.
Noi ci soffermeremo in particolar modo sui fogli esterni.
Oltre a questa separazione, bisogna anche distinguere diverse modalità di inserimento. Queste sono:
- Fogli collegati
- Fogli incorporati
- Fogli in linea
Tra le tante modalità, noi utilizzeremo quella dei fogli collegati. 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 sempre collocata all'interno della sezione <HEAD> del documento HTML. Quello che dobbiamo fare è incollare la riga in verde all’inizio di ogni nostra pagina HTML. Il nostro file CSS in questo caso si chiama stile.css.
<html>
<head>
<title>Inserire i fogli di stile in un documento</title>
<link rel="stylesheet" type="text/css" href="stile.css">
</head>
<body>
Attenzione! Tutti i file (HTML e CSS) devono essere all’interno della stessa cartella. Dopo aver scritto ciò possiamo cominciare a scrivere le regole sul foglio stile.css
Come è costituita una regola?
L'illustrazione mostra la tipica struttura di una regola CSS. Essa è composta da due blocchi principali:
- il selettore
- il blocco delle dichiarazioni
Il selettore serve a definire la parte del documento cui verrà applicata la regola. In questo caso, ad esempio, verranno formattati tutti gli elementi <H1>: lo sfondo sarà rosso, il colore del testo bianco. Il blocco delle dichiarazioni è delimitato rispetto al selettore e alle altre regole da due parentesi graffe*. Al suo interno possono trovare posto più dichiarazioni. Esse sono sempre composte da una coppia:
- proprietà
- valore
La proprietà definisce un aspetto dell'elemento da modificare (margini, colore di sfondo, etc) secondo il valore espresso. Proprietà e valore devono essere separati dai due punti. Una limitazione fondamentale da rispettare è questa: per ogni dichiarazione non è possibile indicare più di una proprietà, mentre è spesso possibile specificare più valori. Ancora, se in un blocco si definiscono più dichiarazioni, esse vanno separate dal punto e virgola. Il linguaggio non impone che si metta il punto e virgola dopo l'ultima dichiarazione, ma alcuni browser più datati lo richiedono: aggiungetelo sempre per sicurezza e per una maggiore compatibilità.
Gli spazi bianchi lasciati all'interno di una regola non influiscono sul risultato.
* Come si fanno le parentesi graffe con la tastiera? Per gli utenti Windows; alt+0123 e alt+0125, mentre per gli utenti Mac; alt+shift+[ e alt+shift+] .
Selettori.
Come abbiamo già detto sopra, un selettore non è altro che una dichiarazione che serve a selezionare la/e parte/i di un documento soggetta/e ad una specifica regola. Esistono diversi tipi di selettori, se ne volete sapere di più consultate questa lezione http://css.html.it/guide/lezione/21/i-selettori/ . Per il nostro lavoro utilizzeremo prevalentemente: Classi e ID.
Classe: Le classi servono per definire una tipologia di elementi, cioè per attribuire uno scopo e/o una presentazione ad un sottoinsieme di elementi con caratteristiche e funzionalità comuni di una pagina HTML. Per definire una classe bisogna aggiungere l’attributo class”password*” all’interno di un Tag.
Per esempio: <p class="testorosso">....</p>
Nel foglio di stile scriveremo invece la regola che intendiamo dare a <p> . Per definire una classe si deve far precededere il nome da un semplice punto:
.password {...} oppure .testorosso {...}
Attenzione!*password è una parola scelta da me, voi potete mettere quello che vi pare, l’importante è che sia uguale anche nell’elemento d’arrivo sul foglio di stile.
Id: Gli id servono per definire un elemento unico in una pagina, con un unico e preciso scopo, nella maggior parte dei casi tale scopo è determinare una sezione in una pagina HTML. Il procedimento per definire un id è molto simile a quello della classe. Si aggiunge un id ad un tag nel foglio HTML di partenza. Es.
<h1 id="quellochevolete">...</h1>
Poi si scrive #quellochevolete{...} nel foglio di stile.
Questo è tutto, se avete dubbi o c'è qualcosa che non vi è chiaro fatemelo sapere. Per approfondire l'argomento vi lascio i link che abbiamo consultato durante la lezione scorsa.
Link utili:
