css stuffs #1
TRANSCRIPT
![Page 1: Css stuffs #1](https://reader031.vdocuments.pub/reader031/viewer/2022021500/587aaa941a28abed218b53fb/html5/thumbnails/1.jpg)
CSS - Stuffs #1in-line, in-page, linked
![Page 2: Css stuffs #1](https://reader031.vdocuments.pub/reader031/viewer/2022021500/587aaa941a28abed218b53fb/html5/thumbnails/2.jpg)
in-lineCaos, caos, caos. Ad libitum
![Page 3: Css stuffs #1](https://reader031.vdocuments.pub/reader031/viewer/2022021500/587aaa941a28abed218b53fb/html5/thumbnails/3.jpg)
Diego La Monica - [email protected] - 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
![Page 4: Css stuffs #1](https://reader031.vdocuments.pub/reader031/viewer/2022021500/587aaa941a28abed218b53fb/html5/thumbnails/4.jpg)
Diego La Monica - [email protected] - 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
![Page 5: Css stuffs #1](https://reader031.vdocuments.pub/reader031/viewer/2022021500/587aaa941a28abed218b53fb/html5/thumbnails/5.jpg)
in-pageTi porterò sempre in grembo!
![Page 6: Css stuffs #1](https://reader031.vdocuments.pub/reader031/viewer/2022021500/587aaa941a28abed218b53fb/html5/thumbnails/6.jpg)
Diego La Monica - [email protected] - 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
![Page 7: Css stuffs #1](https://reader031.vdocuments.pub/reader031/viewer/2022021500/587aaa941a28abed218b53fb/html5/thumbnails/7.jpg)
Diego La Monica - [email protected] - 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
![Page 8: Css stuffs #1](https://reader031.vdocuments.pub/reader031/viewer/2022021500/587aaa941a28abed218b53fb/html5/thumbnails/8.jpg)
Diego La Monica - [email protected] - 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
![Page 9: Css stuffs #1](https://reader031.vdocuments.pub/reader031/viewer/2022021500/587aaa941a28abed218b53fb/html5/thumbnails/9.jpg)
Diego La Monica - [email protected] - 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
![Page 10: Css stuffs #1](https://reader031.vdocuments.pub/reader031/viewer/2022021500/587aaa941a28abed218b53fb/html5/thumbnails/10.jpg)
Diego La Monica - [email protected] - 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
![Page 11: Css stuffs #1](https://reader031.vdocuments.pub/reader031/viewer/2022021500/587aaa941a28abed218b53fb/html5/thumbnails/11.jpg)
linkedDammi la mano, cammineremo insieme!
![Page 12: Css stuffs #1](https://reader031.vdocuments.pub/reader031/viewer/2022021500/587aaa941a28abed218b53fb/html5/thumbnails/12.jpg)
Diego La Monica - [email protected] - 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
![Page 13: Css stuffs #1](https://reader031.vdocuments.pub/reader031/viewer/2022021500/587aaa941a28abed218b53fb/html5/thumbnails/13.jpg)
Diego La Monica - [email protected] - 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
![Page 14: Css stuffs #1](https://reader031.vdocuments.pub/reader031/viewer/2022021500/587aaa941a28abed218b53fb/html5/thumbnails/14.jpg)
Diego La Monica - [email protected] - 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.
![Page 15: Css stuffs #1](https://reader031.vdocuments.pub/reader031/viewer/2022021500/587aaa941a28abed218b53fb/html5/thumbnails/15.jpg)
Creative Commons BY-NC-SA 4.0https://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.