HTML5 e Css3 - 6 | WebMaster & WebDesigner
Upcoming SlideShare
Loading in...5
×
 

HTML5 e Css3 - 6 | WebMaster & WebDesigner

on

  • 333 views

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

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

Statistics

Views

Total Views
333
Views on SlideShare
330
Embed Views
3

Actions

Likes
0
Downloads
8
Comments
0

1 Embed 3

http://cypher.informazione.me 3

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HTML5 e Css3 - 6 | WebMaster & WebDesigner HTML5 e Css3 - 6 | WebMaster & WebDesigner Presentation Transcript

  • 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;        Font­size: 1.5em;    }   
  • 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}● Selettore di fratelli adiacenti (+)li + li {margin­left: 10px; color: red}● Selettore generale di fratelli (~)h1 ~ h2 {color: red; text­decoration: underline}
  • Ma ci bastano?
  • <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
  • 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^="image/"]
  • Selettore di attributo – E[att$=”val”]Seleziona ogni elemento E il cui valore di attributoatt termina con “val”.a[href$=".html"]
  • Selettore di attributo – E[att*=”val”]Seleziona ogni elemento E il cui valore di attributoatt contiene la sottostringa “val”.p[title*="hello"]
  • jQuery Like CSS syntax
  • <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>
  • 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) /* 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; }
  • 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 */
  • 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 */
  • 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 */
  • 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}
  • 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}
  • 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.
  • 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
  • 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 elemento E che è lunico fratello del suo tipo.E:emptySeleziona ogni elemento E che non ha figli (inclusi i nodi di testo)
  • Pseudo-classe di destinazioneE:targetSeleziona un elemento E che è la destinazionedellURL di riferimento.*:target { color : red }
  • 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; }
  • 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.
  • 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;}   p:hover {background­color: red;}   
  • 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;
  • Attributi● transition-propertyproprietà a cui assegnamo la transizione● transition-durationdurata della transizione in secondi (0 default)
  • Attributi● transition-timing-functionCome si calcola il cambiamento:ease, linear, ease-in, ease-out, ease-in-out,cubic-bezier● transition-delayritardo nelliniziare la transizione
  • Domande?Slide:http://cypher.informazione.me/Code:https://github.com/inFormazione/Cypher/mail:matteo@magni.me