html5 e css3 - 6 | webmaster & webdesigner

of 38/38
HTML5 e Css3 [6] Matteo Magni

Post on 29-Nov-2014

402 views

Category:

Technology

1 download

Embed Size (px)

DESCRIPTION

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

TRANSCRIPT

  • 1. HTML5 e Css3 [6]Matteo Magni
  • 2. Quello che collega il nostro documento HTML ainostri 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:1pxsolid#fff;Fontsize:1.5em;}
  • 4. Tramite quelle semplici i selettori possiamoattribuire le regole css ai vari elementi del nostroDOM
  • 5. Selettori di relazione Selettore di discendentidiv#containerp{color:red} Selettore di figli (>)body>p{color:red} Selettore di fratelli adiacenti (+)li+li{marginleft:10px;color:red} Selettore generale di fratelli (~)h1~h2{color:red;textdecoration:underline}
  • 6. Ma ci bastano?
  • 7. text...texttext...textDobbiamo usare le classi
  • 8. Nuovi Selettorihttp://www.456bereastreet.com/archive/200601/css_3_selectors_explained/
  • 9. Selettore di attributo - E[att^=val]Seleziona ogni elemento E il cui valore di attributoatt inizia con val.object[type^="image/"]
  • 10. Selettore di attributo E[att$=val]Seleziona ogni elemento E il cui valore di attributoatt termina con val.a[href$=".html"]
  • 11. Selettore di attributo E[att*=val]Seleziona ogni elemento E il cui valore di attributoatt contiene la sottostringa val.p[title*="hello"]
  • 12. jQuery Like CSS syntax
  • 13.
  • 14. PseudoClassi
  • 15. Pseudo-classe E:rootSeleziona lelemento radice del documento. InHTML, lelemento radice sempre lelementoHTML.
  • 16. Pseudo-classe E:nth-child(n)Seleziona ogni elemento E che ln-esimo figlio delsuo genitore.tr:nthchild(2n+1)/*representseveryoddrowofanHTMLtable*/tr:nthchild(2n)/*representseveryevenrowofanHTMLtable*//*AlternateparagraphcoloursinCSS*/p:nthchild(4n+1){color:navy;}p:nthchild(4n+2){color:green;}p:nthchild(4n+3){color:maroon;}
  • 17. Passo delle formule/*dispari*/tr:nthchild(2n+0)tr:nthchild(2n)/*pari*/tr:nthchild(2n+1)tr:nthchild(10n1)/*9,19,29,ecc*/tr:nthchild(10n+9)/*9,19,29,ecc*/
  • 18. Pseudo-classe E:nth-child(n) can take odd and even as argumentstr:nthchild(2n+1)/*representseveryoddrowofanHTMLtable*/tr:nthchild(odd)/*same*/tr:nthchild(2n)/*representseveryevenrowofanHTMLtable*/tr:nthchild(even)/*same*/
  • 19. Pseudo-classe E:nth-last-child(n)Seleziona ogni elemento E che ln-esimo figlio del suogenitore, partendo dallultimo figlio.tr:nthlastchild(n+2)/*representsthetwolastrowsofanHTMLtable*/foo:nthlastchild(odd)/*representsalloddfooelementsintheirparentelement,countingfromthelastone*/
  • 20. Pseudo-classe E:nth-of-type(n)Seleziona ogni elemento E che ln-esimo fratellodel suo tipo./*elementipallinternodeldivdistanziatidi2*/divp:nthoftype(2n){backgroundcolor:yellow}
  • 21. Pseudo-classe E:nth-last-of-type(n)Seleziona ogni elemento E che ln-esimo fratellodel suo tipo, partendo dallultimo fratello./*selezionoilpenultimopallinternodeldiv*/divp:nthlastoftype(2){backgroundcolor:yellow}
  • 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. Pseudo-classe E:first-of-typeSeleziona ogni elemento E che il primo fratello del suo tipo.//dldt:firstoftypegigognefusemultistagerockettablenestoftablesNon il terzo
  • 24. Pseudo-classe E:last-of-typeSeleziona ogni elemento E che lultimo fratellodel suo tipo.tr>td:lastoftype
  • 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. Pseudo-classe di destinazioneE:targetSeleziona un elemento E che la destinazionedellURL di riferimento.*:target{color:red}
  • 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. Pseudo-classe di statoE:checkedSeleziona ogni elemento E dellinterfaccia utente(controllo di un form) che viene selezionato.input:checked{border:1pxsolid#090;}E::selectionSeleziona la porzione di un elemento Eattualmente selezionata o evidenziata dallutente.
  • 29. Pseudo-classe negazioneE:not(s)Seleziona ogni elemento E che non corrispondeal selettore semplice s.
  • 30. Supporto dei Browser?http://kimblim.dk/css-tests/selectors/
  • 31. TransizioniCss
  • 32. p{width:200px;height:200px;backgroundcolor:yellow;}p:hover{backgroundcolor:red;}
  • 33. p{width:200px;height:200px;backgroundcolor:yellow;transitionproperty:backgroundcolor;transitionduration:5s;}p:hover{backgroundcolor:red;}
  • 34. Regole proprietariewebkittransitionproperty:backgroundcolor;webkittransitionduration:2s;otransitionproperty:backgroundcolor;otransitionduration:2s;moztransitionproperty:backgroundcolor;moztransitionduration:2s;
  • 35. Attributi transition-propertypropriet a cui assegnamo la transizione transition-durationdurata della transizione in secondi (0 default)
  • 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. Domande?Slide:http://cypher.informazione.me/Code:https://github.com/inFormazione/Cypher/mail:[email protected]