Wikibooks:Monobook.css: differenze tra le versioni

* Il foglio di stile in formato [[w:CSS|CSS]] che sostanzialmente definisce tutti gli aspetti visivi della pagina (caratteri, colori, dimensioni, margini, bordi, sfondi, ecc.). Quello di [[w:|Wikipedia]] si trova all'indirizzo http://it.wikipedia.org/skins/monobook/main.css (stile "monobook"), con alcune aggiunte per la versione italiana in [[MediaWiki:Monobook.css]].<br/>

Ogni '''elemento''' di una pagina HTML viene contrassegnato con dei cosiddetti ''"tag"''. Per esempio, un paragrafo di testo inizia con il ''tag'' <code>&lt;p&gt;</code> e finisce con <code>&lt;/p&gt;</code>. Nel [http://it.wikipedia.org/skins/monobook/main.css foglio di stile "monobook" di ''default''] si trovano le righe

margin: 0.4em 0em 0.5em 0em;

line-height: 1.5em;

dove la "p" (qui senza le parentesi angolari) segnala che le seguenti proprietà si riferiscono a tutti i paragrafi della relativa pagina. Tutte le proprietà di questo elemento sono racchiuse da parentesi graffe {}. Il valore (per esempio "1.5em") è separato dalla proprietà (per esempio "line-height", ovvero la distanza fra le righe) da un doppio punto ed è seguito da un punto e virgola.

 

Per differenziare l'aspetto degli elementi dello stesso tipo, si possono usare '''classi''' e '''''id''''' per assegnare diversi "nomi" agli elementi. Nel caso di Wikipedia, questi nomi vengono assegnati in automatico dal ''software''. Prendiamo un esempio dallo stile di default "monobook":

Con questo si ottiene che tutte le tabelle (elemento "table") con la classe "diff" (separata dal nome dell'elemento con un punto) abbiano lo sfondo bianco. (Nella pagina HTML, queste tabelle iniziano con il ''tag'' <code>&lt;table class="diff"&gt;</code>.) L'aspetto delle altre tabelle (senza la classe "diff") non viene influenzato da questo. La differenza fra classe e ''id'' ci interessa solo in quanto cambia minimamente la sintassi: il nome di una ''id'' viene separato dal nome dell'elemento da un cancelletto # anziché da un punto.

 

Se si vogliono assegnare proprietà a ''tutti'' gli elementi con una certa classe o ''id'', si lascia via il nome dell'elemento. Un esempio da "monobook":

color: red;

font-size: larger;

Qualsiasi elemento con la classe "error", che sia un paragrafo, un'intestazione o altro, appare così in caratteri rossi e un po' più grandi del normale.

 

Infine ci si può riferire anche solo agli elementi che si trovano all'interno di certi altri elementi:

In questo esempio vengono azzerati i margini dei paragrafi, ma ''solo'' di quelli che si trovano ''all'interno'' di un elemento con l'''id'' "toc". Questo non è da confondere con

che si riferisce ai paragrafi che hanno loro stessi l'''id'' "toc".

{{Vedi anche|CSS/Selettori}}

==Personalizzare l'aspetto di Wikibooks==

Inserendo un foglio di stile personale nella sottopagina "''nome utente''/monobook.css", si può modificare a piacimento l'aspetto di Wikibooks; ovviamente avrà effetto solo quando si è effettuato il ''login''. Il foglio di stile personale viene inserito dopo quello predefinito, consentendo così di sovrascrivere qualsiasi proprietà assegnata di ''default''. Per esempio, per impostare dei caratteri più grandi si può inserire la riga

nel foglio di stile personale.

 

* <code>.ns-15</code>: Discussioni categoria

Se volessimo impostare dei caratteri più grandi solo per le pagine nel ''namespace'' principale, potremmo mettere

o più semplicemente

Ricordandoci di quanto detto nell'introduzione possiamo anche modificare l'aspetto dei paragrafi nel ''namespace'' principale, lasciandolo immutato negli altri:

Se invece volessimo applicare questo stile a tutti i ''namespace'', basterebbe omettere la classe "ns-0":

===Le parti della pagina===

 

Se quindi si mette

si aumenta la dimensione dei caratteri di tutta la pagina del 50%. Invece

aumenta la dimensione dei caratteri del contenuto, lasciando immutati i link di navigazione.

 

Provando l'ultimo esempio si nota una delle varie difficoltà che si incontrano modificando i fogli di stile: le dimensioni di alcune parti della pagina possono dipendere dalle dimensioni dei caratteri, per cui cambiando le dimensioni dei caratteri può succedere di scombinare l'aspetto di tutta la pagina. Un'altra difficoltà sta nel capire la precedenza delle definizioni. Per esempio,

''non'' fa apparire il testo della pagina in verde, perché c'è un'altra definizione in [[MediaWiki:Monobook.css]] che ha la precedenza. Una soluzione (di diverse possibili) per cambiare il colore del testo e delle intestazioni è

 

==Esempi di personalizzazioni==

 

{{cassetto|titolo=Codice|testo=

/* Style pour les pages de discussion ; gestion de la coloration indentative */

.ns-1 dd, .ns-3 dd, .ns-5 dd, .ns-7 dd, .ns-9 dd,

.ns-105 dl dl dl dl dl dl dl dl dl dl

{ background-color: #FFFFEE; }

}}