CSS 2. Tipi di selettori. Raggruppamento di selettori. Selettore generale. I selettori e le classi

Transcript

1 CSS 2 I selettori e le classi Tipi di selettori Selettore generale Selettori tipo (quelli singoli) Selettori di gruppo (raggruppamento) Selettori contestuali Selettori figli Selettori fratelli adiacenti Selettori di attributi 2 Selettore generale Raggruppamento di selettori Il selettore generale, indicato con * (asterisco) corrisponde a qualsiasi elemento nella pagina HTML * {color:red;} Qualsiasi elemento della pagina sarà di colore rosso 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; } 3 4

2 Albero del documento head title Ci serviremo di quest albero per gli esempi sui selettori h2 html p b body ol li li li b p 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 5 6 Selettori contestuali 2 Esempio di selettore contestuale 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) P EM {color: blue } Gli elementi <em> contenuti in un paragrafo saranno di colore blue 7 8

3 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 9 10 DIV OL > LI P Esempio 1 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 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> 11 12

4 Esempio 2 Selettori fratelli adiacenti P > EM {color: blue } Netscape 6 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: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 Risultato STRONG + EM {color: red} EM + A {color: blue} Netscape

5 Selettori di attributi (attribute selector) Selettori di attributi 1 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 attributi. Verranno selezionati gli elementi che corrispondono alle specifiche 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 Selettori attributi 2 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 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

6 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 > 23 24

7 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; } P.blue { color:blue; 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 Classi generiche È 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 > 27 28

8 Esempio Elementi SPAN e DIV.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 29 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 30 Esempio Il tag DIV <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 BODY H1 P P P HEAD LINK 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 31 32

9 Utilizzo del tag DIV Il tag SPAN 1 Definizione di selettori ID #abstract, CLASS.new o DIV.new Uso dei selettori <DIV ID= abstract > testo... </DIV> <DIV CLASS= new > testo </DIV> 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 Esempio Se si desidera applicare due classi contemporaneamente si deve procedere come segue: <P CLASS= small > testo1 <SPAN CLASS= fun > testo2 </SPAN>. testo3. </P>.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> 35 36

10 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 diesis (#) #style-name {proprietà:valore;} Sintassi del selettore ID Esempio #SpecialCase { prop1:val1; prop2:val2;} nel file CSS P#NotaGen { color:yellow; font-size:12pt;} nel file CSS <NomeTag ID= SpecialCase > nel file HTML <P ID= NotaGen > testo </P> nel file HTML 39 40

11 Validatore CSS Per validare i fogli di stile possiamo utilizzare il validatore fornito da W3C Controlliamo sempre i nostri fogli di stile 41