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 #1
in-line, in-page, linked
in-line
Caos, caos, caos. Ad libitum
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
Regole in linea (css in-line)
Si usa l’attributo st...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
CSS In linea - Pro & Contro
- Le regole vengono rip...
in-page
Ti porterò sempre in grembo!
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
Regole generali per la pagina (css in-page)
Si usa ...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
Più blocchi stile nella stessa pagina
È possibile i...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
Contestualizzare lo stile ad una sezione
<p>text</p...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
Contestualizzare lo stile ad una sezione (globale)
...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
CSS in-page - Pro & Contro
- Se è necessario cambia...
linked
Dammi la mano, cammineremo insieme!
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
Regole generali per più pagine (linked css)
● File ...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
Regole generali per più pagine (imported css)
Usand...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
Linked CSS - Pro & Contro
- Avviene una richiesta a...
Creative Commons BY-NC-SA 4.0
https://creativecommons.org/licenses/by-nc-sa/4.0/
Prima di riutilizzare queste slide ricord...
Upcoming SlideShare
Loading in …5
×

Css stuffs #1

257 views

Published on

Appunti sui CSS per corso di formazione frontale sul corretto utilizzo dei fogli di stile nelle pagine web.
*Materiale coperto da licenza CC BY-NC-SA 4.0

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Css stuffs #1

  1. 1. CSS - Stuffs #1 in-line, in-page, linked
  2. 2. in-line Caos, caos, caos. Ad libitum
  3. 3. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info Regole in linea (css in-line) Si usa l’attributo style dell’elemento <h2 style="color: red">Titolo di colore rosso</h2> Può esistere un solo attributo style per ciascun elemento della pagina. http://diegolamonica.info/demo/corso-wp-css/stuffs1/stuff-1.html
  4. 4. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info CSS In linea - Pro & Contro - Le regole vengono ripetute ogni volta che serve - Se per esempio è necessario cambiare un colore… è necessario farlo ovunque. + I vecchi software email interpretano meglio le regole
  5. 5. in-page Ti porterò sempre in grembo!
  6. 6. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info Regole generali per la pagina (css in-page) Si usa il tag style nell’head* della pagina <style type="text/css"> rule{ key: value; key: value; key: value; … } </style> * per garantire la manutenibilità della pagina web http://diegolamonica.info/demo/corso-wp-css/stuffs1/stuff-2.html
  7. 7. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info Più blocchi stile nella stessa pagina È possibile inserire più di un elemento style nella pagina. http://diegolamonica.info/demo/corso-wp-css/stuffs1/stuff-3.html
  8. 8. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info Contestualizzare lo stile ad una sezione <p>text</p> <section id="example1"> <style scoped="scoped"> p { color: #ff0000; } </style> <h1>title</h1> <p>text</p> </section> - Supportato solo da Firefox - Non supportato da alcun altro browser + È una proposta per CSS3 https://www.w3.org/wiki/HTML/Elements/style http://caniuse.com/#search=scoped http://diegolamonica.info/demo/corso-wp-css/stuffs1/stuff-4.html
  9. 9. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info Contestualizzare lo stile ad una sezione (globale) <style> #example1 p { color: #ff0000; } </style> <p>text</p> <section id="example1"> <h1>title</h1> <p>text</p> </section> - Maggiormente verboso + È compatibile con tutti i browser http://diegolamonica.info/demo/corso-wp-css/stuffs1/stuff-5.html
  10. 10. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info CSS in-page - Pro & Contro - Se è necessario cambiare un colore, bisogna intervenire in tutte le sezioni di stile di ciascuna pagina. + Le regole sono comuni per tutti gli elementi della pagina
  11. 11. linked Dammi la mano, cammineremo insieme!
  12. 12. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info Regole generali per più pagine (linked css) ● File esterno, tipicamente con estensione .css ● Può avere anche un’estensione differente ma il server deve comunicare al browser che il content-type è text/css. Alcuni browser si basano su questa informazione. <link rel="stylesheet" type="text/css" href="/percorso/al/file.css" /> http://diegolamonica.info/demo/corso-wp-css/stuffs1/stuff-6.html
  13. 13. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info Regole generali per più pagine (imported css) Usando la direttiva @import dei fogli di stile. <style type="text/css"> @import "/path/al/file.css"; </style> È possibile importare anche CSS multipli <style type="text/css"> @import "/path/al/file1.css"; @import "/path/al/file2.css"; </style> http://diegolamonica.info/demo/corso-wp-css/stuffs1/stuff-7.html
  14. 14. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info Linked CSS - Pro & Contro - Avviene una richiesta al server per ogni foglio di stile richiamato + Le regole sono applicate a tutte le pagine che ne fanno uso + Cambiata una regola, è applicata a tutte le pagine in cui essa è usata.
  15. 15. 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.

×