CSS: differenze tra le versioni
Contenuto cancellato Contenuto aggiunto
m Annullate le modifiche di Inseritore (discussione), riportata alla versione precedente di 193.207.147.167 Etichette: Rollback Annullato |
m →Selettori: fix esempio |
||
| (48 versioni intermedie di 31 utenti non mostrate) | |||
Riga 2:
{{Formato file
| nome = Cascading Style Sheets
| logo =
| icona =
| didascalia =
Riga 10:
| proprietario =
| licenza =
|
| ultima_versione =
| data_ultima_versione =
Riga 17:
| esteso_a =
| standard =
| aperto =si
| sito = www.w3.org/TR/CSS
|uniform_type_identifier=public.css}}
L'introduzione del CSS si è resa necessaria per separare i contenuti delle pagine HTML dalla loro formattazione o
== Storia ==
Riga 31:
Questi tag proprietari di formattazione erano l'unico modo per gli autori di definire la formattazione, così il loro uso è diventato molto intenso. Tuttavia questi tag presentavano tre problemi:
# Il primo problema è costituito dalla lunghezza dei tag. Se confrontata con una pagina che adotta il linguaggio [https://www.antoniocostadev.it/css/ CSS], una pagina che non lo adotta è in genere più pesante (in termini di [[Bit (informatica)#Il bit come numero binario|bit]]) in un rapporto che spesso raggiunge lo 0,2%.{{senza fonte}} Inoltre, le istruzioni CSS possono essere raccolte in un [[file]] esterno che rimane memorizzato nella [[cache]] del browser, riducendo ulteriormente la quantità di dati che i [[server]] devono trasmettere.
# Il secondo problema risiede nella mancanza di logica del codice (X)HTML. Un codice non aderente agli standard, ridondante e confuso comporta infatti molto lavoro aggiuntivo per i browser, che devono cercare di correggere ed interpretare (quando possibile) direttive arbitrarie.
# Il terzo problema è la mancanza di compatibilità con i [[Computer palmare|computer palmari]] e gli [[smartphone]]. Queste pagine infatti sono progettate per schermi con risoluzione minima 800×600 pixel. Dispositivi come i palmari (o i più moderni [[Tablet PC|tablet]]) che possono avere una risoluzione inferiore ed una forma dello schermo ben diversa dal rapporto 4:3 dei monitor per [[computer]], si trovano quindi impossibilitati a visualizzare correttamente la pagina con il risultato che l'utente si troverà una pagina confusa e scomoda da leggere.
Riga 37:
Un'ulteriore questione era, nelle pagine web non standard, l'uso del tag <code><table></code> (le '''tabelle''') per realizzare l'impaginazione delle pagine web. L'impaginazione tabellare viene considerata deprecabile dai puristi, in quanto le tabelle sono pensate per impaginare dati tabulari e non [[Impaginazione|layout]] web. Oltre a questo, l'uso delle tabelle comporta anche svantaggi pratici: aumento del peso delle pagine, come già indicato al problema 1, e peggioramento dell'accessibilità, in quanto l'ordine logico dei dati può dover essere sacrificato per motivi di layout.
Un altro modo di creare siti web negli anni 90 e 2000 (fino al suo abbandono il 31 dicembre 2020 da parte di Adobe<ref>{{Cita web|url=
Un altro problema era creare la formattazione delle pagine HTML incorporando gli stili nei tag e il carattere tipografico nel tag "font" (ora deprecato). Ciò rendeva il codice complicato e spesso disordinato. Ad
<p style="color:blue;font-size:46px;">
</syntaxhighlight>
Riga 67:
{{Vedi anche|CSS Animations}}
A differenza delle specifiche CSS 2, che è costituita da un'unica specifica, le specifiche CSS3 sono costituite da sezioni separate dette "moduli". A causa di questa modularizzazione, le specifiche CSS3 hanno differenti stati di avanzamento e stabilità.<ref>{{Cita web|url=https://www.w3.org/Style/CSS/current-work|titolo=CSS current work}}</ref> A novembre 2014, cinque moduli risultavano pubblicati formalmente dal [[W3C]] come [[World Wide Web Consortium#Raccomandazioni|raccomandazioni]]:
* 2011-06-07: [https://www.w3.org/TR/css3-color/ CSS Color Module Level 3]
* 2011-09-29: [https://www.w3.org/TR/css3-namespace/ CSS Namespaces Module Level 3]
Line 76 ⟶ 75:
[[HTML]] e CSS3 costituiscono un linguaggio [[turing completo]]<ref>{{Cita web|autore = |url = https://github.com/elitheeli/stupid-machines|titolo = Stupid Machines - rule 110|accesso = |editore = |data = }}</ref><ref>{{Cita web|autore = |url = http://eli.fox-epste.in/rule110-full.html|titolo = Rule 110 OnLine Demonstration|accesso = |editore = |data = }}</ref>, condizione sufficiente per un linguaggio per essere considerato un [[linguaggio di programmazione]].
I CSS3 presentano nuove possibilità e proprietà rispetto a CSS2<ref>{{Cita web|url=https://www.html.it/guide/guida-css3/|titolo=CSS3: guida completa|sito=HTML.it|lingua=it-IT|accesso=2021-01-27}}</ref><ref>{{Cita web|url=https://www.w3schools.com/|titolo=W3Schools Online Web Tutorials
* la possibilità di utilizzare codice CSS al posto delle immagini (jpg, png...) per creare trasparenze, bordi arrotondati e ombreggiature
Line 82 ⟶ 81:
* nuovi selettori e classi
* la possibilità di adattare il layout delle pagine web a vari dispositivi e media non più utilizzando più fogli di stile per ogni dispositivo ma uno solo che adatta la pagina a tutti.
*la possibilità di sostituire [[JavaScript]] per creare [[tooltip]], gallerie d'immagine e altro<ref name=":0">{{Cita web|url=https://blog.logrocket.com/5-things-you-can-do-with-css-instead-of-javascript/|titolo=5 things you can do with CSS instead of JavaScript|sito=LogRocket Blog|data=2019-10-29|lingua=en
{| class="wikitable"
! TIPOLOGIE
! ESEMPIO
|- bgcolor="#f3f3f3"
| colspan="3" |'''Selettori'''
|-
Line 185 ⟶ 184:
* <code>::after</code>
|::first-letter {color:red}
|- bgcolor="#f3f3f3"
| colspan="3" |'''Colore'''
|-
|Opacità
Line 212 ⟶ 210:
<nowiki>#</nowiki>box1 { background-color: hsla(0,100%,100%,0.5); }
|- bgcolor="#f3f3f3"
| colspan="3" |'''Bordi'''
|-
Line 226 ⟶ 224:
|Bordi decorati
|border-image
|#border
|-
|Ombre dei contenitori
|box-shadow
|box-shadow: 5px 5px 10px 2px #333333;
|- bgcolor="#f3f3f3"
| colspan="3" |'''Sfondi'''
|-
Line 243 ⟶ 241:
* <code>padding-box</code>
* <code>content-box</code>
|#box {background-clip: border-box}
<nowiki>#</nowiki>box {background-clip: padding-box}
<nowiki>#</nowiki>box {background-clip: content-box}
Line 261 ⟶ 259:
* proprietà<code>cover</code>;
* proprietà <code>contain</code>.
|background-size: 50% 50%;
background-size: 200px 50px;
background-size: cover;
background-size: contain;
Line 271 ⟶ 269:
|linear-gradient
|background-image: linear-gradient(top right, #FFFFFF 0%, #AACFEF 100%);
|- bgcolor="#f3f3f3"
| colspan="3" |'''[[Formattazione del testo|Testo e font]]'''
|-
|Web fonts
(alternativa a [[Google Fonts|Google fonts]])
|@font-face
|@font-face {
font-family: myFirstFont;
Line 291 ⟶ 289:
|text-shadow:
|p {text-shadow: 2px 2px 3px #333;}
|-
|Orientamento del testo (ad esempio per le lingue dove il testo è verticale)<ref>{{Cita web|url=https://www.w3.org/International/articles/vertical-text/index.en.html|titolo=Styling vertical Chinese, Japanese, Korean and Mongolian text|accesso=2022-02-07}}</ref><ref>{{Cita web|url=https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation|titolo=text-orientation - CSS: Cascading Style Sheets {{!}} MDN|sito=developer.mozilla.org|lingua=en|accesso=2022-02-07}}</ref><ref>{{Cita web|url=https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode|titolo=writing-mode - CSS: Cascading Style Sheets {{!}} MDN|sito=developer.mozilla.org|lingua=en|accesso=2022-02-07}}</ref>
|writing-mode: ''"valore"'';
text-orientation: ''"valore"'';
|text-orientation: mixed;
upright;
sideways;
use-glyph-orientation;
----writing-mode: horizontal-tb;
vertical-rl;
vertical-lr;
|-
|Caratteri speciali
Line 303 ⟶ 317:
vertical-rl;
|p.contenuto1 {
writing-mode: horizontal-tb;
}
Line 312 ⟶ 326:
|h1 {text-stroke: 1px black;}
|-
|Interruzione del testo
|text-overflow: clip;
text-overflow: ellipsis ellipsis;
text-overflow: ellipsis " [..]";
Valori globali:
* inherit;
* initial;
* revert;
* unset;
|<code>.overflow-clip-clip</code>
<code>{text-overflow: clip clip;}</code>
<code>.overflow-clip-ellipsis {text-overflow: clip ellipsis;}</code>
<code>.overflow-ellipsis-ellipsis {text-overflow: ellipsis ellipsis;}</code>
|- bgcolor="#f3f3f3"
| colspan="3" |'''Layout e box model'''
|-
|Eccedenze
|overflow-x:
overflow-y:
|#box2 {overflow-x: hidden; }
Line 367 ⟶ 400:
* <code>tv</code>: visualizzazione su schermi televisivi
|@media screen and (color) { ''regole css'' }
|- bgcolor="#f3f3f3"
| colspan="3" |'''Transizioni, trasformazioni e animazioni'''
|-
Line 408 ⟶ 441:
* animation-duration
* animation-iteration-count
* animation-timing-function
Line 418 ⟶ 450:
# cubic-bezier.
|@keyframes 'pulse' { from { background-color: red; opacity: 1.0; -transform: scale(1.0) rotate(0deg); }
|- bgcolor="#f3f3f3"
| colspan="3" |'''Grafica'''
|-
|Filtri
Line 486 ⟶ 517:
Un foglio di stile CSS è sintatticamente strutturato come una sequenza di ''regole'', che sono coppie costituite da un ''selettore'' e un ''blocco di dichiarazioni'', racchiuso tra parentesi graffe.
Un selettore è un [[predicato]] che individua certi elementi del documento HTML;
una dichiarazione, separata con un [[punto e virgola]] dalle altre, è a sua volta costituita da una ''proprietà'',
ovvero un tratto di stile (come il colore del testo)
e un ''valore'' da assegnare a quest'ultimo (per esempio blu).
Line 631 ⟶ 662:
</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|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 647 ⟶ 706:
=== Creazione di variabili ===
{{vedi anche|Sass|Less (CSS)}}
'''Sass''' ('''S'''yntactically '''A'''wesome '''S'''tyle'''S'''heets) è un'estensione del linguaggio CSS che permette di utilizzare [[Variabile (informatica)|variabili]], di creare [[Funzione (informatica)|funzioni]] e di organizzare il foglio di stile in più [[file]].
'''Less''' ('''LESS''') è un [[preprocessore]] CSS che estende il normale linguaggio CSS permettendo (oltre alla normale sintassi dei fogli di stile) anche l'utilizzo di [[Funzione (informatica)|
=== Proprietà ===
Le proprietà CSS sono numerose. Le più utilizzate sono:
*''width e height.'' Queste proprietà vengono utilizzate per impostare l'altezza e la larghezza di un determinato elemento.
*''background''. Definisce lo sfondo di un elemento. È una scorciatoia (shorthand properties) per ''background-attachment'', ''background-color'', ''background-image'', ''background-position'' e ''background-repeat''.
*''border''. Definisce il bordo di un elemento. È una scorciatoia (shorthand properties) per ''border-color'', ''border-style'' e ''border-width''.
*''color''. Definisce il colore del testo di un elemento. Per definire lo sfondo si utilizza la proprietà ''background''.
*''position''. Definisce il tipo di metodo di posizionamento utilizzato per un elemento (statico, relativo, fisso, assoluto o appiccicoso).
*''z-index''. Specifica l'
*''float''. Questa proprietà definisce un blocco ''flottante'', ovvero che permette la disposizione di altri elementi ai suoi lati.
*''font-family''. Definisce le proprietà del carattere. È una scorciatoia (shorthand properties) per ''font-family'', ''font-size'' e ''font-weight''.
Line 667 ⟶ 725:
*''text-align''. Definisce l'allineamento degli elementi, tra cui il testo.
*''!important.'' Fa prevalere una regola CSS rispetto alle altre
*''min-width'' e ''max
*''clear.'' Impedisce che a fianco di un elemento compaiano altri elementi con il float
Line 712 ⟶ 770:
<syntaxhighlight lang="css">
p {
font-family : "Arial", "Verdana", serif;
}
</syntaxhighlight>
Line 750 ⟶ 808:
==== Creazione automatica dei CSS ====
Con programmi di grafica e fotoritocco come [[Adobe Photoshop|
==== Utilizzo del 3D ====
I CSS3 hanno introdotto la proprietà "3D Transform" che consente di creare alcune animazioni e forme in 3D ma non possono equiparare le possibilità di [[WebGL]]<ref>{{Cita web|url=https://we-rad.com/browser-webgl-vs-css-3d-transforms/|titolo=Guida per il 3D nei browser – WebGL Contro CSS 3D Transforms|sito=WE RAD|data=2017-05-05|lingua=it-IT|accesso=2021-01-29}}</ref><ref>{{Cita web|url=https://onaircode.com/css-3d-transforms-example-with-code-snippets/|titolo=10+ CSS 3D Transforms Example With Code Snippets|autore=Pratik|sito=OnAirCode|data=2018-03-27|lingua=en
== Il supporto dei Browser
La lista che segue è di [[layout engine|motori di rendering]] perché a loro è assegnato il compito di formattare la pagina secondo le istruzioni CSS.
;[[Gecko]] ([[Mozilla Firefox]] e [[Netscape Navigator]]): Gecko ha un ottimo supporto dei CSS 1,2 e 3 ed è per questo spesso utilizzato nella verifica della resa delle pagine web. Gecko e Mozilla Firefox sono [[software libero]]. Anche Netscape Navigator (obsoleto dal 1º marzo 2008<ref>{{Cita web|url=
;Trident ([[Internet Explorer]] e [[AOL Explorer]]): Internet Explorer (obsoleto dall'agosto 2020<ref>{{Cita web|url=https://www.microsoft.com/en-us/microsoft-365/windows/end-of-ie-support|titolo=Internet Explorer Web Browser End of Support - Microsoft 365
{{cita web
|url=http://www.quirksmode.org/css/condcom.html
Line 814 ⟶ 872:
<link rel="stylesheet" type="text/css" href="foglio.css" '''media="screen"'''/>
Il codice precedente associa il foglio di stile solo ai browser standard per [[computer desktop]] e portatili. I valori dell'attributo "media" sono gli stessi della regola CSS "''media queries''". Sebbene sia ancora possibile creare più fogli di stile per diversi media e specificarlo nel tag "link rel", da quando le ''media queries'' sono supportati da tutti i moderni browser la maggior parte degli sviluppatori utilizza esse poiché consentono in un solo foglio CSS di adattare la relativa pagina HTML a tutti i dispositivi utilizzando molte meno righe di codice<ref>{{Cita web|url=https://www.w3schools.com/cssref/css3_pr_mediaquery.asp|titolo=CSS @media Rule
== Riduzione delle chiamate al server ==
Line 824 ⟶ 882:
Utilizzare i CSS3 per evitare di utilizzare le immagini (jpg, png,...) ad esempio per gli angoli arrotondati, le ombre, i gradienti e le trasparenze.
===
{{Vedi anche|Sprite (informatica)}}[[File:Pixel Dungeon - warrior tileset.png|alt=Un singolo sprite di Pixel Dungeon realizzato con 147 sotto-immagini|miniatura|Un singolo ''sprite'' di [[Pixel Dungeon]] realizzato con 147 sotto-immagini]]
Utilizzare i [[Sprite (informatica)|CSS Sprite]], attuando una sola chiamata al server utilizzando una sola immagine che ne contiene molte per più parti della pagina web (o dell'intero sito web).
=== Minify ===
Comprimere i file CSS con il metodo "''minify''" per ridurre il peso del file CSS e quindi la banda utilizzata per richiamare tale file dal server. Si può fare anche con pagine HTML e [[JavaScript]]<ref>{{Cita web|url=https://cssminifier.com/|titolo=CSS Minifier|sito=cssminifier.com|accesso=2021-01-27}}</ref>. In questo modo però il codice sarà privo di spazi e la modifica risulterà più complessa.
Inoltre ci sono più modi di arrivare allo stesso risultato con i CSS. Il metodo che si dovrebbe scegliere è quello che consente di scrivere meno codice possibile per ridurre al minimo il peso del file ".css". Ad esempio:<syntaxhighlight lang="css">
Line 835 ⟶ 893:
.bar { color: rgba(255, 0, 0, 1); }
/* EQUIVALE A */
.bar,.foo{color:red}
</syntaxhighlight>
===
Non usare troppi [[Tipo di carattere|font]] incorporati (''@font-face'' e [[Google Fonts]]).
=== Numero di file ===
Ridurre al minimo il numero di file CSS e il numero di file in generale. Adattare ad esempio il layout delle pagine web a vari dispositivi e media non utilizzando più fogli di stile per ogni dispositivo ma uno solo che adatta la pagina a tutti attraverso le ''media queries''. In questo modo il server avrà la chiamata per un solo foglio CSS.
===
Sostituire [[JavaScript]] con i CSS per creare [[tooltip]], gallerie d'immagine e altro<ref name=":0" /><ref name=":1" /><ref name=":2" />. I CSS richiedono infatti meno risorse di JS.
Line 862 ⟶ 920:
== Pattern ==
[[File:Pattern-CSS.png|alt=Pattern CSS|miniatura|Pattern CSS]]
I pattern sono figure modulari che si ripetono all'infinito che solitamente fanno da sfondo a elementi HTML come contenitori DIV, bottoni, il background della pagina web, paragrafi. Si possono creare direttamente in CSS, con le immagini o fondendo entrambi i metodi ossia creando un'immagine base e ripetendola con la regola ''background-repeat''<ref>{{Cita web|url=https://freefrontend.com/css-background-patterns/|titolo=51 CSS Background Patterns|sito=Free Frontend|lingua=en
== Acid3 ==
Line 874 ⟶ 932:
A differenza del CSS, che utilizza le parentesi graffe per aprire e chiudere i blocchi di dichiarazione, viene utilizzata l'indentazione. Inoltre, i punti e virgola (;) vengono facoltativamente omessi. Quindi, il seguente CSS:
<syntaxhighlight lang="css">
body {
color: white;
}
Line 914 ⟶ 972:
Ad esempio:
<syntaxhighlight lang="css">
border-radius ( n )
-webkit-border-radius n
-moz-border-radius n
border-radius n
</syntaxhighlight>
Line 946 ⟶ 1 004:
== CSS dinamici ==
Dynamic CSS, o DCSS, è un termine che comprende un insieme di tecnologie utilizzate assieme per creare fogli di stile dinamici, utilizzando una combinazione di qualsiasi [[linguaggio di programmazione]] per
DCSS permette di lavorare con variabili in CSS e con la riscrittura dinamica del codice sorgente CSS. Molti [[Content management system|CMS]] hanno creato moduli aggiuntivi, per esempio [[Drupal]].
Line 963 ⟶ 1 021:
== Modifica del cursore con i CSS ==
{{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
== 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|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 ==
Line 971 ⟶ 1 056:
File:Css-multiple-column.png|alt=Prima dei CSS3 per distribuire un testo su più paragrafi si usavano più <nowiki><p>. Con i CSS3 si può usare un solo <p>.</nowiki>|Prima dei CSS3 per distribuire un testo su più paragrafi si usavano più <nowiki><p>. Con i CSS3 si può usare un solo <p>.</nowiki>
File:Css3-background-multiplo.png|alt=Confronto tra sfondi multipli CSS2 e CSS3. Nel primo caso servivano più tag ognuno con uno sfondo e uno z-index, nel secondo un solo con più sfondi|Confronto tra sfondi multipli CSS2 e CSS3. Nel primo caso servivano più tag <img> ognuno con uno sfondo e uno z-index, nel secondo un solo <img> con più sfondi
File:Maschere-css-confronto.png|alt=Confronto tra maschera GIMP, CSS3 e SVG e|Confronto tra maschera GIMP, CSS3 e SVG
</gallery>
== Standardizzazione ==
=== Frameworks ===
I framework CSS sono librerie pre-preparate che hanno lo scopo di consentire uno stile più semplice e conforme agli standard delle pagine Web utilizzando il linguaggio Cascading Style Sheets. I framework CSS includono Blueprint, [[Bootstrap (framework)|Bootstrap]], Cascade Framework, Foundation, [https://mdbootstrap.com MDBootstrap] e Materialise. Come le librerie di linguaggi di programmazione e scripting, i framework CSS sono solitamente incorporati come fogli .css esterni a cui si fa riferimento nell'HTML <head>. Forniscono una serie di opzioni già pronte per la progettazione e il layout della pagina web. Sebbene molti di questi framework siano stati pubblicati, alcuni autori li usano principalmente per la prototipazione rapida, o per imparare da, e preferiscono 'creare manualmente' CSS appropriato per ogni sito pubblicato senza il sovraccarico di progettazione, manutenzione e download dovuto a molte funzionalità inutilizzate nello stile del sito.
Line 1 002 ⟶ 1 086:
== Collegamenti esterni ==
* {{Collegamenti esterni}}
* {{FOLDOC|Cascading Style Sheets|Cascading Style Sheets}}
* {{en}} [https://www.w3.org/Style/CSS/ Css] di [[W3C]]
* [https://curlie.org/World/Italiano/Computer/Formato_Dati/Linguaggi_di_Marcatura/Css Css] - Articoli e guide su [[DMOZ|Curlie (Ex DMoz)]]
* {{en}} [https://web.archive.org/web/20140831121826/http://www.mezzoblue.com/zengarden/alldesigns/ CSS Zen Garden] - Esempi.
* {{en}} [https://www.w3schools.com/css/default.asp Css w3schools] - Tutorial, Esempi, Reference su [[W3Schools]].
* {{en}} [https://cssoptimizer.online CSS Optimizer] {{Webarchive|url=https://web.archive.org/web/20201001040432/https://cssoptimizer.online/ |date=1 ottobre 2020 }} - Tool per ottimizzare e pulire il CSS inutilizzato.
*{{en}} [https://mdbootstrap.com CSS Framework] - Accelera il tuo sviluppo
{{Browser Internet}}
{{Linguaggi foglio di stile}}
{{Controllo di autorità}}
{{Portale|internet}}
| |||