Download - HTML5 e Css3 - 6 | WebMaster & WebDesigner
![Page 1: HTML5 e Css3 - 6 | WebMaster & WebDesigner](https://reader034.vdocuments.pub/reader034/viewer/2022052215/5479d99fb37959442b8b48cb/html5/thumbnails/1.jpg)
HTML5 e Css3 [6]Matteo Magni
![Page 2: HTML5 e Css3 - 6 | WebMaster & WebDesigner](https://reader034.vdocuments.pub/reader034/viewer/2022052215/5479d99fb37959442b8b48cb/html5/thumbnails/2.jpg)
Quello che collega il nostro documento HTML ai nostri CSS sono essenzialmente i selettori.
![Page 3: HTML5 e Css3 - 6 | WebMaster & WebDesigner](https://reader034.vdocuments.pub/reader034/viewer/2022052215/5479d99fb37959442b8b48cb/html5/thumbnails/3.jpg)
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; Fontsize: 1.5em; }
![Page 4: HTML5 e Css3 - 6 | WebMaster & WebDesigner](https://reader034.vdocuments.pub/reader034/viewer/2022052215/5479d99fb37959442b8b48cb/html5/thumbnails/4.jpg)
Tramite quelle semplici i selettori possiamo attribuire le “regole” css ai vari elementi del nostro
DOM
![Page 5: HTML5 e Css3 - 6 | WebMaster & WebDesigner](https://reader034.vdocuments.pub/reader034/viewer/2022052215/5479d99fb37959442b8b48cb/html5/thumbnails/5.jpg)
Selettori di relazione
● Selettore di discendenti
div#container p {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}
![Page 6: HTML5 e Css3 - 6 | WebMaster & WebDesigner](https://reader034.vdocuments.pub/reader034/viewer/2022052215/5479d99fb37959442b8b48cb/html5/thumbnails/6.jpg)
Ma ci bastano?
![Page 7: HTML5 e Css3 - 6 | WebMaster & WebDesigner](https://reader034.vdocuments.pub/reader034/viewer/2022052215/5479d99fb37959442b8b48cb/html5/thumbnails/7.jpg)
<style>.odd {backgroundcolor: yellow;}.even {backgroundcolor: 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
![Page 8: HTML5 e Css3 - 6 | WebMaster & WebDesigner](https://reader034.vdocuments.pub/reader034/viewer/2022052215/5479d99fb37959442b8b48cb/html5/thumbnails/8.jpg)
Nuovi Selettori
http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/
![Page 9: HTML5 e Css3 - 6 | WebMaster & WebDesigner](https://reader034.vdocuments.pub/reader034/viewer/2022052215/5479d99fb37959442b8b48cb/html5/thumbnails/9.jpg)
Selettore di attributo - E[att^=”val”]
Seleziona ogni elemento E il cui valore di attributo att inizia con “val”.
object[type^="image/"]
![Page 10: HTML5 e Css3 - 6 | WebMaster & WebDesigner](https://reader034.vdocuments.pub/reader034/viewer/2022052215/5479d99fb37959442b8b48cb/html5/thumbnails/10.jpg)
Selettore di attributo – E[att$=”val”]
Seleziona ogni elemento E il cui valore di attributo att termina con “val”.
a[href$=".html"]
![Page 11: HTML5 e Css3 - 6 | WebMaster & WebDesigner](https://reader034.vdocuments.pub/reader034/viewer/2022052215/5479d99fb37959442b8b48cb/html5/thumbnails/11.jpg)
Selettore di attributo – E[att*=”val”]
Seleziona ogni elemento E il cui valore di attributo att contiene la sottostringa “val”.
p[title*="hello"]
![Page 12: HTML5 e Css3 - 6 | WebMaster & WebDesigner](https://reader034.vdocuments.pub/reader034/viewer/2022052215/5479d99fb37959442b8b48cb/html5/thumbnails/12.jpg)
jQuery Like CSS syntax
![Page 13: HTML5 e Css3 - 6 | WebMaster & WebDesigner](https://reader034.vdocuments.pub/reader034/viewer/2022052215/5479d99fb37959442b8b48cb/html5/thumbnails/13.jpg)
<input name="newsletter" /><input name="milkman" /><input name="newsboy" />
<script>$('input[name^="news"]').val('news here!');</script>
<input name="mannews" /><input name="milkman" /><input name="letterman2" /><input name="newmilk" /><script>$('input[name*="man"]').val('has man in it!');</script>
![Page 14: HTML5 e Css3 - 6 | WebMaster & WebDesigner](https://reader034.vdocuments.pub/reader034/viewer/2022052215/5479d99fb37959442b8b48cb/html5/thumbnails/14.jpg)
PseudoClassi
![Page 15: HTML5 e Css3 - 6 | WebMaster & WebDesigner](https://reader034.vdocuments.pub/reader034/viewer/2022052215/5479d99fb37959442b8b48cb/html5/thumbnails/15.jpg)
Pseudo-classe E:root
Seleziona l'elemento radice del documento. In HTML, l'elemento radice è sempre l'elemento HTML.
![Page 16: HTML5 e Css3 - 6 | WebMaster & WebDesigner](https://reader034.vdocuments.pub/reader034/viewer/2022052215/5479d99fb37959442b8b48cb/html5/thumbnails/16.jpg)
Pseudo-classe E:nth-child(n)
Seleziona ogni elemento E che è l'n-esimo figlio del suo genitore.tr:nthchild(2n+1) /* represents every odd row of an HTML table */
tr:nthchild(2n) /* represents every even row of an HTML table */
/* Alternate paragraph colours in CSS */
p:nthchild(4n+1) { color: navy; }
p:nthchild(4n+2) { color: green; }
p:nthchild(4n+3) { color: maroon; }
![Page 17: HTML5 e Css3 - 6 | WebMaster & WebDesigner](https://reader034.vdocuments.pub/reader034/viewer/2022052215/5479d99fb37959442b8b48cb/html5/thumbnails/17.jpg)
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 */
![Page 18: HTML5 e Css3 - 6 | WebMaster & WebDesigner](https://reader034.vdocuments.pub/reader034/viewer/2022052215/5479d99fb37959442b8b48cb/html5/thumbnails/18.jpg)
Pseudo-classe E:nth-child(n)
● can take 'odd' and 'even' as arguments tr:nthchild(2n+1) /* represents every odd row of an HTML table */
tr:nthchild(odd) /* same */
tr:nthchild(2n) /* represents every even row of an HTML table */
tr:nthchild(even) /* same */
![Page 19: HTML5 e Css3 - 6 | WebMaster & WebDesigner](https://reader034.vdocuments.pub/reader034/viewer/2022052215/5479d99fb37959442b8b48cb/html5/thumbnails/19.jpg)
Pseudo-classe E:nth-last-child(n)
Seleziona ogni elemento E che è l'n-esimo figlio del suo genitore, partendo dall'ultimo figlio.
tr:nthlastchild(n+2)
/* represents the two last rows of an HTML table */
foo:nthlastchild(odd)
/* represents all odd foo elements in their parent element,counting from the last one */
![Page 20: HTML5 e Css3 - 6 | WebMaster & WebDesigner](https://reader034.vdocuments.pub/reader034/viewer/2022052215/5479d99fb37959442b8b48cb/html5/thumbnails/20.jpg)
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:nthoftype(2n) {backgroundcolor: yellow}
![Page 21: HTML5 e Css3 - 6 | WebMaster & WebDesigner](https://reader034.vdocuments.pub/reader034/viewer/2022052215/5479d99fb37959442b8b48cb/html5/thumbnails/21.jpg)
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:nthlastoftype(2) {backgroundcolor: yellow}
![Page 22: HTML5 e Css3 - 6 | WebMaster & WebDesigner](https://reader034.vdocuments.pub/reader034/viewer/2022052215/5479d99fb37959442b8b48cb/html5/thumbnails/22.jpg)
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.
![Page 23: HTML5 e Css3 - 6 | WebMaster & WebDesigner](https://reader034.vdocuments.pub/reader034/viewer/2022052215/5479d99fb37959442b8b48cb/html5/thumbnails/23.jpg)
Pseudo-classe E:first-of-type
Seleziona ogni elemento E che è il primo fratello del suo tipo.//dl dt:firstoftype
<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
![Page 24: HTML5 e Css3 - 6 | WebMaster & WebDesigner](https://reader034.vdocuments.pub/reader034/viewer/2022052215/5479d99fb37959442b8b48cb/html5/thumbnails/24.jpg)
Pseudo-classe E:last-of-type
Seleziona ogni elemento E che è l'ultimo fratello del suo tipo.
tr > td:lastoftype
![Page 25: HTML5 e Css3 - 6 | WebMaster & WebDesigner](https://reader034.vdocuments.pub/reader034/viewer/2022052215/5479d99fb37959442b8b48cb/html5/thumbnails/25.jpg)
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)
![Page 26: HTML5 e Css3 - 6 | WebMaster & WebDesigner](https://reader034.vdocuments.pub/reader034/viewer/2022052215/5479d99fb37959442b8b48cb/html5/thumbnails/26.jpg)
Pseudo-classe di destinazione
E:target
Seleziona un elemento E che è la destinazione dell'URL di riferimento.
*:target { color : red }
![Page 27: HTML5 e Css3 - 6 | WebMaster & WebDesigner](https://reader034.vdocuments.pub/reader034/viewer/2022052215/5479d99fb37959442b8b48cb/html5/thumbnails/27.jpg)
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; }
![Page 28: HTML5 e Css3 - 6 | WebMaster & WebDesigner](https://reader034.vdocuments.pub/reader034/viewer/2022052215/5479d99fb37959442b8b48cb/html5/thumbnails/28.jpg)
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.
![Page 29: HTML5 e Css3 - 6 | WebMaster & WebDesigner](https://reader034.vdocuments.pub/reader034/viewer/2022052215/5479d99fb37959442b8b48cb/html5/thumbnails/29.jpg)
Pseudo-classe negazione
E:not(s)
Seleziona ogni elemento E che non corrisponde al selettore semplice s.
![Page 31: HTML5 e Css3 - 6 | WebMaster & WebDesigner](https://reader034.vdocuments.pub/reader034/viewer/2022052215/5479d99fb37959442b8b48cb/html5/thumbnails/31.jpg)
![Page 32: HTML5 e Css3 - 6 | WebMaster & WebDesigner](https://reader034.vdocuments.pub/reader034/viewer/2022052215/5479d99fb37959442b8b48cb/html5/thumbnails/32.jpg)
TransizioniCss
![Page 33: HTML5 e Css3 - 6 | WebMaster & WebDesigner](https://reader034.vdocuments.pub/reader034/viewer/2022052215/5479d99fb37959442b8b48cb/html5/thumbnails/33.jpg)
p { width: 200px;height: 200px;backgroundcolor: yellow;} p:hover {backgroundcolor: red;}
![Page 34: HTML5 e Css3 - 6 | WebMaster & WebDesigner](https://reader034.vdocuments.pub/reader034/viewer/2022052215/5479d99fb37959442b8b48cb/html5/thumbnails/34.jpg)
p { width: 200px;height: 200px;backgroundcolor: yellow;transitionproperty: backgroundcolor;transitionduration: 5s;} p:hover {backgroundcolor: red;}
![Page 35: HTML5 e Css3 - 6 | WebMaster & WebDesigner](https://reader034.vdocuments.pub/reader034/viewer/2022052215/5479d99fb37959442b8b48cb/html5/thumbnails/35.jpg)
Regole proprietarie
webkittransitionproperty: backgroundcolor;
webkittransitionduration: 2s;
otransitionproperty: backgroundcolor;
otransitionduration: 2s;
moztransitionproperty: backgroundcolor;
moztransitionduration: 2s;
![Page 36: HTML5 e Css3 - 6 | WebMaster & WebDesigner](https://reader034.vdocuments.pub/reader034/viewer/2022052215/5479d99fb37959442b8b48cb/html5/thumbnails/36.jpg)
Attributi
● transition-property
proprietà a cui assegnamo la transizione
● transition-duration
durata della transizione in secondi (0 default)
![Page 37: HTML5 e Css3 - 6 | WebMaster & WebDesigner](https://reader034.vdocuments.pub/reader034/viewer/2022052215/5479d99fb37959442b8b48cb/html5/thumbnails/37.jpg)
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
![Page 38: HTML5 e Css3 - 6 | WebMaster & WebDesigner](https://reader034.vdocuments.pub/reader034/viewer/2022052215/5479d99fb37959442b8b48cb/html5/thumbnails/38.jpg)
Domande?
Slide:
http://cypher.informazione.me/
Code:
https://github.com/inFormazione/Cypher/
mail: