CSS 2. I selettori e le classi

Транскрипт

1 CSS 2 I selettori e le classi

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 2

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 3

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 4

5 Albero del documento html head body title h2 p ol p b li li li Ci serviremo di quest albero per gli esempi sui selettori b Tecnologie di Sviluppo per il WEB 5

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 6

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 7

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 8

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 9

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 10

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 11

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 12

13 Esempio 2 P > EM {color: blue } Netscape 6 Tecnologie di Sviluppo per il WEB 13

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 14

15 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 Tecnologie di Sviluppo per il WEB 15

16 Risultato STRONG + EM {color: red} EM + A {color: blue} Netscape 6 Tecnologie di Sviluppo per il WEB 16

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 17

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 18

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 19

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 20

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 21

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 22

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 23

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 24

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 25

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 26

27 Risultato Tecnologie di Sviluppo per il WEB 27

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 28

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 29

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 30

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 HTML BODY H1 P P HEAD > </P> </BODY> </HTML> P LINK Tecnologie di Sviluppo per il WEB 31

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 32

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 33

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 34

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 35

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 36

37 Risultato Tecnologie di Sviluppo per il WEB 37

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 38

39 Sintassi del selettore ID #SpecialCase { prop1:val1; prop2:val2;} nel file CSS <NomeTag ID= SpecialCase > nel file HTML Tecnologie di Sviluppo per il WEB 39

40 Esempio P#NotaGen { color:yellow; font-size:12pt;} nel file CSS <P ID= NotaGen > testo </P> nel file HTML Tecnologie di Sviluppo per il WEB 40

41 Validatore CSS Per validare i fogli di stile possiamo utilizzare il validatore fornito da W3C Controlliamo sempre i nostri fogli di stile Tecnologie di Sviluppo per il WEB 41