CSS: differenze tra le versioni

Versione delle 20:55, 25 ago 2021

Versione delle 20:56, 25 ago 2021

Riga 631:

</div>

</syntaxhighlight>

=== CSS per la stampa ===

[[File:Stampa-web-confronto.png|alt=Confronto tra pagina web a schermo e stampata|miniatura|310x310px|Confronto tra pagina web a schermo e stampata]]

Con i CSS si può fare in modo che l'utente, nel caso stampi una pagina web, stampi solo determinati elementi della pagina e non tutta. Solitamente si toglie dalla pagina stampata il menu, l'immagine di sfondo e i banner pubblicitari. Nel caso la pagina web sia particolarmente ricca di grafica e impaginata in modo creativo e non standard, si tende a farla stampare in modo più classico e standard<ref>{{Cita web|url=https://www.sitepoint.com/css-printer-friendly-pages/|titolo=How to Create Printer-friendly Pages with CSS - SitePoint|sito=www.sitepoint.com|lingua=en|accesso=2021-08-24}}</ref><ref>{{Cita web|url=https://www.smashingmagazine.com/2011/11/how-to-set-up-a-print-style-sheet/|titolo=How To Set Up A Print Style Sheet|sito=Smashing Magazine|data=2011-11-24|lingua=en|accesso=2021-08-24}}</ref>. Un alternativa al CSS per la stampa sono alcuni plugin dei browser che permettono all'utente di togliere dalla stampa determinati elementi della pagina web<ref>{{Cita web|url=https://chrome.google.com/webstore/detail/print-friendly-pdf/ohlencieiipommannpdfcmfdpjjmeolj|titolo=Print Friendly & PDF|sito=chrome.google.com|lingua=it|accesso=2021-08-24}}</ref>.

Esempio di CSS esterno per la stampa collegato ad una pagina web HTML:<syntaxhighlight lang="html">

<link rel="stylesheet" href="main.css" />

<link rel="stylesheet" media="print" href="print.css" />

</syntaxhighlight>Esempio di CSS esterno per la stampa:<syntaxhighlight lang="css">

/* main.css */

body {

margin: 2em;

color: #fff;

background-color: #000;

}

/* print.css */

@media print {

body {

margin: 0;

color: #000;

background-color: #fff;

}

}

</syntaxhighlight>

Line 964 ⟶ 993:

{{Vedi anche|Cursore}}

I CSS possono generare una serie di diversi cursori del mouse che l'utente vedrà appena arrivato sulla pagina [[HTML]] che li contiene<ref>{{Cita web|url=https://developer.mozilla.org/it/docs/Web/CSS/cursor|titolo=cursor - CSS {{!}} MDN|sito=developer.mozilla.org|accesso=2021-02-17}}</ref><ref>{{Cita web|url=https://www.w3schools.com/cssref/pr_class_cursor.asp|titolo=CSS cursor property|sito=www.w3schools.com|accesso=2021-02-17}}</ref>:

== Progetti in divenire ==

[[File:CSS3 region exclusion.png|alt=CSS3 region e exclusion|miniatura|CSS3 ''region'' e ''exclusion'']]

Il W3C sta sviluppando alcune specifiche CSS3 per creare layout simili a quelli per [[Rivista|riviste]] e settimanali, con la possibilità di far scorrere il testo attorno alle immagini prive di sfondo (PNG e GIF) e forme geometriche<ref>{{Cita web|url=https://www.html5rocks.com/en/tutorials/regions/adobe/|titolo=Magazine-like Layout for the Web with CSS Regions and Exclusions - HTML5 Rocks|autore=Christian Cantrell Published: August 3rd, 2012 Comments: 0 Your browser may not support the functionality in this article|sito=HTML5 Rocks - A resource for open web HTML5 developers|lingua=en|accesso=2021-08-23}}</ref><ref>{{Cita web|url=https://lists.w3.org/Archives/Public/www-archive/2011Mar/att-0011/CSS_Regions.pdf|titolo=w3c}}</ref><ref>{{Cita web|url=https://css-tricks.com/exclusions-will-hopefully-be-like-more-powerful-grid-friendly-floats/|titolo=Exclusions will hopefully be like more powerful grid-friendly floats|sito=CSS-Tricks|data=2018-11-21|lingua=en|accesso=2021-08-23}}</ref><ref>{{Cita web|url=https://www.w3.org/TR/css3-exclusions/Overview.html|titolo=CSS Exclusions Module Level 1|sito=www.w3.org|accesso=2021-08-23}}</ref>.

=== Esempi: ===

CSS inline<syntaxhighlight lang="html">

<div id=”circle”

style="exclusion-shape: poly(x1, y1, .., xN, yN)"></div>

<div style="region-thread:content;

exclusions: #circle;"></div>

</syntaxhighlight>CSS esterno<syntaxhighlight lang="css">

.exclusion {

wrap-flow: both;

position: absolute;

width: 200px;

}

.region {

+flow-from: article;

box-sizing: border-box;

position: absolute;

width: 200px;

height: 200px;

padding: 10px;

}

</syntaxhighlight>

== Esempi di CSS3 ==