CSS 3. Pseudoclassi 2. Pseudoclassi 1. Pseudoclassi e pseudoelementi

Transcript

1 CSS 3 Pseudoclassi e pseudoelementi Pseudoclassi e pseudoelementi In CSS2 lo stile normalmente è collegato ad un elemento in base alla sua posizione nell albero del documento (document tree) In alcuni scenari ciò non è sufficiente Ad esempio, non esiste nessun elemento che fa riferimento alla prima riga di un paragrafo CSS introduce i concetti di pseudoclasse e pseudoelemento per permettere la formattazione basata su informazioni che risiedono al di fuori del document tree 2 Pseudoclassi 1 Pseudoclassi 2 Alcune caratteristiche della visualizzazione di un documento non sono direttamente dipendenti dalla struttura del documento ma sono piuttosto funzioni dell interazione utente-browser Es., il colore dei link cambia se sono visitati CSS permette di gestire questi aspetti attraverso l uso delle pseudoclassi Alcune pseudoclassi sono definibili solo per alcuni tag in particolari stati Le pseudoclassi hanno un nome e sono collegati, se necessario, al tag utilizzando i due punti (:) La sintassi è simile alla definizione di classi Il supporto non è completo da parte dei browser 3 4

2 La pseudoclasse :first-child Questa pseudoclasse corrisponde ad un elemento se è il primo figlio di qualche altro elemento Se vogliamo indentare il primo paragrafo di un DIV, usiamo il seguente selettore: DIV > P:first-child {text-indent:1cm;} Non funziona con Explorer Esempio Il selettore precedente corrisponderà in questo caso al secondo paragrafo <P> L ultimo TAG P prima della classe nota </P> <DIV CLASS= nota > <P> Il primo TAG P nella classe nota </P> </DIV> Ma non corrisponderà a nessun tag nel seguente caso <P> Un altro TAG P prima della classe nota </P> <DIV CLASS= nota > <H2> Nota </H2> <P> Il primo TAG P nella classe nota dopo un'intestazione </P> </DIV> 5 6 Risultato Le pseudoclassi :link e :visited La pseudoclasse :link si applica ai link che non sono stati ancora visitati :link {color:red;} La pseudoclasse :visited si applica quando un link è stato visitato dall utente :visited {color:green;} 7 8

3 Classi e pseudoclassi Pseudoclassi dinamiche 1 Classi e pseudoclassi possono essere usate insieme come nel seguente esempio A.esterno:visited {color:blue;} Tutti i link che appartengono alla classe esterno una volta visitati diventeranno di colore blu <A CLASS= esterno HREF= > Link Esterno </A> Un elemento può acquisire o perdere una pseudoclasse quando l utente interagisce con il browser Browser interattivi possono cambiare l aspetto della pagina in risposta ad azioni dell utente :hover Si applica quando l utente ha selezionato un elemento, ma non lo ha attivato (è sopra il link con il cursore del mouse) 9 10 Pseudoclassi dinamiche 2 Esempio :active Si applica quando un elemento è stato attivato dall utente (dal momento che l utente preme il bottone del mouse al momento in cui lo rilascia) :focus Si applica quando un elemento ha il focus (accetta eventi da tastiera o altre forme di input testuale) A:link {color:red;} /* link non visitati */ A:visited {color:blue;} /* link visitati */ A:hover {color:yellow;} /* link sorvolati */ A:active {color:lime;} /* link attivi */ Disporre le definizioni in questo ordine, altrimenti le regole a cascata possono non fare attivare alcune delle pseudoclassi 11 12

4 Utilizzo di :focus Esempio di :focus Questa pseudoclasse può essere utilizzata nella compilazione di moduli HTML (form) per evidenziare il campo che l utente ha selezionato. Come si potrebbe mettere in evidenza il campo di input testuale di una form? Fate qualche tentativo e ne parliamo lunedì Funziona solo con Netscape 13 INPUT[TYPE="TEXT"]:focus {background-color:yellow} Radio Button <INPUT TYPE="RADIO"><P> Campo Password <INPUT TYPE="PASSWORD"><P> Campo Testo <INPUT TYPE="TEXT"> Nel file CSS Nel file HTML 14 Quando la pagina è caricata Quando si seleziona il campo TEXT 15 16

5 La pseudoclasse :lang La pseudoclasse :lang(x) corrisponde se l elemento è nel linguaggio X (qui X è un codice di un linguaggio come indicato in HTML 4.0 e nella RFC 1766) Ad esempio, per settare le virgolette di un documento scritto in francese (fr) o tedesco (de) si usa: HTML:lang(fr) {quotes: << >> } HTML:lang(de) {quotes: >> << \2039 \203A } Pseudoelementi Servono per creare astrazioni sull albero del documento oltre a quelle specificate dal linguaggio usato per comporre il documento. Si può far riferimento alla prima linea o lettera del contenuto di un elemento Si può assegnare uno stile ad un contenuto che non esiste nel documento sorgente (e.g., :before :after) Lo pseudoelemento:first-line Risultato Si applica alla prima linea del contenuto di un elemento (e.g., un paragrafo) Ad esempio: P:first-line {text-transform:uppercase;} cambia le lettere della prima linea di ogni paragrafo in lettere maiuscole 19 20

6 Se ridimensioniamo la finestra Lo pseudoelemento :first-letter Si applica alla prima lettera del contenuto di un elemento (e.g., un paragrafo) Ad esempio: P:first-letter {font-size:200%; float:left;} cambia la grandezza della prima lettera di ogni paragrafo Esempio di :first-letter P:first-letter { font-size: 200%; font-style: italic; font-weight: bold; float: left; color: red; } P {text-align:justify;} 23 Codice <BODY> Prova dello pseudoelemento :first-letter<br> <P>Questo è un paragrafo la cui prima lettera ha una formattazione diversa. Esso illustra il funzionamento dello pseudoelemento : first-letter. Attraverso lo pseudoelemento : first-letter riusciamo a controllare lo stile della prima lettera dell'elemento. </P> </BODY> 24

7 Risultato Gli pseudoelementi :before e :after Essi verranno descritti meglio quando affronteremo il problema della generazione automatica del testo in CSS Ad esempio, per far precedere ogni paragrafo appartenente alla classe special dalla parola Speciale! con la S colorata in rosso, usiamo: P.special:before {content: Speciale! } P.special:first-letter{color:red;} Codice <BODY> Prova dello pseudoelemento :before<br> Risultato Non funziona con IE <P> Questo non è un paragrafo speciale </P> <P CLASS="special"> Questo è un paragrafo molto speciale. Esso illustra il funzionamento dello pseudoelemento :before </P> </BODY> 27 28

8 Specificità 1 In un documento CSS.classe1 {color: yellow;} H1 {color: red;} In un documento HTML <H1 CLASS= classe1 > Viva tutti</h1> Quale stile viene applicato? La scritta sarà di colore giallo Ciò dipende dalla specificità della regola Specificità 2 Quando ci sono più stili che si possono applicare ad un elemento si deve calcolare quella che è chiamata specificità della regola La regola con specificità maggiore vince Esiste un algoritmo per calcolare la specificità Specificità 3 Come si calcola la specificità (abc) Selettore semplice (e.g., H1, P, EM ) Specificità 1 (uno) Selettore di classe Specificità 10 (uno-zero) Selettore ID Specificità 100 (uno-zero-zero) Se ci sono più selettori dello stesso tipo si sostituisce 1 con la loro molteplicità Si ignorano gli pseudo-elementi Si contano il numero degli attributi ID nel selettore (= a) Si contano il numero dei selettori attributi classi e pseudo-classi nel selettore (= b) Si contano il numero dei nomi degli elementi (tag) nel selettore (= c) 31 32

9 Esempio * {} specificità 0 LI {} specificità 1 UL LI {} specificità 2 UL OL+LI {} specificità 3 H1 + *[REL=up]{} specificità 11 UL OL LI.red {} specificità 13 LI.red > *.level {} specificità 21 UL.green LI.red {} specificità 22 #x34y {} specificità