LEZIONE 7
Integrazione tra fogli di stile e pagine HTML
Dopo aver eseguito una panoramica relativa ai fogli di stile CSS nella precedente lezione, andremo a mettere in pratica i concetti già visti, applicando i CSS alle pagine HTML, osservandone le modalità di interazione.
INTEGRAZIONE TRA FOGLI DI STILE E PAGINE HTML
Creazione di un file HTML
File HTML nel quale si applicano le classi. Copiare il seguente codice in un nuovo file di testo e salvare come pagina.HTML
Dimostrazione di fogli di stile CSS
il TAG H1 è stato ridefinito nel file CSS
Anche H2 è stato definito nel CSS
Questo testo è inserito all'interno di un TAG <P> che non è stato definito nel CSS e assume i valori di default del browser
A questo testo, invece, se pur è inserito all'interno di un TAG
è stato assegnata una classe definita nel CSS, vedere il file sorgente di questa pagina per vedere come è stata assegnata.
Questo titolo H1 ha assegnata la classe "colorerosso"
L'attributo cromatico definito in H1 e H2 é sovrascritto dalla classe assegnata.
cella colorata tramite classe: sfondocolore
cella colorata tramite classe: sfondocolore2
Creazione di un file CSS
File CSS nel quale si definiscono le classi. Copiare il seguente codice in un nuovo file di testo e salvare come fogliodistile.css
body {
background-color: #FFFFFF;
}
h1 {
font-family: "Times New Roman", Times, serif;
font-size: 2em;
font-weight: bold;
text-align: center;
color: #0099FF;
}
h2 {
font-family: "Times New Roman", Times, serif;
font-size: 1em;
color: #666666;
text-align: center;
}
.attributoparagrafo {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
text-align: justify;
padding: 2em;
font-weight: bold;
color: #006633;
}
.colorerosso {
color: #FF0000;
}
.sfondocolore {
background-color: #FFCC00;
}
.sfondocolore2 {
background-color: #CCCCCC;
}
Una volta creati i due file e registrati sul vostro hard disk, visualizzare in un browser il file .HTML per vedere come interagiscono i CSS tramite il file collegato.
L'UTILIZZO dei CSS
Per comprendere maggiormente l'interazione tra i fogli di stile e le pagine HTML, bisogna tenere presente una regola determinante nell'accessibilità, che vuole completamente scollegati i contenuti informativi dall'aspetto estetico del file. Infatti l'uso dei fogli di stile CSS all'interno di una pagina HTML fa si che questa risulti sprovvista di formattazione, mentre ogni aspetto grafico viene esternalizzato al file CSS.
Definiremo, percui, sulla base del file CSS precedentemente scritto, alcuni altri parametri necessari al nostro scopo.
Gestire i link tramite CSS
Per poter navigare con facilità all'interno di un sito, non solo bisogna bisogna prestare attenzione al concetto logico di link, ma si può anche evidenziare un collegamento tramite variazioni cromatiche.
Per definire i link possiamo impostare i valori di default dei link, significa che TUTTI i link assumeranno gli attributi, oppure possiamo creare una o più classi che attribuiscono al link gli attributi.
Per gestire un link è necessario definire l'aspetto di:
* link
* visited
* hover
* active
Link è l'attributo del link non cliccato, con visited viene definito il valore del link già cliccato, hover è l'effetto di "roll-over" quando si passa sopra al link con il mouse, active è una variazione che risponde alla tabulazione da tastiera.
impostare i valori dei link tramite una classe
Con questo esercizio andremo a creare una classe che definisce una tipologia di link e poi a verificarne il risultato nell'HTML.
Trascrivere queste impostazioni nel file fogliodistile.CSS precedentemente creato:
a.classeperlink:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
color: #000000;
text-decoration: none;
}
a. classeperlink:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
color: #999999;
text-decoration: none;
}
a. classeperlink:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
background-color: #0099FF;
}
a. classeperlink:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
background-color: #999966;
}
Aggiungere nel file pagina.HTML i seguenti link:
Link di esempio: passare sopra con il mouse o premere il tabulatoreLink senza classe assegnata
Verificare il risultato tramite browser, aprendo la pagina.HTML
impostare i valori di default dei link (tutti)
A differenza del precedente esercizio, con questo andremo definire una tipologia per tutti i link presenti nella pagina.
Per comprendere bene rimuovere la classe "classeperlink" precedentemente creata (tutte le voci) e trascrivere queste nuove impostazioni nel file fogliodistile.CSS:
a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
color: #000000;
text-decoration: none;
}
a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
color: #999999;
text-decoration: none;
}
a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
background-color: #0099FF;
}
a:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
background-color: #999966;
}
Aggiungere nel file pagina.HTML il seguente link:
Link di esempio: passare sopra con il mouse o premere il tabulatore
Da notare: all'interno del TAG non viene assegnata nessuna classe CSS
Creare scritte evidenziate
Un altro aspetto utile nella creazione di pagine web HTML integrate con i fogli di stile CSS, è la possibilità di evidenziare una scritta o un titolo senza interferire minimamente con l'accessibilità o gli ausili.
È possibile impostare uno sfondo sotto ad una scritta pari alla larghezza della stessa, oppure creare una barra che prende l'interezza della pagina all'interno della quale giace una scritta.
Con questo esercizio si crea una classe che ha definito come solo attributo lo sfondo (background-color) e l'andremo ad applicare su più tag.
Nel file fogliodistile.CSS scrivere:
.sfondoscritta {
background-color: #95D7E7;
}
Nel file pagina.HTML inserire:
Tabella di esempio per sfondi colorati con immagini
il testo assume i valori della classe
su uno sfondo con immagine
cella senza sfondo
Da notare: la classe immaginedisfondo viene applicata al TAG
per riempire solo la colonna di sinistra.
Verificare il risultato con il browser.
Adesso nel file fogliodistile.CSS modificheremo la classe immaginedisfondo come segue:
.immaginedisfondo {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 2em;
font-weight: bold;
color: #000066;
background-image: url(immagine_sfondo.gif);
text-align: center;
padding: 0.2em;
background-position: center center;
background-repeat: no-repeat;
background-color: #FFCC00;
}
Verificare il risultato con il browser: l'immagine di sfondo è andata al centro e il colore assegnato a riempito la cella.
ESERCITAZIONE LIBERA
Inserire nel file pagina.HTML una immagine, definire una classe nel file fogliodistile.CSS che ne regola l'allineamento. Applicare la classe all'immagine attraverso l'attribuzione al TAG oppure includendo l'immagine tra due TAG
.
Modificare per la classe creata gli attributi di sfondo (background-color)