I fogli di stile non sono altro che un modo di definere le caratteristiche di un documento, separando quelle che sono le regole di visualizzazione e permettendo di avere un controllo maggiore e realizzando moduli che poi sono riutilizzabili anche in altre pagine web, cioe’ andando a costiture dei veri e propri template. In termini pratici i fogli di stile sono delle dichiarazioni , scritte secondo determinate regole e una determinata sintassi che vedremo , che vengono inserite in una pagina web o meglio ancora vengono messe direttamente dentro dei fogli di stile con estensibile file css e da qui collegati alla pagina html. I Fogli di stile hanno il vantaggio di dare molto piu’ controllo sul comportamento grafico , si possono per esempio creare stili per i titolo, per i link di navigazione o per quelli nel testo , per le note. Ma di preciso cos’e’ uno stile? Uno stile è l’insieme di caratteristiche di un elemento della pagina ossia colore e dimensione del font, tipo di bordi, allinemaento e cosi via… I Fogli di stile possono essere interni o esterni alla pagina i fogli di stile interni si fanno con text e css. Volendo fare un esempio di codice avremo
<head> <style type ="text/css" media="screen"> //esempio di stile per il video <style type ="text/css" media="print"> //stile per la stampa </head>
La solutizione ideale pero’ quando si lavora con i CSS è proprio quella di definire uno o piu’ file css esterni che contengano tutti gli stili in uso all’interno del sito.
All’interno dell’head del file andra’ poi inserito un elemento link con i seguenti attributi
- rel serve a definire il tipo di relazione che intercorre tra il documento e il file collegato, per indicare un foglio di stile si usa il valore stylesheet
- type specifica il tipo di dati del file da collegare in questo caso si usa la dicitura text/css
- href indica la posizione del foglio di stile , puo’ assumere come valore un percorso, assoluto o relativo, o un url;
- media permette di definire un foglio di stile differente che si sta utilizzando per la visualizzazione. Quindi un possiible link esterno potrebbe essere composto nella seguente maniera
<link href=”dsafa.sas” rel=”stylesheet” type=”text/css” />
Se utilizzate un editor visuale come per esempio dreamweaver questo avviene in maniera quasi automatica senza cioe’ che il programmatore quasi se ne accorga, è possibile utilizzare quindi questi tipi di programma come dreamweaver, komposer e altri che facilitano e non poco la vita del programmatore, ma che purtruppo sono quasi tutti a pagamento.
Sintassi dei vogli di Stile CSS
Veniamo adesso a parlarvi della codifica dei fogli di stile sintassi che è fondamentalmente data da
Selettore aperta dichiarazioni chiusa
Vediamo subito un esempio
<style> < font-family: Arial, Helvetica, sans-serif; background-color: #000FF
Quelli che abbiamo visto si chiamano selettori e possono avere le seguenti tipologie
- elementi HTML quindi si puo’ definire tutte le occorrenze di un determinato elemento devono avere un determinato stile
- ID un identificatore univoco nel documento, ossia il nome di un’istanza di un elemento all’interno del testo, si inserisce con un attributo del tipo id=”valore”
- Classi le classi vengono richiamate con la seguente metodologia class= nome della classe.
Vediamo adesso le pseudoclassi, ossia quelle che permettono di impostare la visualizzazione di un elemento in un ben determinato stato, probabilmente le avete gia’ riviste , l’elemento tipico infatti è l’elmento A che impostate nelle proprietà di pagina di Dreamweaver per permettere ai visitatori di accedere ai vari link in diverse modalità per esempio
- a:link aperta color:#CC3366; chiusa
- a:hover aperta : #669933; chiusa
- a:visited aperta color: @000000; chiusa
dove
- link è il collegamento alla pagina web che ancora si deve visitare
- visited indica lo stato di collegamento gia’ visitato
- hover lo stato del collegamento quando ci passiamo sopra con il mouse
- active definisce il collegamento attivo ossia nel momento stesso in cui l’utente ci fa click sopra.
Vediamo adesso come è possibile agire sui Font tramite i CSS
Innanzitutto vediamo qual’e’ la dichiarazione dei font disponibili.
- font-family segue uno o piu’ tipi di font
- font-size per la dimensione
- font-style puo’ assumere valore italic o oblique
- font-weight sta ad indicare lo spessore i suoi valori sono bold, bolder, lighter
- font-variant definisce una variante come il maiuscoletto
- text-transform puo’ avere valori come capitalize , ossia le iniziali maisucole, uppercase tutto maiuscolo, lowercase tutto minuscolo
- color da il colore del testo
- text-decoration assume valori come inderline sottolineato, overline linea appoggiata, line.through per il barrato, blink per il lampeggiante
- lette spacing e word spacing la spaziatura tra lettere e tra parole espressa in em