Post on 10-Jul-2020
CSS – 2
I selettori e le classi
Tecnologie di Sviluppo per il WEB 2
Tipi di selettori
Selettore generale Selettori tipo (quelli singoli) Selettori di gruppo (raggruppamento) Selettori contestuali Selettori figli Selettori fratelli adiacenti Selettori di attributi
Tecnologie di Sviluppo per il WEB 3
Selettore generale
Il selettore generale, indicato con * (asterisco) corrisponde a qualsiasi elemento nella pagina HTML
* {color:red;}– Qualsiasi elemento della pagina sarà di
colore rosso
Tecnologie di Sviluppo per il WEB 4
Raggruppamento di selettori
Si possono raggruppare i selettori. È sufficiente separare ogni selettore con una virgola.
Nell’esempio che segue ogni elemento header sarà di colore verde:
H1, H2, H3, H4, H5, H6 { color:green;
}
Tecnologie di Sviluppo per il WEB 5
Albero del documento
Ci serviremo di quest’albero per gli esempi sui selettori
h2 p
b
ol
li li li
p
b
title
html
head body
Tecnologie di Sviluppo per il WEB 6
Selettori contestuali – 1
I selettori contestuali ci permettono di avere un controllo fine sul modo di apparire di elementi HTML quando essi sono associati ad altri elementi HTML. Specificano una gerarchia di appartenenza a cui associare lo stile
I selettori contestuali sono separati da uno spazio
Tecnologie di Sviluppo per il WEB 7
Selettori contestuali – 2
I selettori contestuali sono anche chiamati selettori discendenti
Un selettore contestuale della forma “A B”
è applicato quando un elemento B è un arbitrario discendente di un elemento antenato A (B non deve essere necessariamente figlio di A)
Tecnologie di Sviluppo per il WEB 8
Esempio di selettore contestuale
P EM {color: blue }– Gli elementi <em> contenuti in un
paragrafo saranno di colore blue
Tecnologie di Sviluppo per il WEB 9
P EM {color: blue }<P> Esempio di stile con selettori<B><EM> contestuali </EM></B> </P>Testo <EM>enfatizzato</EM> senza...
P
B
EM
Tecnologie di Sviluppo per il WEB 10
Selettore figlio
Un selettore figlio della forma “A > B”
è applicato quando l’elemento B è figlio dell’elemento A
– Può consistere anche di più selettori separati dal simbolo “>”• DIV OL > LI P
Tecnologie di Sviluppo per il WEB 11
DIV OL > LI P
Il precedente selettore corrisponde ad un elemento P che è un discendente dell’elemento LI
L’elemento LI deve essere un figlio dell’elemento OL
L’elemento OL deve essere un discendente dell’elemento DIV
Tecnologie di Sviluppo per il WEB 12
Esempio – 1
Il selettore div > strong
selezionerà l’elemento <strong> (enfasi più forte) nel seguente esempio– <div> Questo è il <strong> nocciolo </strong>
della questione</div>Ma non lo selezionerà nel seguente esempio <div> <p>Questo è il <strong>nocciolo</strong> della questione</p> </div>
Tecnologie di Sviluppo per il WEB 13
Esempio – 2
P > EM {color: blue }Netscape 6
Tecnologie di Sviluppo per il WEB 14
Selettori “fratelli adiacenti”
Un selettore fratello adiacente (adjacent sibling) è della forma
“A + B” si applica quando gli elementi A e B
hanno lo stesso genitore e il tag A precede immediatamente il tag B
Tecnologie di Sviluppo per il WEB 15
Esempio di adjacent sibling
<p>L’ <strong>unica</strong> persona <em>fidata</em> a cui inviare mail è
<a href="mailto:collina@fifa.com"> Collina </a> </p> Gli elementi <strong>, <em> e <a> sono tutti
fratelli:– <strong> e <em> sono adiacenti – <em> e <a> sono adiacenti
Tecnologie di Sviluppo per il WEB 16
Risultato STRONG + EM {color: red} EM + A {color: blue}
Netscape 6
Tecnologie di Sviluppo per il WEB 17
Selettori di attributi (attribute selector)
Con i selettori di attributi si seleziona un elemento in base ai suoi attributi ed ai loro valori
Ci sono quattro modi per specificare i selettori di attributi. Verranno selezionati gli elementi che corrispondono alle specifiche
Tecnologie di Sviluppo per il WEB 18
Selettori di attributi – 1
1.[att]– Corrisponde quando l’elemento ha settato
l’attributo att a prescindere dal suo valore
2.[att=value]– Corrisponde quando l’attributo att
dell’elemento assume il valore value
Tecnologie di Sviluppo per il WEB 19
Esempio
H1[title] { color: blue}– Selezionerà tutti gli elementi H1 che hanno
specificato l’attributo title, l’intestazione sarà di colore blu.
P[ALIGN=“LEFT”] { color: red}– Selezionerà tutti gli elementi P che hanno
settato il valore dell’attributo ALIGN a LEFT
Tecnologie di Sviluppo per il WEB 20
Selettori di attributi – 2
3.[att~=value]– Corrisponde quando il valore dell’attributo
att è costituito da una lista di “parole” separate da spazio una delle quali è esattamente value.
– Quando si usa questo tipo di selettore le “parole” contenute nel valore non possono contenere lo spazio.
Tecnologie di Sviluppo per il WEB 21
Selettori attributi – 3
4.[att |= value]– Corrisponde quando il valore dell’attributo
att è costituito da una lista di “parole” separate da trattino ( - ) che iniziano per value
[LANG |= “en”]– Selezionerà tutti gli elementi in cui il valore
dell’attributo LANG inizia per en, tipo “en”, “en-US”, “en-cockney”.
Tecnologie di Sviluppo per il WEB 22
Attributi di HTML – 1 HTML 4.0 introduce due nuovi attributi
per TUTTI gli elementi del documento HTML: ID e CLASS– ID assume un valore arbitrario purché
univoco su tutto il documento. Questo permette di identificare uno specifico elemento tra tutti gli altri
– NAME veniva usato per lo scopo che ha adesso ID, ma non era disponibile per tutti gli elementi, e soprattutto non era richiesta l’univocità del nome
Tecnologie di Sviluppo per il WEB 23
Attributi di HTML – 2 CLASS assume un valore stringa
qualunque– Più elementi possono condividere lo stesso
valore. Questo permette di assegnare gli elementi ad una classe: <p class="spiegazione"> … </p><p class="esempio"> … </p>
CSS permette di assegnare regole di presentazione agli elementi per NAME, per CLASS e per ID
Tecnologie di Sviluppo per il WEB 24
Selettori classe
La sintassi per la definizione –(in un file .css) è:
• nome_tag.nome_classe {proprietà : valore}
La sintassi per il suo utilizzo–(in un file .html) è:
• <nome_tag CLASS=“nome_classe”>
Tecnologie di Sviluppo per il WEB 25
Esempio –1
P.abstract {text-align:center; font-family:arial;
font-size:11pt; }
<P CLASS=abstract> Qui va inserito l’abstract
dell’articolo </P>
Nel file .css
Nel file .html
Tecnologie di Sviluppo per il WEB 26
Esempio – 2 <STYLE>P.centered { text-align:center; margin-left:0.5cm; }P.red { color:red; font-style:italic; }</STYLE>
….<P CLASS=“red”>Questo paragrafo ha il testo rosso
</P><P CLASS=“centered”>Questo paragrafo ha il testo
centrato</P>
Tecnologie di Sviluppo per il WEB 27
Risultato
Tecnologie di Sviluppo per il WEB 28
Elementi generici
È possibile definire classi per elementi generici, quindi riusabili in tag distinti
La sintassi per la definizione è:– .nome_classe {proprietà : valore}– Il punto iniziale è importante!!!
La sintassi per il suo uso è:– <nome_tag CLASS=“nome_classe”>
Tecnologie di Sviluppo per il WEB 29
Esempio
.cent_arial {text-align:center; font-family:arial;
font-size:11pt; }
<P CLASS=“cent_arial”>…….
<DIV CLASS=“cent_arial”>
Nel file .css
Nel file .html
Tecnologie di Sviluppo per il WEB 30
Elementi SPAN e DIV SPAN
– si applica a una porzione di testo– si utilizza per dare caratteristiche di
formattazione particolari a una porzione di testo limitata
• Text level
DIV– si utilizza per assegnare uno stile a uno o
più blocchi di testo• Block level
Tecnologie di Sviluppo per il WEB 31
Esempio<HTML><HEAD>...</HEAD><BODY><H1>titolo</H1><DIV><P> primo paragrafo </P><P> secondo paragrafo </P></DIV><P> terzo paragrafo<A
HREF="pippo.html">link</A>
</P></BODY></HTML>
HTML
HEAD
BODYH1
P LINK
P
P
Tecnologie di Sviluppo per il WEB 32
Il tag DIV
Il tag DIV serve a dividere il documento in diverse porzioni– Ogni porzione del documento contiene tag HTML– È possibile posizionare ogni “DIV” all’interno della
pagina– Utilizzeremo DIV e CSS per “simulare” frame
Utilizzando gli attributi ID e CLASS è possibile applicare diversi stili a diverse porzioni della pagina
Tecnologie di Sviluppo per il WEB 33
Utilizzo del tag DIV
Definizione di selettori – ID
• #abstract,
– CLASS• .new o DIV.new
Uso dei selettori– <DIV ID=“abstract” …> …testo... </DIV>– <DIV CLASS=“new”> …testo… </DIV>
Tecnologie di Sviluppo per il WEB 34
Il tag SPAN – 1
Gli stili possono essere applicati al contenuto di un tag
Non è possibile combinare direttamente due classi
<P CLASS=“small, fun”> …. </P> NO!!! È possibile applicare uno stile anche a
porzioni di contenuto del tag usando il tag SPAN
Il tag contenitore SPAN è utilizzato per applicare uno stile ad un gruppo di caratteri
Tecnologie di Sviluppo per il WEB 35
Il tag SPAN – 2
Se si desidera applicare due classi contemporaneamente si deve procedere come segue:<P CLASS=“small”> … testo1 … <SPAN CLASS=“fun”> … testo2… </SPAN> …. testo3…. </P>
Tecnologie di Sviluppo per il WEB 36
Esempio
.green {color:green;}
.red {color:red;}
<P class=“green”>Il testo che sto scrivendo è verde <SPAN class=“red”> questo è rosso </SPAN> e ancora verde </P>
Tecnologie di Sviluppo per il WEB 37
Risultato
Tecnologie di Sviluppo per il WEB 38
Selettori ID
Quasi tutti i tag accettano come attributo ID Nella stessa pagina HTML non ci possono
essere due attributi ID con lo stesso valore L’attributo ID può essere utilizzato per
identificare univocamente gli elementi di un documento
La sintassi del selettore ID è simile a quella delle classi; invece del punto (.) si usa il cancelletto (#) – #style-name {proprietà:valore;}
Tecnologie di Sviluppo per il WEB 39
Sintassi del selettore ID
#SpecialCase { prop1:val1; prop2:val2;}
<NomeTag ID=“SpecialCase”>
nel file CSS
nel file HTML
Tecnologie di Sviluppo per il WEB 40
Esempio
P#NotaGen { color:yellow; font-size:12pt;}
<P ID=“NotaGen”> testo </P>
nel file CSS
nel file HTML
Tecnologie di Sviluppo per il WEB 41
Validatore CSS
Per validare i fogli di stile possiamo utilizzare il validatore fornito da W3C– http://jigsaw.w3.org/css-validator
Controlliamo sempre i nostri fogli di stile