• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML5 e Css3 - 6 | WebMaster & WebDesigner
 

HTML5 e Css3 - 6 | WebMaster & WebDesigner

on

  • 394 views

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

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

Statistics

Views

Total Views
394
Views on SlideShare
394
Embed Views
0

Actions

Likes
0
Downloads
13
Comments
0

0 Embeds 0

No embeds

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 ai nostri 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 nostro DOM
    • 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> Dobbiamo usare le classi</tr><tr class="even"><td>text</td>...<td>text</td></tr>
    • 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 del suogenitore.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> Non il terzo   <dd>nest of tables</dd>  </dl> </dd></dl>
    • 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 un form) che èabilitato.E:disabledSeleziona ogni elemento E dellinterfaccia utente (controllo di un form) che èdisabilitato.input[type="text"]:enabled { background:#ffc; }input[type="text"]:disabled { background:#ddd; }
    • Pseudo-classe di statoE:checkedSeleziona ogni elemento E dellinterfaccia utente (controllodi un form) che viene selezionato.input:checked { border:1px solid #090; }E::selectionSeleziona la porzione di un elemento E attualmenteselezionata 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/
    • Transizioni Css
    • 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-property proprietà a cui assegnamo la transizione● transition-duration durata della transizione in secondi (0 default)
    • Attributi● transition-timing-function Come si calcola il cambiamento: ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier● transition-delay ritardo nelliniziare la transizione
    • Domande? Slide:http://www.slideshare.net/ilbonzo Code:https://github.com/ilbonzo/Cypher mail: matteo@magni.me