CSS – 2 · 2013-10-25 · CSS – 2 I selettori e le classi. Tecnologie di Sviluppo per il WEB 2...

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


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


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;

}


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


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


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)


Esempio di selettore contestuale

P EM {color: blue }– Gli elementi <em> contenuti in un

paragrafo saranno di colore blue


P EM {color: blue }<P> Esempio di stile con selettori<B><EM> contestuali </EM></B> </P>Testo <EM>enfatizzato</EM> senza...

P

B

EM


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


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


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>


Esempio – 2

P > EM {color: blue }Netscape 6


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


Esempio di adjacent sibling

<p>L’ <strong>unica</strong> persona <em>fidata</em> a cui inviare mail è

<a href="mailto:[email protected]"> Collina </a> </p> Gli elementi <strong>, <em> e <a> sono tutti

fratelli:– <strong> e <em> sono adiacenti – <em> e <a> sono adiacenti


Risultato STRONG + EM {color: red} EM + A {color: blue}

Netscape 6


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


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


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


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.


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”.


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


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


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”>


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


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>


Risultato


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”>


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


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


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


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


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>


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


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>


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>


Risultato


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;}


Sintassi del selettore ID

#SpecialCase { prop1:val1; prop2:val2;}

<NomeTag ID=“SpecialCase”>

nel file CSS

nel file HTML


Esempio

P#NotaGen { color:yellow; font-size:12pt;}

<P ID=“NotaGen”> testo </P>

nel file CSS

nel file HTML


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

CSS – 2 · 2013-10-25 · CSS – 2 I selettori e le classi. Tecnologie di Sviluppo per il WEB 2...

Documents

Transcript of CSS – 2 · 2013-10-25 · CSS – 2 I selettori e le classi. Tecnologie di Sviluppo per il WEB 2...