Sesta lezione del modulo HTML5 e Css3 del corso per WebMaster & WebDesigner

1. HTML5 e Css3 [6]
Matteo Magni

2. Quello che collega il nostro documento HTML ai
nostri CSS sono essenzialmente i selettori.

3. h1,h2,h3,h4,h5,h6,span,strong,p{color
: purple }
h1,h2,h3,h4,h5,h6,span,strong,p,img{
border:1px solid #fff;
Font­size: 1.5em;
}

4. Tramite quelle semplici i selettori possiamo
attribuire le “regole” css ai vari elementi del nostro
DOM

5. Selettori di relazione
● Selettore di discendenti
div#container p {color: red}
● Selettore di figli (>)
body > p {color: red}
● Selettore di fratelli adiacenti (+)
li + li {margin­left: 10px; color: red}
● Selettore generale di fratelli (~)
h1 ~ h2 {color: red; text­decoration:
underline}

6. Ma ci bastano?

7. <style>
.odd {background­color: yellow;}
.even {background­color: red;}
</style>
<tr class="odd">
<td>text</td>
...
<td>text</td> Dobbiamo usare le classi
</tr>
<tr class="even">
<td>text</td>
...
<td>text</td>
</tr>

8. Nuovi Selettori
http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/

9. Selettore di attributo - E[att^=”val”]
Seleziona ogni elemento E il cui valore di attributo
att inizia con “val”.
object[type^="image/"]

10. Selettore di attributo – E[att$=”val”]
Seleziona ogni elemento E il cui valore di attributo
att termina con “val”.
a[href$=".html"]

11. Selettore di attributo – E[att*=”val”]
Seleziona ogni elemento E il cui valore di attributo
att contiene la sottostringa “val”.
p[title*="hello"]

12. jQuery Like CSS syntax

13. <input name="newsletter" />
<input name="milkman" />
<input name="newsboy" />
<script>$('input[name^="news"]').val('news
here!');</script>
<input name="man­news" />
<input name="milkman" />
<input name="letterman2" />
<input name="newmilk" />
<script>$('input[name*="man"]').val('has man in
it!');</script>

14. PseudoClassi

15. Pseudo-classe E:root
Seleziona l'elemento radice del documento. In
HTML, l'elemento radice è sempre l'elemento
HTML.

16. Pseudo-classe E:nth-child(n)
Seleziona ogni elemento E che è l'n-esimo figlio del suo
genitore.
tr:nth­child(2n+1) /* represents every odd row of an HTML table
*/
tr:nth­child(2n) /* represents every even row of an HTML table
*/
/* Alternate paragraph colours in CSS */
p:nth­child(4n+1) { color: navy; }
p:nth­child(4n+2) { color: green; }
p:nth­child(4n+3) { color: maroon; }

17. Passo delle formule
/*dispari */
tr:nth­child(2n+0)
tr:nth­child(2n)
/* pari */
tr:nth­child(2n+1)
tr:nth­child(10n­1) /* 9, 19, 29, ecc */
tr:nth­child(10n+9) /* 9, 19, 29, ecc */

18. Pseudo-classe E:nth-child(n)
● can take 'odd' and 'even' as arguments
tr:nth­child(2n+1) /* represents every odd row of an
HTML table */
tr:nth­child(odd) /* same */
tr:nth­child(2n) /* represents every even row of an
HTML table */
tr:nth­child(even) /* same */

19. Pseudo-classe E:nth-last-child(n)
Seleziona ogni elemento E che è l'n-esimo figlio del suo
genitore, partendo dall'ultimo figlio.
tr:nth­last­child(­n+2)
/* represents the two last rows of an HTML
table */
foo:nth­last­child(odd)
/* represents all odd foo elements in their
parent element,counting from the last one */

20. Pseudo-classe E:nth-of-type(n)
Seleziona ogni elemento E che è l'n-esimo fratello
del suo tipo.
/*elementi p all'interno del div
distanziati di 2*/
div p:nth­of­type(2n) {background­
color: yellow}

21. Pseudo-classe E:nth-last-of-type(n)
Seleziona ogni elemento E che è l'n-esimo fratello
del suo tipo, partendo dall'ultimo fratello.
/* seleziono il penultimo p
all'interno del div*/
div p:nth­last­of­type(2)
{background­color: yellow}

22. E:last-child E:first-child
Last:
Seleziona ogni elemento E che è l'ultimo figlio del
suo genitore.
First:
Seleziona ogni elemento E che è il primo figlio del
suo genitore.

23. Pseudo-classe E:first-of-type
Seleziona ogni elemento E che è il primo fratello del suo tipo.
//dl dt:first­of­type
<dl>
<dt>gigogne</dt>
<dd>
<dl>
<dt>fusée</dt>
<dd>multistage rocket</dd>
<dt>table</dt> Non il terzo
<dd>nest of tables</dd>
</dl>
</dd>
</dl>

24. Pseudo-classe E:last-of-type
Seleziona ogni elemento E che è l'ultimo fratello
del suo tipo.
tr > td:last­of­type

25. Pseudo-classe
E:only-child
Seleziona ogni elemento E che è l'unico figlio del suo genitore.
E:only-of-type
Seleziona ogni elemento E che è l'unico fratello del suo tipo.
E:empty
Seleziona ogni elemento E che non ha figli (inclusi i nodi di testo)

26. Pseudo-classe di destinazione
E:target
Seleziona un elemento E che è la destinazione
dell'URL di riferimento.
*:target { color : red }

27. Pseudo-classe di stato
E:enabled
Seleziona ogni elemento E dell'interfaccia utente (controllo di un form) che è
abilitato.
E:disabled
Seleziona ogni elemento E dell'interfaccia utente (controllo di un form) che è
disabilitato.
input[type="text"]:enabled { background:#ffc; }
input[type="text"]:disabled { background:#ddd; }

28. Pseudo-classe di stato
E:checked
Seleziona ogni elemento E dell'interfaccia utente (controllo
di un form) che viene selezionato.
input:checked { border:1px solid #090; }
E::selection
Seleziona la porzione di un elemento E attualmente
selezionata o evidenziata dall'utente.

29. Pseudo-classe negazione
E:not(s)
Seleziona ogni elemento E che non corrisponde
al selettore semplice s.

30. Supporto dei Browser?
http://kimblim.dk/css-tests/selectors/

32. Transizioni
Css

33. p {
width: 200px;
height: 200px;
background­color: yellow;
}
p:hover {
background­color: red;
}

34. p {
width: 200px;
height: 200px;
background­color: yellow;
transition­property: background­color;
transition­duration: 5s;
}
p:hover {
background­color: red;
}

35. Regole proprietarie
­webkit­transition­property: background­color;
­webkit­transition­duration: 2s;
­o­transition­property: background­color;
­o­transition­duration: 2s;
­moz­transition­property: background­color;
­moz­transition­duration: 2s;

36. Attributi
● transition-property
proprietà a cui assegnamo la transizione
● transition-duration
durata della transizione in secondi (0 default)

37. Attributi
● transition-timing-function
Come si calcola il cambiamento:
ease, linear, ease-in, ease-out, ease-in-out,
cubic-bezier
● transition-delay
ritardo nell'iniziare la transizione

38. Domande?
Slide:
http://www.slideshare.net/ilbonzo
Code:
https://github.com/ilbonzo/Cypher
mail:
matteo@magni.me