CINXE.COM

<!DOCTYPE html> <html class="client-nojs vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-disabled skin-theme-clientpref-day vector-toc-available" lang="it" dir="ltr"> <head> <meta charset="UTF-8"> <title>CSS - Wikipedia</title> <script>(function(){var className="client-js vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-disabled skin-theme-clientpref-day vector-toc-available";var cookie=document.cookie.match(/(?:^|; )itwikimwclientpreferences=([^;]+)/);if(cookie){cookie[1].split('%2C').forEach(function(pref){className=className.replace(new RegExp('(^| )'+pref.replace(/-clientpref-\w+$|[^\w-]+/g,'')+'-clientpref-\\w+( |$)'),'$1'+pref+'$2');});}document.documentElement.className=className;}());RLCONF={"wgBreakFrames":false,"wgSeparatorTransformTable":[",\t."," \t,"],"wgDigitTransformTable":["",""], "wgDefaultDateFormat":"dmy","wgMonthNames":["","gennaio","febbraio","marzo","aprile","maggio","giugno","luglio","agosto","settembre","ottobre","novembre","dicembre"],"wgRequestId":"54bd45a6-7d84-4b11-bc61-5b610151f8a8","wgCanonicalNamespace":"","wgCanonicalSpecialPageName":false,"wgNamespaceNumber":0,"wgPageName":"CSS","wgTitle":"CSS","wgCurRevisionId":139301834,"wgRevisionId":139301834,"wgArticleId":296618,"wgIsArticle":true,"wgIsRedirect":false,"wgAction":"view","wgUserName":null,"wgUserGroups":["*"],"wgCategories":["Informazioni senza fonte","P856 letta da Wikidata","P9775 letta da Wikidata","P1417 letta da Wikidata","P3847 letta da Wikidata","Voci con template Collegamenti esterni e qualificatori sconosciuti","P1324 letta da Wikidata","Template Webarchive - collegamenti all'Internet Archive","Voci con codice LCCN","Voci con codice GND","Voci con codice BNE","Voci con codice BNF","Voci con codice J9U","Voci non biografiche con codici di controllo di autorità","CSS"], "wgPageViewLanguage":"it","wgPageContentLanguage":"it","wgPageContentModel":"wikitext","wgRelevantPageName":"CSS","wgRelevantArticleId":296618,"wgIsProbablyEditable":true,"wgRelevantPageIsProbablyEditable":true,"wgRestrictionEdit":[],"wgRestrictionMove":[],"wgNoticeProject":"wikipedia","wgCiteReferencePreviewsActive":false,"wgMediaViewerOnClick":true,"wgMediaViewerEnabledByDefault":true,"wgPopupsFlags":0,"wgVisualEditor":{"pageLanguageCode":"it","pageLanguageDir":"ltr","pageVariantFallbacks":"it"},"wgMFDisplayWikibaseDescriptions":{"search":true,"watchlist":true,"tagline":true,"nearby":true},"wgWMESchemaEditAttemptStepOversample":false,"wgWMEPageLength":60000,"wgRelatedArticlesCompat":[],"wgCentralAuthMobileDomain":false,"wgEditSubmitButtonLabelPublish":true,"wgULSPosition":"interlanguage","wgULSisCompactLinksEnabled":false,"wgVector2022LanguageInHeader":true,"wgULSisLanguageSelectorEmpty":false,"wgWikibaseItemId":"Q46441","wgCheckUserClientHintsHeadersJsApi":["brands","architecture", "bitness","fullVersionList","mobile","model","platform","platformVersion"],"GEHomepageSuggestedEditsEnableTopics":true,"wgGETopicsMatchModeEnabled":false,"wgGEStructuredTaskRejectionReasonTextInputEnabled":false,"wgGELevelingUpEnabledForUser":false};RLSTATE={"ext.gadget.coloriDarkMode-default":"ready","ext.globalCssJs.user.styles":"ready","site.styles":"ready","user.styles":"ready","ext.globalCssJs.user":"ready","user":"ready","user.options":"loading","ext.cite.styles":"ready","ext.pygments":"ready","mediawiki.page.gallery.styles":"ready","skins.vector.search.codex.styles":"ready","skins.vector.styles":"ready","skins.vector.icons":"ready","jquery.makeCollapsible.styles":"ready","ext.wikimediamessages.styles":"ready","ext.visualEditor.desktopArticleTarget.noscript":"ready","ext.uls.interlanguage":"ready","wikibase.client.init":"ready","ext.wikimediaBadges":"ready"};RLPAGEMODULES=["ext.cite.ux-enhancements","ext.pygments.view","mediawiki.page.media","site","mediawiki.page.ready", "jquery.makeCollapsible","mediawiki.toc","skins.vector.js","ext.centralNotice.geoIP","ext.centralNotice.startUp","ext.gadget.MainPageWikiList","ext.gadget.stru-commonsupload","ext.gadget.HiddenCat","ext.gadget.ReferenceTooltips","ext.gadget.TitoloErrato","ext.gadget.NewSection","ext.gadget.RichiediRevisioneBozza","ext.urlShortener.toolbar","ext.centralauth.centralautologin","mmv.bootstrap","ext.popups","ext.visualEditor.desktopArticleTarget.init","ext.visualEditor.targetLoader","ext.echo.centralauth","ext.eventLogging","ext.wikimediaEvents","ext.navigationTiming","ext.uls.interface","ext.cx.eventlogging.campaigns","ext.cx.uls.quick.actions","wikibase.client.vector-2022","ext.checkUser.clientHints","ext.growthExperiments.SuggestedEditSession","wikibase.sidebar.tracking"];</script> <script>(RLQ=window.RLQ||[]).push(function(){mw.loader.impl(function(){return["user.options@12s5i",function($,jQuery,require,module){mw.user.tokens.set({"patrolToken":"+\\","watchToken":"+\\","csrfToken":"+\\"}); }];});});</script> <link rel="stylesheet" href="/w/load.php?lang=it&modules=ext.cite.styles%7Cext.pygments%2CwikimediaBadges%7Cext.uls.interlanguage%7Cext.visualEditor.desktopArticleTarget.noscript%7Cext.wikimediamessages.styles%7Cjquery.makeCollapsible.styles%7Cmediawiki.page.gallery.styles%7Cskins.vector.icons%2Cstyles%7Cskins.vector.search.codex.styles%7Cwikibase.client.init&only=styles&skin=vector-2022"> <script async="" src="/w/load.php?lang=it&modules=startup&only=scripts&raw=1&skin=vector-2022"></script> <meta name="ResourceLoaderDynamicStyles" content=""> <link rel="stylesheet" href="/w/load.php?lang=it&modules=ext.gadget.coloriDarkMode-default&only=styles&skin=vector-2022"> <link rel="stylesheet" href="/w/load.php?lang=it&modules=site.styles&only=styles&skin=vector-2022"> <meta name="generator" content="MediaWiki 1.44.0-wmf.4"> <meta name="referrer" content="origin"> <meta name="referrer" content="origin-when-cross-origin"> <meta name="robots" content="max-image-preview:standard"> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="width=1120"> <meta property="og:title" content="CSS - Wikipedia"> <meta property="og:type" content="website"> <link rel="preconnect" href="//upload.wikimedia.org"> <link rel="alternate" media="only screen and (max-width: 640px)" href="//it.m.wikipedia.org/wiki/CSS"> <link rel="alternate" type="application/x-wiki" title="Modifica" href="/w/index.php?title=CSS&action=edit"> <link rel="apple-touch-icon" href="/static/apple-touch/wikipedia.png"> <link rel="icon" href="/static/favicon/wikipedia.ico"> <link rel="search" type="application/opensearchdescription+xml" href="/w/rest.php/v1/search" title="Wikipedia (it)"> <link rel="EditURI" type="application/rsd+xml" href="//it.wikipedia.org/w/api.php?action=rsd"> <link rel="canonical" href="https://it.wikipedia.org/wiki/CSS"> <link rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/deed.it"> <link rel="alternate" type="application/atom+xml" title="Feed Atom di Wikipedia" href="/w/index.php?title=Speciale:UltimeModifiche&feed=atom"> <link rel="dns-prefetch" href="//meta.wikimedia.org" /> <link rel="dns-prefetch" href="//login.wikimedia.org"> </head> <body class="skin--responsive skin-vector skin-vector-search-vue mediawiki ltr sitedir-ltr mw-hide-empty-elt ns-0 ns-subject mw-editable page-CSS rootpage-CSS skin-vector-2022 action-view"><a class="mw-jump-link" href="#bodyContent">Vai al contenuto</a> <div class="vector-header-container"> <header class="vector-header mw-header"> <div class="vector-header-start"> <nav class="vector-main-menu-landmark" aria-label="Sito"> <div id="vector-main-menu-dropdown" class="vector-dropdown vector-main-menu-dropdown vector-button-flush-left vector-button-flush-right" > <input type="checkbox" id="vector-main-menu-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-main-menu-dropdown" class="vector-dropdown-checkbox " aria-label="Menu principale" > <label id="vector-main-menu-dropdown-label" for="vector-main-menu-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" > Menu principale </label> <div class="vector-dropdown-content"> <div id="vector-main-menu-unpinned-container" class="vector-unpinned-container"> <div id="vector-main-menu" class="vector-main-menu vector-pinnable-element"> <div class="vector-pinnable-header vector-main-menu-pinnable-header vector-pinnable-header-unpinned" data-feature-name="main-menu-pinned" data-pinnable-element-id="vector-main-menu" data-pinned-container-id="vector-main-menu-pinned-container" data-unpinned-container-id="vector-main-menu-unpinned-container" > <div class="vector-pinnable-header-label">Menu principale</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-main-menu.pin">sposta nella barra laterale</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-main-menu.unpin">nascondi</button> </div> <div id="p-navigation" class="vector-menu mw-portlet mw-portlet-navigation" > <div class="vector-menu-heading"> Navigazione </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-mainpage-description" class="mw-list-item"><a href="/wiki/Pagina_principale" title="Visita la pagina principale [z]" accesskey="z">Pagina principale</a></li><li id="n-recentchanges" class="mw-list-item"><a href="/wiki/Speciale:UltimeModifiche" title="Elenco delle ultime modifiche del sito [r]" accesskey="r">Ultime modifiche</a></li><li id="n-randompage" class="mw-list-item"><a href="/wiki/Speciale:PaginaCasuale" title="Mostra una pagina a caso [x]" accesskey="x">Una voce a caso</a></li><li id="n-nearby-pages-title" class="mw-list-item"><a href="/wiki/Speciale:NelleVicinanze">Nelle vicinanze</a></li><li id="n-vetrina" class="mw-list-item"><a href="/wiki/Wikipedia:Vetrina">Vetrina</a></li><li id="n-help" class="mw-list-item"><a href="/wiki/Aiuto:Aiuto" title="Pagine di aiuto">Aiuto</a></li><li id="n-Sportello-informazioni" class="mw-list-item"><a href="/wiki/Aiuto:Sportello_informazioni">Sportello informazioni</a></li> </ul> </div> </div> <div id="p-Comunità" class="vector-menu mw-portlet mw-portlet-Comunità" > <div class="vector-menu-heading"> Comunità </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-portal" class="mw-list-item"><a href="/wiki/Portale:Comunit%C3%A0" title="Descrizione del progetto, cosa puoi fare, dove trovare le cose">Portale Comunità</a></li><li id="n-villagepump" class="mw-list-item"><a href="/wiki/Wikipedia:Bar">Bar</a></li><li id="n-wikipediano" class="mw-list-item"><a href="/wiki/Wikipedia:Wikipediano">Il Wikipediano</a></li><li id="n-contactpage" class="mw-list-item"><a href="/wiki/Wikipedia:Contatti">Contatti</a></li> </ul> </div> </div> </div> </div> </div> </div> </nav> <a href="/wiki/Pagina_principale" class="mw-logo"> <img class="mw-logo-icon" src="/static/images/icons/wikipedia.png" alt="" aria-hidden="true" height="50" width="50"> <img class="mw-logo-wordmark" alt="Wikipedia" src="/static/images/mobile/copyright/wikipedia-wordmark-en.svg" style="width: 7.5em; height: 1.125em;"> <img class="mw-logo-tagline" alt="L'enciclopedia libera" src="/static/images/mobile/copyright/wikipedia-tagline-it.svg" width="120" height="13" style="width: 7.5em; height: 0.8125em;"> </a> </div> <div class="vector-header-end"> <div id="p-search" role="search" class="vector-search-box-vue vector-search-box-collapses vector-search-box-show-thumbnail vector-search-box-auto-expand-width vector-search-box"> <a href="/wiki/Speciale:Ricerca" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only search-toggle" title="Cerca in Wikipedia [f]" accesskey="f"> Ricerca </a> <div class="vector-typeahead-search-container"> <div class="cdx-typeahead-search cdx-typeahead-search--show-thumbnail cdx-typeahead-search--auto-expand-width"> <form action="/w/index.php" id="searchform" class="cdx-search-input cdx-search-input--has-end-button"> <div id="simpleSearch" class="cdx-search-input__input-wrapper" data-search-loc="header-moved"> <div class="cdx-text-input cdx-text-input--has-start-icon"> <input class="cdx-text-input__input" type="search" name="search" placeholder="Cerca in Wikipedia" aria-label="Cerca in Wikipedia" autocapitalize="sentences" title="Cerca in Wikipedia [f]" accesskey="f" id="searchInput" > </div> <input type="hidden" name="title" value="Speciale:Ricerca"> </div> <button class="cdx-button cdx-search-input__end-button">Ricerca</button> </form> </div> </div> </div> <nav class="vector-user-links vector-user-links-wide" aria-label="Strumenti personali"> <div class="vector-user-links-main"> <div id="p-vector-user-menu-preferences" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <div id="p-vector-user-menu-userpage" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <nav class="vector-appearance-landmark" aria-label="Aspetto"> <div id="vector-appearance-dropdown" class="vector-dropdown " title="Modifica la dimensione, la larghezza e il colore del testo" > <input type="checkbox" id="vector-appearance-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-appearance-dropdown" class="vector-dropdown-checkbox " aria-label="Aspetto" > <label id="vector-appearance-dropdown-label" for="vector-appearance-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" > Aspetto </label> <div class="vector-dropdown-content"> <div id="vector-appearance-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <div id="p-vector-user-menu-notifications" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <div id="p-vector-user-menu-overflow" class="vector-menu mw-portlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-sitesupport-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="//donate.wikimedia.org/wiki/Special:FundraiserRedirector?utm_source=donate&utm_medium=sidebar&utm_campaign=C13_it.wikipedia.org&uselang=it" class="">Fai una donazione</a> </li> <li id="pt-createaccount-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="/w/index.php?title=Speciale:CreaUtenza&returnto=CSS" title="Si consiglia di registrarsi e di effettuare l'accesso, anche se non è obbligatorio" class="">registrati</a> </li> <li id="pt-login-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="/w/index.php?title=Speciale:Entra&returnto=CSS" title="Si consiglia di effettuare l'accesso, anche se non è obbligatorio [o]" accesskey="o" class="">entra</a> </li> </ul> </div> </div> </div> <div id="vector-user-links-dropdown" class="vector-dropdown vector-user-menu vector-button-flush-right vector-user-menu-logged-out" title="Altre opzioni" > <input type="checkbox" id="vector-user-links-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-user-links-dropdown" class="vector-dropdown-checkbox " aria-label="Strumenti personali" > <label id="vector-user-links-dropdown-label" for="vector-user-links-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" > Strumenti personali </label> <div class="vector-dropdown-content"> <div id="p-personal" class="vector-menu mw-portlet mw-portlet-personal user-links-collapsible-item" title="Menu utente" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-sitesupport" class="user-links-collapsible-item mw-list-item"><a href="//donate.wikimedia.org/wiki/Special:FundraiserRedirector?utm_source=donate&utm_medium=sidebar&utm_campaign=C13_it.wikipedia.org&uselang=it">Fai una donazione</a></li><li id="pt-createaccount" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=Speciale:CreaUtenza&returnto=CSS" title="Si consiglia di registrarsi e di effettuare l'accesso, anche se non è obbligatorio"> registrati</a></li><li id="pt-login" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=Speciale:Entra&returnto=CSS" title="Si consiglia di effettuare l'accesso, anche se non è obbligatorio [o]" accesskey="o"> entra</a></li> </ul> </div> </div> <div id="p-user-menu-anon-editor" class="vector-menu mw-portlet mw-portlet-user-menu-anon-editor" > <div class="vector-menu-heading"> Pagine per utenti anonimi <a href="/wiki/Aiuto:Benvenuto" aria-label="Ulteriori informazioni sulla contribuzione">ulteriori informazioni</a> </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-anoncontribs" class="mw-list-item"><a href="/wiki/Speciale:MieiContributi" title="Un elenco delle modifiche fatte da questo indirizzo IP [y]" accesskey="y">contributi</a></li><li id="pt-anontalk" class="mw-list-item"><a href="/wiki/Speciale:MieDiscussioni" title="Discussioni sulle modifiche fatte da questo indirizzo IP [n]" accesskey="n">discussioni</a></li> </ul> </div> </div> </div> </div> </nav> </div> </header> </div> <div class="mw-page-container"> <div class="mw-page-container-inner"> <div class="vector-sitenotice-container"> <div id="siteNotice"></div> </div> <div class="vector-column-start"> <div class="vector-main-menu-container"> <div id="mw-navigation"> <nav id="mw-panel" class="vector-main-menu-landmark" aria-label="Sito"> <div id="vector-main-menu-pinned-container" class="vector-pinned-container"> </div> </nav> </div> </div> <div class="vector-sticky-pinned-container"> <nav id="mw-panel-toc" aria-label="Indice" data-event-name="ui.sidebar-toc" class="mw-table-of-contents-container vector-toc-landmark"> <div id="vector-toc-pinned-container" class="vector-pinned-container"> <div id="vector-toc" class="vector-toc vector-pinnable-element"> <div class="vector-pinnable-header vector-toc-pinnable-header vector-pinnable-header-pinned" data-feature-name="toc-pinned" data-pinnable-element-id="vector-toc" > <h2 class="vector-pinnable-header-label">Indice</h2> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-toc.pin">sposta nella barra laterale</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-toc.unpin">nascondi</button> </div> <ul class="vector-toc-contents" id="mw-panel-toc-list"> <li id="toc-mw-content-text" class="vector-toc-list-item vector-toc-level-1"> <a href="#" class="vector-toc-link"> <div class="vector-toc-text">Inizio</div> </a> </li> <li id="toc-Storia" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Storia"> <div class="vector-toc-text"> 1 Storia </div> </a> <button aria-controls="toc-Storia-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> Attiva/disattiva la sottosezione Storia </button> <ul id="toc-Storia-sublist" class="vector-toc-list"> <li id="toc-CSS" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#CSS"> <div class="vector-toc-text"> 1.1 CSS </div> </a> <ul id="toc-CSS-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-CSS_2_e_CSS_2.1" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#CSS_2_e_CSS_2.1"> <div class="vector-toc-text"> 1.2 CSS 2 e CSS 2.1 </div> </a> <ul id="toc-CSS_2_e_CSS_2.1-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-CSS_3" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#CSS_3"> <div class="vector-toc-text"> 1.3 CSS 3 </div> </a> <ul id="toc-CSS_3-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Caratteristiche" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Caratteristiche"> <div class="vector-toc-text"> 2 Caratteristiche </div> </a> <button aria-controls="toc-Caratteristiche-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> Attiva/disattiva la sottosezione Caratteristiche </button> <ul id="toc-Caratteristiche-sublist" class="vector-toc-list"> <li id="toc-Il_codice" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Il_codice"> <div class="vector-toc-text"> 2.1 Il codice </div> </a> <ul id="toc-Il_codice-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Regole" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Regole"> <div class="vector-toc-text"> 2.2 Regole </div> </a> <ul id="toc-Regole-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Selettori" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Selettori"> <div class="vector-toc-text"> 2.3 Selettori </div> </a> <ul id="toc-Selettori-sublist" class="vector-toc-list"> <li id="toc-Selettori_di_tipo" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Selettori_di_tipo"> <div class="vector-toc-text"> 2.3.1 Selettori di tipo </div> </a> <ul id="toc-Selettori_di_tipo-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Selettori_di_classe" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Selettori_di_classe"> <div class="vector-toc-text"> 2.3.2 Selettori di classe </div> </a> <ul id="toc-Selettori_di_classe-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Selettori_d'identificatore" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Selettori_d'identificatore"> <div class="vector-toc-text"> 2.3.3 Selettori d'identificatore </div> </a> <ul id="toc-Selettori_d'identificatore-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Selettori_di_pseudo-classe" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Selettori_di_pseudo-classe"> <div class="vector-toc-text"> 2.3.4 Selettori di pseudo-classe </div> </a> <ul id="toc-Selettori_di_pseudo-classe-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Selettori_di_pseudo-elementi" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Selettori_di_pseudo-elementi"> <div class="vector-toc-text"> 2.3.5 Selettori di pseudo-elementi </div> </a> <ul id="toc-Selettori_di_pseudo-elementi-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Selettori_di_gerarchia" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Selettori_di_gerarchia"> <div class="vector-toc-text"> 2.3.6 Selettori di gerarchia </div> </a> <ul id="toc-Selettori_di_gerarchia-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Selettori_di_attributo" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Selettori_di_attributo"> <div class="vector-toc-text"> 2.3.7 Selettori di attributo </div> </a> <ul id="toc-Selettori_di_attributo-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Griglie_CSS" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Griglie_CSS"> <div class="vector-toc-text"> 2.4 Griglie CSS </div> </a> <ul id="toc-Griglie_CSS-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-CSS_per_la_stampa" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#CSS_per_la_stampa"> <div class="vector-toc-text"> 2.5 CSS per la stampa </div> </a> <ul id="toc-CSS_per_la_stampa-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Colori" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Colori"> <div class="vector-toc-text"> 2.6 Colori </div> </a> <ul id="toc-Colori-sublist" class="vector-toc-list"> <li id="toc-Cambiamento_del_nome_dei_colori" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Cambiamento_del_nome_dei_colori"> <div class="vector-toc-text"> 2.6.1 Cambiamento del nome dei colori </div> </a> <ul id="toc-Cambiamento_del_nome_dei_colori-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Creazione_di_variabili" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Creazione_di_variabili"> <div class="vector-toc-text"> 2.7 Creazione di variabili </div> </a> <ul id="toc-Creazione_di_variabili-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Proprietà" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Proprietà"> <div class="vector-toc-text"> 2.8 Proprietà </div> </a> <ul id="toc-Proprietà-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Valori" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Valori"> <div class="vector-toc-text"> 2.9 Valori </div> </a> <ul id="toc-Valori-sublist" class="vector-toc-list"> <li id="toc-CSS_per_SVG" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#CSS_per_SVG"> <div class="vector-toc-text"> 2.9.1 CSS per SVG </div> </a> <ul id="toc-CSS_per_SVG-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Creazione_automatica_dei_CSS" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Creazione_automatica_dei_CSS"> <div class="vector-toc-text"> 2.9.2 Creazione automatica dei CSS </div> </a> <ul id="toc-Creazione_automatica_dei_CSS-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Utilizzo_del_3D" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Utilizzo_del_3D"> <div class="vector-toc-text"> 2.9.3 Utilizzo del 3D </div> </a> <ul id="toc-Utilizzo_del_3D-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> </ul> </li> <li id="toc-Il_supporto_dei_Browser_ai_CSS" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Il_supporto_dei_Browser_ai_CSS"> <div class="vector-toc-text"> 3 Il supporto dei Browser ai CSS </div> </a> <ul id="toc-Il_supporto_dei_Browser_ai_CSS-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Utilizzo_su_diversi_dispositivi" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Utilizzo_su_diversi_dispositivi"> <div class="vector-toc-text"> 4 Utilizzo su diversi dispositivi </div> </a> <ul id="toc-Utilizzo_su_diversi_dispositivi-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Riduzione_delle_chiamate_al_server" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Riduzione_delle_chiamate_al_server"> <div class="vector-toc-text"> 5 Riduzione delle chiamate al server </div> </a> <button aria-controls="toc-Riduzione_delle_chiamate_al_server-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> Attiva/disattiva la sottosezione Riduzione delle chiamate al server </button> <ul id="toc-Riduzione_delle_chiamate_al_server-sublist" class="vector-toc-list"> <li id="toc-Immagini" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Immagini"> <div class="vector-toc-text"> 5.1 Immagini </div> </a> <ul id="toc-Immagini-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Sprite" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Sprite"> <div class="vector-toc-text"> 5.2 Sprite </div> </a> <ul id="toc-Sprite-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Minify" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Minify"> <div class="vector-toc-text"> 5.3 Minify </div> </a> <ul id="toc-Minify-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Font" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Font"> <div class="vector-toc-text"> 5.4 Font </div> </a> <ul id="toc-Font-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Numero_di_file" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Numero_di_file"> <div class="vector-toc-text"> 5.5 Numero di file </div> </a> <ul id="toc-Numero_di_file-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-JavaScript" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#JavaScript"> <div class="vector-toc-text"> 5.6 JavaScript </div> </a> <ul id="toc-JavaScript-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Fogli_di_stile_preferiti_e_alternativi" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Fogli_di_stile_preferiti_e_alternativi"> <div class="vector-toc-text"> 6 Fogli di stile preferiti e alternativi </div> </a> <ul id="toc-Fogli_di_stile_preferiti_e_alternativi-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Pattern" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Pattern"> <div class="vector-toc-text"> 7 Pattern </div> </a> <ul id="toc-Pattern-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Acid3" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Acid3"> <div class="vector-toc-text"> 8 Acid3 </div> </a> <ul id="toc-Acid3-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Stylus" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Stylus"> <div class="vector-toc-text"> 9 Stylus </div> </a> <button aria-controls="toc-Stylus-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> Attiva/disattiva la sottosezione Stylus </button> <ul id="toc-Stylus-sublist" class="vector-toc-list"> <li id="toc-Selettori_2" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Selettori_2"> <div class="vector-toc-text"> 9.1 Selettori </div> </a> <ul id="toc-Selettori_2-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Variabili" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Variabili"> <div class="vector-toc-text"> 9.2 Variabili </div> </a> <ul id="toc-Variabili-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Mixin_e_funzioni" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Mixin_e_funzioni"> <div class="vector-toc-text"> 9.3 Mixin e funzioni </div> </a> <ul id="toc-Mixin_e_funzioni-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Interpolazione" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Interpolazione"> <div class="vector-toc-text"> 9.4 Interpolazione </div> </a> <ul id="toc-Interpolazione-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-CSS_dinamici" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#CSS_dinamici"> <div class="vector-toc-text"> 10 CSS dinamici </div> </a> <ul id="toc-CSS_dinamici-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Modifica_del_cursore_con_i_CSS" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Modifica_del_cursore_con_i_CSS"> <div class="vector-toc-text"> 11 Modifica del cursore con i CSS </div> </a> <ul id="toc-Modifica_del_cursore_con_i_CSS-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Progetti_in_divenire" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Progetti_in_divenire"> <div class="vector-toc-text"> 12 Progetti in divenire </div> </a> <button aria-controls="toc-Progetti_in_divenire-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> Attiva/disattiva la sottosezione Progetti in divenire </button> <ul id="toc-Progetti_in_divenire-sublist" class="vector-toc-list"> <li id="toc-Esempi" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Esempi"> <div class="vector-toc-text"> 12.1 Esempi </div> </a> <ul id="toc-Esempi-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Esempi_di_CSS3" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Esempi_di_CSS3"> <div class="vector-toc-text"> 13 Esempi di CSS3 </div> </a> <ul id="toc-Esempi_di_CSS3-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Standardizzazione" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Standardizzazione"> <div class="vector-toc-text"> 14 Standardizzazione </div> </a> <button aria-controls="toc-Standardizzazione-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> Attiva/disattiva la sottosezione Standardizzazione </button> <ul id="toc-Standardizzazione-sublist" class="vector-toc-list"> <li id="toc-Frameworks" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Frameworks"> <div class="vector-toc-text"> 14.1 Frameworks </div> </a> <ul id="toc-Frameworks-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Metodologie_di_progettazione" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Metodologie_di_progettazione"> <div class="vector-toc-text"> 14.2 Metodologie di progettazione </div> </a> <ul id="toc-Metodologie_di_progettazione-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Note" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Note"> <div class="vector-toc-text"> 15 Note </div> </a> <ul id="toc-Note-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Bibliografia" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Bibliografia"> <div class="vector-toc-text"> 16 Bibliografia </div> </a> <ul id="toc-Bibliografia-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Voci_correlate" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Voci_correlate"> <div class="vector-toc-text"> 17 Voci correlate </div> </a> <ul id="toc-Voci_correlate-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Altri_progetti" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Altri_progetti"> <div class="vector-toc-text"> 18 Altri progetti </div> </a> <ul id="toc-Altri_progetti-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Collegamenti_esterni" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Collegamenti_esterni"> <div class="vector-toc-text"> 19 Collegamenti esterni </div> </a> <ul id="toc-Collegamenti_esterni-sublist" class="vector-toc-list"> </ul> </li> </ul> </div> </div> </nav> </div> </div> <div class="mw-content-container"> <main id="content" class="mw-body"> <header class="mw-body-header vector-page-titlebar"> <nav aria-label="Indice" class="vector-toc-landmark"> <div id="vector-page-titlebar-toc" class="vector-dropdown vector-page-titlebar-toc vector-button-flush-left" > <input type="checkbox" id="vector-page-titlebar-toc-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-titlebar-toc" class="vector-dropdown-checkbox " aria-label="Mostra/Nascondi l'indice" > <label id="vector-page-titlebar-toc-label" for="vector-page-titlebar-toc-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" > Mostra/Nascondi l'indice </label> <div class="vector-dropdown-content"> <div id="vector-page-titlebar-toc-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <h1 id="firstHeading" class="firstHeading mw-first-heading">CSS</h1> <div id="p-lang-btn" class="vector-dropdown mw-portlet mw-portlet-lang" > <input type="checkbox" id="p-lang-btn-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-p-lang-btn" class="vector-dropdown-checkbox mw-interlanguage-selector" aria-label="Vai a una voce in un'altra lingua. Disponibile in 92 lingue" > <label id="p-lang-btn-label" for="p-lang-btn-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--action-progressive mw-portlet-lang-heading-92" aria-hidden="true" > 92 lingue </label> <div class="vector-dropdown-content"> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li class="interlanguage-link interwiki-af mw-list-item"><a href="https://af.wikipedia.org/wiki/CSS" title="CSS - afrikaans" lang="af" hreflang="af" data-title="CSS" data-language-autonym="Afrikaans" data-language-local-name="afrikaans" class="interlanguage-link-target">Afrikaans</a></li><li class="interlanguage-link interwiki-an mw-list-item"><a href="https://an.wikipedia.org/wiki/CSS" title="CSS - aragonese" lang="an" hreflang="an" data-title="CSS" data-language-autonym="Aragonés" data-language-local-name="aragonese" class="interlanguage-link-target">Aragonés</a></li><li class="interlanguage-link interwiki-ar mw-list-item"><a href="https://ar.wikipedia.org/wiki/%D8%A3%D9%88%D8%B1%D8%A7%D9%82_%D8%A7%D9%84%D8%A3%D9%86%D9%85%D8%A7%D8%B7_%D8%A7%D9%84%D9%85%D8%AA%D8%AA%D8%A7%D9%84%D9%8A%D8%A9" title="أوراق الأنماط المتتالية - arabo" lang="ar" hreflang="ar" data-title="أوراق الأنماط المتتالية" data-language-autonym="العربية" data-language-local-name="arabo" class="interlanguage-link-target">العربية</a></li><li class="interlanguage-link interwiki-as mw-list-item"><a href="https://as.wikipedia.org/wiki/%E0%A6%9A%E0%A6%BF_%E0%A6%8F%E0%A6%9B_%E0%A6%8F%E0%A6%9B" title="চি এছ এছ - assamese" lang="as" hreflang="as" data-title="চি এছ এছ" data-language-autonym="অসমীয়া" data-language-local-name="assamese" class="interlanguage-link-target">অসমীয়া</a></li><li class="interlanguage-link interwiki-az mw-list-item"><a href="https://az.wikipedia.org/wiki/CSS" title="CSS - azerbaigiano" lang="az" hreflang="az" data-title="CSS" data-language-autonym="Azərbaycanca" data-language-local-name="azerbaigiano" class="interlanguage-link-target">Azərbaycanca</a></li><li class="interlanguage-link interwiki-bar mw-list-item"><a href="https://bar.wikipedia.org/wiki/CSS" title="CSS - bavarese" lang="bar" hreflang="bar" data-title="CSS" data-language-autonym="Boarisch" data-language-local-name="bavarese" class="interlanguage-link-target">Boarisch</a></li><li class="interlanguage-link interwiki-bat-smg mw-list-item"><a href="https://bat-smg.wikipedia.org/wiki/CSS" title="CSS - samogitico" lang="sgs" hreflang="sgs" data-title="CSS" data-language-autonym="Žemaitėška" data-language-local-name="samogitico" class="interlanguage-link-target">Žemaitėška</a></li><li class="interlanguage-link interwiki-be mw-list-item"><a href="https://be.wikipedia.org/wiki/%D0%9A%D0%B0%D1%81%D0%BA%D0%B0%D0%B4%D0%BD%D1%8B%D1%8F_%D1%82%D0%B0%D0%B1%D0%BB%D1%96%D1%86%D1%8B_%D1%81%D1%82%D1%8B%D0%BB%D1%8F%D1%9E" title="Каскадныя табліцы стыляў - bielorusso" lang="be" hreflang="be" data-title="Каскадныя табліцы стыляў" data-language-autonym="Беларуская" data-language-local-name="bielorusso" class="interlanguage-link-target">Беларуская</a></li><li class="interlanguage-link interwiki-be-x-old mw-list-item"><a href="https://be-tarask.wikipedia.org/wiki/%D0%9A%D0%B0%D1%81%D0%BA%D0%B0%D0%B4%D0%BD%D1%8B%D1%8F_%D1%82%D0%B0%D0%B1%D0%BB%D1%96%D1%86%D1%8B_%D1%81%D1%82%D1%8B%D0%BB%D1%8F%D1%9E" title="Каскадныя табліцы стыляў - Belarusian (Taraškievica orthography)" lang="be-tarask" hreflang="be-tarask" data-title="Каскадныя табліцы стыляў" data-language-autonym="Беларуская (тарашкевіца)" data-language-local-name="Belarusian (Taraškievica orthography)" class="interlanguage-link-target">Беларуская (тарашкевіца)</a></li><li class="interlanguage-link interwiki-bg mw-list-item"><a href="https://bg.wikipedia.org/wiki/CSS" title="CSS - bulgaro" lang="bg" hreflang="bg" data-title="CSS" data-language-autonym="Български" data-language-local-name="bulgaro" class="interlanguage-link-target">Български</a></li><li class="interlanguage-link interwiki-bn mw-list-item"><a href="https://bn.wikipedia.org/wiki/%E0%A6%95%E0%A7%8D%E0%A6%AF%E0%A6%BE%E0%A6%B8%E0%A6%95%E0%A7%87%E0%A6%A1%E0%A6%BF%E0%A6%82_%E0%A6%B8%E0%A7%8D%E0%A6%9F%E0%A6%BE%E0%A6%87%E0%A6%B2_%E0%A6%B6%E0%A7%80%E0%A6%9F%E0%A6%B8" title="ক্যাসকেডিং স্টাইল শীটস - bengalese" lang="bn" hreflang="bn" data-title="ক্যাসকেডিং স্টাইল শীটস" data-language-autonym="বাংলা" data-language-local-name="bengalese" class="interlanguage-link-target">বাংলা</a></li><li class="interlanguage-link interwiki-br mw-list-item"><a href="https://br.wikipedia.org/wiki/Cascading_Style_Sheets" title="Cascading Style Sheets - bretone" lang="br" hreflang="br" data-title="Cascading Style Sheets" data-language-autonym="Brezhoneg" data-language-local-name="bretone" class="interlanguage-link-target">Brezhoneg</a></li><li class="interlanguage-link interwiki-bs mw-list-item"><a href="https://bs.wikipedia.org/wiki/CSS" title="CSS - bosniaco" lang="bs" hreflang="bs" data-title="CSS" data-language-autonym="Bosanski" data-language-local-name="bosniaco" class="interlanguage-link-target">Bosanski</a></li><li class="interlanguage-link interwiki-ca mw-list-item"><a href="https://ca.wikipedia.org/wiki/Cascading_Style_Sheets" title="Cascading Style Sheets - catalano" lang="ca" hreflang="ca" data-title="Cascading Style Sheets" data-language-autonym="Català" data-language-local-name="catalano" class="interlanguage-link-target">Català</a></li><li class="interlanguage-link interwiki-ckb mw-list-item"><a href="https://ckb.wikipedia.org/wiki/%D8%B3%DB%8C_%D8%A6%DB%8E%D8%B3_%D8%A6%DB%8E%D8%B3" title="سی ئێس ئێس - curdo centrale" lang="ckb" hreflang="ckb" data-title="سی ئێس ئێس" data-language-autonym="کوردی" data-language-local-name="curdo centrale" class="interlanguage-link-target">کوردی</a></li><li class="interlanguage-link interwiki-cs mw-list-item"><a href="https://cs.wikipedia.org/wiki/Kask%C3%A1dov%C3%A9_styly" title="Kaskádové styly - ceco" lang="cs" hreflang="cs" data-title="Kaskádové styly" data-language-autonym="Čeština" data-language-local-name="ceco" class="interlanguage-link-target">Čeština</a></li><li class="interlanguage-link interwiki-cy mw-list-item"><a href="https://cy.wikipedia.org/wiki/Cascading_Style_Sheets" title="Cascading Style Sheets - gallese" lang="cy" hreflang="cy" data-title="Cascading Style Sheets" data-language-autonym="Cymraeg" data-language-local-name="gallese" class="interlanguage-link-target">Cymraeg</a></li><li class="interlanguage-link interwiki-da mw-list-item"><a href="https://da.wikipedia.org/wiki/CSS" title="CSS - danese" lang="da" hreflang="da" data-title="CSS" data-language-autonym="Dansk" data-language-local-name="danese" class="interlanguage-link-target">Dansk</a></li><li class="interlanguage-link interwiki-de mw-list-item"><a href="https://de.wikipedia.org/wiki/Cascading_Style_Sheets" title="Cascading Style Sheets - tedesco" lang="de" hreflang="de" data-title="Cascading Style Sheets" data-language-autonym="Deutsch" data-language-local-name="tedesco" class="interlanguage-link-target">Deutsch</a></li><li class="interlanguage-link interwiki-diq mw-list-item"><a href="https://diq.wikipedia.org/wiki/CSS%C3%AA_xasi" title="CSSê xasi - Zazaki" lang="diq" hreflang="diq" data-title="CSSê xasi" data-language-autonym="Zazaki" data-language-local-name="Zazaki" class="interlanguage-link-target">Zazaki</a></li><li class="interlanguage-link interwiki-dsb mw-list-item"><a href="https://dsb.wikipedia.org/wiki/CSS" title="CSS - basso sorabo" lang="dsb" hreflang="dsb" data-title="CSS" data-language-autonym="Dolnoserbski" data-language-local-name="basso sorabo" class="interlanguage-link-target">Dolnoserbski</a></li><li class="interlanguage-link interwiki-el mw-list-item"><a href="https://el.wikipedia.org/wiki/CSS" title="CSS - greco" lang="el" hreflang="el" data-title="CSS" data-language-autonym="Ελληνικά" data-language-local-name="greco" class="interlanguage-link-target">Ελληνικά</a></li><li class="interlanguage-link interwiki-en mw-list-item"><a href="https://en.wikipedia.org/wiki/CSS" title="CSS - inglese" lang="en" hreflang="en" data-title="CSS" data-language-autonym="English" data-language-local-name="inglese" class="interlanguage-link-target">English</a></li><li class="interlanguage-link interwiki-eo mw-list-item"><a href="https://eo.wikipedia.org/wiki/CSS" title="CSS - esperanto" lang="eo" hreflang="eo" data-title="CSS" data-language-autonym="Esperanto" data-language-local-name="esperanto" class="interlanguage-link-target">Esperanto</a></li><li class="interlanguage-link interwiki-es mw-list-item"><a href="https://es.wikipedia.org/wiki/CSS" title="CSS - spagnolo" lang="es" hreflang="es" data-title="CSS" data-language-autonym="Español" data-language-local-name="spagnolo" class="interlanguage-link-target">Español</a></li><li class="interlanguage-link interwiki-et mw-list-item"><a href="https://et.wikipedia.org/wiki/CSS" title="CSS - estone" lang="et" hreflang="et" data-title="CSS" data-language-autonym="Eesti" data-language-local-name="estone" class="interlanguage-link-target">Eesti</a></li><li class="interlanguage-link interwiki-eu mw-list-item"><a href="https://eu.wikipedia.org/wiki/CSS" title="CSS - basco" lang="eu" hreflang="eu" data-title="CSS" data-language-autonym="Euskara" data-language-local-name="basco" class="interlanguage-link-target">Euskara</a></li><li class="interlanguage-link interwiki-fa mw-list-item"><a href="https://fa.wikipedia.org/wiki/%D8%B3%DB%8C%E2%80%8C%D8%A7%D8%B3%E2%80%8C%D8%A7%D8%B3" title="سی‌اس‌اس - persiano" lang="fa" hreflang="fa" data-title="سی‌اس‌اس" data-language-autonym="فارسی" data-language-local-name="persiano" class="interlanguage-link-target">فارسی</a></li><li class="interlanguage-link interwiki-fi mw-list-item"><a href="https://fi.wikipedia.org/wiki/CSS" title="CSS - finlandese" lang="fi" hreflang="fi" data-title="CSS" data-language-autonym="Suomi" data-language-local-name="finlandese" class="interlanguage-link-target">Suomi</a></li><li class="interlanguage-link interwiki-fr mw-list-item"><a href="https://fr.wikipedia.org/wiki/Feuilles_de_style_en_cascade" title="Feuilles de style en cascade - francese" lang="fr" hreflang="fr" data-title="Feuilles de style en cascade" data-language-autonym="Français" data-language-local-name="francese" class="interlanguage-link-target">Français</a></li><li class="interlanguage-link interwiki-frr mw-list-item"><a href="https://frr.wikipedia.org/wiki/CSS" title="CSS - frisone settentrionale" lang="frr" hreflang="frr" data-title="CSS" data-language-autonym="Nordfriisk" data-language-local-name="frisone settentrionale" class="interlanguage-link-target">Nordfriisk</a></li><li class="interlanguage-link interwiki-ga mw-list-item"><a href="https://ga.wikipedia.org/wiki/St%C3%ADlbhileoga_casc%C3%A1ideacha" title="Stílbhileoga cascáideacha - irlandese" lang="ga" hreflang="ga" data-title="Stílbhileoga cascáideacha" data-language-autonym="Gaeilge" data-language-local-name="irlandese" class="interlanguage-link-target">Gaeilge</a></li><li class="interlanguage-link interwiki-gd mw-list-item"><a href="https://gd.wikipedia.org/wiki/CSS" title="CSS - gaelico scozzese" lang="gd" hreflang="gd" data-title="CSS" data-language-autonym="Gàidhlig" data-language-local-name="gaelico scozzese" class="interlanguage-link-target">Gàidhlig</a></li><li class="interlanguage-link interwiki-gl mw-list-item"><a href="https://gl.wikipedia.org/wiki/CSS" title="CSS - galiziano" lang="gl" hreflang="gl" data-title="CSS" data-language-autonym="Galego" data-language-local-name="galiziano" class="interlanguage-link-target">Galego</a></li><li class="interlanguage-link interwiki-he mw-list-item"><a href="https://he.wikipedia.org/wiki/%D7%92%D7%99%D7%9C%D7%99%D7%95%D7%A0%D7%95%D7%AA_%D7%A1%D7%92%D7%A0%D7%95%D7%9F_%D7%9E%D7%93%D7%95%D7%A8%D7%92%D7%99%D7%9D" title="גיליונות סגנון מדורגים - ebraico" lang="he" hreflang="he" data-title="גיליונות סגנון מדורגים" data-language-autonym="עברית" data-language-local-name="ebraico" class="interlanguage-link-target">עברית</a></li><li class="interlanguage-link interwiki-hi mw-list-item"><a href="https://hi.wikipedia.org/wiki/%E0%A4%B8%E0%A5%80%E0%A4%8F%E0%A4%B8%E0%A4%8F%E0%A4%B8" title="सीएसएस - hindi" lang="hi" hreflang="hi" data-title="सीएसएस" data-language-autonym="हिन्दी" data-language-local-name="hindi" class="interlanguage-link-target">हिन्दी</a></li><li class="interlanguage-link interwiki-hr mw-list-item"><a href="https://hr.wikipedia.org/wiki/CSS" title="CSS - croato" lang="hr" hreflang="hr" data-title="CSS" data-language-autonym="Hrvatski" data-language-local-name="croato" class="interlanguage-link-target">Hrvatski</a></li><li class="interlanguage-link interwiki-hsb mw-list-item"><a href="https://hsb.wikipedia.org/wiki/CSS" title="CSS - alto sorabo" lang="hsb" hreflang="hsb" data-title="CSS" data-language-autonym="Hornjoserbsce" data-language-local-name="alto sorabo" class="interlanguage-link-target">Hornjoserbsce</a></li><li class="interlanguage-link interwiki-hu mw-list-item"><a href="https://hu.wikipedia.org/wiki/CSS" title="CSS - ungherese" lang="hu" hreflang="hu" data-title="CSS" data-language-autonym="Magyar" data-language-local-name="ungherese" class="interlanguage-link-target">Magyar</a></li><li class="interlanguage-link interwiki-hy mw-list-item"><a href="https://hy.wikipedia.org/wiki/%D4%BF%D5%A1%D5%BD%D5%AF%D5%A1%D5%A4%D5%A1%D5%B5%D5%AB%D5%B6_%D5%B8%D5%B3%D5%A1%D5%A9%D5%A5%D6%80%D5%A9" title="Կասկադային ոճաթերթ - armeno" lang="hy" hreflang="hy" data-title="Կասկադային ոճաթերթ" data-language-autonym="Հայերեն" data-language-local-name="armeno" class="interlanguage-link-target">Հայերեն</a></li><li class="interlanguage-link interwiki-ia mw-list-item"><a href="https://ia.wikipedia.org/wiki/CSS" title="CSS - interlingua" lang="ia" hreflang="ia" data-title="CSS" data-language-autonym="Interlingua" data-language-local-name="interlingua" class="interlanguage-link-target">Interlingua</a></li><li class="interlanguage-link interwiki-id mw-list-item"><a href="https://id.wikipedia.org/wiki/Cascading_Style_Sheets" title="Cascading Style Sheets - indonesiano" lang="id" hreflang="id" data-title="Cascading Style Sheets" data-language-autonym="Bahasa Indonesia" data-language-local-name="indonesiano" class="interlanguage-link-target">Bahasa Indonesia</a></li><li class="interlanguage-link interwiki-is mw-list-item"><a href="https://is.wikipedia.org/wiki/CSS" title="CSS - islandese" lang="is" hreflang="is" data-title="CSS" data-language-autonym="Íslenska" data-language-local-name="islandese" class="interlanguage-link-target">Íslenska</a></li><li class="interlanguage-link interwiki-ja mw-list-item"><a href="https://ja.wikipedia.org/wiki/Cascading_Style_Sheets" title="Cascading Style Sheets - giapponese" lang="ja" hreflang="ja" data-title="Cascading Style Sheets" data-language-autonym="日本語" data-language-local-name="giapponese" class="interlanguage-link-target">日本語</a></li><li class="interlanguage-link interwiki-ka mw-list-item"><a href="https://ka.wikipedia.org/wiki/CSS" title="CSS - georgiano" lang="ka" hreflang="ka" data-title="CSS" data-language-autonym="ქართული" data-language-local-name="georgiano" class="interlanguage-link-target">ქართული</a></li><li class="interlanguage-link interwiki-kaa mw-list-item"><a href="https://kaa.wikipedia.org/wiki/Css" title="Css - kara-kalpak" lang="kaa" hreflang="kaa" data-title="Css" data-language-autonym="Qaraqalpaqsha" data-language-local-name="kara-kalpak" class="interlanguage-link-target">Qaraqalpaqsha</a></li><li class="interlanguage-link interwiki-kab mw-list-item"><a href="https://kab.wikipedia.org/wiki/Tiferkiyin_n_wa%C9%A3anen_ikussimen" title="Tiferkiyin n waɣanen ikussimen - cabilo" lang="kab" hreflang="kab" data-title="Tiferkiyin n waɣanen ikussimen" data-language-autonym="Taqbaylit" data-language-local-name="cabilo" class="interlanguage-link-target">Taqbaylit</a></li><li class="interlanguage-link interwiki-kk mw-list-item"><a href="https://kk.wikipedia.org/wiki/CSS" title="CSS - kazako" lang="kk" hreflang="kk" data-title="CSS" data-language-autonym="Қазақша" data-language-local-name="kazako" class="interlanguage-link-target">Қазақша</a></li><li class="interlanguage-link interwiki-ko mw-list-item"><a href="https://ko.wikipedia.org/wiki/CSS" title="CSS - coreano" lang="ko" hreflang="ko" data-title="CSS" data-language-autonym="한국어" data-language-local-name="coreano" class="interlanguage-link-target">한국어</a></li><li class="interlanguage-link interwiki-ky mw-list-item"><a href="https://ky.wikipedia.org/wiki/CSS" title="CSS - kirghiso" lang="ky" hreflang="ky" data-title="CSS" data-language-autonym="Кыргызча" data-language-local-name="kirghiso" class="interlanguage-link-target">Кыргызча</a></li><li class="interlanguage-link interwiki-lfn mw-list-item"><a href="https://lfn.wikipedia.org/wiki/CSS" title="CSS - Lingua Franca Nova" lang="lfn" hreflang="lfn" data-title="CSS" data-language-autonym="Lingua Franca Nova" data-language-local-name="Lingua Franca Nova" class="interlanguage-link-target">Lingua Franca Nova</a></li><li class="interlanguage-link interwiki-lmo mw-list-item"><a href="https://lmo.wikipedia.org/wiki/CSS" title="CSS - lombardo" lang="lmo" hreflang="lmo" data-title="CSS" data-language-autonym="Lombard" data-language-local-name="lombardo" class="interlanguage-link-target">Lombard</a></li><li class="interlanguage-link interwiki-lt mw-list-item"><a href="https://lt.wikipedia.org/wiki/CSS" title="CSS - lituano" lang="lt" hreflang="lt" data-title="CSS" data-language-autonym="Lietuvių" data-language-local-name="lituano" class="interlanguage-link-target">Lietuvių</a></li><li class="interlanguage-link interwiki-lv mw-list-item"><a href="https://lv.wikipedia.org/wiki/CSS" title="CSS - lettone" lang="lv" hreflang="lv" data-title="CSS" data-language-autonym="Latviešu" data-language-local-name="lettone" class="interlanguage-link-target">Latviešu</a></li><li class="interlanguage-link interwiki-mk mw-list-item"><a href="https://mk.wikipedia.org/wiki/CSS" title="CSS - macedone" lang="mk" hreflang="mk" data-title="CSS" data-language-autonym="Македонски" data-language-local-name="macedone" class="interlanguage-link-target">Македонски</a></li><li class="interlanguage-link interwiki-ml mw-list-item"><a href="https://ml.wikipedia.org/wiki/%E0%B4%95%E0%B4%BE%E0%B4%B8%E0%B5%8D%E2%80%8C%E0%B4%95%E0%B5%87%E0%B4%A1%E0%B4%BF%E0%B4%99%E0%B5%8D%E0%B4%99%E0%B5%8D_%E0%B4%B8%E0%B5%8D%E0%B4%B1%E0%B5%8D%E0%B4%B1%E0%B5%88%E0%B5%BD_%E0%B4%B7%E0%B5%80%E0%B4%B1%E0%B5%8D%E0%B4%B1%E0%B5%8D%E2%80%8C%E0%B4%B8%E0%B5%8D" title="കാസ്‌കേഡിങ്ങ് സ്റ്റൈൽ ഷീറ്റ്‌സ് - malayalam" lang="ml" hreflang="ml" data-title="കാസ്‌കേഡിങ്ങ് സ്റ്റൈൽ ഷീറ്റ്‌സ്" data-language-autonym="മലയാളം" data-language-local-name="malayalam" class="interlanguage-link-target">മലയാളം</a></li><li class="interlanguage-link interwiki-mni mw-list-item"><a href="https://mni.wikipedia.org/wiki/%EA%AF%80%EA%AF%A6%EA%AF%81%EA%AF%80%EA%AF%97%EA%AF%A4%EA%AF%A1_%EA%AF%81%EA%AF%AD%EA%AF%87%EA%AF%A5%EA%AF%8F%EA%AF%9C_%EA%AF%81%EA%AF%A4%EA%AF%A0%EA%AF%81" title="ꯀꯦꯁꯀꯗꯤꯡ ꯁ꯭ꯇꯥꯏꯜ ꯁꯤꯠꯁ - manipuri" lang="mni" hreflang="mni" data-title="ꯀꯦꯁꯀꯗꯤꯡ ꯁ꯭ꯇꯥꯏꯜ ꯁꯤꯠꯁ" data-language-autonym="ꯃꯤꯇꯩ ꯂꯣꯟ" data-language-local-name="manipuri" class="interlanguage-link-target">ꯃꯤꯇꯩ ꯂꯣꯟ</a></li><li class="interlanguage-link interwiki-ms mw-list-item"><a href="https://ms.wikipedia.org/wiki/Lembaran_Gaya_Lata" title="Lembaran Gaya Lata - malese" lang="ms" hreflang="ms" data-title="Lembaran Gaya Lata" data-language-autonym="Bahasa Melayu" data-language-local-name="malese" class="interlanguage-link-target">Bahasa Melayu</a></li><li class="interlanguage-link interwiki-my mw-list-item"><a href="https://my.wikipedia.org/wiki/%E1%80%85%E1%80%AE%E1%80%A1%E1%80%80%E1%80%BA%E1%80%85%E1%80%BA%E1%80%A1%E1%80%80%E1%80%BA%E1%80%85%E1%80%BA" title="စီအက်စ်အက်စ် - birmano" lang="my" hreflang="my" data-title="စီအက်စ်အက်စ်" data-language-autonym="မြန်မာဘာသာ" data-language-local-name="birmano" class="interlanguage-link-target">မြန်မာဘာသာ</a></li><li class="interlanguage-link interwiki-nl mw-list-item"><a href="https://nl.wikipedia.org/wiki/Cascading_Style_Sheets" title="Cascading Style Sheets - olandese" lang="nl" hreflang="nl" data-title="Cascading Style Sheets" data-language-autonym="Nederlands" data-language-local-name="olandese" class="interlanguage-link-target">Nederlands</a></li><li class="interlanguage-link interwiki-nn mw-list-item"><a href="https://nn.wikipedia.org/wiki/Stilark" title="Stilark - norvegese nynorsk" lang="nn" hreflang="nn" data-title="Stilark" data-language-autonym="Norsk nynorsk" data-language-local-name="norvegese nynorsk" class="interlanguage-link-target">Norsk nynorsk</a></li><li class="interlanguage-link interwiki-no mw-list-item"><a href="https://no.wikipedia.org/wiki/Cascading_Style_Sheets" title="Cascading Style Sheets - norvegese bokmål" lang="nb" hreflang="nb" data-title="Cascading Style Sheets" data-language-autonym="Norsk bokmål" data-language-local-name="norvegese bokmål" class="interlanguage-link-target">Norsk bokmål</a></li><li class="interlanguage-link interwiki-pa mw-list-item"><a href="https://pa.wikipedia.org/wiki/%E0%A8%B8%E0%A9%80.%E0%A8%90%E0%A8%B8.%E0%A8%90%E0%A8%B8" title="ਸੀ.ਐਸ.ਐਸ - punjabi" lang="pa" hreflang="pa" data-title="ਸੀ.ਐਸ.ਐਸ" data-language-autonym="ਪੰਜਾਬੀ" data-language-local-name="punjabi" class="interlanguage-link-target">ਪੰਜਾਬੀ</a></li><li class="interlanguage-link interwiki-pl mw-list-item"><a href="https://pl.wikipedia.org/wiki/Kaskadowe_arkusze_styl%C3%B3w" title="Kaskadowe arkusze stylów - polacco" lang="pl" hreflang="pl" data-title="Kaskadowe arkusze stylów" data-language-autonym="Polski" data-language-local-name="polacco" class="interlanguage-link-target">Polski</a></li><li class="interlanguage-link interwiki-pnb mw-list-item"><a href="https://pnb.wikipedia.org/wiki/%D8%B3%DB%8C_%D8%A7%DB%8C%D8%B3_%D8%A7%DB%8C%D8%B3" title="سی ایس ایس - Western Punjabi" lang="pnb" hreflang="pnb" data-title="سی ایس ایس" data-language-autonym="پنجابی" data-language-local-name="Western Punjabi" class="interlanguage-link-target">پنجابی</a></li><li class="interlanguage-link interwiki-pt mw-list-item"><a href="https://pt.wikipedia.org/wiki/Cascading_Style_Sheets" title="Cascading Style Sheets - portoghese" lang="pt" hreflang="pt" data-title="Cascading Style Sheets" data-language-autonym="Português" data-language-local-name="portoghese" class="interlanguage-link-target">Português</a></li><li class="interlanguage-link interwiki-ro mw-list-item"><a href="https://ro.wikipedia.org/wiki/Cascading_Style_Sheets" title="Cascading Style Sheets - rumeno" lang="ro" hreflang="ro" data-title="Cascading Style Sheets" data-language-autonym="Română" data-language-local-name="rumeno" class="interlanguage-link-target">Română</a></li><li class="interlanguage-link interwiki-ru mw-list-item"><a href="https://ru.wikipedia.org/wiki/CSS" title="CSS - russo" lang="ru" hreflang="ru" data-title="CSS" data-language-autonym="Русский" data-language-local-name="russo" class="interlanguage-link-target">Русский</a></li><li class="interlanguage-link interwiki-sh mw-list-item"><a href="https://sh.wikipedia.org/wiki/CSS" title="CSS - serbo-croato" lang="sh" hreflang="sh" data-title="CSS" data-language-autonym="Srpskohrvatski / српскохрватски" data-language-local-name="serbo-croato" class="interlanguage-link-target">Srpskohrvatski / српскохрватски</a></li><li class="interlanguage-link interwiki-si mw-list-item"><a href="https://si.wikipedia.org/wiki/%E0%B7%83%E0%B6%82%E0%B6%BA%E0%B7%94%E0%B6%9A%E0%B7%8A%E0%B6%AD_%E0%B7%83%E0%B7%90%E0%B6%BB%E0%B7%83%E0%B7%94%E0%B6%B8%E0%B7%8A_%E0%B6%B4%E0%B7%92%E2%80%8D%E0%B6%A7%E0%B7%94(CSS)" title="සංයුක්ත සැරසුම් පි‍ටු(CSS) - singalese" lang="si" hreflang="si" data-title="සංයුක්ත සැරසුම් පි‍ටු(CSS)" data-language-autonym="සිංහල" data-language-local-name="singalese" class="interlanguage-link-target">සිංහල</a></li><li class="interlanguage-link interwiki-simple mw-list-item"><a href="https://simple.wikipedia.org/wiki/Cascading_Style_Sheets" title="Cascading Style Sheets - Simple English" lang="en-simple" hreflang="en-simple" data-title="Cascading Style Sheets" data-language-autonym="Simple English" data-language-local-name="Simple English" class="interlanguage-link-target">Simple English</a></li><li class="interlanguage-link interwiki-sk mw-list-item"><a href="https://sk.wikipedia.org/wiki/Kask%C3%A1dov%C3%A9_%C5%A1t%C3%BDly" title="Kaskádové štýly - slovacco" lang="sk" hreflang="sk" data-title="Kaskádové štýly" data-language-autonym="Slovenčina" data-language-local-name="slovacco" class="interlanguage-link-target">Slovenčina</a></li><li class="interlanguage-link interwiki-sl mw-list-item"><a href="https://sl.wikipedia.org/wiki/CSS" title="CSS - sloveno" lang="sl" hreflang="sl" data-title="CSS" data-language-autonym="Slovenščina" data-language-local-name="sloveno" class="interlanguage-link-target">Slovenščina</a></li><li class="interlanguage-link interwiki-sq mw-list-item"><a href="https://sq.wikipedia.org/wiki/Fletat_e_Stileve_t%C3%AB_Shkall%C3%ABzuar" title="Fletat e Stileve të Shkallëzuar - albanese" lang="sq" hreflang="sq" data-title="Fletat e Stileve të Shkallëzuar" data-language-autonym="Shqip" data-language-local-name="albanese" class="interlanguage-link-target">Shqip</a></li><li class="interlanguage-link interwiki-sr mw-list-item"><a href="https://sr.wikipedia.org/wiki/CSS" title="CSS - serbo" lang="sr" hreflang="sr" data-title="CSS" data-language-autonym="Српски / srpski" data-language-local-name="serbo" class="interlanguage-link-target">Српски / srpski</a></li><li class="interlanguage-link interwiki-sv mw-list-item"><a href="https://sv.wikipedia.org/wiki/Cascading_Style_Sheets" title="Cascading Style Sheets - svedese" lang="sv" hreflang="sv" data-title="Cascading Style Sheets" data-language-autonym="Svenska" data-language-local-name="svedese" class="interlanguage-link-target">Svenska</a></li><li class="interlanguage-link interwiki-ta mw-list-item"><a href="https://ta.wikipedia.org/wiki/%E0%AE%B5%E0%AE%BF%E0%AE%B4%E0%AF%81%E0%AE%A4%E0%AF%8D%E0%AE%A4%E0%AF%8A%E0%AE%9F%E0%AE%B0%E0%AF%8D_%E0%AE%AA%E0%AE%BE%E0%AE%A3%E0%AE%BF%E0%AE%A4%E0%AF%8D_%E0%AE%A4%E0%AE%BE%E0%AE%B3%E0%AF%8D%E0%AE%95%E0%AE%B3%E0%AF%8D" title="விழுத்தொடர் பாணித் தாள்கள் - tamil" lang="ta" hreflang="ta" data-title="விழுத்தொடர் பாணித் தாள்கள்" data-language-autonym="தமிழ்" data-language-local-name="tamil" class="interlanguage-link-target">தமிழ்</a></li><li class="interlanguage-link interwiki-tet mw-list-item"><a href="https://tet.wikipedia.org/wiki/CSS" title="CSS - tetum" lang="tet" hreflang="tet" data-title="CSS" data-language-autonym="Tetun" data-language-local-name="tetum" class="interlanguage-link-target">Tetun</a></li><li class="interlanguage-link interwiki-tg mw-list-item"><a href="https://tg.wikipedia.org/wiki/CSS" title="CSS - tagico" lang="tg" hreflang="tg" data-title="CSS" data-language-autonym="Тоҷикӣ" data-language-local-name="tagico" class="interlanguage-link-target">Тоҷикӣ</a></li><li class="interlanguage-link interwiki-th mw-list-item"><a href="https://th.wikipedia.org/wiki/%E0%B9%81%E0%B8%84%E0%B8%AA%E0%B9%80%E0%B8%84%E0%B8%94%E0%B8%94%E0%B8%B4%E0%B8%87%E0%B8%AA%E0%B9%84%E0%B8%95%E0%B8%A5%E0%B9%8C%E0%B8%8A%E0%B8%B5%E0%B8%95%E0%B8%AA%E0%B9%8C" title="แคสเคดดิงสไตล์ชีตส์ - thailandese" lang="th" hreflang="th" data-title="แคสเคดดิงสไตล์ชีตส์" data-language-autonym="ไทย" data-language-local-name="thailandese" class="interlanguage-link-target">ไทย</a></li><li class="interlanguage-link interwiki-tk mw-list-item"><a href="https://tk.wikipedia.org/wiki/CSS" title="CSS - turcomanno" lang="tk" hreflang="tk" data-title="CSS" data-language-autonym="Türkmençe" data-language-local-name="turcomanno" class="interlanguage-link-target">Türkmençe</a></li><li class="interlanguage-link interwiki-tl mw-list-item"><a href="https://tl.wikipedia.org/wiki/CSS" title="CSS - tagalog" lang="tl" hreflang="tl" data-title="CSS" data-language-autonym="Tagalog" data-language-local-name="tagalog" class="interlanguage-link-target">Tagalog</a></li><li class="interlanguage-link interwiki-tr mw-list-item"><a href="https://tr.wikipedia.org/wiki/CSS" title="CSS - turco" lang="tr" hreflang="tr" data-title="CSS" data-language-autonym="Türkçe" data-language-local-name="turco" class="interlanguage-link-target">Türkçe</a></li><li class="interlanguage-link interwiki-ug mw-list-item"><a href="https://ug.wikipedia.org/wiki/CSS" title="CSS - uiguro" lang="ug" hreflang="ug" data-title="CSS" data-language-autonym="ئۇيغۇرچە / Uyghurche" data-language-local-name="uiguro" class="interlanguage-link-target">ئۇيغۇرچە / Uyghurche</a></li><li class="interlanguage-link interwiki-uk mw-list-item"><a href="https://uk.wikipedia.org/wiki/CSS" title="CSS - ucraino" lang="uk" hreflang="uk" data-title="CSS" data-language-autonym="Українська" data-language-local-name="ucraino" class="interlanguage-link-target">Українська</a></li><li class="interlanguage-link interwiki-ur mw-list-item"><a href="https://ur.wikipedia.org/wiki/%D8%B3%DB%8C_%D8%A7%DB%8C%D8%B3_%D8%A7%DB%8C%D8%B3" title="سی ایس ایس - urdu" lang="ur" hreflang="ur" data-title="سی ایس ایس" data-language-autonym="اردو" data-language-local-name="urdu" class="interlanguage-link-target">اردو</a></li><li class="interlanguage-link interwiki-uz mw-list-item"><a href="https://uz.wikipedia.org/wiki/CSS" title="CSS - uzbeco" lang="uz" hreflang="uz" data-title="CSS" data-language-autonym="Oʻzbekcha / ўзбекча" data-language-local-name="uzbeco" class="interlanguage-link-target">Oʻzbekcha / ўзбекча</a></li><li class="interlanguage-link interwiki-vec mw-list-item"><a href="https://vec.wikipedia.org/wiki/CSS" title="CSS - veneto" lang="vec" hreflang="vec" data-title="CSS" data-language-autonym="Vèneto" data-language-local-name="veneto" class="interlanguage-link-target">Vèneto</a></li><li class="interlanguage-link interwiki-vi mw-list-item"><a href="https://vi.wikipedia.org/wiki/CSS" title="CSS - vietnamita" lang="vi" hreflang="vi" data-title="CSS" data-language-autonym="Tiếng Việt" data-language-local-name="vietnamita" class="interlanguage-link-target">Tiếng Việt</a></li><li class="interlanguage-link interwiki-wuu mw-list-item"><a href="https://wuu.wikipedia.org/wiki/%E5%B1%82%E5%8F%A0%E6%A0%B7%E5%BC%8F%E8%A1%A8" title="层叠样式表 - wu" lang="wuu" hreflang="wuu" data-title="层叠样式表" data-language-autonym="吴语" data-language-local-name="wu" class="interlanguage-link-target">吴语</a></li><li class="interlanguage-link interwiki-zh mw-list-item"><a href="https://zh.wikipedia.org/wiki/CSS" title="CSS - cinese" lang="zh" hreflang="zh" data-title="CSS" data-language-autonym="中文" data-language-local-name="cinese" class="interlanguage-link-target">中文</a></li><li class="interlanguage-link interwiki-zh-yue mw-list-item"><a href="https://zh-yue.wikipedia.org/wiki/CSS" title="CSS - cantonese" lang="yue" hreflang="yue" data-title="CSS" data-language-autonym="粵語" data-language-local-name="cantonese" class="interlanguage-link-target">粵語</a></li> </ul> <div class="after-portlet after-portlet-lang"><a href="https://www.wikidata.org/wiki/Special:EntityPage/Q46441#sitelinks-wikipedia" title="Modifica collegamenti interlinguistici" class="wbc-editpage">Modifica collegamenti</a></div> </div> </div> </div> </header> <div class="vector-page-toolbar"> <div class="vector-page-toolbar-container"> <div id="left-navigation"> <nav aria-label="Namespace"> <div id="p-associated-pages" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-associated-pages" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-nstab-main" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/CSS" title="Vedi la voce [c]" accesskey="c">Voce</a></li><li id="ca-talk" class="vector-tab-noicon mw-list-item"><a href="/wiki/Discussione:CSS" rel="discussion" title="Vedi le discussioni relative a questa pagina [t]" accesskey="t">Discussione</a></li> </ul> </div> </div> <div id="vector-variants-dropdown" class="vector-dropdown emptyPortlet" > <input type="checkbox" id="vector-variants-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-variants-dropdown" class="vector-dropdown-checkbox " aria-label="Cambia versione linguistica" > <label id="vector-variants-dropdown-label" for="vector-variants-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" >italiano </label> <div class="vector-dropdown-content"> <div id="p-variants" class="vector-menu mw-portlet mw-portlet-variants emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> </div> </div> </nav> </div> <div id="right-navigation" class="vector-collapsible"> <nav aria-label="Visite"> <div id="p-views" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-views" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-view" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/CSS">Leggi</a></li><li id="ca-ve-edit" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=CSS&veaction=edit" title="Modifica questa pagina [v]" accesskey="v">Modifica</a></li><li id="ca-edit" class="collapsible vector-tab-noicon mw-list-item"><a href="/w/index.php?title=CSS&action=edit" title="Modifica il wikitesto di questa pagina [e]" accesskey="e">Modifica wikitesto</a></li><li id="ca-history" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=CSS&action=history" title="Versioni precedenti di questa pagina [h]" accesskey="h">Cronologia</a></li> </ul> </div> </div> </nav> <nav class="vector-page-tools-landmark" aria-label="Strumenti pagine"> <div id="vector-page-tools-dropdown" class="vector-dropdown vector-page-tools-dropdown" > <input type="checkbox" id="vector-page-tools-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-tools-dropdown" class="vector-dropdown-checkbox " aria-label="Strumenti" > <label id="vector-page-tools-dropdown-label" for="vector-page-tools-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" >Strumenti </label> <div class="vector-dropdown-content"> <div id="vector-page-tools-unpinned-container" class="vector-unpinned-container"> <div id="vector-page-tools" class="vector-page-tools vector-pinnable-element"> <div class="vector-pinnable-header vector-page-tools-pinnable-header vector-pinnable-header-unpinned" data-feature-name="page-tools-pinned" data-pinnable-element-id="vector-page-tools" data-pinned-container-id="vector-page-tools-pinned-container" data-unpinned-container-id="vector-page-tools-unpinned-container" > <div class="vector-pinnable-header-label">Strumenti</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-page-tools.pin">sposta nella barra laterale</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-page-tools.unpin">nascondi</button> </div> <div id="p-cactions" class="vector-menu mw-portlet mw-portlet-cactions emptyPortlet vector-has-collapsible-items" title="Altre opzioni" > <div class="vector-menu-heading"> Azioni </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-more-view" class="selected vector-more-collapsible-item mw-list-item"><a href="/wiki/CSS">Leggi</a></li><li id="ca-more-ve-edit" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=CSS&veaction=edit" title="Modifica questa pagina [v]" accesskey="v">Modifica</a></li><li id="ca-more-edit" class="collapsible vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=CSS&action=edit" title="Modifica il wikitesto di questa pagina [e]" accesskey="e">Modifica wikitesto</a></li><li id="ca-more-history" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=CSS&action=history">Cronologia</a></li> </ul> </div> </div> <div id="p-tb" class="vector-menu mw-portlet mw-portlet-tb" > <div class="vector-menu-heading"> Generale </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="t-whatlinkshere" class="mw-list-item"><a href="/wiki/Speciale:PuntanoQui/CSS" title="Elenco di tutte le pagine che sono collegate a questa [j]" accesskey="j">Puntano qui</a></li><li id="t-recentchangeslinked" class="mw-list-item"><a href="/wiki/Speciale:ModificheCorrelate/CSS" rel="nofollow" title="Elenco delle ultime modifiche alle pagine collegate a questa [k]" accesskey="k">Modifiche correlate</a></li><li id="t-specialpages" class="mw-list-item"><a href="/wiki/Speciale:PagineSpeciali" title="Elenco di tutte le pagine speciali [q]" accesskey="q">Pagine speciali</a></li><li id="t-permalink" class="mw-list-item"><a href="/w/index.php?title=CSS&oldid=139301834" title="Collegamento permanente a questa versione di questa pagina">Link permanente</a></li><li id="t-info" class="mw-list-item"><a href="/w/index.php?title=CSS&action=info" title="Ulteriori informazioni su questa pagina">Informazioni pagina</a></li><li id="t-cite" class="mw-list-item"><a href="/w/index.php?title=Speciale:Cita&page=CSS&id=139301834&wpFormIdentifier=titleform" title="Informazioni su come citare questa pagina">Cita questa voce</a></li><li id="t-urlshortener" class="mw-list-item"><a href="/w/index.php?title=Speciale:UrlShortener&url=https%3A%2F%2Fit.wikipedia.org%2Fwiki%2FCSS">Ottieni URL breve</a></li><li id="t-urlshortener-qrcode" class="mw-list-item"><a href="/w/index.php?title=Speciale:QrCode&url=https%3A%2F%2Fit.wikipedia.org%2Fwiki%2FCSS">Scarica codice QR</a></li> </ul> </div> </div> <div id="p-coll-print_export" class="vector-menu mw-portlet mw-portlet-coll-print_export" > <div class="vector-menu-heading"> Stampa/esporta </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="coll-create_a_book" class="mw-list-item"><a href="/w/index.php?title=Speciale:Libro&bookcmd=book_creator&referer=CSS">Crea un libro</a></li><li id="coll-download-as-rl" class="mw-list-item"><a href="/w/index.php?title=Speciale:DownloadAsPdf&page=CSS&action=show-download-screen">Scarica come PDF</a></li><li id="t-print" class="mw-list-item"><a href="/w/index.php?title=CSS&printable=yes" title="Versione stampabile di questa pagina [p]" accesskey="p">Versione stampabile</a></li> </ul> </div> </div> <div id="p-wikibase-otherprojects" class="vector-menu mw-portlet mw-portlet-wikibase-otherprojects" > <div class="vector-menu-heading"> In altri progetti </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li class="wb-otherproject-link wb-otherproject-commons mw-list-item"><a href="https://commons.wikimedia.org/wiki/Category:Cascading_Style_Sheets" hreflang="en">Wikimedia Commons</a></li><li class="wb-otherproject-link wb-otherproject-mediawiki mw-list-item"><a href="https://www.mediawiki.org/wiki/Manual:CSS" hreflang="en">MediaWiki</a></li><li class="wb-otherproject-link wb-otherproject-wikibooks mw-list-item"><a href="https://it.wikibooks.org/wiki/CSS" hreflang="it">Wikibooks</a></li><li class="wb-otherproject-link wb-otherproject-wikiquote mw-list-item"><a href="https://it.wikiquote.org/wiki/CSS" hreflang="it">Wikiquote</a></li><li class="wb-otherproject-link wb-otherproject-wikiversity mw-list-item"><a href="https://it.wikiversity.org/wiki/CSS" hreflang="it">Wikiversità</a></li><li id="t-wikibase" class="wb-otherproject-link wb-otherproject-wikibase-dataitem mw-list-item"><a href="https://www.wikidata.org/wiki/Special:EntityPage/Q46441" title="Collegamento all'elemento connesso dell'archivio dati [g]" accesskey="g">Elemento Wikidata</a></li> </ul> </div> </div> </div> </div> </div> </div> </nav> </div> </div> </div> <div class="vector-column-end"> <div class="vector-sticky-pinned-container"> <nav class="vector-page-tools-landmark" aria-label="Strumenti pagine"> <div id="vector-page-tools-pinned-container" class="vector-pinned-container"> </div> </nav> <nav class="vector-appearance-landmark" aria-label="Aspetto"> <div id="vector-appearance-pinned-container" class="vector-pinned-container"> <div id="vector-appearance" class="vector-appearance vector-pinnable-element"> <div class="vector-pinnable-header vector-appearance-pinnable-header vector-pinnable-header-pinned" data-feature-name="appearance-pinned" data-pinnable-element-id="vector-appearance" data-pinned-container-id="vector-appearance-pinned-container" data-unpinned-container-id="vector-appearance-unpinned-container" > <div class="vector-pinnable-header-label">Aspetto</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-appearance.pin">sposta nella barra laterale</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-appearance.unpin">nascondi</button> </div> </div> </div> </nav> </div> </div> <div id="bodyContent" class="vector-body" aria-labelledby="firstHeading" data-mw-ve-target-container> <div class="vector-body-before-content"> <div class="mw-indicators"> </div> <div id="siteSub" class="noprint">Da Wikipedia, l'enciclopedia libera.</div> </div> <div id="contentSub"><div id="mw-content-subtitle"></div></div> <div id="mw-content-text" class="mw-body-content"><div class="mw-content-ltr mw-parser-output" lang="it" dir="ltr"><style data-mw-deduplicate="TemplateStyles:r130658281">body:not(.skin-minerva) .mw-parser-output .hatnote.nota-disambigua{clear:both;margin-top:0;padding:.05em .5em}</style> <style data-mw-deduplicate="TemplateStyles:r139142988">.mw-parser-output .hatnote-content{align-items:center;display:flex}.mw-parser-output .hatnote-icon{flex-shrink:0}.mw-parser-output .hatnote-icon img{display:flex}.mw-parser-output .hatnote-text{font-style:italic}body:not(.skin-minerva) .mw-parser-output .hatnote{border:1px solid #CCC;display:flex;margin:.5em 0;padding:.2em .5em}body:not(.skin-minerva) .mw-parser-output .hatnote-text{padding-left:.5em}body.skin-minerva .mw-parser-output .hatnote-icon{padding-right:8px}body.skin-minerva .mw-parser-output .hatnote-icon img{height:auto;width:16px}body.skin--responsive .mw-parser-output .hatnote a.new{color:#d73333}body.skin--responsive .mw-parser-output .hatnote a.new:visited{color:#a55858}</style> <div class="hatnote noprint nota-disambigua"> <div class="hatnote-content"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Nota_disambigua.svg/18px-Nota_disambigua.svg.png" decoding="async" width="18" height="18" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Nota_disambigua.svg/27px-Nota_disambigua.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Nota_disambigua.svg/36px-Nota_disambigua.svg.png 2x" data-file-width="200" data-file-height="200" /> <a href="/wiki/Aiuto:Disambiguazione" title="Aiuto:Disambiguazione">Disambiguazione</a> – Se stai cercando altri significati, vedi <a href="/wiki/CSS_(disambigua)" class="mw-disambig" title="CSS (disambigua)">CSS (disambigua)</a>.</div> </div> <table class="infobox sinottico" summary="Tabella sinottica che riassume i principali dati del soggetto"><tbody><tr class="sinottico_testata"><th colspan="2" style="background:lightblue">Cascading Style Sheets</th></tr><tr><td class="sinottico_testo_centrale" colspan="2"><figure class="mw-halign-center" typeof="mw:File/Frameless"><a href="/wiki/File:CSS3_logo_and_wordmark.svg" class="mw-file-description"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/d/d5/CSS3_logo_and_wordmark.svg/100px-CSS3_logo_and_wordmark.svg.png" decoding="async" width="100" height="141" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/d/d5/CSS3_logo_and_wordmark.svg/150px-CSS3_logo_and_wordmark.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/d/d5/CSS3_logo_and_wordmark.svg/200px-CSS3_logo_and_wordmark.svg.png 2x" data-file-width="363" data-file-height="512" /></a><figcaption></figcaption></figure> </td></tr><tr><th><a href="/wiki/Estensione_(file)" class="mw-redirect" title="Estensione (file)">Estensione</a></th><td><code>.css</code> </td></tr><tr><th><a href="/wiki/Tipo_MIME" class="mw-redirect" title="Tipo MIME">Tipo MIME</a></th><td><code>text/css</code> </td></tr><tr><th><a href="/wiki/Uniform_Type_Identifier" title="Uniform Type Identifier">Uniform Type Identifier (UTI)</a></th><td><code>public.css</code> </td></tr><tr><th>Sviluppatore</th><td><a href="/wiki/World_Wide_Web_Consortium" title="World Wide Web Consortium">W3C</a> </td></tr><tr><th>1ª pubblicazione</th><td>17 dicembre 1996 </td></tr><tr><th><a href="/wiki/Formato_aperto" title="Formato aperto">Formato aperto</a>?</th><td>Sì </td></tr><tr><th><a href="/wiki/Sito_web" title="Sito web">Sito web</a></th><td><a rel="nofollow" class="external text" href="http://www.w3.org/TR/CSS">www.w3.org/TR/CSS</a> </td></tr><tr><td class="sinottico_piede2 noprint nomobile metadata" colspan="2"><a href="https://www.wikidata.org/wiki/Q46441" class="extiw" title="d:Q46441">Modifica dati su Wikidata</a> · <a href="/wiki/Template:Formato_file/man" title="Template:Formato file/man">Manuale</a></td></tr></tbody></table> Cascading Style Sheets, meglio noto come CSS (in italiano fogli di stile a cascata), è un linguaggio usato per definire la <a href="/wiki/Formattazione_del_testo" title="Formattazione del testo">formattazione</a> di documenti <a href="/wiki/HTML" title="HTML">HTML</a>, <a href="/wiki/XHTML" title="XHTML">XHTML</a> e <a href="/wiki/XML" title="XML">XML</a>, ad esempio i <a href="/wiki/Sito_web" title="Sito web">siti web</a> e relative <a href="/wiki/Pagina_web" title="Pagina web">pagine web</a>. Le regole per comporre il CSS sono contenute in un insieme di direttive (Recommendations) emanate a partire dal <a href="/wiki/1996" title="1996">1996</a> dal <a href="/wiki/World_Wide_Web_Consortium" title="World Wide Web Consortium">W3C</a>. L'introduzione del CSS si è resa necessaria per separare i contenuti delle pagine HTML dalla loro formattazione o layout e permettere una <a href="/wiki/Programmazione_(informatica)" title="Programmazione (informatica)">programmazione</a> più chiara e facile da utilizzare, sia per gli autori delle pagine stesse sia per gli utenti, garantendo contemporaneamente anche il <a href="/wiki/Riuso_di_codice" title="Riuso di codice">riutilizzo di codice</a> ed una sua più facile manutenzione. <meta property="mw:PageProp/toc" /> <div class="mw-heading mw-heading2"><h2 id="Storia">Storia</h2>[<a href="/w/index.php?title=CSS&veaction=edit&section=1" title="Modifica la sezione Storia" class="mw-editsection-visualeditor">modifica</a> | <a href="/w/index.php?title=CSS&action=edit&section=1" title="Edit section's source code: Storia">modifica wikitesto</a>]</div> <style data-mw-deduplicate="TemplateStyles:r130657691">body:not(.skin-minerva) .mw-parser-output .vedi-anche{font-size:95%}</style><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r139142988"> <div class="hatnote noprint vedi-anche"> <div class="hatnote-content"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/8/87/Magnifying_glass_icon_mgx2.svg/18px-Magnifying_glass_icon_mgx2.svg.png" decoding="async" width="18" height="18" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/8/87/Magnifying_glass_icon_mgx2.svg/27px-Magnifying_glass_icon_mgx2.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/8/87/Magnifying_glass_icon_mgx2.svg/36px-Magnifying_glass_icon_mgx2.svg.png 2x" data-file-width="286" data-file-height="280" /> Lo stesso argomento in dettaglio: <a href="/wiki/Tipografia_web" title="Tipografia web">Tipografia web</a> e <a href="/wiki/Formattazione_del_testo" title="Formattazione del testo">Formattazione del testo</a>.</div> </div> Per permettere agli autori di poter plasmare liberamente l'aspetto delle <a href="/wiki/Pagine_web" class="mw-redirect" title="Pagine web">pagine web</a>, dal 1993 in poi <a href="/wiki/Netscape_Navigator" title="Netscape Navigator">Netscape Navigator</a> ed <a href="/wiki/Internet_Explorer" title="Internet Explorer">Internet Explorer</a>, i due software di navigazione che si disputavano gli utenti nella nota <a href="/wiki/Guerra_dei_browser" title="Guerra dei browser">guerra dei browser</a>, presentarono tag proprietari, ovvero non aderenti agli <a href="/wiki/Norma_tecnica" title="Norma tecnica">standard</a> né compatibili con i browser concorrenti. Un esempio di questi tag era <code></code> che andava a definire il <a href="/wiki/Font" class="mw-redirect" title="Font">font</a> dei caratteri. 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: <ol><li>Il primo problema è costituito dalla lunghezza dei tag. Se confrontata con una pagina che adotta il linguaggio <a rel="nofollow" class="external text" href="https://www.antoniocostadev.it/css/">CSS</a>, una pagina che non lo adotta è in genere più pesante (in termini di <a href="/wiki/Bit_(informatica)#Il_bit_come_numero_binario" class="mw-redirect" title="Bit (informatica)">bit</a>) in un rapporto che spesso raggiunge lo 0,2%.<style data-mw-deduplicate="TemplateStyles:r140554517">.mw-parser-output .chiarimento{background:#ffeaea;color:#444444}.mw-parser-output .chiarimento-apice{color:#EE0700}@media screen{html.skin-theme-clientpref-night .mw-parser-output .chiarimento{background:rgba(179,36,36,0.21);color:inherit}html.skin-theme-clientpref-night .mw-parser-output .chiarimento-apice{color:#b32424}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .chiarimento{background:rgba(179,36,36,0.21);color:inherit}html.skin-theme-clientpref-os .mw-parser-output .chiarimento-apice{color:#b32424}}</style>[<a href="/wiki/Wikipedia:Uso_delle_fonti" title="Wikipedia:Uso delle fonti">senza fonte</a>] Inoltre, le istruzioni CSS possono essere raccolte in un <a href="/wiki/File" title="File">file</a> esterno che rimane memorizzato nella <a href="/wiki/Cache" title="Cache">cache</a> del browser, riducendo ulteriormente la quantità di dati che i <a href="/wiki/Server" title="Server">server</a> devono trasmettere.</li> <li>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.</li> <li>Il terzo problema è la mancanza di compatibilità con i <a href="/wiki/Computer_palmare" title="Computer palmare">computer palmari</a> e gli <a href="/wiki/Smartphone" title="Smartphone">smartphone</a>. Queste pagine infatti sono progettate per schermi con risoluzione minima 800×600 pixel. Dispositivi come i palmari (o i più moderni <a href="/wiki/Tablet_PC" title="Tablet PC">tablet</a>) che possono avere una risoluzione inferiore ed una forma dello schermo ben diversa dal rapporto 4:3 dei monitor per <a href="/wiki/Computer" title="Computer">computer</a>, si trovano quindi impossibilitati a visualizzare correttamente la pagina con il risultato che l'utente si troverà una pagina confusa e scomoda da leggere.</li></ol> 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 <a href="/wiki/Impaginazione" title="Impaginazione">layout</a> 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<a href="#cite_note-1">[1]</a>) era <a href="/wiki/Adobe_Flash" title="Adobe Flash">Adobe Flash</a> che permetteva (in modo vettoriale) di creare animazioni, trasformazioni e in generale un layout molto più accattivante di HTML e CSS. Oltretutto permetteva di integrare qualsiasi font anche se l'utente sul suo dispositivo non lo aveva. Questi problemi furono risolti con HTML5 e CSS3. 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 esempio:<div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre><p style="color:blue;font-size:46px;"> Wikipedia è un'enciclopedia </p> </pre></div> <div class="mw-heading mw-heading3"><h3 id="CSS">CSS</h3>[<a href="/w/index.php?title=CSS&veaction=edit&section=2" title="Modifica la sezione CSS" class="mw-editsection-visualeditor">modifica</a> | <a href="/w/index.php?title=CSS&action=edit&section=2" title="Edit section's source code: CSS">modifica wikitesto</a>]</div> Per tentare di risolvere questa situazione, nel 1996 il <a href="/wiki/W3C" class="mw-redirect" title="W3C">W3C</a> emanò le specifiche CSS 1. I CSS 1 erano un interessante sistema per separare contenuto da <a href="/wiki/Formattazione_del_testo" title="Formattazione del testo">formattazione</a>. La base di questo linguaggio, infatti, consisteva nel fatto che il contenuto sarebbe stato sempre definito dal codice (X)HTML, mentre la formattazione si sarebbe trasferita su un codice completamente separato, il CSS appunto. I richiami tra i due codici venivano effettuati tramite due particolari attributi: class e ID. Queste specifiche: <ol><li>Erano un'efficace soluzione al primo problema (escludendo la questione del tag <code><table></code>) perché riducevano notevolmente le dimensioni delle pagine.</li> <li>Risolvevano il secondo in modo parziale perché consentivano al codice (X)HTML di ritornare in gran parte semplice ed essenziale, ma presentavano qualche mancanza che costringeva a ricorrere ai tag HTML.</li> <li>Non prendevano però in considerazione il terzo problema, dato che nel 1996 i <a href="/wiki/Palmare" class="mw-redirect" title="Palmare">PDA</a> (i palmari) erano scarsamente diffusi.</li></ol> I CSS sviluppavano un'idea semplice ma efficace, ma nonostante le loro grandi potenzialità non ebbero successo a causa della mancanza di browser in grado di supportarli. <div class="mw-heading mw-heading3"><h3 id="CSS_2_e_CSS_2.1">CSS 2 e CSS 2.1</h3>[<a href="/w/index.php?title=CSS&veaction=edit&section=3" title="Modifica la sezione CSS 2 e CSS 2.1" class="mw-editsection-visualeditor">modifica</a> | <a href="/w/index.php?title=CSS&action=edit&section=3" title="Edit section's source code: CSS 2 e CSS 2.1">modifica wikitesto</a>]</div> Per includere le nuove funzionalità e rendere i CSS un linguaggio ben supportato, nel 1998 il W3C pubblicò le specifiche CSS 2. Nel 2004 iniziarono i lavori sulle specifiche aggiornate CSS 2.1 che divennero raccomandazione ufficiale il 7 giugno 2011. I CSS 2 sono la naturale evoluzione dei CSS 1 ed offrono potenti soluzioni per risolvere soprattutto il terzo problema, con la possibilità di creare fogli di stile separati per i dispositivi portatili. Anche il secondo problema è ormai pienamente risolvibile, scrivendo una pagina (X)HTML esclusivamente indirizzata alla struttura e ai contenuti e manovrandola poi esclusivamente con i CSS per impaginarla. A partire da <a href="/wiki/Internet_Explorer" title="Internet Explorer">Internet Explorer 5</a>, <a href="/wiki/Mozilla_Firefox" title="Mozilla Firefox">Firefox</a> e <a href="/wiki/Opera_(browser)" title="Opera (browser)">Opera 7</a>, i CSS 2 hanno potuto avvalersi di browser in grado di interpretarli e sono quindi entrati a far parte del codice di molti siti web. Si cominciò a creare i primi tipi di layout senza tabelle (solitamente a uno, due o tre colonne)<a href="#cite_note-2">[2]</a><a href="#cite_note-3">[3]</a>: <ul><li>layout fisso: aveva una dimensione standard su tutti i dispositivi.</li> <li>layout fluido-elastico: variava la larghezza al variare della larghezza della finestra del browser ma nel caso di schermi molto ampi i testi si dilatavano molto e il layout presentava righe di testo molto lunghe e fastidiose da leggere.</li></ul> <div class="mw-heading mw-heading3"><h3 id="CSS_3">CSS 3</h3>[<a href="/w/index.php?title=CSS&veaction=edit&section=4" title="Modifica la sezione CSS 3" class="mw-editsection-visualeditor">modifica</a> | <a href="/w/index.php?title=CSS&action=edit&section=4" title="Edit section's source code: CSS 3">modifica wikitesto</a>]</div> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r130657691"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r139142988"> <div class="hatnote noprint vedi-anche"> <div class="hatnote-content"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/8/87/Magnifying_glass_icon_mgx2.svg/18px-Magnifying_glass_icon_mgx2.svg.png" decoding="async" width="18" height="18" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/8/87/Magnifying_glass_icon_mgx2.svg/27px-Magnifying_glass_icon_mgx2.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/8/87/Magnifying_glass_icon_mgx2.svg/36px-Magnifying_glass_icon_mgx2.svg.png 2x" data-file-width="286" data-file-height="280" /> Lo stesso argomento in dettaglio: <a href="/wiki/CSS_Animations" title="CSS Animations">CSS Animations</a>.</div> </div> 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à.<a href="#cite_note-4">[4]</a> A novembre 2014, cinque moduli risultavano pubblicati formalmente dal <a href="/wiki/W3C" class="mw-redirect" title="W3C">W3C</a> come <a href="/wiki/World_Wide_Web_Consortium#Raccomandazioni" title="World Wide Web Consortium">raccomandazioni</a>: <ul><li>2011-06-07: <a rel="nofollow" class="external text" href="https://www.w3.org/TR/css3-color/">CSS Color Module Level 3</a></li> <li>2011-09-29: <a rel="nofollow" class="external text" href="https://www.w3.org/TR/css3-namespace/">CSS Namespaces Module Level 3</a></li> <li>2011-09-29: <a rel="nofollow" class="external text" href="https://www.w3.org/TR/selectors/">Selectors Level 3</a></li> <li>2012-06-19: <a rel="nofollow" class="external text" href="https://www.w3.org/TR/css3-mediaqueries/">Media Queries</a></li> <li>2013-11-07: <a rel="nofollow" class="external text" href="https://www.w3.org/TR/css-style-attr/">CSS Style Attributes</a></li></ul> <a href="/wiki/HTML" title="HTML">HTML</a> e CSS3 costituiscono un linguaggio <a href="/wiki/Turing_completo" class="mw-redirect" title="Turing completo">turing completo</a><a href="#cite_note-5">[5]</a><a href="#cite_note-6">[6]</a>, condizione sufficiente per un linguaggio per essere considerato un <a href="/wiki/Linguaggio_di_programmazione" title="Linguaggio di programmazione">linguaggio di programmazione</a>. I CSS3 presentano nuove possibilità e proprietà rispetto a CSS2<a href="#cite_note-7">[7]</a><a href="#cite_note-8">[8]</a>. Le più importanti sono: <ul><li>la possibilità di utilizzare codice CSS al posto delle immagini (jpg, png...) per creare trasparenze, bordi arrotondati e ombreggiature</li> <li>la possibilità di creare <a href="/wiki/CSS_Animations" title="CSS Animations">animazioni</a>, trasformazioni e scalature come era possibile fare con <a href="/wiki/Adobe_Flash" title="Adobe Flash">Adobe Flash</a></li> <li>nuovi selettori e classi</li> <li>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.</li> <li>la possibilità di sostituire <a href="/wiki/JavaScript" title="JavaScript">JavaScript</a> per creare <a href="/wiki/Tooltip" title="Tooltip">tooltip</a>, gallerie d'immagine e altro<a href="#cite_note-:0-9">[9]</a><a href="#cite_note-:1-10">[10]</a><a href="#cite_note-:2-11">[11]</a>.</li></ul> <table class="wikitable"> <tbody><tr> <th>PROPRIETÀ CSS3 </th> <th>TIPOLOGIE </th> <th>ESEMPIO </th></tr> <tr bgcolor="#f3f3f3"> <td colspan="3">Selettori </td></tr> <tr> <td>Selettori di base </td> <td> <ul><li>Selettore universale</li> <li>Selettori di tipo</li> <li>Selettori di classe</li> <li>Selettori di ID</li></ul> </td> <td>* {color: red} h1 {color: red} .titolo {color: red} #titolo {color: red} </td></tr> <tr> <td>Selettori combinatori o di relazione </td> <td> <ul><li>Selettore di discendenti</li> <li>Selettore di figli</li> <li>Selettore di fratelli adiacenti</li> <li>Selettore generale di fratelli</li></ul> </td> <td>div#container p {color: red} body > p {color: red} h1 + h2 {color: red} h1 ~ h2 {color: red} </td></tr> <tr> <td>Selettori di attributo </td> <td> <ul><li>E[attribute]</li> <li>E[attribute=value]</li> <li>E[attribute~=value]</li> <li>E[attribute|=value]</li> <li>E[attribute^=value]</li> <li>E[attribute$=value]</li> <li>E[attribute*=value]</li></ul> </td> <td>a[title] {color: blue} a[title="Lorem"] {color: blue} a[title~="dolor"] {color: blue} a[title^="Lorem"] {color: blue} a[title$="amet"] {color: blue} a[title*="dolor"] {color: blue} </td></tr> <tr> <td>Pseudo-classi e pseudo-classi strutturali </td> <td> <ul><li>E:root</li> <li>E:nth-child()</li> <li>E:nth-last-child()</li> <li>E:last-child</li> <li>E:only-child</li> <li>E:nth-of-type()</li> <li>E:nth-last-of-type()</li> <li>E:first-of-type</li> <li>E:last-of-type</li> <li>E:only-of-type</li> <li>E:empty</li></ul> </td> <td>:root {background-color: red} </td></tr> <tr> <td>Altre pseudo-classi </td> <td> <ul><li>Pseudo-classe <code>:target</code></li> <li>Pseudo-classe <code>:not</code></li> <li>Pseudo-classi degli stati degli elementi della UI (User Interface): <ul><li><code>E:enabled</code></li> <li><code>E:disabled</code></li> <li><code>E:checked</code></li></ul></li></ul> </td> <td>div:target {border: 3px} div:not(.nero) {color: red} input:enabled {color:red} </td></tr> <tr> <td>Pseudo-classi per la validazione </td> <td> <ul><li>:default</li> <li>:valid</li> <li>:invalid</li> <li>:in-range</li> <li>:out-of-range</li> <li>:required</li> <li>:optional</li> <li>:read-only</li> <li>:read-write</li></ul> </td> <td>:default {background:red} </td></tr> <tr> <td>Pseudo-elementi </td> <td> <ul><li><code>::first-letter</code></li> <li><code>::first-line</code></li> <li><code>::before</code></li> <li><code>::after</code></li></ul> </td> <td>::first-letter {color:red} </td></tr> <tr bgcolor="#f3f3f3"> <td colspan="3">Colore </td></tr> <tr> <td>Opacità </td> <td>opacity </td> <td>div {background:white; color:black; opacity: 0.5} </td></tr> <tr> <td>Colore RGBa </td> <td>rgb rgba </td> <td>body {background-color: rgb(100%, 100%, 100%)} _____________________ body {background-color: rgb(255, 255, 255)} _____________________ body {background-color: rgba(255, 255, 255, 0.5)} </td></tr> <tr> <td>Colore HSLa </td> <td>hsl hsla </td> <td>body {background-color: hsl(0, 100%, 50%) } ______________________ #box1 { background-color: hsla(0,100%,100%,0.5); } </td></tr> <tr bgcolor="#f3f3f3"> <td colspan="3">Bordi </td></tr> <tr> <td>Angoli arrotondati </td> <td> <ul><li>border-top-left-radius</li> <li>border-top-right-radius</li> <li>border-bottom-right-radius</li> <li>border-bottom-left-radius</li> <li>border-radius</li></ul> </td> <td>#box1 {border-top-left-radius: 20px} </td></tr> <tr> <td>Bordi decorati </td> <td>border-image </td> <td>#border (border-image: url(border.png) 27 27 27 27 round round; } </td></tr> <tr> <td>Ombre dei contenitori </td> <td>box-shadow </td> <td>box-shadow: 5px 5px 10px 2px #333333; </td></tr> <tr bgcolor="#f3f3f3"> <td colspan="3">Sfondi </td></tr> <tr> <td>Sfondi multipli </td> <td>url(prima immagine), url(seconda immagine),... </td> <td>background-image: url(immagine1.png), url(immagine2.png); </td></tr> <tr> <td>Taglio della immagine di sfondo </td> <td> <ul><li><code>border-box</code></li> <li><code>padding-box</code></li> <li><code>content-box</code></li></ul> </td> <td>#box {background-clip: border-box} #box {background-clip: padding-box} #box {background-clip: content-box} </td></tr> <tr> <td>Posizione della immagine di sfondo </td> <td> <ul><li><code>border-box</code></li> <li><code>padding-box</code></li> <li><code>content-box</code></li></ul> </td> <td>background-origin: padding-box; </td></tr> <tr> <td>Dimensione dello sfondo </td> <td> <ul><li>dimensione espressa in percentuale;</li> <li>dimensione espressa con un’unità di misura;</li> <li>proprietà<code>cover</code>;</li> <li>proprietà <code>contain</code>.</li></ul> </td> <td>background-size: 50% 50%; background-size: 200px 50px; background-size: cover; background-size: contain; </td></tr> <tr> <td>Gradienti come immagini di sfondo </td> <td>linear-gradient </td> <td>background-image: linear-gradient(top right, #FFFFFF 0%, #AACFEF 100%); </td></tr> <tr bgcolor="#f3f3f3"> <td colspan="3"><a href="/wiki/Formattazione_del_testo" title="Formattazione del testo">Testo e font</a> </td></tr> <tr> <td>Web fonts (alternativa a <a href="/wiki/Google_Fonts" title="Google Fonts">Google fonts</a>) </td> <td>@font-face </td> <td>@font-face { <pre>font-family: myFirstFont; </pre> <pre> src: url(sansation_light.woff); </pre> } </td></tr> <tr> <td>Interruzione del testo </td> <td>word-wrap: </td> <td>#box {word-wrap: break-word; } </td></tr> <tr> <td>Ombra sotto il testo </td> <td>text-shadow: </td> <td>p {text-shadow: 2px 2px 3px #333;} </td></tr> <tr> <td>Orientamento del testo (ad esempio per le lingue dove il testo è verticale)<a href="#cite_note-12">[12]</a><a href="#cite_note-13">[13]</a><a href="#cite_note-14">[14]</a> </td> <td>writing-mode: "valore"; text-orientation: "valore"; </td> <td>text-orientation: mixed; upright; sideways; use-glyph-orientation; <hr />writing-mode: horizontal-tb; vertical-rl; vertical-lr; </td></tr> <tr> <td>Caratteri speciali </td> <td>content: "carattere speciale"; </td> <td>h1:after { <pre> content: ' \00A7'; </pre> } </td></tr> <tr> <td>Direzione del testo </td> <td>horizontal-tb; vertical-rl; </td> <td>p.contenuto1 { <pre> writing-mode: horizontal-tb; </pre> } </td></tr> <tr> <td>Contorno del testo </td> <td>width: color: </td> <td>h1 {text-stroke: 1px black;} </td></tr> <tr> <td>Interruzione del testo </td> <td>text-overflow: clip; text-overflow: ellipsis ellipsis; text-overflow: ellipsis " [..]"; Valori globali: <ul><li>inherit;</li> <li>initial;</li> <li>revert;</li> <li>unset;</li></ul> </td> <td><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> </td></tr> <tr bgcolor="#f3f3f3"> <td colspan="3">Layout e box model </td></tr> <tr> <td>Eccedenze </td> <td>overflow-x: overflow-y: </td> <td>#box2 {overflow-x: hidden; } </td></tr> <tr> <td>Posizione dei contenitori </td> <td>box-sizing: </td> <td>#box1 { box-sizing: content-box; } </td></tr> <tr> <td>Layout multicolonna </td> <td> <ul><li>Proprietà di base: <ul><li>column-width</li> <li>column-count</li> <li>column-gap</li> <li>column-rule</li></ul></li> <li>Per pagine stampate: <ul><li><code>break-before</code></li> <li><code>break-after</code></li> <li><code>break-inside</code></li></ul></li> <li>Gestione delle colonne <ul><li>column-span</li> <li>column-fill</li></ul></li></ul> </td> <td>#container { width: 750px; margin: 20px auto; column-width: 350px; column-gap: 25px; } </td></tr> <tr> <td>Flexible box layout </td> <td> <ul><li>Display: box</li> <li>Orientamento dei box</li> <li>Direzione e l’ordine dei box</li> <li>Allineamento e spazio box-align box-pack Box flessibili</li></ul> </td> <td>display: box; box-orient: vertical; box-align: center; box-pack: justify; box-flex: 1; </td></tr> <tr> <td>Media queries </td> <td> <ul><li><code>all</code>: il CSS si applica a tutti i dispositivi di visualizzazione;</li> <li><code>screen</code>: schermo di computer;</li> <li><code>print</code>: pagina stampata;</li> <li><code>projection</code>: presentazioni e proiezioni;</li> <li><code>speech</code>: dispositivi a sintesi vocale;</li> <li><code>braille</code>: supporti basati sull’uso del braille;</li> <li><code>embossed</code>: stampanti braille;</li> <li><code>handheld</code>: dispositivi mobili con schermo piccolo e dotati di browser con limitate capacità grafiche;</li> <li><code>tty</code>: dispositivi a carattere fisso come i terminali;</li> <li><code>tv</code>: visualizzazione su schermi televisivi</li></ul> </td> <td>@media screen and (color) { regole css } </td></tr> <tr bgcolor="#f3f3f3"> <td colspan="3">Transizioni, trasformazioni e animazioni </td></tr> <tr> <td>Transizioni </td> <td> <ul><li><code>transition-property</code></li> <li><code>transition-duration</code></li> <li><code>transition-timing-function</code></li> <li><code>transition-delay</code></li></ul> </td> <td>div {transition-property: background-color; transition-duration: 2s; } </td></tr> <tr> <td>Trasformazioni </td> <td> <ul><li>transform e transform-origin</li> <li>matrix</li> <li>translate</li> <li>scale</li> <li>rotate</li> <li>skew</li> <li>trasformazioni multiple</li></ul> </td> <td>transform: rotate(40deg); transform-origin: left bottom; matrix( a, b, c, d, tx, ty ); transform: translate(10px, 10px); transform: scale(0.5); transform: rotate(180deg); transform: skew(15deg, 20deg); transform: rotate(180deg) skew(20deg, 30deg) scale(2); </td></tr> <tr> <td><a href="/wiki/CSS_Animations" title="CSS Animations">Animazioni</a> </td> <td>@keyframe <ul><li>animation-name</li> <li>animation-duration</li> <li>animation-iteration-count</li> <li>animation-timing-function</li></ul> <ol><li>ease;</li> <li>linear;</li> <li>ease-in;</li> <li>ease-out;</li> <li>ease-in-out;</li> <li>cubic-bezier.</li></ol> </td> <td>@keyframes 'pulse' { from { background-color: red; opacity: 1.0; -transform: scale(1.0) rotate(0deg); } </td></tr> <tr bgcolor="#f3f3f3"> <td colspan="3">Grafica </td></tr> <tr> <td>Filtri </td> <td>filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url(); </td> <td>img { <pre>filter: blur(5px); </pre> } </td></tr> <tr> <td>Maschere </td> <td> <ul><li><code>mask-clip</code></li> <li><code>mask-composite</code></li> <li><code>mask-image</code></li> <li><code>mask-mode</code></li> <li><code>mask-origin</code></li> <li><code>mask-position</code></li> <li><code>mask-repeat</code></li> <li><code>mask-size</code></li></ul> </td> <td><code>mask: url(masks.svg#star) luminance;</code> </td></tr></tbody></table> <div class="mw-heading mw-heading2"><h2 id="Caratteristiche">Caratteristiche</h2>[<a href="/w/index.php?title=CSS&veaction=edit&section=5" title="Modifica la sezione Caratteristiche" class="mw-editsection-visualeditor">modifica</a> | <a href="/w/index.php?title=CSS&action=edit&section=5" title="Edit section's source code: Caratteristiche">modifica wikitesto</a>]</div> <figure class="mw-default-size" typeof="mw:File/Thumb"><a href="/wiki/File:External-css.png" class="mw-file-description"><img alt="Un file CSS esterno può formattare un numero infinito di pagine HTML ed evita quindi di riscrivere lo stesso codice in tutte le pagine." src="//upload.wikimedia.org/wikipedia/commons/thumb/6/65/External-css.png/220px-External-css.png" decoding="async" width="220" height="188" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/6/65/External-css.png/330px-External-css.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/6/65/External-css.png/440px-External-css.png 2x" data-file-width="726" data-file-height="622" /></a><figcaption>Un file CSS esterno può formattare un numero infinito di pagine HTML ed evita quindi di riscrivere lo stesso codice in tutte le pagine.</figcaption></figure> <div class="mw-heading mw-heading3"><h3 id="Il_codice">Il codice</h3>[<a href="/w/index.php?title=CSS&veaction=edit&section=6" title="Modifica la sezione Il codice" class="mw-editsection-visualeditor">modifica</a> | <a href="/w/index.php?title=CSS&action=edit&section=6" title="Edit section's source code: Il codice">modifica wikitesto</a>]</div> L'inserimento di codice CSS nelle pagine web può essere effettuato in tre modi diversi: <ul><li>Inserendo nel tag <code><head></code> della pagina in codice HTML un collegamento ad un foglio di stile esterno, cioè un file contrassegnato dall'estensione .css come negli esempi seguenti, tramite il tag link o tramite la <a href="/wiki/Direttiva_(programmazione)" title="Direttiva (programmazione)">direttiva</a> import, che può essere utilizzata anche negli stessi file .css per collegare più file tra loro:</li></ul> <div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre> <html> <head> <title>Esempio</title> <link rel="stylesheet" type="text/css" href="foglio_di_stile.css"/> </head> </pre></div> <dl><dd>oppure</dd></dl> <div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre> <html> <head> <title>Esempio</title> <style type="text/css"> @import url(foglio_di_stile.css); </style> </head> </pre></div> questa soluzione garantisce il massimo riuso di codice possibile potendo essere richiamato in ciascuna delle pagine web HTML desiderate. <ul><li>Inserendo, sempre all'interno dell'<code><head></code> tra gli specifici tag <code><style></code> e <code></style></code> le dichiarazioni css.</li></ul> <div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre> <html> <head> <title>Esempio</title> <style type="text/css"> codice css </style> </head> </pre></div> Questa soluzione garantisce un minor riuso di codice rispetto al precedente potendo essere utilizzato solo all'interno della pagina HTML in cui è dichiarato. <ul><li>In linea all'interno degli elementi</li></ul> <pre><tag style="dichiarazioni CSS">...</tag> </pre> Questa soluzione garantisce un riuso di codice ancora minore rispetto al precedente. <div class="mw-heading mw-heading3"><h3 id="Regole">Regole</h3>[<a href="/w/index.php?title=CSS&veaction=edit&section=7" title="Modifica la sezione Regole" class="mw-editsection-visualeditor">modifica</a> | <a href="/w/index.php?title=CSS&action=edit&section=7" title="Edit section's source code: Regole">modifica wikitesto</a>]</div> 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 <a href="/wiki/Predicato" title="Predicato">predicato</a> che individua certi elementi del documento HTML; una dichiarazione, separata con un <a href="/wiki/Punto_e_virgola" title="Punto e virgola">punto e virgola</a> 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). separati dai due punti. <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre>selettore1 { proprietà1:valore1; proprietà2:valore2; } selettore2 { proprietà3:valore3 } </pre></div> <div class="mw-heading mw-heading3"><h3 id="Selettori">Selettori</h3>[<a href="/w/index.php?title=CSS&veaction=edit&section=8" title="Modifica la sezione Selettori" class="mw-editsection-visualeditor">modifica</a> | <a href="/w/index.php?title=CSS&action=edit&section=8" title="Edit section's source code: Selettori">modifica wikitesto</a>]</div> Si descrivono di seguito alcune delle principali tipologie di selettori. <div class="mw-heading mw-heading4"><h4 id="Selettori_di_tipo">Selettori di tipo</h4>[<a href="/w/index.php?title=CSS&veaction=edit&section=9" title="Modifica la sezione Selettori di tipo" class="mw-editsection-visualeditor">modifica</a> | <a href="/w/index.php?title=CSS&action=edit&section=9" title="Edit section's source code: Selettori di tipo">modifica wikitesto</a>]</div> I selettori di tipo applicano la regola a tutti gli elementi della pagina del tipo determinato. Esempi: <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre> body { [...] } </pre></div> o<div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre> p { [...] } </pre></div> <div class="mw-heading mw-heading4"><h4 id="Selettori_di_classe">Selettori di classe</h4>[<a href="/w/index.php?title=CSS&veaction=edit&section=10" title="Modifica la sezione Selettori di classe" class="mw-editsection-visualeditor">modifica</a> | <a href="/w/index.php?title=CSS&action=edit&section=10" title="Edit section's source code: Selettori di classe">modifica wikitesto</a>]</div> Le classi applicano la regola a tutti gli elementi della pagina che presentano la proprietà <code>class="nome_classe"</code>. La sintassi CSS è la seguente:<div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre> .nome_classe { [...] } </pre></div> <div class="mw-heading mw-heading4"><h4 id="Selettori_d'identificatore">Selettori d'identificatore</h4>[<a href="/w/index.php?title=CSS&veaction=edit&section=11" title="Modifica la sezione Selettori d'identificatore" class="mw-editsection-visualeditor">modifica</a> | <a href="/w/index.php?title=CSS&action=edit&section=11" title="Edit section's source code: Selettori d'identificatore">modifica wikitesto</a>]</div> Gli identificatori (comunemente ID) applicano la regola a quell'elemento della pagina che presenta la proprietà <code>id="nome_identificatore"</code>. Gli ID contraddistinguono elementi unici. La sintassi CSS è la seguente:<div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre> #nome_identificatore { [...] } </pre></div> <div class="mw-heading mw-heading4"><h4 id="Selettori_di_pseudo-classe">Selettori di pseudo-classe</h4>[<a href="/w/index.php?title=CSS&veaction=edit&section=12" title="Modifica la sezione Selettori di pseudo-classe" class="mw-editsection-visualeditor">modifica</a> | <a href="/w/index.php?title=CSS&action=edit&section=12" title="Edit section's source code: Selettori di pseudo-classe">modifica wikitesto</a>]</div> Le pseudoclassi identificano elementi in base alle loro proprietà. <ul><li>first-child individua un elemento solo se è il primo figlio dell'elemento padre. Così quindi</li></ul> <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre> p:first-child { [...] } </pre></div> individuerà nel codice (X)HTML sottostante solo il primo paragrafo.<div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre> <body> <p>Lorem ipsum</p> <p>Lorem ipsum</p> <p>Lorem ipsum</p> </body> </pre></div> <ul><li>link e visited si applicano ai collegamenti. La prima identifica i collegamenti non visitati, la seconda quelli visitati. La sintassi CSS è:</li></ul> <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre> a:link { [...] } </pre></div> <ul><li>active, focus e hover identificano gli elementi solo in particolari condizioni, la prima se l'elemento è attivo, la seconda se è selezionato, la terza se il cursore del mouse è sopra di esso. Quindi</li></ul> <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre> p:hover { [...] } </pre></div> si applicherà solo se il puntatore del mouse andrà sopra un paragrafo e solo per il tempo che vi rimarrà. <ul><li>lang si utilizza per identificare gli elementi di una certa lingua ma il suo supporto è esiguo.</li></ul> <div class="mw-heading mw-heading4"><h4 id="Selettori_di_pseudo-elementi">Selettori di pseudo-elementi</h4>[<a href="/w/index.php?title=CSS&veaction=edit&section=13" title="Modifica la sezione Selettori di pseudo-elementi" class="mw-editsection-visualeditor">modifica</a> | <a href="/w/index.php?title=CSS&action=edit&section=13" title="Edit section's source code: Selettori di pseudo-elementi">modifica wikitesto</a>]</div> Gli pseudo-elementi identificano solo una parte di un elemento, senza la necessità di utilizzare la marcatura (X)HTML. <ul><li>first-line individua solo la prima linea di un paragrafo. Se la finestra del browser cambia dimensione si adatterà automaticamente alla nuova dimensione della linea. La sintassi CSS è la seguente:</li></ul> <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre> p::first-line { [...] } </pre></div> <ul><li>first-letter individua solo il primo carattere di un elemento.</li> <li>before e after sono due pseudoclassi utilizzate nella creazione dei contenuti generati. Non individuano un elemento, ma una posizione dove creare i contenuti. Sono poco utilizzate, dato il mancato supporto di Internet Explorer.</li></ul> <div class="mw-heading mw-heading4"><h4 id="Selettori_di_gerarchia">Selettori di gerarchia</h4>[<a href="/w/index.php?title=CSS&veaction=edit&section=14" title="Modifica la sezione Selettori di gerarchia" class="mw-editsection-visualeditor">modifica</a> | <a href="/w/index.php?title=CSS&action=edit&section=14" title="Edit section's source code: Selettori di gerarchia">modifica wikitesto</a>]</div> Identificano solamente gli elementi che si trovino in una particolare relazione derivante dalla struttura arborescente del documento (X)HTML, come la discendenza, la figliolanza, la fratellanza. <ul><li>Il selettore di discendenza identifica solo gli elementi contenuti in altri elementi. Così</li></ul> <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre> p span { [...] } </pre></div> identifica solo gli elementi <code></code> contenuti in elementi <code></code>. <ul><li>Il selettore figlio identifica invece solo gli elementi che siano contenuti direttamente nell'elemento padre. Così</li></ul> <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre> div > p { [...] } </pre></div> individua solo i <code></code> contenuti direttamente in un <code><div></code>. <ul><li>Il selettore fratello identifica il primo elemento immediatamente successivo ad un altro con cui condivida lo stesso padre. Così</li></ul> <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre> h1 + p { [...] } </pre></div> individua solo il primo <code></code> fratello di <code><h1></code> <div class="mw-heading mw-heading4"><h4 id="Selettori_di_attributo">Selettori di attributo</h4>[<a href="/w/index.php?title=CSS&veaction=edit&section=15" title="Modifica la sezione Selettori di attributo" class="mw-editsection-visualeditor">modifica</a> | <a href="/w/index.php?title=CSS&action=edit&section=15" title="Edit section's source code: Selettori di attributo">modifica wikitesto</a>]</div> Il selettore di attributi permette, tramite la sintassi che segue, di identificare elementi (X)HTML in base ai loro attributi. <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre> a[title=Esempio]{ [...] } </pre></div> Questa regola si applica solo agli elementi <code><a></code> che presentano l'attributo <code>title="Esempio"</code>. I selettori di attributi sono molti e permetterebbero un controllo eccellente della pagina, ma Internet Explorer non li supporta ed il loro uso è quindi molto limitato. <figure class="mw-default-size" typeof="mw:File/Thumb"><a href="/wiki/File:CSS_Floated_Layout.png" class="mw-file-description"><img alt="Esempio di Griglia CSS" src="//upload.wikimedia.org/wikipedia/commons/thumb/f/fa/CSS_Floated_Layout.png/220px-CSS_Floated_Layout.png" decoding="async" width="220" height="215" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/f/fa/CSS_Floated_Layout.png/330px-CSS_Floated_Layout.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/f/fa/CSS_Floated_Layout.png/440px-CSS_Floated_Layout.png 2x" data-file-width="1200" data-file-height="1170" /></a><figcaption>Esempio di Griglia CSS</figcaption></figure> <div class="mw-heading mw-heading3"><h3 id="Griglie_CSS">Griglie CSS</h3>[<a href="/w/index.php?title=CSS&veaction=edit&section=16" title="Modifica la sezione Griglie CSS" class="mw-editsection-visualeditor">modifica</a> | <a href="/w/index.php?title=CSS&action=edit&section=16" title="Edit section's source code: Griglie CSS">modifica wikitesto</a>]</div> Le Griglie CSS sono un sistema di layout bidimensionale, ossia che può gestire sia colonne che righe, a differenza di flexbox che è in gran parte un sistema monodimensionale. Si applicano le regole CSS sia a un elemento genitore (che diventa il Grid Container) che ai figli di quell'elemento (che diventano Grid Items)<a href="#cite_note-15">[15]</a>.<div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre>CSS .grid-container { display: grid; grid-template-columns: auto auto auto; background-color: #2196F3; padding: 10px; } .grid-item { background-color: rgba(255, 255, 255, 0.8); border: 1px solid rgba(0, 0, 0, 0.8); padding: 20px; font-size: 30px; text-align: center; } --------------------------------------- HTML <div class="grid-container"> <div class="grid-item">1</div> <div class="grid-item">2</div> </div> </pre></div> <div class="mw-heading mw-heading3"><h3 id="CSS_per_la_stampa">CSS per la stampa</h3>[<a href="/w/index.php?title=CSS&veaction=edit&section=17" title="Modifica la sezione CSS per la stampa" class="mw-editsection-visualeditor">modifica</a> | <a href="/w/index.php?title=CSS&action=edit&section=17" title="Edit section's source code: CSS per la stampa">modifica wikitesto</a>]</div> <figure typeof="mw:File/Thumb"><a href="/wiki/File:Stampa-web-confronto.png" class="mw-file-description"><img alt="Confronto tra pagina web a schermo e stampata" src="//upload.wikimedia.org/wikipedia/commons/thumb/c/ca/Stampa-web-confronto.png/310px-Stampa-web-confronto.png" decoding="async" width="310" height="226" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/c/ca/Stampa-web-confronto.png/465px-Stampa-web-confronto.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/c/ca/Stampa-web-confronto.png/620px-Stampa-web-confronto.png 2x" data-file-width="1527" data-file-height="1115" /></a><figcaption>Confronto tra pagina web a schermo e stampata</figcaption></figure> 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<a href="#cite_note-16">[16]</a><a href="#cite_note-17">[17]</a>. 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<a href="#cite_note-18">[18]</a>. Esempio di CSS esterno per la stampa collegato ad una pagina web HTML:<div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre><link rel="stylesheet" href="main.css" /> <link rel="stylesheet" media="print" href="print.css" /> </pre></div>Esempio di CSS esterno per la stampa:<div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre>/* main.css */ body { margin: 2em; color: #fff; background-color: #000; } /* print.css */ @media print { body { margin: 0; color: #000; background-color: #fff; } } </pre></div> <div class="mw-heading mw-heading3"><h3 id="Colori">Colori</h3>[<a href="/w/index.php?title=CSS&veaction=edit&section=18" title="Modifica la sezione Colori" class="mw-editsection-visualeditor">modifica</a> | <a href="/w/index.php?title=CSS&action=edit&section=18" title="Edit section's source code: Colori">modifica wikitesto</a>]</div> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r130657691"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r139142988"> <div class="hatnote noprint vedi-anche"> <div class="hatnote-content"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/8/87/Magnifying_glass_icon_mgx2.svg/18px-Magnifying_glass_icon_mgx2.svg.png" decoding="async" width="18" height="18" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/8/87/Magnifying_glass_icon_mgx2.svg/27px-Magnifying_glass_icon_mgx2.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/8/87/Magnifying_glass_icon_mgx2.svg/36px-Magnifying_glass_icon_mgx2.svg.png 2x" data-file-width="286" data-file-height="280" /> Lo stesso argomento in dettaglio: <a href="/wiki/Colori_Web" title="Colori Web">Colori Web</a>.</div> </div> I colori Web sono <a href="/wiki/Colore" title="Colore">colori</a> usati nella <a href="/wiki/Web_design" title="Web design">visualizzazione di pagine Web</a> sul <a href="/wiki/World_Wide_Web" title="World Wide Web">World Wide Web</a> e nei metodi per descrivere e specificare tali colori. I colori possono essere specificati come una tripletta <a href="/wiki/RGB" title="RGB">RGB</a> o in formato <a href="/wiki/Sistema_numerico_esadecimale" title="Sistema numerico esadecimale">esadecimale</a> (una tripletta esadecimale) o in alcuni casi in base ai loro nomi comuni inglesi. Uno strumento di prelievo colore o un altro <a href="/wiki/Software_grafico" title="Software grafico">software di grafica</a> viene spesso utilizzato per generare valori di colore. Un esempio: <code>#0099CC</code> (un tipo di azzurro che si può anche scrivere <code>Pacific Blue</code>). <div class="mw-heading mw-heading4"><h4 id="Cambiamento_del_nome_dei_colori">Cambiamento del nome dei colori</h4>[<a href="/w/index.php?title=CSS&veaction=edit&section=19" title="Modifica la sezione Cambiamento del nome dei colori" class="mw-editsection-visualeditor">modifica</a> | <a href="/w/index.php?title=CSS&action=edit&section=19" title="Edit section's source code: Cambiamento del nome dei colori">modifica wikitesto</a>]</div> I CSS3 permettono di rinominare i colori a piacere e richiamarli successivamente<a href="#cite_note-19">[19]</a>:<div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre>$color-danube: #668DD1; /* RICHIAMO */ $color-alpha: $color-danube; </pre></div> <div class="mw-heading mw-heading3"><h3 id="Creazione_di_variabili">Creazione di variabili</h3>[<a href="/w/index.php?title=CSS&veaction=edit&section=20" title="Modifica la sezione Creazione di variabili" class="mw-editsection-visualeditor">modifica</a> | <a href="/w/index.php?title=CSS&action=edit&section=20" title="Edit section's source code: Creazione di variabili">modifica wikitesto</a>]</div> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r130657691"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r139142988"> <div class="hatnote noprint vedi-anche"> <div class="hatnote-content"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/8/87/Magnifying_glass_icon_mgx2.svg/18px-Magnifying_glass_icon_mgx2.svg.png" decoding="async" width="18" height="18" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/8/87/Magnifying_glass_icon_mgx2.svg/27px-Magnifying_glass_icon_mgx2.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/8/87/Magnifying_glass_icon_mgx2.svg/36px-Magnifying_glass_icon_mgx2.svg.png 2x" data-file-width="286" data-file-height="280" /> Lo stesso argomento in dettaglio: <a href="/wiki/Sass" title="Sass">Sass</a> e <a href="/wiki/Less_(CSS)" class="mw-redirect" title="Less (CSS)">Less (CSS)</a>.</div> </div> Sass (Syntactically Awesome StyleSheets) è un'estensione del linguaggio CSS che permette di utilizzare <a href="/wiki/Variabile_(informatica)" title="Variabile (informatica)">variabili</a>, di creare <a href="/wiki/Funzione_(informatica)" title="Funzione (informatica)">funzioni</a> e di organizzare il foglio di stile in più <a href="/wiki/File" title="File">file</a>. Less (LESS) è un <a href="/wiki/Preprocessore" title="Preprocessore">preprocessore</a> CSS che estende il normale linguaggio CSS permettendo (oltre alla normale sintassi dei fogli di stile) anche l'utilizzo di <a href="/wiki/Funzione_(informatica)" title="Funzione (informatica)">funzioni</a>, <a href="/wiki/Operatore_(informatica)" title="Operatore (informatica)">operatori</a> e <a href="/wiki/Variabile_(informatica)" title="Variabile (informatica)">variabili</a>, la nidificazione delle istruzioni, la creazione di "mixin" e numerose altre caratteristiche che rendono il codice più facile da scrivere, da mantenere e da comprendere. <div class="mw-heading mw-heading3"><h3 id="Proprietà">Proprietà</h3>[<a href="/w/index.php?title=CSS&veaction=edit&section=21" title="Modifica la sezione Proprietà" class="mw-editsection-visualeditor">modifica</a> | <a href="/w/index.php?title=CSS&action=edit&section=21" title="Edit section's source code: Proprietà">modifica wikitesto</a>]</div> Le proprietà CSS sono numerose. Le più utilizzate sono: <ul><li>width e height. Queste proprietà vengono utilizzate per impostare l'altezza e la larghezza di un determinato elemento.</li> <li>background. Definisce lo sfondo di un elemento. È una scorciatoia (shorthand properties) per background-attachment, background-color, background-image, background-position e background-repeat.</li> <li>border. Definisce il bordo di un elemento. È una scorciatoia (shorthand properties) per border-color, border-style e border-width.</li> <li>color. Definisce il colore del testo di un elemento. Per definire lo sfondo si utilizza la proprietà background.</li> <li>position. Definisce il tipo di metodo di posizionamento utilizzato per un elemento (statico, relativo, fisso, assoluto o appiccicoso).</li> <li>z-index. Specifica l'ordine di un elemento posizionato e dei suoi discendenti (sopra o sotto gli altri presenti in pagina).</li> <li>float. Questa proprietà definisce un blocco flottante, ovvero che permette la disposizione di altri elementi ai suoi lati.</li> <li>font-family. Definisce le proprietà del carattere. È una scorciatoia (shorthand properties) per font-family, font-size e font-weight.</li> <li>margin e padding. Definiscono lo spazio circostante gli elementi. La prima lo spazio esterno ai bordi, la seconda quello interno.</li> <li>text-align. Definisce l'allineamento degli elementi, tra cui il testo.</li> <li>!important. Fa prevalere una regola CSS rispetto alle altre</li> <li>min-width e max-width. Permettono di far apparire e scomparire un elemento a seconda della dimensione del dispositivo</li> <li>clear. Impedisce che a fianco di un elemento compaiano altri elementi con il float</li></ul> <div class="mw-heading mw-heading3"><h3 id="Valori">Valori</h3>[<a href="/w/index.php?title=CSS&veaction=edit&section=22" title="Modifica la sezione Valori" class="mw-editsection-visualeditor">modifica</a> | <a href="/w/index.php?title=CSS&action=edit&section=22" title="Edit section's source code: Valori">modifica wikitesto</a>]</div> Se non specificata, una proprietà assume i valori predefiniti di ogni browser, o in seconda istanza lo stile utente scelto, altrimenti può assumere uno dei seguenti: <ul><li>inherit</li> <li>auto</li> <li>numero</li> <li>percentuale</li> <li><a href="/wiki/RGB" title="RGB">colore</a></li> <li><a href="/wiki/Uniform_Resource_Identifier" title="Uniform Resource Identifier">URI</a></li> <li><a href="/wiki/Font" class="mw-redirect" title="Font">font</a></li> <li>altri valori tipici di ogni proprietà</li></ul> La stringa inherit specifica che la proprietà deve ereditare il valore dagli elementi da cui l'elemento discende. La stringa auto ha significati molto diversi a seconda della proprietà a cui viene assegnata. Se i numeri sono contraddistinti da un'unità di misura è necessario che tale unità sia espressa (tranne che nel caso dello zero). Tra il numero e l'unità non devono esserci spazi, come nell'esempio che segue: <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre> p { margin : 5px; border: 1em; padding: 0; } </pre></div> I colori possono essere indicati con più di un sistema. Ad esempio il colore arancione può essere indicato con: <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre> orange /* colore predefinito */ rgb(255, 165, 0) /* formato rgb da 0 a 255 */ rgb(100%,64%,0%) /* è possibile utilizzare le percentuali */ rgba(255, 165, 0, 1) /* è possibile specificare l'alpha che va da 0 a 1 */ hsl(39, 100%, 50%) /* notazione hue saturation lightness */ hsla(39, 100%, 50%, 1) /* è possibile specificare l'alpha */ #ffa600 /* formato esadecimale RRGGBB */ #ffa600ff /* formato esadecimale RRGGBBAA */ #fa0 /* formato esadecimale RGB approssimazione del valore iniziale */ #fa0f /* formato esadecimale RGBA approssimazione del valore iniziale */ </pre></div> L'<a href="/wiki/URL" class="mw-redirect" title="URL">URL</a> viene indicato nelle forme <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre> url(http://esempio.it/file.html) url("http://esempio.it/file.html") </pre></div> I CSS permettono di indicare nella proprietà font-family più di un font, o una famiglia di font (serif e sans). In questo modo il browser utilizzerà il primo che troverà installato sul <a href="/wiki/Sistema_operativo" title="Sistema operativo">sistema operativo</a>. La dichiarazione utilizza questa sintassi: <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre> p { font-family : "Arial", "Verdana", serif; } </pre></div> <div class="mw-heading mw-heading4"><h4 id="CSS_per_SVG">CSS per SVG</h4>[<a href="/w/index.php?title=CSS&veaction=edit&section=23" title="Modifica la sezione CSS per SVG" class="mw-editsection-visualeditor">modifica</a> | <a href="/w/index.php?title=CSS&action=edit&section=23" title="Edit section's source code: CSS per SVG">modifica wikitesto</a>]</div> È possibile utilizzare i CSS per modificare gli stili di SVG (linguaggio facente parte di HTML5)<a href="#cite_note-20">[20]</a>. Esempio:<div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre>svg { background-color: beige; } </pre></div>CSS per <a href="/wiki/Canvas_(elemento_HTML)" title="Canvas (elemento HTML)">HTML5 Canvas</a><div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre><!DOCTYPE html> <html> <head> <title>Canvas element size: 600 x 300, Canvas drawing surface size: 300 x 150</title> <style> body { background: #dddddd; } #canvas { margin: 20px; padding: 20px; background: #ffffff; border: thin inset #aaaaaa; width: 600px; height: 300px; } </style> </head> <body> <canvas id="canvas"> Canvas not supported </canvas> </body> </html> </pre></div> <div class="mw-heading mw-heading4"><h4 id="Creazione_automatica_dei_CSS">Creazione automatica dei CSS</h4>[<a href="/w/index.php?title=CSS&veaction=edit&section=24" title="Modifica la sezione Creazione automatica dei CSS" class="mw-editsection-visualeditor">modifica</a> | <a href="/w/index.php?title=CSS&action=edit&section=24" title="Edit section's source code: Creazione automatica dei CSS">modifica wikitesto</a>]</div> Con programmi di grafica e fotoritocco come <a href="/wiki/Adobe_Photoshop" title="Adobe Photoshop">Photoshop</a> è possibile convertire i livelli in stili CSS<a href="#cite_note-21">[21]</a>. <div class="mw-heading mw-heading4"><h4 id="Utilizzo_del_3D">Utilizzo del 3D</h4>[<a href="/w/index.php?title=CSS&veaction=edit&section=25" title="Modifica la sezione Utilizzo del 3D" class="mw-editsection-visualeditor">modifica</a> | <a href="/w/index.php?title=CSS&action=edit&section=25" title="Edit section's source code: Utilizzo del 3D">modifica wikitesto</a>]</div> 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 <a href="/wiki/WebGL" title="WebGL">WebGL</a><a href="#cite_note-22">[22]</a><a href="#cite_note-23">[23]</a>. <div class="mw-heading mw-heading2"><h2 id="Il_supporto_dei_Browser_ai_CSS">Il supporto dei Browser ai CSS</h2>[<a href="/w/index.php?title=CSS&veaction=edit&section=26" title="Modifica la sezione Il supporto dei Browser ai CSS" class="mw-editsection-visualeditor">modifica</a> | <a href="/w/index.php?title=CSS&action=edit&section=26" title="Edit section's source code: Il supporto dei Browser ai CSS">modifica wikitesto</a>]</div> La lista che segue è di <a href="/wiki/Layout_engine" title="Layout engine">motori di rendering</a> perché a loro è assegnato il compito di formattare la pagina secondo le istruzioni CSS. <dl><dt><a href="/wiki/Gecko" title="Gecko">Gecko</a> (<a href="/wiki/Mozilla_Firefox" title="Mozilla Firefox">Mozilla Firefox</a> e <a href="/wiki/Netscape_Navigator" title="Netscape Navigator">Netscape Navigator</a>)</dt> <dd>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 <a href="/wiki/Software_libero" title="Software libero">software libero</a>. Anche Netscape Navigator (obsoleto dal 1º marzo 2008<a href="#cite_note-24">[24]</a>) era distribuito sotto <a href="/wiki/Licenza_libera" title="Licenza libera">licenza libera</a>.</dd></dl> <dl><dt>Trident (<a href="/wiki/Internet_Explorer" title="Internet Explorer">Internet Explorer</a> e <a href="/wiki/AOL_Explorer" title="AOL Explorer">AOL Explorer</a>)</dt> <dd>Internet Explorer (obsoleto dall'agosto 2020<a href="#cite_note-25">[25]</a> in favore di <a href="/wiki/Microsoft_Edge" title="Microsoft Edge">Edge</a>), dalla <a href="/wiki/Windows_Internet_Explorer_9" title="Windows Internet Explorer 9">versione 9</a> supportava CSS 3. Una peculiarità di Internet Explorer erano i cosiddetti commenti condizionali che consentivano di applicare delle regole di CSS soltanto a una determinata versione di Internet Explorer. Questa funzionalità era ampiamente utilizzata laddove si presumeva un'utenza che utilizzava ancora vecchie versioni di Internet Explorer e che perciò richiedevano frequentemente alcune regole di CSS addizionali per la corretta visualizzazione della pagina web.<a href="#cite_note-26">[26]</a> In molti casi era necessario utilizzare regole di stile CSS ad-hoc esclusivamente per Internet Explorer a causa delle differenze sostanziali nel modo in cui alcune versioni di Internet Explorer si discostavano dagli standard, come per esempio nel "<code>box model</code> non-standard" utilizzato da alcune versioni di Internet Explorer e che differivano sostanzialmente da quello imposto dagli standard del World Wide Web Consortium.<a href="#cite_note-27">[27]</a><a href="#cite_note-28">[28]</a> La sintassi dei commenti condizionali era la seguente:</dd></dl> <div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre>  </pre></div> <dl><dd>poiché <code> </pre></div> Trident e Internet Explorer sono <a href="/wiki/Software_proprietario" title="Software proprietario">software proprietario</a>. <dl><dt><a href="/wiki/Presto_(motore_di_rendering)" title="Presto (motore di rendering)">Presto</a> (<a href="/wiki/Opera_(browser)" title="Opera (browser)">Opera</a>)</dt> <dd>Presto offre un ottimo supporto dei CSS 1,2 e 3. Opera offre inoltre un'opzione che permette all'utente di disattivare i fogli di stile o usarne di propri. Presto e Opera sono <a href="/wiki/Software_proprietario" title="Software proprietario">software proprietario</a>.</dd></dl> <dl><dt><a href="/wiki/KHTML" title="KHTML">KHTML</a> e <a href="/wiki/WebKit" title="WebKit">WebKit</a> (<a href="/wiki/Safari_(browser)" title="Safari (browser)">Safari</a>, <a href="/wiki/Google_Chrome" title="Google Chrome">Google Chrome</a> e <a href="/wiki/Konqueror" title="Konqueror">Konqueror</a>)</dt> <dd>KHTML è attualmente il motore che offre il maggior supporto ai CSS, offrendo una quasi totale interpretazione anche dei CSS 3. KHTML e WebKit sono <a href="/wiki/Software_libero" title="Software libero">software libero</a>; Safari e Google Chrome sono <a href="/wiki/Software_proprietario" title="Software proprietario">software proprietari</a> (mantenuti rispettivamente da <a href="/wiki/Apple" title="Apple">Apple</a> e <a href="/wiki/Google_(azienda)" title="Google (azienda)">Google</a>), mentre Konqueror è <a href="/wiki/Software_libero" title="Software libero">software libero</a> (sotto <a href="/wiki/Licenza_GPL" class="mw-redirect" title="Licenza GPL">licenza GPL</a>, mantenuto dalla community di <a href="/wiki/KDE" title="KDE">KDE</a>).</dd></dl> Oltre alle differenze di compatibilità, ogni motore di rendering aggiunge ai CSS standard alcuni nuovi elementi o nuove proprietà. Normalmente tali proprietà iniziano con un prefisso che cambia in base al browser, per esempio <code>-webkit</code> indica che la proprietà riguarda il motore di rendering WebKit, ad esempio <code>-webkit-appearance</code>. Tutte queste proprietà però dovrebbero essere utilizzate esclusivamente quando si desidera solo utilizzare quel browser con quel determinato motore di rendering poiché tutte queste proprietà sono caratteristiche aggiuntive valide solo per quel determinato motore di rendering e non sono proprietà standard definite dal World Wide Web Consortium. <a href="/wiki/EdgeHTML" title="EdgeHTML">Edge HTML</a> (<a href="/wiki/Microsoft_Edge" title="Microsoft Edge">Microsoft Edge</a>) EdgeHTML supporta bene i CSS, compresi i CSS3. EdgeHTML e Microsoft Edge sono <a href="/wiki/Software_proprietario" title="Software proprietario">software proprietario</a>. <div class="mw-heading mw-heading2"><h2 id="Utilizzo_su_diversi_dispositivi">Utilizzo su diversi dispositivi</h2>[<a href="/w/index.php?title=CSS&veaction=edit&section=27" title="Modifica la sezione Utilizzo su diversi dispositivi" class="mw-editsection-visualeditor">modifica</a> | <a href="/w/index.php?title=CSS&action=edit&section=27" title="Edit section's source code: Utilizzo su diversi dispositivi">modifica wikitesto</a>]</div> Prima dell'arrivo dei CSS3, con i CSS2 si facevano più file CSS per lo stesso sito web che caricava il file CSS corrispondente al dispositivo utilizzato dall'utente. In HTML si specificava la seguente sintassi: <pre><link rel="stylesheet" type="text/css" href="foglio.css" media="screen"/> </pre> Il codice precedente associa il foglio di stile solo ai browser standard per <a href="/wiki/Computer_desktop" title="Computer desktop">computer desktop</a> 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<a href="#cite_note-29">[29]</a>. <div class="mw-heading mw-heading2"><h2 id="Riduzione_delle_chiamate_al_server">Riduzione delle chiamate al server</h2>[<a href="/w/index.php?title=CSS&veaction=edit&section=28" title="Modifica la sezione Riduzione delle chiamate al server" class="mw-editsection-visualeditor">modifica</a> | <a href="/w/index.php?title=CSS&action=edit&section=28" title="Edit section's source code: Riduzione delle chiamate al server">modifica wikitesto</a>]</div> <figure class="mw-default-size" typeof="mw:File/Thumb"><a href="/wiki/File:CSS-Sprite_Schema.gif" class="mw-file-description"><img alt="Esempio di uso di uno sprite in CSS" src="//upload.wikimedia.org/wikipedia/commons/thumb/5/56/CSS-Sprite_Schema.gif/220px-CSS-Sprite_Schema.gif" decoding="async" width="220" height="138" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/5/56/CSS-Sprite_Schema.gif/330px-CSS-Sprite_Schema.gif 1.5x, //upload.wikimedia.org/wikipedia/commons/5/56/CSS-Sprite_Schema.gif 2x" data-file-width="400" data-file-height="250" /></a><figcaption>Esempio di uso di uno sprite in CSS</figcaption></figure> Ogni richiesta del server separata (time to first byte o TTFB) influisce sulla velocità di essa (quando si richiamano nel codice immagini, font, video, elementi JS...). Con i CSS si possono aumentare notevolmente le prestazioni di una pagina riducendo quel numero di richieste. <div class="mw-heading mw-heading3"><h3 id="Immagini">Immagini</h3>[<a href="/w/index.php?title=CSS&veaction=edit&section=29" title="Modifica la sezione Immagini" class="mw-editsection-visualeditor">modifica</a> | <a href="/w/index.php?title=CSS&action=edit&section=29" title="Edit section's source code: Immagini">modifica wikitesto</a>]</div> Utilizzare i CSS3 per evitare di utilizzare le immagini (jpg, png,...) ad esempio per gli angoli arrotondati, le ombre, i gradienti e le trasparenze. <div class="mw-heading mw-heading3"><h3 id="Sprite"><a href="/wiki/Sprite_(informatica)" title="Sprite (informatica)">Sprite</a></h3>[<a href="/w/index.php?title=CSS&veaction=edit&section=30" title="Modifica la sezione Sprite" class="mw-editsection-visualeditor">modifica</a> | <a href="/w/index.php?title=CSS&action=edit&section=30" title="Edit section's source code: Sprite">modifica wikitesto</a>]</div> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r130657691"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r139142988"> <div class="hatnote noprint vedi-anche"> <div class="hatnote-content"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/8/87/Magnifying_glass_icon_mgx2.svg/18px-Magnifying_glass_icon_mgx2.svg.png" decoding="async" width="18" height="18" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/8/87/Magnifying_glass_icon_mgx2.svg/27px-Magnifying_glass_icon_mgx2.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/8/87/Magnifying_glass_icon_mgx2.svg/36px-Magnifying_glass_icon_mgx2.svg.png 2x" data-file-width="286" data-file-height="280" /> Lo stesso argomento in dettaglio: <a href="/wiki/Sprite_(informatica)" title="Sprite (informatica)">Sprite (informatica)</a>.</div> </div><figure class="mw-default-size" typeof="mw:File/Thumb"><a href="/wiki/File:Pixel_Dungeon_-_warrior_tileset.png" class="mw-file-description"><img alt="Un singolo sprite di Pixel Dungeon realizzato con 147 sotto-immagini" src="//upload.wikimedia.org/wikipedia/commons/thumb/5/51/Pixel_Dungeon_-_warrior_tileset.png/220px-Pixel_Dungeon_-_warrior_tileset.png" decoding="async" width="220" height="110" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/5/51/Pixel_Dungeon_-_warrior_tileset.png 1.5x" data-file-width="256" data-file-height="128" /></a><figcaption>Un singolo sprite di <a href="/wiki/Pixel_Dungeon" title="Pixel Dungeon">Pixel Dungeon</a> realizzato con 147 sotto-immagini</figcaption></figure> Utilizzare i <a href="/wiki/Sprite_(informatica)" title="Sprite (informatica)">CSS Sprite</a>, 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). <div class="mw-heading mw-heading3"><h3 id="Minify">Minify</h3>[<a href="/w/index.php?title=CSS&veaction=edit&section=31" title="Modifica la sezione Minify" class="mw-editsection-visualeditor">modifica</a> | <a href="/w/index.php?title=CSS&action=edit&section=31" title="Edit section's source code: Minify">modifica wikitesto</a>]</div> 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 <a href="/wiki/JavaScript" title="JavaScript">JavaScript</a><a href="#cite_note-30">[30]</a>. 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:<div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre>.foo { color: #ff0000; } .bar { color: rgba(255, 0, 0, 1); } /* EQUIVALE A */ .bar,.foo{color:red} </pre></div> <div class="mw-heading mw-heading3"><h3 id="Font"><a href="/wiki/Tipo_di_carattere" title="Tipo di carattere">Font</a></h3>[<a href="/w/index.php?title=CSS&veaction=edit&section=32" title="Modifica la sezione Font" class="mw-editsection-visualeditor">modifica</a> | <a href="/w/index.php?title=CSS&action=edit&section=32" title="Edit section's source code: Font">modifica wikitesto</a>]</div> Non usare troppi font incorporati (@font-face e <a href="/wiki/Google_Fonts" title="Google Fonts">Google Fonts</a>). <div class="mw-heading mw-heading3"><h3 id="Numero_di_file">Numero di file</h3>[<a href="/w/index.php?title=CSS&veaction=edit&section=33" title="Modifica la sezione Numero di file" class="mw-editsection-visualeditor">modifica</a> | <a href="/w/index.php?title=CSS&action=edit&section=33" title="Edit section's source code: Numero di file">modifica wikitesto</a>]</div> 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. <div class="mw-heading mw-heading3"><h3 id="JavaScript">JavaScript</h3>[<a href="/w/index.php?title=CSS&veaction=edit&section=34" title="Modifica la sezione JavaScript" class="mw-editsection-visualeditor">modifica</a> | <a href="/w/index.php?title=CSS&action=edit&section=34" title="Edit section's source code: JavaScript">modifica wikitesto</a>]</div> Sostituire <a href="/wiki/JavaScript" title="JavaScript">JavaScript</a> con i CSS per creare <a href="/wiki/Tooltip" title="Tooltip">tooltip</a>, gallerie d'immagine e altro<a href="#cite_note-:0-9">[9]</a><a href="#cite_note-:1-10">[10]</a><a href="#cite_note-:2-11">[11]</a>. I CSS richiedono infatti meno risorse di JS. <div class="mw-heading mw-heading2"><h2 id="Fogli_di_stile_preferiti_e_alternativi">Fogli di stile preferiti e alternativi</h2>[<a href="/w/index.php?title=CSS&veaction=edit&section=35" title="Modifica la sezione Fogli di stile preferiti e alternativi" class="mw-editsection-visualeditor">modifica</a> | <a href="/w/index.php?title=CSS&action=edit&section=35" title="Edit section's source code: Fogli di stile preferiti e alternativi">modifica wikitesto</a>]</div> Come descritto, ad ogni pagina si possono collegare più fogli di stile. Tuttavia è anche possibile far scegliere all'utente quali applicare. Per farlo si definiscono innanzitutto i fogli di stile permanenti, cioè non disattivabili, secondo la sintassi già vista. Poi si definiscono i fogli preferiti, cioè attivi al caricamento della pagina, ma disattivabili, aggiungendo l'attributo <code><title></code> come nell'esempio che segue: <pre><link rel="stylesheet" type="text/css" href="foglio_preferito.css" title="Esempio1"/> </pre> A questo punto si possono specificare fogli di stile alternativi cioè non attivi al caricamento, ma attivabili dall'utente, come nell'esempio che segue: <pre><link rel="alternate stylesheet" type="text/css" href="foglio_alternativo.css" title="Esempio2"/> </pre> Per attivare e disattivare i fogli di stile l'utente può ricorrere all'apposito menu del suo browser, tuttavia Internet Explorer non offriva questa possibilità quindi era necessario creare uno script <a href="/wiki/JavaScript" title="JavaScript">JavaScript</a> che svolgesse la funzione di sostituire i fogli. Il codice era stato pubblicato la prima volta su (<abbr title="inglese">EN</abbr>) <a rel="nofollow" class="external text" href="http://www.alistapart.com/articles/alternate">A List Apart</a>. Tuttavia se questo script era facile da mettere in opera per gli sviluppatori, richiedeva un browser aggiornato con un buon supporto del <a href="/wiki/Document_Object_Model" title="Document Object Model">DOM</a>, oltre che avere attivati sia JavaScript e i <a href="/wiki/Cookie" title="Cookie">cookie</a>. Un sistema più complesso ma molto più robusto poteva essere uno script <a href="/wiki/Lato_server" title="Lato server">lato server</a> come <a href="/wiki/PHP" title="PHP">PHP</a>. Un esempio è disponibile sempre sullo <a rel="nofollow" class="external text" href="http://www.alistapart.com/articles/phpswitch/">stesso sito</a>. <div class="mw-heading mw-heading2"><h2 id="Pattern">Pattern</h2>[<a href="/w/index.php?title=CSS&veaction=edit&section=36" title="Modifica la sezione Pattern" class="mw-editsection-visualeditor">modifica</a> | <a href="/w/index.php?title=CSS&action=edit&section=36" title="Edit section's source code: Pattern">modifica wikitesto</a>]</div> <figure class="mw-default-size" typeof="mw:File/Thumb"><a href="/wiki/File:Pattern-CSS.png" class="mw-file-description"><img alt="Pattern CSS" src="//upload.wikimedia.org/wikipedia/commons/thumb/b/be/Pattern-CSS.png/220px-Pattern-CSS.png" decoding="async" width="220" height="175" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/b/be/Pattern-CSS.png/330px-Pattern-CSS.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/b/be/Pattern-CSS.png/440px-Pattern-CSS.png 2x" data-file-width="1473" data-file-height="1174" /></a><figcaption>Pattern CSS</figcaption></figure> 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<a href="#cite_note-31">[31]</a>. In questi tre casi non c'è bisogno di realizzare un'immagine di sfondo della grandezza del contenitore che peserebbe molto di più. <div class="mw-heading mw-heading2"><h2 id="Acid3">Acid3</h2>[<a href="/w/index.php?title=CSS&veaction=edit&section=37" title="Modifica la sezione Acid3" class="mw-editsection-visualeditor">modifica</a> | <a href="/w/index.php?title=CSS&action=edit&section=37" title="Edit section's source code: Acid3">modifica wikitesto</a>]</div> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r130657691"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r139142988"> <div class="hatnote noprint vedi-anche"> <div class="hatnote-content"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/8/87/Magnifying_glass_icon_mgx2.svg/18px-Magnifying_glass_icon_mgx2.svg.png" decoding="async" width="18" height="18" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/8/87/Magnifying_glass_icon_mgx2.svg/27px-Magnifying_glass_icon_mgx2.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/8/87/Magnifying_glass_icon_mgx2.svg/36px-Magnifying_glass_icon_mgx2.svg.png 2x" data-file-width="286" data-file-height="280" /> Lo stesso argomento in dettaglio: <a href="/wiki/Acid3" title="Acid3">Acid3</a>.</div> </div> Acid3 è un test con cui è possibile verificare l'aderenza di un <a href="/wiki/Browser" title="Browser">browser</a> a determinati standard web compresi i CSS3<a href="#cite_note-32">[32]</a>. <div class="mw-heading mw-heading2"><h2 id="Stylus">Stylus</h2>[<a href="/w/index.php?title=CSS&veaction=edit&section=38" title="Modifica la sezione Stylus" class="mw-editsection-visualeditor">modifica</a> | <a href="/w/index.php?title=CSS&action=edit&section=38" title="Edit section's source code: Stylus">modifica wikitesto</a>]</div> Stylus è un linguaggio per preprocessore di fogli di stile dinamico compilato in Cascading Style Sheets (CSS). Il suo design è influenzato da <a href="/wiki/Sass" title="Sass">Sass</a> e <a href="/wiki/LESS" title="LESS">LESS</a>. È considerata la quarta sintassi del preprocessore CSS più utilizzata<a href="#cite_note-doc-33">[33]</a>. È stato creato da TJ Holowaychuk, un ex programmatore di Node.js e creatore del linguaggio Luna. È scritto in JADE e <a href="/wiki/Node.js" title="Node.js">Node.js</a>. <div class="mw-heading mw-heading3"><h3 id="Selettori_2">Selettori</h3>[<a href="/w/index.php?title=CSS&veaction=edit&section=39" title="Modifica la sezione Selettori" class="mw-editsection-visualeditor">modifica</a> | <a href="/w/index.php?title=CSS&action=edit&section=39" title="Edit section's source code: Selettori">modifica wikitesto</a>]</div> 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: <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre>body color: white; } </pre></div> può essere abbreviato in: <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre>body color: white; </pre></div> Inoltre, anche i due punti (:) e le virgole (,) sono facoltativi; ciò significa che quanto sopra può essere scritto come segue: <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre>body color white </pre></div> <div class="mw-heading mw-heading3"><h3 id="Variabili">Variabili</h3>[<a href="/w/index.php?title=CSS&veaction=edit&section=40" title="Modifica la sezione Variabili" class="mw-editsection-visualeditor">modifica</a> | <a href="/w/index.php?title=CSS&action=edit&section=40" title="Edit section's source code: Variabili">modifica wikitesto</a>]</div> Stylus consente di definire variabili, tuttavia, a differenza di LESS e Sass, non utilizza un simbolo per definire le variabili. Inoltre, l'assegnazione delle variabili viene eseguita automaticamente separando la proprietà e le parole chiave. In questo modo, le variabili sono simili alle variabili in Python. <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre>messaggio = 'Hello, World!' div::before content messaggio color #ffffff </pre></div> Il compilatore Stylus tradurrebbe l'esempio sopra in: <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre>div::before { content: "Hello, World!"; color: #ffffff; } </pre></div> <div class="mw-heading mw-heading3"><h3 id="Mixin_e_funzioni">Mixin e funzioni</h3>[<a href="/w/index.php?title=CSS&veaction=edit&section=41" title="Modifica la sezione Mixin e funzioni" class="mw-editsection-visualeditor">modifica</a> | <a href="/w/index.php?title=CSS&action=edit&section=41" title="Edit section's source code: Mixin e funzioni">modifica wikitesto</a>]</div> Sia i mixin che le funzioni sono definiti nello stesso modo, ma vengono applicati in modi diversi. Ad esempio: <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre> border-radius ( n ) -webkit-border-radius n -moz-border-radius n border-radius n </pre></div> quindi, per includerlo come mixin: <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre>div.rettangolo border-radius( 10px ) </pre></div> che verrebbe compilato in: <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre>div.rettangolo { -webkit- border-radius: 10 px; -moz- border-radius: 10 px; border-radius: 10 px; } </pre></div> <div class="mw-heading mw-heading3"><h3 id="Interpolazione">Interpolazione</h3>[<a href="/w/index.php?title=CSS&veaction=edit&section=42" title="Modifica la sezione Interpolazione" class="mw-editsection-visualeditor">modifica</a> | <a href="/w/index.php?title=CSS&action=edit&section=42" title="Edit section's source code: Interpolazione">modifica wikitesto</a>]</div> Per includere variabili negli argomenti e negli identificatori, le parentesi graffe circondano le variabili. Per esempio, <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre> -webkit- { 'border' + '-radius' } </pre></div> corrisponde a <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre> -webkit-border-radius </pre></div> <div class="mw-heading mw-heading2"><h2 id="CSS_dinamici">CSS dinamici</h2>[<a href="/w/index.php?title=CSS&veaction=edit&section=43" title="Modifica la sezione CSS dinamici" class="mw-editsection-visualeditor">modifica</a> | <a href="/w/index.php?title=CSS&action=edit&section=43" title="Edit section's source code: CSS dinamici">modifica wikitesto</a>]</div> 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 <a href="/wiki/Linguaggio_di_programmazione" title="Linguaggio di programmazione">linguaggio di programmazione</a> per il <a href="/wiki/Lato_server" title="Lato server">lato server</a> (come ad esempio <a href="/wiki/PHP" title="PHP">PHP</a>/<a href="/wiki/Active_Server_Pages" title="Active Server Pages">ASP</a>/<a href="/wiki/Perl" title="Perl">Perl</a>/<a href="/wiki/JavaServer_Pages" title="JavaServer Pages">JSP</a>) e CSS)<a href="#cite_note-34">[34]</a>. L'idea iniziale del DCSS è stata scritta nel luglio 2002 da <a href="/w/index.php?title=Jori_Koolstra&action=edit&redlink=1" class="new" title="Jori Koolstra (la pagina non esiste)">Jori Koolstra</a>, un programmatore olandese<a href="#cite_note-35">[35]</a>. DCSS permette di lavorare con variabili in CSS e con la riscrittura dinamica del codice sorgente CSS. Molti <a href="/wiki/Content_management_system" title="Content management system">CMS</a> hanno creato moduli aggiuntivi, per esempio <a href="/wiki/Drupal" title="Drupal">Drupal</a>. Esempio:<div class="mw-highlight mw-highlight-lang-php mw-content-ltr" dir="ltr"><pre>$persistent = [ 'bgmast' => 'bbd9ee', /* elenco */ 'fgmast' => '4d4d4d', 'bgmenu' => 'e7e4d3', /* menu */ 'fgmenu' => '444', 'bgcont' => 'fff', /* contenuto */ 'fgcont' => '444' ]; </pre></div> <div class="mw-heading mw-heading2"><h2 id="Modifica_del_cursore_con_i_CSS">Modifica del cursore con i CSS</h2>[<a href="/w/index.php?title=CSS&veaction=edit&section=44" title="Modifica la sezione Modifica del cursore con i CSS" class="mw-editsection-visualeditor">modifica</a> | <a href="/w/index.php?title=CSS&action=edit&section=44" title="Edit section's source code: Modifica del cursore con i CSS">modifica wikitesto</a>]</div> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r130657691"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r139142988"> <div class="hatnote noprint vedi-anche"> <div class="hatnote-content"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/8/87/Magnifying_glass_icon_mgx2.svg/18px-Magnifying_glass_icon_mgx2.svg.png" decoding="async" width="18" height="18" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/8/87/Magnifying_glass_icon_mgx2.svg/27px-Magnifying_glass_icon_mgx2.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/8/87/Magnifying_glass_icon_mgx2.svg/36px-Magnifying_glass_icon_mgx2.svg.png 2x" data-file-width="286" data-file-height="280" /> Lo stesso argomento in dettaglio: <a href="/wiki/Cursore" title="Cursore">Cursore</a>.</div> </div> I CSS possono generare una serie di diversi cursori del mouse che l'utente vedrà appena arrivato sulla pagina <a href="/wiki/HTML" title="HTML">HTML</a> che li contiene<a href="#cite_note-36">[36]</a><a href="#cite_note-37">[37]</a>: <div class="mw-heading mw-heading2"><h2 id="Progetti_in_divenire">Progetti in divenire</h2>[<a href="/w/index.php?title=CSS&veaction=edit&section=45" title="Modifica la sezione Progetti in divenire" class="mw-editsection-visualeditor">modifica</a> | <a href="/w/index.php?title=CSS&action=edit&section=45" title="Edit section's source code: Progetti in divenire">modifica wikitesto</a>]</div> <figure class="mw-default-size" typeof="mw:File/Thumb"><a href="/wiki/File:CSS3_region_exclusion.png" class="mw-file-description"><img alt="CSS3 region e exclusion" src="//upload.wikimedia.org/wikipedia/commons/thumb/b/be/CSS3_region_exclusion.png/220px-CSS3_region_exclusion.png" decoding="async" width="220" height="253" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/b/be/CSS3_region_exclusion.png/330px-CSS3_region_exclusion.png 1.5x, //upload.wikimedia.org/wikipedia/commons/b/be/CSS3_region_exclusion.png 2x" data-file-width="410" data-file-height="472" /></a><figcaption>CSS3 region e exclusion</figcaption></figure> Il W3C sta sviluppando alcune specifiche CSS3 per creare layout simili a quelli per <a href="/wiki/Rivista" title="Rivista">riviste</a> e settimanali, con la possibilità di far scorrere il testo attorno alle immagini prive di sfondo (PNG e GIF) e forme geometriche<a href="#cite_note-38">[38]</a><a href="#cite_note-39">[39]</a><a href="#cite_note-40">[40]</a><a href="#cite_note-41">[41]</a>. <div class="mw-heading mw-heading3"><h3 id="Esempi">Esempi</h3>[<a href="/w/index.php?title=CSS&veaction=edit&section=46" title="Modifica la sezione Esempi" class="mw-editsection-visualeditor">modifica</a> | <a href="/w/index.php?title=CSS&action=edit&section=46" title="Edit section's source code: Esempi">modifica wikitesto</a>]</div> CSS inline<div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre><div id=”circle” style="exclusion-shape: poly(x1, y1, .., xN, yN)"></div> <div style="region-thread:content; exclusions: #circle;"></div> </pre></div>CSS esterno<div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre>.exclusion { wrap-flow: both; position: absolute; width: 200px; } .region { flow-from: article; box-sizing: border-box; position: absolute; width: 200px; height: 200px; padding: 10px; } </pre></div> <div class="mw-heading mw-heading2"><h2 id="Esempi_di_CSS3">Esempi di CSS3</h2>[<a href="/w/index.php?title=CSS&veaction=edit&section=47" title="Modifica la sezione Esempi di CSS3" class="mw-editsection-visualeditor">modifica</a> | <a href="/w/index.php?title=CSS&action=edit&section=47" title="Edit section's source code: Esempi di CSS3">modifica wikitesto</a>]</div> <ul class="gallery mw-gallery-traditional"> <li class="gallerybox" style="width: 155px"> <div class="thumb" style="width: 150px; height: 150px;"><a href="/wiki/File:Css-drawing.png" class="mw-file-description" title="Confronto tra il logo CSS3 creato con i CSS, con SVG e con HTML5 Canvas"><img alt="Confronto tra il logo CSS3 creato con i CSS, con SVG e con HTML5 Canvas" src="//upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Css-drawing.png/120px-Css-drawing.png" decoding="async" width="120" height="64" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Css-drawing.png/180px-Css-drawing.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Css-drawing.png/240px-Css-drawing.png 2x" data-file-width="977" data-file-height="523" /></a></div> <div class="gallerytext">Confronto tra il logo CSS3 creato con i CSS, con SVG e con HTML5 Canvas</div> </li> <li class="gallerybox" style="width: 155px"> <div class="thumb" style="width: 150px; height: 150px;"><a href="/wiki/File:Css-filtri-vs-gimp.png" class="mw-file-description" title="Confronto tra alcuni filtri CSS3 e i filtri equivalenti di Gimp"><img alt="Confronto tra alcuni filtri CSS3 e i filtri equivalenti di Gimp" src="//upload.wikimedia.org/wikipedia/commons/thumb/1/11/Css-filtri-vs-gimp.png/99px-Css-filtri-vs-gimp.png" decoding="async" width="99" height="120" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/1/11/Css-filtri-vs-gimp.png/149px-Css-filtri-vs-gimp.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/1/11/Css-filtri-vs-gimp.png/198px-Css-filtri-vs-gimp.png 2x" data-file-width="691" data-file-height="836" /></a></div> <div class="gallerytext">Confronto tra alcuni filtri CSS3 e i filtri equivalenti di Gimp</div> </li> <li class="gallerybox" style="width: 155px"> <div class="thumb" style="width: 150px; height: 150px;"><a href="/wiki/File:Css-multiple-column.png" class="mw-file-description" title="Prima dei CSS3 per distribuire un testo su più paragrafi si usavano più . Con i CSS3 si può usare un solo ."><img alt="Prima dei CSS3 per distribuire un testo su più paragrafi si usavano più . Con i CSS3 si può usare un solo ." src="//upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Css-multiple-column.png/109px-Css-multiple-column.png" decoding="async" width="109" height="120" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Css-multiple-column.png/164px-Css-multiple-column.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Css-multiple-column.png/219px-Css-multiple-column.png 2x" data-file-width="784" data-file-height="859" /></a></div> <div class="gallerytext">Prima dei CSS3 per distribuire un testo su più paragrafi si usavano più . Con i CSS3 si può usare un solo .</div> </li> <li class="gallerybox" style="width: 155px"> <div class="thumb" style="width: 150px; height: 150px;"><a href="/wiki/File:Css3-background-multiplo.png" class="mw-file-description" title="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"><img 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" src="//upload.wikimedia.org/wikipedia/commons/thumb/5/55/Css3-background-multiplo.png/116px-Css3-background-multiplo.png" decoding="async" width="116" height="120" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/5/55/Css3-background-multiplo.png/173px-Css3-background-multiplo.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/5/55/Css3-background-multiplo.png/231px-Css3-background-multiplo.png 2x" data-file-width="758" data-file-height="787" /></a></div> <div class="gallerytext">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</div> </li> <li class="gallerybox" style="width: 155px"> <div class="thumb" style="width: 150px; height: 150px;"><a href="/wiki/File:Maschere-css-confronto.png" class="mw-file-description" title="Confronto tra maschera GIMP, CSS3 e SVG"><img alt="Confronto tra maschera GIMP, CSS3 e SVG e" src="//upload.wikimedia.org/wikipedia/commons/thumb/5/5a/Maschere-css-confronto.png/92px-Maschere-css-confronto.png" decoding="async" width="92" height="120" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/5/5a/Maschere-css-confronto.png/139px-Maschere-css-confronto.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/5/5a/Maschere-css-confronto.png/185px-Maschere-css-confronto.png 2x" data-file-width="631" data-file-height="818" /></a></div> <div class="gallerytext">Confronto tra maschera GIMP, CSS3 e SVG</div> </li> </ul> <div class="mw-heading mw-heading2"><h2 id="Standardizzazione">Standardizzazione</h2>[<a href="/w/index.php?title=CSS&veaction=edit&section=48" title="Modifica la sezione Standardizzazione" class="mw-editsection-visualeditor">modifica</a> | <a href="/w/index.php?title=CSS&action=edit&section=48" title="Edit section's source code: Standardizzazione">modifica wikitesto</a>]</div> <div class="mw-heading mw-heading3"><h3 id="Frameworks">Frameworks</h3>[<a href="/w/index.php?title=CSS&veaction=edit&section=49" title="Modifica la sezione Frameworks" class="mw-editsection-visualeditor">modifica</a> | <a href="/w/index.php?title=CSS&action=edit&section=49" title="Edit section's source code: Frameworks">modifica wikitesto</a>]</div> 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, <a href="/wiki/Bootstrap_(framework)" title="Bootstrap (framework)">Bootstrap</a>, Cascade Framework, Foundation, <a rel="nofollow" class="external text" href="https://mdbootstrap.com">MDBootstrap</a> 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. <div class="mw-heading mw-heading3"><h3 id="Metodologie_di_progettazione">Metodologie di progettazione</h3>[<a href="/w/index.php?title=CSS&veaction=edit&section=50" title="Modifica la sezione Metodologie di progettazione" class="mw-editsection-visualeditor">modifica</a> | <a href="/w/index.php?title=CSS&action=edit&section=50" title="Edit section's source code: Metodologie di progettazione">modifica wikitesto</a>]</div> Con l'aumentare della dimensione delle risorse CSS utilizzate in un progetto, un team di sviluppo deve spesso decidere una metodologia di progettazione comune per mantenerle organizzate. Gli obiettivi sono la facilità di sviluppo, la facilità di collaborazione durante lo sviluppo e le prestazioni dei fogli di stile distribuiti nel browser. Le metodologie popolari includono OOCSS (CSS orientato agli oggetti), ACSS (CSS atomico), oCSS (foglio di stile Cascade organico), SMACSS (architettura scalabile e modulare per CSS) e BEM (blocco, elemento, modificatore) <div class="mw-heading mw-heading2"><h2 id="Note">Note</h2>[<a href="/w/index.php?title=CSS&veaction=edit&section=51" title="Modifica la sezione Note" class="mw-editsection-visualeditor">modifica</a> | <a href="/w/index.php?title=CSS&action=edit&section=51" title="Edit section's source code: Note">modifica wikitesto</a>]</div> <div class="mw-references-wrap mw-references-columns"><ol class="references"> <li id="cite_note-1"><a href="#cite_ref-1">^</a> <cite class="citation web" style="font-style:normal"> <a rel="nofollow" class="external text" href="https://web.archive.org/web/20171202123704/https://theblog.adobe.com/adobe-flash-update/">Flash & The Future of Interactive Content | Adobe Blog</a>, su web.archive.org, 2 dicembre 2017. URL consultato il 27 gennaio 2021 (archiviato dall'<abbr title="https://theblog.adobe.com/adobe-flash-update/">url originale</abbr> il 2 dicembre 2017).</cite> </li> <li id="cite_note-2"><a href="#cite_ref-2">^</a> <cite class="citation web" style="font-style:normal"> Alessandro Fulciniti, <a rel="nofollow" class="external text" href="https://www.html.it/pag/14259/i-pi-comuni-layout-table-less/">I più comuni layout table-less</a>, su HTML.it. URL consultato il 2 febbraio 2021.</cite> </li> <li id="cite_note-3"><a href="#cite_ref-3">^</a> <cite class="citation web" style="font-style:normal">(<abbr title="inglese">EN</abbr>) <a rel="nofollow" class="external text" href="https://www.smashingmagazine.com/2009/06/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/">Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?</a>, su Smashing Magazine, 2 giugno 2009. URL consultato il 2 febbraio 2021.</cite> </li> <li id="cite_note-4"><a href="#cite_ref-4">^</a> <cite class="citation web" style="font-style:normal"> <a rel="nofollow" class="external text" href="https://www.w3.org/Style/CSS/current-work">CSS current work</a>, su w3.org.</cite> </li> <li id="cite_note-5"><a href="#cite_ref-5">^</a> <cite class="citation web" style="font-style:normal"> <a rel="nofollow" class="external text" href="https://github.com/elitheeli/stupid-machines">Stupid Machines - rule 110</a>, su github.com.</cite> </li> <li id="cite_note-6"><a href="#cite_ref-6">^</a> <cite class="citation web" style="font-style:normal"> <a rel="nofollow" class="external text" href="http://eli.fox-epste.in/rule110-full.html">Rule 110 OnLine Demonstration</a>, su eli.fox-epste.in.</cite> </li> <li id="cite_note-7"><a href="#cite_ref-7">^</a> <cite class="citation web" style="font-style:normal"> <a rel="nofollow" class="external text" href="https://www.html.it/guide/guida-css3/">CSS3: guida completa</a>, su HTML.it. URL consultato il 27 gennaio 2021.</cite> </li> <li id="cite_note-8"><a href="#cite_ref-8">^</a> <cite class="citation web" style="font-style:normal"> <a rel="nofollow" class="external text" href="https://www.w3schools.com/">W3Schools Online Web Tutorials</a>, su w3schools.com. URL consultato il 28 gennaio 2021.</cite> </li> <li id="cite_note-:0-9">^ <a href="#cite_ref-:0_9-0">a</a> <a href="#cite_ref-:0_9-1">b</a> <cite class="citation web" style="font-style:normal">(<abbr title="inglese">EN</abbr>) <a rel="nofollow" class="external text" href="https://blog.logrocket.com/5-things-you-can-do-with-css-instead-of-javascript/">5 things you can do with CSS instead of JavaScript</a>, su LogRocket Blog, 29 ottobre 2019. URL consultato il 28 gennaio 2021.</cite> </li> <li id="cite_note-:1-10">^ <a href="#cite_ref-:1_10-0">a</a> <a href="#cite_ref-:1_10-1">b</a> <cite class="citation web" style="font-style:normal">(<abbr title="inglese">EN</abbr>) <a rel="nofollow" class="external text" href="https://blog.logrocket.com/creating-beautiful-tooltips-with-only-css/">Creating beautiful tooltips with only CSS</a>, su LogRocket Blog, 29 giugno 2020. URL consultato il 28 gennaio 2021.</cite> </li> <li id="cite_note-:2-11">^ <a href="#cite_ref-:2_11-0">a</a> <a href="#cite_ref-:2_11-1">b</a> <cite class="citation web" style="font-style:normal">(<abbr title="inglese">EN</abbr>) <a rel="nofollow" class="external text" href="https://freefrontend.com/css-gallery/">49 CSS Galleries</a>, su Free Frontend. URL consultato il 28 gennaio 2021.</cite> </li> <li id="cite_note-12"><a href="#cite_ref-12">^</a> <cite class="citation web" style="font-style:normal"> <a rel="nofollow" class="external text" href="https://www.w3.org/International/articles/vertical-text/index.en.html">Styling vertical Chinese, Japanese, Korean and Mongolian text</a>, su w3.org. URL consultato il 7 febbraio 2022.</cite> </li> <li id="cite_note-13"><a href="#cite_ref-13">^</a> <cite class="citation web" style="font-style:normal">(<abbr title="inglese">EN</abbr>) <a rel="nofollow" class="external text" href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation">text-orientation - CSS: Cascading Style Sheets | MDN</a>, su developer.mozilla.org. URL consultato il 7 febbraio 2022.</cite> </li> <li id="cite_note-14"><a href="#cite_ref-14">^</a> <cite class="citation web" style="font-style:normal">(<abbr title="inglese">EN</abbr>) <a rel="nofollow" class="external text" href="https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode">writing-mode - CSS: Cascading Style Sheets | MDN</a>, su developer.mozilla.org. URL consultato il 7 febbraio 2022.</cite> </li> <li id="cite_note-15"><a href="#cite_ref-15">^</a> <cite class="citation web" style="font-style:normal">(<abbr title="inglese">EN</abbr>) <a rel="nofollow" class="external text" href="https://css-tricks.com/snippets/css/complete-guide-grid/">A Complete Guide to Grid</a>, su CSS-Tricks. URL consultato il 2 febbraio 2021.</cite> </li> <li id="cite_note-16"><a href="#cite_ref-16">^</a> <cite class="citation web" style="font-style:normal">(<abbr title="inglese">EN</abbr>) <a rel="nofollow" class="external text" href="https://www.sitepoint.com/css-printer-friendly-pages/">How to Create Printer-friendly Pages with CSS - SitePoint</a>, su sitepoint.com. URL consultato il 24 agosto 2021.</cite> </li> <li id="cite_note-17"><a href="#cite_ref-17">^</a> <cite class="citation web" style="font-style:normal">(<abbr title="inglese">EN</abbr>) <a rel="nofollow" class="external text" href="https://www.smashingmagazine.com/2011/11/how-to-set-up-a-print-style-sheet/">How To Set Up A Print Style Sheet</a>, su Smashing Magazine, 24 novembre 2011. URL consultato il 24 agosto 2021.</cite> </li> <li id="cite_note-18"><a href="#cite_ref-18">^</a> <cite class="citation web" style="font-style:normal"> <a rel="nofollow" class="external text" href="https://chrome.google.com/webstore/detail/print-friendly-pdf/ohlencieiipommannpdfcmfdpjjmeolj">Print Friendly & PDF</a>, su chrome.google.com. URL consultato il 24 agosto 2021.</cite> </li> <li id="cite_note-19"><a href="#cite_ref-19">^</a> <cite class="citation web" style="font-style:normal">(<abbr title="inglese">EN</abbr>) <a rel="nofollow" class="external text" href="https://css-tricks.com/what-do-you-name-color-variables/">What do you name color variables?</a>, su CSS-Tricks, 7 dicembre 2018. URL consultato il 4 febbraio 2021.</cite> </li> <li id="cite_note-20"><a href="#cite_ref-20">^</a> <cite class="citation web" style="font-style:normal"> <a rel="nofollow" class="external text" href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_and_CSS">SVG and CSS - SVG: Scalable Vector Graphics | MDN</a>, su developer.mozilla.org. URL consultato il 28 gennaio 2021.</cite> </li> <li id="cite_note-21"><a href="#cite_ref-21">^</a> <cite class="citation web" style="font-style:normal">(<abbr title="inglese">EN</abbr>) <a rel="nofollow" class="external text" href="https://squareinternet.co/exporting-css-from-photoshop-when-building-from-a-psd-file/">Exporting CSS From Photoshop When Building From A PSD File</a>, su Square Internet, 11 agosto 2019. URL consultato il 28 gennaio 2021.</cite> </li> <li id="cite_note-22"><a href="#cite_ref-22">^</a> <cite class="citation web" style="font-style:normal"> <a rel="nofollow" class="external text" href="https://we-rad.com/browser-webgl-vs-css-3d-transforms/">Guida per il 3D nei browser – WebGL Contro CSS 3D Transforms</a>, su WE RAD, 5 maggio 2017. URL consultato il 29 gennaio 2021.</cite> </li> <li id="cite_note-23"><a href="#cite_ref-23">^</a> <cite class="citation web" style="font-style:normal">(<abbr title="inglese">EN</abbr>) Pratik, <a rel="nofollow" class="external text" href="https://onaircode.com/css-3d-transforms-example-with-code-snippets/">10+ CSS 3D Transforms Example With Code Snippets</a>, su OnAirCode, 27 marzo 2018. URL consultato il 29 gennaio 2021.</cite> </li> <li id="cite_note-24"><a href="#cite_ref-24">^</a> <cite class="citation web" style="font-style:normal"> <a rel="nofollow" class="external text" href="https://web.archive.org/web/20071229140059/http://blog.netscape.com/2007/12/28/end-of-support-for-netscape-web-browsers/">End of Support for Netscape web browsers - The Netscape Blog</a>, su web.archive.org, 29 dicembre 2007. URL consultato il 27 gennaio 2021 (archiviato dall'<abbr title="http://blog.netscape.com/2007/12/28/end-of-support-for-netscape-web-browsers/">url originale</abbr> il 29 dicembre 2007).</cite> </li> <li id="cite_note-25"><a href="#cite_ref-25">^</a> <cite class="citation web" style="font-style:normal">(<abbr title="inglese">EN</abbr>) <a rel="nofollow" class="external text" href="https://www.microsoft.com/en-us/microsoft-365/windows/end-of-ie-support">Internet Explorer Web Browser End of Support - Microsoft 365</a>, su microsoft.com. URL consultato il 27 gennaio 2021.</cite> </li> <li id="cite_note-26"><a href="#cite_ref-26">^</a> <cite class="citation web" style="font-style:normal">(<abbr title="inglese">EN</abbr>) <a rel="nofollow" class="external text" href="http://www.quirksmode.org/css/condcom.html">CSS Conditional comments</a>, su quirksmode.org. URL consultato il 10 giugno 2014. <div class="cite-q">«Older IE versions frequently need some extra CSS in order to show your pages right. Conditional comments are the best way to add this CSS, since the system is explicitly designed for this use case»</div></cite> </li> <li id="cite_note-27"><a href="#cite_ref-27">^</a> <cite class="citation web" style="font-style:normal">(<abbr title="inglese">EN</abbr>) <a rel="nofollow" class="external text" href="http://www.456bereastreet.com/archive/200612/internet_explorer_and_the_css_box_model/">Internet Explorer and the CSS box model</a>, su 456bereastreet.com. URL consultato il 10 giugno 2014. <div class="cite-q">«Internet Explorer’s non-standard way of calculating box dimensions»</div></cite> </li> <li id="cite_note-28"><a href="#cite_ref-28">^</a> <cite class="citation web" style="font-style:normal">(<abbr title="inglese">EN</abbr>) <a rel="nofollow" class="external text" href="https://www.w3.org/TR/CSS2/box.html">CSS2 Box model</a>, su w3.org, W3C.</cite> </li> <li id="cite_note-29"><a href="#cite_ref-29">^</a> <cite class="citation web" style="font-style:normal"> <a rel="nofollow" class="external text" href="https://www.w3schools.com/cssref/css3_pr_mediaquery.asp">CSS @media Rule</a>, su w3schools.com. URL consultato il 28 gennaio 2021.</cite> </li> <li id="cite_note-30"><a href="#cite_ref-30">^</a> <cite class="citation web" style="font-style:normal"> <a rel="nofollow" class="external text" href="https://cssminifier.com/">CSS Minifier</a>, su cssminifier.com. URL consultato il 27 gennaio 2021.</cite> </li> <li id="cite_note-31"><a href="#cite_ref-31">^</a> <cite class="citation web" style="font-style:normal">(<abbr title="inglese">EN</abbr>) <a rel="nofollow" class="external text" href="https://freefrontend.com/css-background-patterns/">51 CSS Background Patterns</a>, su Free Frontend. URL consultato il 5 febbraio 2021.</cite> </li> <li id="cite_note-32"><a href="#cite_ref-32">^</a> <cite class="citation web" style="font-style:normal"> <a rel="nofollow" class="external text" href="http://acid3.acidtests.org/">The Acid3 Test</a>, su acid3.acidtests.org. URL consultato il 3 febbraio 2021.</cite> </li> <li id="cite_note-doc-33"><a href="#cite_ref-doc_33-0">^</a> <a rel="nofollow" class="external text" href="https://css-tricks.com/poll-results-popularity-of-css-preprocessors/">Poll Results: Popularity of CSS Preprocessors</a> </li> <li id="cite_note-34"><a href="#cite_ref-34">^</a> <cite class="citation news" style="font-style:normal">(<abbr title="inglese">EN</abbr>) <a rel="nofollow" class="external text" href="http://www.digital-web.com/articles/generating_dynamic_css_with_php/">Generating Dynamic CSS with PHP - Digital Web</a>, in Digital Web, 24 gennaio 2014. URL consultato il 17 febbraio 2021.</cite> </li> <li id="cite_note-35"><a href="#cite_ref-35">^</a> <cite class="citation web" style="font-style:normal"> <a rel="nofollow" class="external text" href="https://web.archive.org/web/20100819062059/http://www.jori-koolstra.nl/DCSS/dcss.txt">Wayback Machine</a> (<abbr title="documento di puro testo">TXT</abbr>), su web.archive.org, 19 agosto 2010. URL consultato il 17 febbraio 2021 (archiviato dall'<abbr title="http://www.jori-koolstra.nl/DCSS/dcss.txt">url originale</abbr> il 19 agosto 2010).</cite> </li> <li id="cite_note-36"><a href="#cite_ref-36">^</a> <cite class="citation web" style="font-style:normal"> <a rel="nofollow" class="external text" href="https://developer.mozilla.org/it/docs/Web/CSS/cursor">cursor - CSS | MDN</a>, su developer.mozilla.org. URL consultato il 17 febbraio 2021.</cite> </li> <li id="cite_note-37"><a href="#cite_ref-37">^</a> <cite class="citation web" style="font-style:normal"> <a rel="nofollow" class="external text" href="https://www.w3schools.com/cssref/pr_class_cursor.asp">CSS cursor property</a>, su w3schools.com. URL consultato il 17 febbraio 2021.</cite> </li> <li id="cite_note-38"><a href="#cite_ref-38">^</a> <cite class="citation web" style="font-style:normal">(<abbr title="inglese">EN</abbr>) Christian Cantrell Published: August 3rd, 2012 Comments: 0 Your browser may not support the functionality in this article, <a rel="nofollow" class="external text" href="https://www.html5rocks.com/en/tutorials/regions/adobe/">Magazine-like Layout for the Web with CSS Regions and Exclusions - HTML5 Rocks</a>, su HTML5 Rocks - A resource for open web HTML5 developers. URL consultato il 23 agosto 2021.</cite> </li> <li id="cite_note-39"><a href="#cite_ref-39">^</a> <cite class="citation web" style="font-style:normal"> <a rel="nofollow" class="external text" href="https://lists.w3.org/Archives/Public/www-archive/2011Mar/att-0011/CSS_Regions.pdf">w3c</a> (<abbr title="documento in formato PDF">PDF</abbr>), su lists.w3.org.</cite> </li> <li id="cite_note-40"><a href="#cite_ref-40">^</a> <cite class="citation web" style="font-style:normal">(<abbr title="inglese">EN</abbr>) <a rel="nofollow" class="external text" href="https://css-tricks.com/exclusions-will-hopefully-be-like-more-powerful-grid-friendly-floats/">Exclusions will hopefully be like more powerful grid-friendly floats</a>, su CSS-Tricks, 21 novembre 2018. URL consultato il 23 agosto 2021.</cite> </li> <li id="cite_note-41"><a href="#cite_ref-41">^</a> <cite class="citation web" style="font-style:normal"> <a rel="nofollow" class="external text" href="https://www.w3.org/TR/css3-exclusions/Overview.html">CSS Exclusions Module Level 1</a>, su w3.org. URL consultato il 23 agosto 2021.</cite> </li> </ol></div> <div class="mw-heading mw-heading2"><h2 id="Bibliografia">Bibliografia</h2>[<a href="/w/index.php?title=CSS&veaction=edit&section=52" title="Modifica la sezione Bibliografia" class="mw-editsection-visualeditor">modifica</a> | <a href="/w/index.php?title=CSS&action=edit&section=52" title="Edit section's source code: Bibliografia">modifica wikitesto</a>]</div> <ul><li><cite id="CITEREF''MCmicrocomputer''_174" class="citation pubblicazione" style="font-style:normal"> <a rel="nofollow" class="external text" href="https://archive.org/details/MC_microcomputer-174/page/n305?view=theater">Cascading Style Sheet (prima parte)</a> (<abbr title="immagine in formato JPG">JPG</abbr>), in <a href="/wiki/MCmicrocomputer" title="MCmicrocomputer">MCmicrocomputer</a>, n. 174, Roma, Technimedia, giugno 1997, pp. 306-310, <a href="/wiki/ISSN" title="ISSN">ISSN</a> 1123-2714 (<a rel="nofollow" class="external text" href="http://worldcat.org/issn/1123-2714&lang=it">WC</a> · <a rel="nofollow" class="external text" href="https://acnpsearch.unibo.it/search?issn=1123-2714">ACNP</a>).</cite></li> <li><cite id="CITEREF''MCmicrocomputer''_175" class="citation pubblicazione" style="font-style:normal"> <a rel="nofollow" class="external text" href="https://archive.org/details/MC_microcomputer-175/page/n297?view=theater">Cascading Style Sheet (seconda parte)</a> (<abbr title="immagine in formato JPG">JPG</abbr>), in <a href="/wiki/MCmicrocomputer" title="MCmicrocomputer">MCmicrocomputer</a>, n. 175, Roma, Technimedia, luglio/agosto 1997, pp. 298-302, <a href="/wiki/ISSN" title="ISSN">ISSN</a> 1123-2714 (<a rel="nofollow" class="external text" href="http://worldcat.org/issn/1123-2714&lang=it">WC</a> · <a rel="nofollow" class="external text" href="https://acnpsearch.unibo.it/search?issn=1123-2714">ACNP</a>).</cite></li></ul> <div class="mw-heading mw-heading2"><h2 id="Voci_correlate">Voci correlate</h2>[<a href="/w/index.php?title=CSS&veaction=edit&section=53" title="Modifica la sezione Voci correlate" class="mw-editsection-visualeditor">modifica</a> | <a href="/w/index.php?title=CSS&action=edit&section=53" title="Edit section's source code: Voci correlate">modifica wikitesto</a>]</div> <ul><li><a href="/wiki/Formattazione_del_testo" title="Formattazione del testo">Formattazione del testo</a></li> <li><a href="/wiki/Accessibilit%C3%A0_(design)" title="Accessibilità (design)">Accessibilità (design)</a></li> <li><a href="/wiki/Browser" title="Browser">Browser</a></li> <li><a href="/wiki/Pagina_web" title="Pagina web">Pagina web</a></li> <li><a href="/wiki/W3C" class="mw-redirect" title="W3C">W3C</a></li> <li><a href="/wiki/HTML" title="HTML">HTML</a></li> <li><a href="/wiki/Tipografia_web" title="Tipografia web">Tipografia web</a></li></ul> <div class="mw-heading mw-heading2"><h2 id="Altri_progetti">Altri progetti</h2>[<a href="/w/index.php?title=CSS&veaction=edit&section=54" title="Modifica la sezione Altri progetti" class="mw-editsection-visualeditor">modifica</a> | <a href="/w/index.php?title=CSS&action=edit&section=54" title="Edit section's source code: Altri progetti">modifica wikitesto</a>]</div> <div id="interProject" class="toccolours" style="display: none; clear: both; margin-top: 2em">Altri progetti<ul title="Collegamenti verso gli altri progetti Wikimedia"> <li class="" title=""><a href="https://it.wikiquote.org/wiki/CSS" class="extiw" title="q:CSS">Wikiquote</a></li> <li class="" title=""><a href="https://it.wikibooks.org/wiki/CSS" class="extiw" title="b:CSS">Wikibooks</a></li> <li class="" title=""><a href="https://it.wikiversity.org/wiki/CSS" class="extiw" title="v:CSS">Wikiversità</a></li> <li class="" title=""><a class="external text" href="https://commons.wikimedia.org/wiki/Category:Cascading_Style_Sheets?uselang=it">Wikimedia Commons</a></li></ul></div> <ul><li><a href="https://it.wikiquote.org/wiki/" title="Collabora a Wikiquote"><img alt="Collabora a Wikiquote" src="//upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Wikiquote-logo.svg/18px-Wikiquote-logo.svg.png" decoding="async" width="18" height="21" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Wikiquote-logo.svg/27px-Wikiquote-logo.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Wikiquote-logo.svg/36px-Wikiquote-logo.svg.png 2x" data-file-width="300" data-file-height="355" /></a> <a href="https://it.wikiquote.org/wiki/" class="extiw" title="q:">Wikiquote</a> contiene citazioni sul <a href="https://it.wikiquote.org/wiki/CSS" class="extiw" title="q:CSS">CSS</a></li> <li><a href="https://it.wikibooks.org/wiki/" title="Collabora a Wikibooks"><img alt="Collabora a Wikibooks" src="//upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Wikibooks-logo.svg/18px-Wikibooks-logo.svg.png" decoding="async" width="18" height="18" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Wikibooks-logo.svg/27px-Wikibooks-logo.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Wikibooks-logo.svg/36px-Wikibooks-logo.svg.png 2x" data-file-width="300" data-file-height="300" /></a> <a href="https://it.wikibooks.org/wiki/" class="extiw" title="b:">Wikibooks</a> contiene testi o manuali sul <a href="https://it.wikibooks.org/wiki/CSS" class="extiw" title="b:CSS">CSS</a></li> <li><a href="https://it.wikiversity.org/wiki/" title="Collabora a Wikiversità"><img alt="Collabora a Wikiversità" src="//upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Wikiversity_logo_2017.svg/18px-Wikiversity_logo_2017.svg.png" decoding="async" width="18" height="15" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Wikiversity_logo_2017.svg/27px-Wikiversity_logo_2017.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Wikiversity_logo_2017.svg/36px-Wikiversity_logo_2017.svg.png 2x" data-file-width="626" data-file-height="512" /></a> <a href="https://it.wikiversity.org/wiki/" class="extiw" title="v:">Wikiversità</a> contiene risorse sul <a href="https://it.wikiversity.org/wiki/CSS" class="extiw" title="v:CSS">CSS</a></li> <li><a href="https://commons.wikimedia.org/wiki/?uselang=it" title="Collabora a Wikimedia Commons"><img alt="Collabora a Wikimedia Commons" src="//upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Commons-logo.svg/18px-Commons-logo.svg.png" decoding="async" width="18" height="24" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Commons-logo.svg/27px-Commons-logo.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Commons-logo.svg/36px-Commons-logo.svg.png 2x" data-file-width="1024" data-file-height="1376" /></a> <a class="external text" href="https://commons.wikimedia.org/wiki/?uselang=it">Wikimedia Commons</a> contiene immagini o altri file sul <a class="external text" href="https://commons.wikimedia.org/wiki/Category:Cascading_Style_Sheets?uselang=it">CSS</a></li></ul> <div class="mw-heading mw-heading2"><h2 id="Collegamenti_esterni">Collegamenti esterni</h2>[<a href="/w/index.php?title=CSS&veaction=edit&section=55" title="Modifica la sezione Collegamenti esterni" class="mw-editsection-visualeditor">modifica</a> | <a href="/w/index.php?title=CSS&action=edit&section=55" title="Edit section's source code: Collegamenti esterni">modifica wikitesto</a>]</div> <ul><li class="mw-empty-elt"></li> <li><cite class="citation web" style="font-style:normal"> <a rel="nofollow" class="external text" href="https://www.w3.org/Style/CSS/">Sito ufficiale</a>, su w3.org.</cite> <a href="https://www.wikidata.org/wiki/Q46441#P856" title="Modifica su Wikidata"><img alt="Modifica su Wikidata" src="//upload.wikimedia.org/wikipedia/commons/thumb/7/73/Blue_pencil.svg/10px-Blue_pencil.svg.png" decoding="async" width="10" height="10" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/7/73/Blue_pencil.svg/15px-Blue_pencil.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/7/73/Blue_pencil.svg/20px-Blue_pencil.svg.png 2x" data-file-width="600" data-file-height="600" /></a></li> <li><cite class="citation web" style="font-style:normal"> <a rel="nofollow" class="external text" href="https://drafts.csswg.org/">Sito ufficiale</a>, su drafts.csswg.org.</cite> <a href="https://www.wikidata.org/wiki/Q46441#P856" title="Modifica su Wikidata"><img alt="Modifica su Wikidata" src="//upload.wikimedia.org/wikipedia/commons/thumb/7/73/Blue_pencil.svg/10px-Blue_pencil.svg.png" decoding="async" width="10" height="10" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/7/73/Blue_pencil.svg/15px-Blue_pencil.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/7/73/Blue_pencil.svg/20px-Blue_pencil.svg.png 2x" data-file-width="600" data-file-height="600" /></a></li> <li><cite id="CITEREFLessico_del_XXI_secolo" class="citation libro" style="font-style:normal"> <a rel="nofollow" class="external text" href="https://www.treccani.it/enciclopedia/css_(Lessico-del-XXI-Secolo)/">CSS</a>, in Lessico del XXI secolo, <a href="/wiki/Istituto_dell%27Enciclopedia_Italiana" title="Istituto dell'Enciclopedia Italiana">Istituto dell'Enciclopedia Italiana</a>, 2012-2013.</cite> <a href="https://www.wikidata.org/wiki/Q46441#P9775" title="Modifica su Wikidata"><img alt="Modifica su Wikidata" src="//upload.wikimedia.org/wikipedia/commons/thumb/7/73/Blue_pencil.svg/10px-Blue_pencil.svg.png" decoding="async" width="10" height="10" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/7/73/Blue_pencil.svg/15px-Blue_pencil.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/7/73/Blue_pencil.svg/20px-Blue_pencil.svg.png 2x" data-file-width="600" data-file-height="600" /></a></li> <li><cite id="CITEREFBritannica.com" class="citation web" style="font-style:normal">(<abbr title="inglese">EN</abbr>) André Munro, <a rel="nofollow" class="external text" href="https://www.britannica.com/technology/CSS-programming-language">CSS</a>, su <a href="/wiki/Enciclopedia_Britannica" title="Enciclopedia Britannica">Enciclopedia Britannica</a>, Encyclopædia Britannica, Inc.</cite> <a href="https://www.wikidata.org/wiki/Q46441#P1417" title="Modifica su Wikidata"><img alt="Modifica su Wikidata" src="//upload.wikimedia.org/wikipedia/commons/thumb/7/73/Blue_pencil.svg/10px-Blue_pencil.svg.png" decoding="async" width="10" height="10" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/7/73/Blue_pencil.svg/15px-Blue_pencil.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/7/73/Blue_pencil.svg/20px-Blue_pencil.svg.png 2x" data-file-width="600" data-file-height="600" /></a></li> <li><cite id="CITEREFOpen_Library" class="citation web" style="font-style:normal">(<abbr title="inglese">EN</abbr>) <a rel="nofollow" class="external text" href="https://openlibrary.org/subjects/cascading_style_sheets">Opere riguardanti CSS</a>, su <a href="/wiki/Open_Library" class="mw-redirect" title="Open Library">Open Library</a>, <a href="/wiki/Internet_Archive" title="Internet Archive">Internet Archive</a>.</cite> <a href="https://www.wikidata.org/wiki/Q46441#P3847" title="Modifica su Wikidata"><img alt="Modifica su Wikidata" src="//upload.wikimedia.org/wikipedia/commons/thumb/7/73/Blue_pencil.svg/10px-Blue_pencil.svg.png" decoding="async" width="10" height="10" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/7/73/Blue_pencil.svg/15px-Blue_pencil.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/7/73/Blue_pencil.svg/20px-Blue_pencil.svg.png 2x" data-file-width="600" data-file-height="600" /></a></li> <li><cite class="citation web" style="font-style:normal"> <a rel="nofollow" class="external text" href="https://github.com/w3c/csswg-drafts">Repository sorgenti di CSS</a>, su github.com.</cite> <a href="https://www.wikidata.org/wiki/Q46441#P1324" title="Modifica su Wikidata"><img alt="Modifica su Wikidata" src="//upload.wikimedia.org/wikipedia/commons/thumb/7/73/Blue_pencil.svg/10px-Blue_pencil.svg.png" decoding="async" width="10" height="10" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/7/73/Blue_pencil.svg/15px-Blue_pencil.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/7/73/Blue_pencil.svg/20px-Blue_pencil.svg.png 2x" data-file-width="600" data-file-height="600" /></a></li> <li><cite id="CITEREFFOLDOC" class="citation testo" style="font-style:normal">(<abbr title="inglese">EN</abbr>) Denis Howe, <a href="https://foldoc.org/Cascading_Style_Sheets" class="extiw" title="foldoc:Cascading Style Sheets">Cascading Style Sheets</a>, in <a href="/wiki/Free_On-line_Dictionary_of_Computing" title="Free On-line Dictionary of Computing">Free On-line Dictionary of Computing</a>.</cite> Disponibile con licenza <a href="/wiki/GNU_Free_Documentation_License" title="GNU Free Documentation License">GFDL</a></li> <li>(<abbr title="inglese">EN</abbr>) <a rel="nofollow" class="external text" href="https://www.w3.org/Style/CSS/">Css</a> di <a href="/wiki/W3C" class="mw-redirect" title="W3C">W3C</a></li> <li><a rel="nofollow" class="external text" href="https://curlie.org/World/Italiano/Computer/Formato_Dati/Linguaggi_di_Marcatura/Css">Css</a> - Articoli e guide su <a href="/wiki/DMOZ" title="DMOZ">Curlie (Ex DMoz)</a></li> <li>(<abbr title="inglese">EN</abbr>) <a rel="nofollow" class="external text" href="https://web.archive.org/web/20140831121826/http://www.mezzoblue.com/zengarden/alldesigns/">CSS Zen Garden</a> - Esempi.</li> <li>(<abbr title="inglese">EN</abbr>) <a rel="nofollow" class="external text" href="https://www.w3schools.com/css/default.asp">Css w3schools</a> - Tutorial, Esempi, Reference su <a href="/wiki/W3Schools" title="W3Schools">W3Schools</a>.</li> <li>(<abbr title="inglese">EN</abbr>) <a rel="nofollow" class="external text" href="https://cssoptimizer.online">CSS Optimizer</a> <a rel="nofollow" class="external text" href="https://web.archive.org/web/20201001040432/https://cssoptimizer.online/">Archiviato</a> il 1º ottobre 2020 in <a href="/wiki/Internet_Archive" title="Internet Archive">Internet Archive</a>. - Tool per ottimizzare e pulire il CSS inutilizzato.</li> <li>(<abbr title="inglese">EN</abbr>) <a rel="nofollow" class="external text" href="https://mdbootstrap.com">CSS Framework</a> - Accelera il tuo sviluppo</li></ul> <style data-mw-deduplicate="TemplateStyles:r141815314">.mw-parser-output .navbox{border:1px solid #aaa;clear:both;margin:auto;padding:2px;width:100%}.mw-parser-output .navbox th{padding-left:1em;padding-right:1em;text-align:center}.mw-parser-output .navbox>tbody>tr:first-child>th{background:#ccf;font-size:90%;width:100%;color:var(--color-base,black)}.mw-parser-output .navbox_navbar{float:left;margin:0;padding:0 10px 0 0;text-align:left;width:6em}.mw-parser-output .navbox_title{font-size:110%}.mw-parser-output .navbox_abovebelow{background:#ddf;font-size:90%;font-weight:normal}.mw-parser-output .navbox_group{background:#ddf;font-size:90%;padding:0 10px;white-space:nowrap}.mw-parser-output .navbox_list{font-size:90%;width:100%}.mw-parser-output .navbox_list a{white-space:nowrap}html:not(.vector-feature-night-mode-enabled) .mw-parser-output .navbox_odd{background:#fdfdfd;color:var(--color-base,black)}html:not(.vector-feature-night-mode-enabled) .mw-parser-output .navbox_even{background:#f7f7f7;color:var(--color-base,black)}.mw-parser-output .navbox a.mw-selflink{color:var(--color-base,black)}.mw-parser-output .navbox_center{text-align:center}.mw-parser-output .navbox .navbox_image{padding-left:7px;vertical-align:middle;width:0}.mw-parser-output .navbox+.navbox{margin-top:-1px}.mw-parser-output .navbox .mw-collapsible-toggle{font-weight:normal;text-align:right;width:7em}body.skin--responsive .mw-parser-output .navbox_image img{max-width:none!important}.mw-parser-output .subnavbox{margin:-3px;width:100%}.mw-parser-output .subnavbox_group{background:#e6e6ff;padding:0 10px}@media screen{html.skin-theme-clientpref-night .mw-parser-output .navbox>tbody>tr:first-child>th{background:var(--background-color-interactive)!important}html.skin-theme-clientpref-night .mw-parser-output .navbox th{color:var(--color-base)!important}html.skin-theme-clientpref-night .mw-parser-output .navbox_abovebelow,html.skin-theme-clientpref-night .mw-parser-output .navbox_group{background:var(--background-color-interactive-subtle)!important}html.skin-theme-clientpref-night .mw-parser-output .subnavbox_group{background:var(--background-color-neutral-subtle)!important}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .navbox>tbody>tr:first-child>th{background:var(--background-color-interactive)!important}html.skin-theme-clientpref-os .mw-parser-output .navbox th{color:var(--color-base)!important}html.skin-theme-clientpref-os .mw-parser-output .navbox_abovebelow,html.skin-theme-clientpref-os .mw-parser-output .navbox_group{background:var(--background-color-interactive-subtle)!important}html.skin-theme-clientpref-os .mw-parser-output .subnavbox_group{background:var(--background-color-neutral-subtle)!important}}</style><table class="navbox mw-collapsible mw-collapsed noprint metadata" id="navbox-Browser_Internet"><tbody><tr><th colspan="2"><div class="navbox_navbar"><div class="noprint plainlinks" style="background-color:transparent; padding:0; font-size:xx-small; color:var(--color-base, #000000); white-space:nowrap;"><a href="/wiki/Template:Browser_Internet" title="Template:Browser Internet">V</a> · <a href="/wiki/Discussioni_template:Browser_Internet" title="Discussioni template:Browser Internet">D</a> · <a class="external text" href="https://it.wikipedia.org/w/index.php?title=Template:Browser_Internet&action=edit">M</a></div></div><a href="/wiki/Browser" title="Browser">Browser Internet</a></th></tr><tr><th colspan="2" class="navbox_group" style="font-size:100%">Caratteristiche  · standard  · protocolli</th></tr><tr><th colspan="1" class="navbox_group">Caratteristiche</th><td colspan="1" class="navbox_list navbox_even"><a href="/wiki/Segnalibro_(World_Wide_Web)" title="Segnalibro (World Wide Web)">Segnalibri</a> · <a href="/wiki/Estensione_del_browser" title="Estensione del browser">Estensioni</a> · <a href="/wiki/Navigazione_privata" title="Navigazione privata">Navigazione privata</a> · <a href="/w/index.php?title=Sincronizzazione_del_browser&action=edit&redlink=1" class="new" title="Sincronizzazione del browser (la pagina non esiste)">Sincronizzazione</a></td></tr><tr><th colspan="1" class="navbox_group">Standard</th><td colspan="1" class="navbox_list navbox_odd" style="background:#f7f7f7"><a href="/wiki/HTML" title="HTML">HTML</a> (<a href="/wiki/HTML5" title="HTML5">v5</a>) · <a class="mw-selflink selflink">CSS</a> · <a href="/wiki/Document_Object_Model" title="Document Object Model">DOM</a> · <a href="/wiki/JavaScript" title="JavaScript">JavaScript</a> (<a href="/w/index.php?title=Indexed_Database_API&action=edit&redlink=1" class="new" title="Indexed Database API (la pagina non esiste)">IndexedDB</a> · <a href="/w/index.php?title=Web_storage&action=edit&redlink=1" class="new" title="Web storage (la pagina non esiste)">Web storage</a> · <a href="/wiki/WebAssembly" title="WebAssembly">WebAssembly</a> · <a href="/wiki/WebGL" title="WebGL">WebGL</a>)</td></tr><tr><th colspan="1" class="navbox_group">Protocolli</th><td colspan="1" class="navbox_list navbox_even"><a href="/wiki/Hypertext_Transfer_Protocol" title="Hypertext Transfer Protocol">HTTP</a> (<a href="/wiki/HTTP/2" title="HTTP/2">v2</a> · <a href="/wiki/HTTP/3" title="HTTP/3">v3</a> · <a href="/wiki/Cookie" title="Cookie">Cookies</a> · <a href="/wiki/HTTPS" title="HTTPS">HTTPS</a>) · <a href="/wiki/Online_Certificate_Status_Protocol" title="Online Certificate Status Protocol">OCSP</a> · <a href="/wiki/WebRTC" title="WebRTC">WebRTC</a> · <a href="/wiki/WebSocket" title="WebSocket">WebSocket</a></td></tr><tr><th colspan="2" class="navbox_group" style="font-size: 100%">Attivi</th></tr><tr><th colspan="1" class="navbox_group">Basati su <a href="/wiki/Blink_(motore_di_rendering)" title="Blink (motore di rendering)">Blink</a></th><td colspan="1" class="navbox_list navbox_even"><a href="/w/index.php?title=Avast_Secure_Browser&action=edit&redlink=1" class="new" title="Avast Secure Browser (la pagina non esiste)">Avast Secure Browser</a> · <a href="/w/index.php?title=Beaker_(web_browser)&action=edit&redlink=1" class="new" title="Beaker (web browser) (la pagina non esiste)">Beaker</a> · <a href="/w/index.php?title=Blisk_(browser)&action=edit&redlink=1" class="new" title="Blisk (browser) (la pagina non esiste)">Blisk</a> · <a href="/wiki/Brave_(browser)" title="Brave (browser)">Brave</a> · <a href="/wiki/Google_Chrome" title="Google Chrome">Chrome</a> · <a href="/wiki/Chromium" title="Chromium">Chromium</a> · <a href="/w/index.php?title=C%E1%BB%91c_C%E1%BB%91c&action=edit&redlink=1" class="new" title="Cốc Cốc (la pagina non esiste)">Cốc Cốc</a> · <a href="/w/index.php?title=Comodo_Dragon&action=edit&redlink=1" class="new" title="Comodo Dragon (la pagina non esiste)">Dragon</a> · <a href="/wiki/Microsoft_Edge" title="Microsoft Edge">Edge</a> · <a href="/w/index.php?title=Epic_(browser)&action=edit&redlink=1" class="new" title="Epic (browser) (la pagina non esiste)">Epic</a> · <a href="/wiki/Falkon" title="Falkon">Falkon</a> · <a href="/w/index.php?title=Kinza_browser&action=edit&redlink=1" class="new" title="Kinza browser (la pagina non esiste)">Kinza</a> · <a href="/wiki/Maxthon" title="Maxthon">Maxthon</a> · <a href="/wiki/Opera_(browser)" title="Opera (browser)">Opera</a> · <a href="/w/index.php?title=Otter_Browser&action=edit&redlink=1" class="new" title="Otter Browser (la pagina non esiste)">Otter</a> · <a href="/w/index.php?title=Puffin_Browser&action=edit&redlink=1" class="new" title="Puffin Browser (la pagina non esiste)">Puffin</a> · <a href="/w/index.php?title=SalamWeb&action=edit&redlink=1" class="new" title="SalamWeb (la pagina non esiste)">SalamWeb</a> · <a href="/wiki/Samsung_Internet_Browser" title="Samsung Internet Browser">Samsung Internet</a> · <a href="/wiki/Silk_browser" title="Silk browser">Silk</a> · <a href="/w/index.php?title=Sleipnir_(web_browser)&action=edit&redlink=1" class="new" title="Sleipnir (web browser) (la pagina non esiste)">Sleipnir</a> · <a href="/w/index.php?title=Sputnik_(motore_di_ricerca)&action=edit&redlink=1" class="new" title="Sputnik (motore di ricerca) (la pagina non esiste)">Sputnik</a> · <a href="/wiki/SRWare_Iron" title="SRWare Iron">SRWare</a> · <a href="/w/index.php?title=Torch_(browser)&action=edit&redlink=1" class="new" title="Torch (browser) (la pagina non esiste)">Torch</a> · <a href="/wiki/UC_Browser" title="UC Browser">UC</a> · <a href="/wiki/Vivaldi_(browser)" title="Vivaldi (browser)">Vivaldi</a> · <a href="/w/index.php?title=Naver_Whale&action=edit&redlink=1" class="new" title="Naver Whale (la pagina non esiste)">Whale</a> · <a href="/wiki/Yandex.Browser" title="Yandex.Browser">Yandex</a></td></tr><tr><th colspan="1" class="navbox_group">Basati su <a href="/wiki/Gecko" title="Gecko">Gecko</a></th><td colspan="1" class="navbox_list navbox_odd" style="background:#f7f7f7"><a href="/wiki/Mozilla_Firefox" title="Mozilla Firefox">Firefox</a> (<a href="/wiki/Firefox_per_Android" title="Firefox per Android">per Android</a>) · <a href="/wiki/GNU_IceCat" title="GNU IceCat">GNU IceCat</a> · <a href="/w/index.php?title=Comodo_IceDragon&action=edit&redlink=1" class="new" title="Comodo IceDragon (la pagina non esiste)">IceDragon</a> · <a href="/wiki/K-Meleon" title="K-Meleon">K-Meleon</a> · <a href="/wiki/PirateBrowser" title="PirateBrowser">PirateBrowser</a> · <a href="/wiki/SeaMonkey" title="SeaMonkey">SeaMonkey</a> · <a href="/w/index.php?title=SlimBrowser&action=edit&redlink=1" class="new" title="SlimBrowser (la pagina non esiste)">SlimBrowser</a> · <a href="/w/index.php?title=TenFourFox&action=edit&redlink=1" class="new" title="TenFourFox (la pagina non esiste)">TenFourFox</a> · <a href="/wiki/Tor_Browser" class="mw-redirect" title="Tor Browser">Tor</a> · <a href="/wiki/Waterfox" title="Waterfox">Waterfox</a></td></tr><tr><th colspan="1" class="navbox_group">Basati su <a href="/wiki/WebKit" title="WebKit">WebKit</a></th><td colspan="1" class="navbox_list navbox_even"><a href="/wiki/Dolphin_Browser" title="Dolphin Browser">Dolphin</a> · <a href="/wiki/Dooble" title="Dooble">Dooble</a> · <a href="/wiki/Firefox_per_iOS" title="Firefox per iOS">Firefox per iOS</a> · <a href="/wiki/GNOME_Web" title="GNOME Web">GNOME Web</a> · <a href="/wiki/ICab" title="ICab">iCab</a> · <a href="/wiki/Konqueror" title="Konqueror">Konqueror</a> · <a href="/wiki/Midori_(browser)" title="Midori (browser)">Midori</a> · <a href="/wiki/Safari_(browser)" title="Safari (browser)">Safari</a> · <a href="/wiki/Surf_(browser)" title="Surf (browser)">surf</a> · <a href="/wiki/WebPositive" title="WebPositive">WebPositive</a></td></tr><tr><th colspan="1" class="navbox_group">Altro</th><td colspan="1" class="navbox_list navbox_odd" style="background:#f7f7f7"><a href="/w/index.php?title=360_Secure_Browser&action=edit&redlink=1" class="new" title="360 Secure Browser (la pagina non esiste)">360</a> · <a href="/wiki/Avant_Browser" title="Avant Browser">Avant</a> · <a href="/wiki/Basilisk_(browser)" title="Basilisk (browser)">Basilisk</a> · <a href="/w/index.php?title=Cake_Browser&action=edit&redlink=1" class="new" title="Cake Browser (la pagina non esiste)">Cake Browser</a> · <a href="/w/index.php?title=CM_Browser&action=edit&redlink=1" class="new" title="CM Browser (la pagina non esiste)">CM Browser</a> · <a href="/w/index.php?title=Eww_(web_browser)&action=edit&redlink=1" class="new" title="Eww (web browser) (la pagina non esiste)">eww</a> · <a href="/wiki/Links" title="Links">Links</a> · <a href="/wiki/Lunascape" title="Lunascape">Lunascape</a> · <a href="/wiki/Lynx_(software)" title="Lynx (software)">Lynx</a> · <a href="/w/index.php?title=NetFront&action=edit&redlink=1" class="new" title="NetFront (la pagina non esiste)">NetFront</a> · <a href="/wiki/NetSurf" title="NetSurf">NetSurf</a> · <a href="/wiki/Pale_Moon_(browser)" title="Pale Moon (browser)">Pale Moon</a> · <a href="/w/index.php?title=QQ_browser&action=edit&redlink=1" class="new" title="QQ browser (la pagina non esiste)">QQ browser</a> · <a href="/wiki/Qutebrowser" title="Qutebrowser">qutebrowser</a> · <a href="/wiki/W3m" title="W3m">w3m</a> · <a href="/w/index.php?title=WebbIE&action=edit&redlink=1" class="new" title="WebbIE (la pagina non esiste)">WebbIE</a></td></tr><tr><th colspan="2" class="navbox_group" style="font-size: 100%">Inattivi</th></tr><tr><th colspan="1" class="navbox_group">Basati su <a href="/wiki/Gecko" title="Gecko">Gecko</a></th><td colspan="1" class="navbox_list navbox_odd"><a href="/w/index.php?title=Beonex_Communicator&action=edit&redlink=1" class="new" title="Beonex Communicator (la pagina non esiste)">Beonex Communicator</a> · <a href="/wiki/Camino_(browser)" title="Camino (browser)">Camino</a> · <a href="/w/index.php?title=Classilla&action=edit&redlink=1" class="new" title="Classilla (la pagina non esiste)">Classilla</a> · <a href="/wiki/Conkeror" title="Conkeror">Conkeror</a> · <a href="/wiki/Galeon" title="Galeon">Galeon</a> · <a href="/w/index.php?title=Ghostzilla&action=edit&redlink=1" class="new" title="Ghostzilla (la pagina non esiste)">Ghostzilla</a> · <a href="/wiki/Kazehakase" title="Kazehakase">Kazehakase</a> · <a href="/w/index.php?title=Kylo_(browser)&action=edit&redlink=1" class="new" title="Kylo (browser) (la pagina non esiste)">Kylo</a> · <a href="/wiki/Lotus_Symphony" title="Lotus Symphony">Lotus</a> · <a href="/w/index.php?title=MicroB&action=edit&redlink=1" class="new" title="MicroB (la pagina non esiste)">MicroB</a> · <a href="/wiki/Minimo_(browser)" title="Minimo (browser)">Minimo</a> · <a href="/wiki/Mozilla_Application_Suite" title="Mozilla Application Suite">Mozilla suite</a> · <a href="/w/index.php?title=AT%26T_Pogo&action=edit&redlink=1" class="new" title="AT&T Pogo (la pagina non esiste)">Pogo</a> · <a href="/w/index.php?title=Kirix_Strata&action=edit&redlink=1" class="new" title="Kirix Strata (la pagina non esiste)">Strata</a> · <a href="/wiki/Swiftfox" title="Swiftfox">Swiftfox</a> · <a href="/wiki/Swiftweasel" title="Swiftweasel">Swiftweasel</a> · <a href="/w/index.php?title=Timberwolf_(web_browser)&action=edit&redlink=1" class="new" title="Timberwolf (web browser) (la pagina non esiste)">Timberwolf</a> · <a href="/w/index.php?title=XB_Browser&action=edit&redlink=1" class="new" title="XB Browser (la pagina non esiste)">xB</a></td></tr><tr><th colspan="1" class="navbox_group">Basati su <a href="/wiki/Trident_(motore_di_rendering)" title="Trident (motore di rendering)">Trident</a></th><td colspan="1" class="navbox_list navbox_even" style="background:#f7f7f7"><a href="/wiki/AOL_Explorer" title="AOL Explorer">AOL</a> · <a href="/w/index.php?title=Deepnet_Explorer&action=edit&redlink=1" class="new" title="Deepnet Explorer (la pagina non esiste)">Deepnet</a> · <a href="/wiki/GreenBrowser" title="GreenBrowser">GreenBrowser</a> · <a href="/wiki/Internet_Explorer" title="Internet Explorer">Internet Explorer</a> · <a href="/w/index.php?title=MediaBrowser&action=edit&redlink=1" class="new" title="MediaBrowser (la pagina non esiste)">MediaBrowser</a> · <a href="/w/index.php?title=MenuBox&action=edit&redlink=1" class="new" title="MenuBox (la pagina non esiste)">MenuBox</a> · <a href="/w/index.php?title=NeoPlanet&action=edit&redlink=1" class="new" title="NeoPlanet (la pagina non esiste)">NeoPlanet</a> · <a href="/wiki/NetCaptor" title="NetCaptor">NetCaptor</a> · <a href="/wiki/SpaceTime_3D" title="SpaceTime 3D">SpaceTime</a> · <a href="/w/index.php?title=UltraBrowser&action=edit&redlink=1" class="new" title="UltraBrowser (la pagina non esiste)">UltraBrowser</a> · <a href="/w/index.php?title=ZAC_Browser&action=edit&redlink=1" class="new" title="ZAC Browser (la pagina non esiste)">ZAC</a></td></tr><tr><th colspan="1" class="navbox_group">Basati su <a href="/wiki/WebKit" title="WebKit">WebKit</a></th><td colspan="1" class="navbox_list navbox_odd"><a href="/wiki/Arora" title="Arora">Arora</a> · <a href="/wiki/Bolt_(browser)" title="Bolt (browser)">BOLT</a> · <a href="/w/index.php?title=Opera_Coast&action=edit&redlink=1" class="new" title="Opera Coast (la pagina non esiste)">Opera Coast</a> · <a href="/wiki/Flock" title="Flock">Flock</a> · <a href="/w/index.php?title=Fluid_(browser)&action=edit&redlink=1" class="new" title="Fluid (browser) (la pagina non esiste)">Fluid</a> · <a href="/wiki/Google_TV_(sistema_operativo)" title="Google TV (sistema operativo)">Google TV</a> · <a href="/w/index.php?title=Iris_Browser&action=edit&redlink=1" class="new" title="Iris Browser (la pagina non esiste)">Iris</a> · <a href="/w/index.php?title=Mercury_Browser&action=edit&redlink=1" class="new" title="Mercury Browser (la pagina non esiste)">Mercury</a> · <a href="/wiki/OmniWeb" title="OmniWeb">OmniWeb</a> · <a href="/w/index.php?title=Origyn_Web_Browser&action=edit&redlink=1" class="new" title="Origyn Web Browser (la pagina non esiste)">Origyn</a> · <a href="/wiki/QtWeb" title="QtWeb">QtWeb</a> · <a href="/wiki/Rekonq" title="Rekonq">rekonq</a> · <a href="/wiki/RockMelt" title="RockMelt">RockMelt</a> · <a href="/wiki/Shiira" title="Shiira">Shiira</a> · <a href="/w/index.php?title=Steel_(browser)&action=edit&redlink=1" class="new" title="Steel (browser) (la pagina non esiste)">Steel</a> · <a href="/w/index.php?title=Nokia_Browser_for_Symbian&action=edit&redlink=1" class="new" title="Nokia Browser for Symbian (la pagina non esiste)">Browser for Symbian</a> · <a href="/w/index.php?title=Uzbl&action=edit&redlink=1" class="new" title="Uzbl (la pagina non esiste)">Uzbl</a> · <a href="/w/index.php?title=Xombrero&action=edit&redlink=1" class="new" title="Xombrero (la pagina non esiste)">xombrero</a></td></tr><tr><th colspan="1" class="navbox_group">Altro</th><td colspan="1" class="navbox_list navbox_even" style="background:#f7f7f7"><a href="/w/index.php?title=Abaco_(browser)&action=edit&redlink=1" class="new" title="Abaco (browser) (la pagina non esiste)">abaco</a> · <a href="/wiki/Amaya_(browser)" title="Amaya (browser)">Amaya</a> · <a href="/wiki/Arachne" title="Arachne">Arachne</a> · <a href="/w/index.php?title=Arena_(browser)&action=edit&redlink=1" class="new" title="Arena (browser) (la pagina non esiste)">Arena</a> · <a href="/w/index.php?title=Blazer_(browser)&action=edit&redlink=1" class="new" title="Blazer (browser) (la pagina non esiste)">Blazer</a> · <a href="/w/index.php?title=Charon_(browser)&action=edit&redlink=1" class="new" title="Charon (browser) (la pagina non esiste)">Charon</a> · <a href="/w/index.php?title=Microsoft_Live_Labs_Deepfish&action=edit&redlink=1" class="new" title="Microsoft Live Labs Deepfish (la pagina non esiste)">Deepfish</a> · <a href="/wiki/Dillo" title="Dillo">Dillo</a> · <a href="/wiki/ELinks" title="ELinks">ELinks</a> · <a href="/w/index.php?title=Gazelle_(browser)&action=edit&redlink=1" class="new" title="Gazelle (browser) (la pagina non esiste)">Gazelle</a> · <a href="/w/index.php?title=HotJava&action=edit&redlink=1" class="new" title="HotJava (la pagina non esiste)">HotJava</a> · <a href="/w/index.php?title=IBM_Home_Page_Reader&action=edit&redlink=1" class="new" title="IBM Home Page Reader (la pagina non esiste)">IBM Home Page Reader</a> · <a href="/w/index.php?title=IBM_WebExplorer&action=edit&redlink=1" class="new" title="IBM WebExplorer (la pagina non esiste)">IBM WebExplorer</a> · <a href="/w/index.php?title=IBrowse&action=edit&redlink=1" class="new" title="IBrowse (la pagina non esiste)">IBrowse</a> · <a href="/w/index.php?title=KidZui&action=edit&redlink=1" class="new" title="KidZui (la pagina non esiste)">KidZui</a> · <a href="/w/index.php?title=Line_Mode_Browser&action=edit&redlink=1" class="new" title="Line Mode Browser (la pagina non esiste)">Line Mode</a> · <a href="/wiki/Mosaic" title="Mosaic">Mosaic</a> · <a href="/wiki/MSN_TV" title="MSN TV">MSN TV</a> · <a href="/w/index.php?title=NetPositive&action=edit&redlink=1" class="new" title="NetPositive (la pagina non esiste)">NetPositive</a> · <a href="/wiki/Netscape_Navigator" title="Netscape Navigator">Netscape</a> · <a href="/w/index.php?title=Skweezer&action=edit&redlink=1" class="new" title="Skweezer (la pagina non esiste)">Skweezer</a> · <a href="/wiki/Skyfire_(software)" title="Skyfire (software)">Skyfire</a> · <a href="/w/index.php?title=Teashark&action=edit&redlink=1" class="new" title="Teashark (la pagina non esiste)">Teashark</a> · <a href="/w/index.php?title=ThunderHawk&action=edit&redlink=1" class="new" title="ThunderHawk (la pagina non esiste)">ThunderHawk</a> · <a href="/w/index.php?title=Vision_Mobile_Browser&action=edit&redlink=1" class="new" title="Vision Mobile Browser (la pagina non esiste)">Vision</a> · <a href="/w/index.php?title=WinWAP&action=edit&redlink=1" class="new" title="WinWAP (la pagina non esiste)">WinWAP</a> · <a href="/wiki/WorldWideWeb" title="WorldWideWeb">WorldWideWeb</a></td></tr><tr><th colspan="2" class="navbox_abovebelow"><a href="/wiki/Categoria:Browser" title="Categoria:Browser">Categoria</a>  · <a href="/wiki/Browser#Diffusione" title="Browser">Diffusione</a></th></tr></tbody></table> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r141815314"><table class="navbox mw-collapsible mw-collapsed noprint metadata" id="navbox-Linguaggi_foglio_di_stile"><tbody><tr><th colspan="2"><div class="navbox_navbar"><div class="noprint plainlinks" style="background-color:transparent; padding:0; font-size:xx-small; color:var(--color-base, #000000); white-space:nowrap;"><a href="/wiki/Template:Linguaggi_foglio_di_stile" title="Template:Linguaggi foglio di stile">V</a> · <a href="/wiki/Discussioni_template:Linguaggi_foglio_di_stile" title="Discussioni template:Linguaggi foglio di stile">D</a> · <a class="external text" href="https://it.wikipedia.org/w/index.php?title=Template:Linguaggi_foglio_di_stile&action=edit">M</a></div></div><a href="/w/index.php?title=Linguaggio_del_foglio_di_stile&action=edit&redlink=1" class="new" title="Linguaggio del foglio di stile (la pagina non esiste)">Linguaggi del foglio di stile</a></th></tr><tr><th colspan="1" class="navbox_group">Modi</th><td colspan="1" class="navbox_list navbox_odd"><a href="/w/index.php?title=Desktop_publishing_dei_fogli_di_stile&action=edit&redlink=1" class="new" title="Desktop publishing dei fogli di stile (la pagina non esiste)">Desktop publishing</a> · <a href="/w/index.php?title=Sviluppo_web_dei_fogli_di_stile&action=edit&redlink=1" class="new" title="Sviluppo web dei fogli di stile (la pagina non esiste)">Sviluppo web</a> · <a href="/w/index.php?title=Linguaggio_dei_fogli_di_stile_per_l%27interfaccia_utente&action=edit&redlink=1" class="new" title="Linguaggio dei fogli di stile per l'interfaccia utente (la pagina non esiste)">Interfaccia utente</a></td></tr><tr><th colspan="1" class="navbox_group">Standard</th><td colspan="1" class="navbox_list navbox_even"><a class="mw-selflink selflink">CSS</a> · <a href="/w/index.php?title=Document_Style_Semantics_and_Specification_Language&action=edit&redlink=1" class="new" title="Document Style Semantics and Specification Language (la pagina non esiste)">DSSSL</a> · <a href="/wiki/Extensible_Stylesheet_Language" title="Extensible Stylesheet Language">XSL</a></td></tr><tr><th colspan="1" class="navbox_group">Non-standard</th><td colspan="1" class="navbox_list navbox_odd"><a href="/w/index.php?title=JavaScript_Style_Sheets&action=edit&redlink=1" class="new" title="JavaScript Style Sheets (la pagina non esiste)">JSSS</a> · <a href="/w/index.php?title=Formatting_Output_Specification_Instance&action=edit&redlink=1" class="new" title="Formatting Output Specification Instance (la pagina non esiste)">FOSI</a> · <a href="/w/index.php?title=Fogli_di_stile_Qt&action=edit&redlink=1" class="new" title="Fogli di stile Qt (la pagina non esiste)">Fogli di stile Qt</a> · <a href="/wiki/Sass" title="Sass">Sass</a> · <a href="/wiki/LESS" title="LESS">LESS</a> · <a href="/w/index.php?title=SMIL_Timesheets&action=edit&redlink=1" class="new" title="SMIL Timesheets (la pagina non esiste)">SMIL Timesheets</a></td></tr><tr><th colspan="1" class="navbox_group">Voci correlate</th><td colspan="1" class="navbox_list navbox_even"><a href="/w/index.php?title=Comparazione_fra_i_linguaggi_del_foglio_di_stile&action=edit&redlink=1" class="new" title="Comparazione fra i linguaggi del foglio di stile (la pagina non esiste)">Comparazione</a> · <a href="/w/index.php?title=Linguaggi_del_foglio_di_stile&action=edit&redlink=1" class="new" title="Linguaggi del foglio di stile (la pagina non esiste)">Lista</a></td></tr></tbody></table> <style data-mw-deduplicate="TemplateStyles:r140554510">.mw-parser-output .CdA{border:1px solid #aaa;width:100%;margin:auto;font-size:90%;padding:2px}.mw-parser-output .CdA th{background-color:#f2f2f2;font-weight:bold;width:20%}@media screen{html.skin-theme-clientpref-night .mw-parser-output .CdA{border-color:#54595D}html.skin-theme-clientpref-night .mw-parser-output .CdA th{background-color:#202122}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .CdA{border-color:#54595D}html.skin-theme-clientpref-os .mw-parser-output .CdA th{background-color:#202122}}</style><table class="CdA"><tbody><tr><th><a href="/wiki/Aiuto:Controllo_di_autorit%C3%A0" title="Aiuto:Controllo di autorità">Controllo di autorità</a></th><td><a href="/wiki/Library_of_Congress_Control_Number" title="Library of Congress Control Number">LCCN</a> (<abbr title="inglese">EN</abbr>) <a rel="nofollow" class="external text" href="http://id.loc.gov/authorities/subjects/sh2001004461">sh2001004461</a> · <a href="/wiki/Gemeinsame_Normdatei" title="Gemeinsame Normdatei">GND</a> (<abbr title="tedesco">DE</abbr>) <a rel="nofollow" class="external text" href="https://d-nb.info/gnd/4467617-7">4467617-7</a> · <a href="/wiki/Biblioteca_nazionale_di_Spagna" title="Biblioteca nazionale di Spagna">BNE</a> (<abbr title="spagnolo">ES</abbr>) <a rel="nofollow" class="external text" href="http://catalogo.bne.es/uhtbin/authoritybrowse.cgi?action=display&authority_id=XX550325">XX550325</a> <a rel="nofollow" class="external text" href="http://datos.bne.es/resource/XX550325">(data)</a> · <a href="/wiki/Biblioteca_nazionale_di_Francia" title="Biblioteca nazionale di Francia">BNF</a> (<abbr title="francese">FR</abbr>) <a rel="nofollow" class="external text" href="https://catalogue.bnf.fr/ark:/12148/cb13739222f">cb13739222f</a> <a rel="nofollow" class="external text" href="https://data.bnf.fr/ark:/12148/cb13739222f">(data)</a> · <a href="/wiki/Biblioteca_nazionale_di_Israele" title="Biblioteca nazionale di Israele">J9U</a> (<abbr title="inglese">EN</abbr>, <abbr title="ebraico">HE</abbr>) <a rel="nofollow" class="external text" href="http://olduli.nli.org.il/F/?func=find-b&local_base=NLX10&find_code=UID&request=987007537193405171">987007537193405171</a></td></tr></tbody></table> <div class="noprint" style="width:100%; padding: 3px 0; display: flex; flex-wrap: wrap; row-gap: 4px; column-gap: 8px; box-sizing: border-box;"><div style="flex-grow: 1"><style data-mw-deduplicate="TemplateStyles:r140555418">.mw-parser-output .itwiki-template-occhiello{width:100%;line-height:25px;border:1px solid #CCF;background-color:#F0EEFF;box-sizing:border-box}.mw-parser-output .itwiki-template-occhiello-progetto{background-color:#FAFAFA}@media screen{html.skin-theme-clientpref-night .mw-parser-output .itwiki-template-occhiello{background-color:#202122;border-color:#54595D}html.skin-theme-clientpref-night .mw-parser-output .itwiki-template-occhiello-progetto{background-color:#282929}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .itwiki-template-occhiello{background-color:#202122;border-color:#54595D}html.skin-theme-clientpref-os .mw-parser-output .itwiki-template-occhiello-progetto{background-color:#282929}}</style><div class="itwiki-template-occhiello"><a href="/wiki/File:Applications-internet.svg" class="mw-file-description" title="Internet"><img alt=" " src="//upload.wikimedia.org/wikipedia/commons/thumb/7/70/Applications-internet.svg/25px-Applications-internet.svg.png" decoding="async" width="25" height="25" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/7/70/Applications-internet.svg/38px-Applications-internet.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/7/70/Applications-internet.svg/50px-Applications-internet.svg.png 2x" data-file-width="48" data-file-height="48" /></a> <a href="/wiki/Portale:Internet" title="Portale:Internet">Portale Internet</a>: accedi alle voci di Wikipedia che trattano di internet</div></div></div>    </div><noscript><img src="https://login.wikimedia.org/wiki/Special:CentralAutoLogin/start?type=1x1" alt="" width="1" height="1" style="border: none; position: absolute;"></noscript> <div class="printfooter" data-nosnippet="">Estratto da "<a dir="ltr" href="https://it.wikipedia.org/w/index.php?title=CSS&oldid=139301834">https://it.wikipedia.org/w/index.php?title=CSS&oldid=139301834</a>"</div></div> <div id="catlinks" class="catlinks" data-mw="interface"><div id="mw-normal-catlinks" class="mw-normal-catlinks"><a href="/wiki/Categoria:Categorie" title="Categoria:Categorie">Categoria</a>: <ul><li><a href="/wiki/Categoria:CSS" title="Categoria:CSS">CSS</a></li></ul></div><div id="mw-hidden-catlinks" class="mw-hidden-catlinks mw-hidden-cats-hidden">Categorie nascoste: <ul><li><a href="/wiki/Categoria:Informazioni_senza_fonte" title="Categoria:Informazioni senza fonte">Informazioni senza fonte</a></li><li><a href="/wiki/Categoria:P856_letta_da_Wikidata" title="Categoria:P856 letta da Wikidata">P856 letta da Wikidata</a></li><li><a href="/wiki/Categoria:P9775_letta_da_Wikidata" title="Categoria:P9775 letta da Wikidata">P9775 letta da Wikidata</a></li><li><a href="/wiki/Categoria:P1417_letta_da_Wikidata" title="Categoria:P1417 letta da Wikidata">P1417 letta da Wikidata</a></li><li><a href="/wiki/Categoria:P3847_letta_da_Wikidata" title="Categoria:P3847 letta da Wikidata">P3847 letta da Wikidata</a></li><li><a href="/wiki/Categoria:Voci_con_template_Collegamenti_esterni_e_qualificatori_sconosciuti" title="Categoria:Voci con template Collegamenti esterni e qualificatori sconosciuti">Voci con template Collegamenti esterni e qualificatori sconosciuti</a></li><li><a href="/wiki/Categoria:P1324_letta_da_Wikidata" title="Categoria:P1324 letta da Wikidata">P1324 letta da Wikidata</a></li><li><a href="/wiki/Categoria:Template_Webarchive_-_collegamenti_all%27Internet_Archive" title="Categoria:Template Webarchive - collegamenti all'Internet Archive">Template Webarchive - collegamenti all'Internet Archive</a></li><li><a href="/wiki/Categoria:Voci_con_codice_LCCN" title="Categoria:Voci con codice LCCN">Voci con codice LCCN</a></li><li><a href="/wiki/Categoria:Voci_con_codice_GND" title="Categoria:Voci con codice GND">Voci con codice GND</a></li><li><a href="/wiki/Categoria:Voci_con_codice_BNE" title="Categoria:Voci con codice BNE">Voci con codice BNE</a></li><li><a href="/wiki/Categoria:Voci_con_codice_BNF" title="Categoria:Voci con codice BNF">Voci con codice BNF</a></li><li><a href="/wiki/Categoria:Voci_con_codice_J9U" title="Categoria:Voci con codice J9U">Voci con codice J9U</a></li><li><a href="/wiki/Categoria:Voci_non_biografiche_con_codici_di_controllo_di_autorit%C3%A0" title="Categoria:Voci non biografiche con codici di controllo di autorità">Voci non biografiche con codici di controllo di autorità</a></li></ul></div></div> </div> </main> </div> <div class="mw-footer-container"> <footer id="footer" class="mw-footer" > <ul id="footer-info"> <li id="footer-info-lastmod"> Questa pagina è stata modificata per l'ultima volta il 15 mag 2024 alle 16:16.</li> <li id="footer-info-copyright">Il testo è disponibile secondo la <a rel="nofollow" class="external text" href="https://creativecommons.org/licenses/by-sa/4.0/deed.it">licenza Creative Commons Attribuzione-Condividi allo stesso modo</a>; possono applicarsi condizioni ulteriori. Vedi le <a class="external text" href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Terms_of_Use/it">condizioni d'uso</a> per i dettagli.</li> </ul> <ul id="footer-places"> <li id="footer-places-privacy"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Privacy_policy/it">Informativa sulla privacy</a></li> <li id="footer-places-about"><a href="/wiki/Wikipedia:Sala_stampa/Wikipedia">Informazioni su Wikipedia</a></li> <li id="footer-places-disclaimers"><a href="/wiki/Wikipedia:Avvertenze_generali">Avvertenze</a></li> <li id="footer-places-wm-codeofconduct"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Universal_Code_of_Conduct">Codice di condotta</a></li> <li id="footer-places-developers"><a href="https://developer.wikimedia.org">Sviluppatori</a></li> <li id="footer-places-statslink"><a href="https://stats.wikimedia.org/#/it.wikipedia.org">Statistiche</a></li> <li id="footer-places-cookiestatement"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Cookie_statement">Dichiarazione sui cookie</a></li> <li id="footer-places-mobileview"><a href="//it.m.wikipedia.org/w/index.php?title=CSS&mobileaction=toggle_view_mobile" class="noprint stopMobileRedirectToggle">Versione mobile</a></li> </ul> <ul id="footer-icons" class="noprint"> <li id="footer-copyrightico"><a href="https://wikimediafoundation.org/" class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled"><img src="/static/images/footer/wikimedia-button.svg" width="84" height="29" alt="Wikimedia Foundation" loading="lazy"></a></li> <li id="footer-poweredbyico"><a href="https://www.mediawiki.org/" class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled"><img src="/w/resources/assets/poweredby_mediawiki.svg" alt="Powered by MediaWiki" width="88" height="31" loading="lazy"></a></li> </ul> </footer> </div> </div> </div> <div class="vector-settings" id="p-dock-bottom"> <ul></ul> </div><script>(RLQ=window.RLQ||[]).push(function(){mw.config.set({"wgHostname":"mw-web.codfw.main-f69cdc8f6-lwkv4","wgBackendResponseTime":168,"wgPageParseReport":{"limitreport":{"cputime":"0.740","walltime":"0.942","ppvisitednodes":{"value":4684,"limit":1000000},"postexpandincludesize":{"value":98443,"limit":2097152},"templateargumentsize":{"value":2492,"limit":2097152},"expansiondepth":{"value":15,"limit":100},"expensivefunctioncount":{"value":46,"limit":500},"unstrip-depth":{"value":0,"limit":20},"unstrip-size":{"value":84321,"limit":5000000},"entityaccesscount":{"value":1,"limit":400},"timingprofile":["100.00% 718.002 1 -total"," 21.30% 152.963 1 Template:Collegamenti_esterni"," 16.16% 116.008 39 Template:Cita_web"," 10.40% 74.655 1 Template:Formato_file"," 10.03% 72.029 1 Template:Infobox"," 7.80% 56.030 2 Template:Navbox"," 7.72% 55.396 1 Template:Browser_Internet"," 7.08% 50.842 7 Template:Vedi_anche"," 6.55% 47.001 2 Template:Immagine_sinottico"," 5.72% 41.079 1 Template:Portale"]},"scribunto":{"limitreport-timeusage":{"value":"0.348","limit":"10.000"},"limitreport-memusage":{"value":6748059,"limit":52428800}},"cachereport":{"origin":"mw-web.codfw.main-66695f89d8-8htz6","timestamp":"20241119190747","ttl":2592000,"transientcontent":false}}});});</script> <script type="application/ld+json">{"@context":"https:\/\/schema.org","@type":"Article","name":"CSS","url":"https:\/\/it.wikipedia.org\/wiki\/CSS","sameAs":"http:\/\/www.wikidata.org\/entity\/Q46441","mainEntity":"http:\/\/www.wikidata.org\/entity\/Q46441","author":{"@type":"Organization","name":"Contributori ai progetti Wikimedia"},"publisher":{"@type":"Organization","name":"Wikimedia Foundation, Inc.","logo":{"@type":"ImageObject","url":"https:\/\/www.wikimedia.org\/static\/images\/wmf-hor-googpub.png"}},"datePublished":"2006-01-01T19:50:32Z","dateModified":"2024-05-15T15:16:34Z","headline":"linguaggio usato per definire la formattazione di documenti HTML, XHTML e XML"}</script> </body> </html>