Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Css stuffs #2

197 views

Published on

Seconda parte del corso su CSS nel quale sono discusse le regole, i selettori e le parentele tra gli elementi in una pagina Web per una corretta applicazione dei selettori

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Css stuffs #2

  1. 1. CSS - Stuffs #2 Regole, selettori, parentele
  2. 2. Regole La prima regola del Fight Club è …
  3. 3. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info Cos’è una regola di stile È una regola che descrive la presentazione di uno o più elementi presenti su un documento.
  4. 4. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info Conformazione della regola di stile color: red; Regola di stile
  5. 5. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info Conformazione della regola di stile color: red; Caratteristica da alterare dell’elemento interessato dalla regola
  6. 6. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info Conformazione della regola di stile color: red; Valore che la caratteristica assumerà
  7. 7. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info Conformazione della regola di stile color: red; Terminatore della regola. È fondamentale. Se manca la regola stessa e la successiva non verranno interpretate.
  8. 8. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info Conformazione della regola di stile color: red; Separatore tra caratteristica e valore. È necessario. In assenza di esso l’intera regola non sarà compresa.
  9. 9. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info Applicare più regole color: red; background-color: white; Una regola, un separatore!
  10. 10. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info Raggruppare le regole { color: red; background-color: white; } Le regole che si riferiscono ad uno stesso oggetto sulla pagina, sono raggruppate* tra parentesi graffe. * non possono esistere regole non raggruppate
  11. 11. Selettori I want you! And you! And you too!
  12. 12. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info Definire delle regole per gli elementi della pagina xxx { color: red; background-color: white; } Selettore
  13. 13. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info Definire delle regole per gli elementi della pagina div { color: red; background-color: white; } Indicando il tag, le regole del blocco saranno applicate a tutti gli elementi della pagina con quel preciso tag. http://diegolamonica.info/demo/corso-wp-css/stuffs2/stuff-1.html
  14. 14. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info Definire delle regole per gli elementi della pagina .class { color: red; background-color: white; } Se il selettore è preceduto da un “.”, le regole saranno applicate a tutti gli elementi di una specifica classe.
  15. 15. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info Definire delle regole per gli elementi della pagina .text-red { color: red; background-color: white; } Risultato: Questo testo sarà rosso Questo invece no Questo sarà di nuovo rosso<p class="text-red">Questo testo sarà rosso</p> <p>Questo invece no</p> <p class="text-red">Questo sarà di nuovo rosso</p> http://diegolamonica.info/demo/corso-wp-css/stuffs2/stuff-2.html
  16. 16. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info Definire delle regole per gli elementi della pagina #id { color: red; background-color: white; } Se il selettore è preceduto da un “#”, le regole saranno applicate all’elemento sulla pagina con il dato id.
  17. 17. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info Selezionare solo i nodi inclusi in altri nodi ul li{ color: red; background-color: white; } Saranno cercati tutti gli elementi li dentro a qualsiasi tag ul.
  18. 18. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info Selezionare solo i nodi inclusi in altri nodi ul li{ color: green; background-color: white; } ul li p{ color: red; background-color: white; } <ul> <li><p>Questo testo è rosso</p></li> <li> <p>Anche questo</p> <ul> <li>Questo no</li> </ul> <ol> <li><p>ed anche questo</p></li> </ol> </li> </ul> http://diegolamonica.info/demo/corso-wp-css/stuffs2/stuff-3.html
  19. 19. Selettori di parentela Luke io sono tuo padre!
  20. 20. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info Selezionare solo i nodi strettamente figli di qualcuno ul > li{ color: red; background-color: white; } Il > identifica una parentela stretta. Solo gli elementi li direttamente figli di un ul saranno interessati dalla regola
  21. 21. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info Selezionare solo i nodi strettamente figli di qualcuno ul > li > p{ color: red; background-color: white; } <ul> <li><p>Questo testo è rosso</p></li> <li> <p>Questo testo sì</p> <ul> <li>Questo no</li> </ul> <div><p>Nemmeno io</p></div> <ol> <li><p>E nemmeno questo testo è rosso</p></li> </ol> </li> </ul> http://diegolamonica.info/demo/corso-wp-css/stuffs2/stuff-4.html
  22. 22. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info Elementi strettamente adiacenti di pari livello p + p{ color: red; background-color: white; } Il + nel selettore indica che la regola verrà applicata a tutti gli elementi descritti dal selettore alla destra del + successivi di pari livello e direttamente adiacenti agli elementi descritti dalla parte di selettore alla sinistra del +. http://diegolamonica.info/demo/corso-wp-css/stuffs2/stuff-5.html
  23. 23. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info Elementi di pari livello p ~ p{ color: red; background-color: white; } Il ~ nel selettore indica che la regola verrà applicata a tutti gli elementi descritti dalla regola alla destra del ~ di pari livello e successivi, ma non necessariamente adiacenti, agli elementi descritti dalla parte di regola alla sinistra del ~. http://diegolamonica.info/demo/corso-wp-css/stuffs2/stuff-6.html
  24. 24. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info Applicare le stesse regole per più selettori div, p { color: red; background-color: white; } La virgola separa più selettori
  25. 25. Creative Commons BY-NC-SA 4.0 https://creativecommons.org/licenses/by-nc-sa/4.0/ Prima di riutilizzare queste slide ricorda che: Attribution — You must give appropriate credit, provide a link to the license, and indicate if changes were made. You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use. NonCommercial — You may not use the material for commercial purposes. ShareAlike — If you remix, transform, or build upon the material, you must distribute your contributions under the same license as the original.

×