0
HTML5 e Css3 [6]Matteo Magni
Quello che collega il nostro documento HTML ainostri CSS sono essenzialmente i selettori.
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;    ...
Tramite quelle semplici i selettori possiamoattribuire le “regole” css ai vari elementi del nostroDOM
Selettori di relazione● Selettore di discendentidiv#container p {color: red}● Selettore di figli (>)body > p {color: red}●...
Ma ci bastano?
<style>.odd {background­color: yellow;}.even {background­color: red;}</style><tr class="odd"><td>text</td>...<td>text</td>...
Nuovi Selettorihttp://www.456bereastreet.com/archive/200601/css_3_selectors_explained/
Selettore di attributo - E[att^=”val”]Seleziona ogni elemento E il cui valore di attributoatt inizia con “val”.object[type...
Selettore di attributo – E[att$=”val”]Seleziona ogni elemento E il cui valore di attributoatt termina con “val”.a[href$="....
Selettore di attributo – E[att*=”val”]Seleziona ogni elemento E il cui valore di attributoatt contiene la sottostringa “va...
jQuery Like CSS syntax
<input name="newsletter" /><input name="milkman" /><input name="newsboy" /><script>$(input[name^="news"]).val(news here!);...
PseudoClassi
Pseudo-classe E:rootSeleziona lelemento radice del documento. InHTML, lelemento radice è sempre lelementoHTML.
Pseudo-classe E:nth-child(n)Seleziona ogni elemento E che è ln-esimo figlio delsuo genitore.tr:nth­child(2n+1) /* represen...
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, ...
Pseudo-classe E:nth-child(n)● can take odd and even as argumentstr:nth­child(2n+1) /* represents every odd row of an HTML ...
Pseudo-classe E:nth-last-child(n)Seleziona ogni elemento E che è ln-esimo figlio del suogenitore, partendo dallultimo figl...
Pseudo-classe E:nth-of-type(n)Seleziona ogni elemento E che è ln-esimo fratellodel suo tipo./*elementi p allinterno del di...
Pseudo-classe E:nth-last-of-type(n)Seleziona ogni elemento E che è ln-esimo fratellodel suo tipo, partendo dallultimo frat...
E:last-child E:first-childLast:Seleziona ogni elemento E che è lultimo figlio delsuo genitore.First:Seleziona ogni element...
Pseudo-classe E:first-of-typeSeleziona ogni elemento E che è il primo fratello del suo tipo.//dl dt:first­of­type<dl> <dt>...
Pseudo-classe E:last-of-typeSeleziona ogni elemento E che è lultimo fratellodel suo tipo.tr > td:last­of­type
Pseudo-classeE:only-childSeleziona ogni elemento E che è lunico figlio del suo genitore.E:only-of-typeSeleziona ogni eleme...
Pseudo-classe di destinazioneE:targetSeleziona un elemento E che è la destinazionedellURL di riferimento.*:target { color ...
Pseudo-classe di statoE:enabledSeleziona ogni elemento E dellinterfaccia utente (controllo di unform) che è abilitato.E:di...
Pseudo-classe di statoE:checkedSeleziona ogni elemento E dellinterfaccia utente(controllo di un form) che viene selezionat...
Pseudo-classe negazioneE:not(s)Seleziona ogni elemento E che non corrispondeal selettore semplice s.
Supporto dei Browser?http://kimblim.dk/css-tests/selectors/
TransizioniCss
p { width: 200px;height: 200px;background­color: yellow;}   p:hover {background­color: red;}   
p { width: 200px;height: 200px;background­color: yellow;transition­property: background­color;transition­duration: 5s;}   ...
Regole proprietarie­webkit­transition­property: background­color; ­webkit­transition­duration: 2s;         ­o­transition­p...
Attributi● transition-propertyproprietà a cui assegnamo la transizione● transition-durationdurata della transizione in sec...
Attributi● transition-timing-functionCome si calcola il cambiamento:ease, linear, ease-in, ease-out, ease-in-out,cubic-bez...
Domande?Slide:http://cypher.informazione.me/Code:https://github.com/inFormazione/Cypher/mail:matteo@magni.me
HTML5 e Css3 - 6 | WebMaster & WebDesigner
Upcoming SlideShare
Loading in...5
×

HTML5 e Css3 - 6 | WebMaster & WebDesigner

238

Published on

Sesta lezione Modulo HTML5 e Css3 per il corso di WebMaster & WebDesigner

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
238
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
19
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "HTML5 e Css3 - 6 | WebMaster & WebDesigner"

  1. 1. HTML5 e Css3 [6]Matteo Magni
  2. 2. Quello che collega il nostro documento HTML ainostri CSS sono essenzialmente i selettori.
  3. 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. 4. Tramite quelle semplici i selettori possiamoattribuire le “regole” css ai vari elementi del nostroDOM
  5. 5. Selettori di relazione● Selettore di discendentidiv#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. 6. Ma ci bastano?
  7. 7. <style>.odd {background­color: yellow;}.even {background­color: red;}</style><tr class="odd"><td>text</td>...<td>text</td></tr><tr class="even"><td>text</td>...<td>text</td></tr>Dobbiamo usare le classi
  8. 8. Nuovi Selettorihttp://www.456bereastreet.com/archive/200601/css_3_selectors_explained/
  9. 9. Selettore di attributo - E[att^=”val”]Seleziona ogni elemento E il cui valore di attributoatt inizia con “val”.object[type^="image/"]
  10. 10. Selettore di attributo – E[att$=”val”]Seleziona ogni elemento E il cui valore di attributoatt termina con “val”.a[href$=".html"]
  11. 11. Selettore di attributo – E[att*=”val”]Seleziona ogni elemento E il cui valore di attributoatt contiene la sottostringa “val”.p[title*="hello"]
  12. 12. jQuery Like CSS syntax
  13. 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. 14. PseudoClassi
  15. 15. Pseudo-classe E:rootSeleziona lelemento radice del documento. InHTML, lelemento radice è sempre lelementoHTML.
  16. 16. Pseudo-classe E:nth-child(n)Seleziona ogni elemento E che è ln-esimo figlio delsuo 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. 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. 18. Pseudo-classe E:nth-child(n)● can take odd and even as argumentstr: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. 19. Pseudo-classe E:nth-last-child(n)Seleziona ogni elemento E che è ln-esimo figlio del suogenitore, partendo dallultimo 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. 20. Pseudo-classe E:nth-of-type(n)Seleziona ogni elemento E che è ln-esimo fratellodel suo tipo./*elementi p allinterno del div distanziati di 2*/div p:nth­of­type(2n) {background­color: yellow}
  21. 21. Pseudo-classe E:nth-last-of-type(n)Seleziona ogni elemento E che è ln-esimo fratellodel suo tipo, partendo dallultimo fratello./* seleziono il penultimo p allinterno del div*/div p:nth­last­of­type(2) {background­color: yellow}
  22. 22. E:last-child E:first-childLast:Seleziona ogni elemento E che è lultimo figlio delsuo genitore.First:Seleziona ogni elemento E che è il primo figlio delsuo genitore.
  23. 23. Pseudo-classe E:first-of-typeSeleziona 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>   <dd>nest of tables</dd>  </dl> </dd></dl>Non il terzo
  24. 24. Pseudo-classe E:last-of-typeSeleziona ogni elemento E che è lultimo fratellodel suo tipo.tr > td:last­of­type
  25. 25. Pseudo-classeE:only-childSeleziona ogni elemento E che è lunico figlio del suo genitore.E:only-of-typeSeleziona ogni elemento E che è lunico fratello del suo tipo.E:emptySeleziona ogni elemento E che non ha figli (inclusi i nodi di testo)
  26. 26. Pseudo-classe di destinazioneE:targetSeleziona un elemento E che è la destinazionedellURL di riferimento.*:target { color : red }
  27. 27. Pseudo-classe di statoE:enabledSeleziona ogni elemento E dellinterfaccia utente (controllo di unform) che è abilitato.E:disabledSeleziona ogni elemento E dellinterfaccia utente (controllo di unform) che è disabilitato.input[type="text"]:enabled { background:#ffc; }input[type="text"]:disabled { background:#ddd; }
  28. 28. Pseudo-classe di statoE:checkedSeleziona ogni elemento E dellinterfaccia utente(controllo di un form) che viene selezionato.input:checked { border:1px solid #090; }E::selectionSeleziona la porzione di un elemento Eattualmente selezionata o evidenziata dallutente.
  29. 29. Pseudo-classe negazioneE:not(s)Seleziona ogni elemento E che non corrispondeal selettore semplice s.
  30. 30. Supporto dei Browser?http://kimblim.dk/css-tests/selectors/
  31. 31. TransizioniCss
  32. 32. p { width: 200px;height: 200px;background­color: yellow;}   p:hover {background­color: red;}   
  33. 33. p { width: 200px;height: 200px;background­color: yellow;transition­property: background­color;transition­duration: 5s;}   p:hover {background­color: red;}   
  34. 34. 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;
  35. 35. Attributi● transition-propertyproprietà a cui assegnamo la transizione● transition-durationdurata della transizione in secondi (0 default)
  36. 36. Attributi● transition-timing-functionCome si calcola il cambiamento:ease, linear, ease-in, ease-out, ease-in-out,cubic-bezier● transition-delayritardo nelliniziare la transizione
  37. 37. Domande?Slide:http://cypher.informazione.me/Code:https://github.com/inFormazione/Cypher/mail:matteo@magni.me
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×