docFOGLI DI STILE (CSS: Cascading Style Sheets )
download 
Reclamo Transcript
FOGLI DI STILE (CSS: Cascading Style Sheets )
FOGLI DI STILE (CSS: Cascading Style Sheets )
1
CSS , diversamente dall’HTML è case sensitive (fa
distinzione fra maiuscole o minuscole)
Per assegnare un valore a un attributo vengono
usati i due punti ‘:’ laddove in HTML viene usato
un uguale ‘=‘
Gli attributi consecutivi sono separati da ‘;’ (punto
e virgola) invece che da ‘,’ come accade nell’HTML
molti attributi sono divisi da ‘-’ anche se fanno
parte integrante del nome stesso.
2
Ci sono tre modi con cui applicare i CSS ad un
documento HTML:
1. direttamente su di un elemento HTML (fogli di stile in
linea);
2. nell’header della pagina HTML (fogli di stile incorporati);
3. in un file esterno con estensione .css (fogli di stile
esterni);
3
I fogli di stile in linea si utilizzano quando si ha la necessità di
impostare uno stile a uno specifico elemento o blocco di
elementi, senza che questo vada a influire sulle altre parti dello
stesso documento.
La sintassi generale è la seguente:
<un_tag_qualsiasi_HTML style=“attributo1: valore1; attributo2:
valore2;……; attributoN : valoreN; ">
testo da formattare
</un_tag_qualsiasi_HTML >
4
Esempio : vogliamo applicare ad un paragrafo <p>
determinate caratteristiche ma con la certezza che
queste non siano estese a tutti gli altri paragrafi <p>
contenuti all'interno della stessa pagina web.
Utilizziamo quindi lo stile in linea:
<p style="text-align: justify; text-indent: 12px; color : blue;">Ciao a
tutti</p>
La frase “Ciao a tutti” (testo racchiuso fra i tag) avrà come stile:
giustificato con una indentazione di 12 pixel e colore blu.
5
Con i CSS si adoperano solitamente due elementi di
HTML che non hanno altro scopo che quello di fare
da contenitore:
DIV, caratterizzato dai tag <DIV> e </DIV>
SPAN, caratterizzato dai tag <SPAN> e </SPAN>
6
DIV non lascia spazio prima e dopo la propria
chiusura, ma, essendo un elemento di blocco, va a
capo;
SPAN, essendo un elemento inline non va a capo.
L’elemento inline è, appunto, quello che non va a
capo e continua sulla stessa linea del tag che lo
include.
Esempio
<div style=“font-size:18px; font-family: Arial, Helvetica, sans-serif;
color: green;">
tutto il blocco avrà colore verde, dimensione 12px e carattere arial
</div>
7
I fogli di stile incorporati sono utilizzati quando allo stesso stile
fanno riferimento diversi elementi nella stessa pagina HTML.
Sarebbe estremamente dispersivo, oltre che laborioso, definire
sempre lo stesso stile più volte all'interno della stessa pagina
visto che servirebbe sempre per lo stesso identico scopo. Molto
meglio definirlo una sola volta, ad inizio pagina.
In questo caso le istruzioni non dovranno più essere
inserite all'interno di uno specifico elemento come
abbiamo visto nella spiegazione in linea ma saranno
dichiarate ad inizio pagina, usando i tags <style> e
</style> posto all'interno della sezione <head> </head>
8
La sintassi generale è la seguente:
<head>
…..
<style type="text/css“>
Selettore1
{
attributo1: valore1; attributo2: valore2;……; attributoN : valoreN;
}
Selettore2
{
attributo1: valore1; attributo2: valore2;……; attributoN : valoreN;
}
……
SelettoreN
{
attributo1: valore1; attributo2: valore2;……; attributoN : valoreN;
}
</style>
</head>
9
Esempio : vogliamo applicare a tutti i paragrafi <p> della pagina
HTML
Utilizziamo quindi lo stile incorporato (nella sezione <head>
della pagina stessa:
<head>
….
<style type="text/css">
p{
text-align: justify; /* commento per allineamento giustificato */
color: #ff0000;
/* commento per colore rosso */
}
</style>
…..
</head>
10
Un selettore, svolge funzione di etichetta di un
contenitore, si possono cioè assegnare dei parametri
e marcarli con una etichetta così che quando
serviranno quei parametri, basterà richiamare il nome
scelto per l’etichetta e con esso saranno richiamati
tutti i valori a lui associati, valori specificati una sola
volta nel foglio di style (interno o esterno che sia).
L'uso dei selettori di elemento o di classe, può essere
associato a qualsiasi elemento valido di HTML .
11
Finora abbiamo selezionato gli elementi HTML sui quali
applicare lo stile, specificando come selettore il tipo
dell’elemento (ad esempio, abbiamo specificato tutti gli
elementi di tipo p ).
Vediamo ora come selezionare :
Solo uno specifico elemento attraverso i selettori di
elemento;
Tutti gli elementi logicamente raggruppati in una classe
attraverso i selettori di classe.
12
Supponiamo di voler selezionare uno specifico elemento
tra tutti quelli di un tipo.
Ad esempio, uno specifico elemento p tra tutti quelli di
tipo p presenti nel documento HTML
Per fare questo ricorriamo ad una importante proprietà
di tutti gli elementi HTML: la proprietà ID
ID serve per identificare univocamente un elemento
assegnandogli un nome (“logico”).
La sintassi è (all’interno del tag HTML) :
ID = “Nome_logico”
e nel foglio di stile per riferirci ad esso #Nome_logico
13
14
15
Il risultato è il seguente:
16
Supponiamo di voler selezionare solo alcuni elementi tra
tutti quelli di un tipo o anche di tipo diverso
Quello che ci serve è creare una classe che raggruppi
più elementi ai quali applicare lo stesso stile
Per fare questo ricorriamo all’attributo CLASS
CLASS serve per identificare un gruppo di più elementi
all’interno di una stessa pagina o anche in più pagine
HTML. Alla classe viene assegnato un nome logico.
La sintassi è (all’interno del tag HTML) :
CLASS = “Nome_logico”
e nel foglio di stile per riferirci ad esso .Nome_logico
17
18
Risultato:
19
Nell’esempio utilizzato, è stata assegnata una stessa
classe ad elementi di tipo diverso.
Volendo applicare lo stile solo ad elementi di un certo
tipo all’interno di una classe, dobbiamo specificare nel
selettore (del codice CSS) il tipo dell’elemento secondo
la seguente sintassi :
TipoElemento.NomeClasse
20
21
Risultato:
22
Un foglio di stile esterno è semplicemente un file di testo con
estensione .css che racchiude tutte le dichiarazioni di stile, e
che può essere richiamato da tutte le pagine web che
compongono il sito.
In questo foglio, o fogli visto che possono essere più di
uno, andremo a scrivere tutti gli stili che ci servono,
comprese le "classi" e gli "id".
Anche nel caso di uno o più fogli di stile esterni, sarà
sempre possibile definire all'occorrenza stili ad inizio
pagina e stili in linea, questi hanno priorità su quanto
dichiarato nel foglio di stile esterno.
N.B.-> La gerarchia è : stile in linea – stile incorporato –
stile esterno
23
La sintassi generale è la seguente:
File HTML
<html>
<head>
<title>Il mio documento</title>
<link rel="stylesheet" type="text/css" href=“style.css" />
</head>
<body> ...
</head>
Percorso e nome
………..
del file css
File CSS
Selettore1
{
attributo1: valore1; attributo2: valore2;……; attributoN : valoreN;
}
Selettore2
{
attributo1: valore1; attributo2: valore2;……; attributoN : valoreN;
}
……………….
24
La cosa realmente intelligente è che più documenti HTML
possono essere linkati allo stesso foglio di stile. In altre
parole, un file CSS può essere usato per controllare il layout
di più documenti HTML contemporaneamente.
25
