Aiuto:CSS

Formattare il wikitesto

Immagini · Wikilink e Interlink · Tabelle · Note · Formule matematiche · File multimediali e suoni · Quiz

HTML · CSS · Caratteri speciali e Unicode · Variabili · Funzioni di parsing · Inputbox

Il software MediaWiki permette di utilizzare il linguaggio per particolari esigenze grafiche o di formattazione. Per esempio, può essere utilizzato per tabulare i dati nei casi in cui non è strettamente necessario utilizzare una tabella, in modo da migliorarne l'accessibilità.

MediaWiki supporta gran parte delle specifiche CSS, con alcune eccezioni, come l'attributo url().

Tutorial

Questa pagina d'aiuto fornisce solo qualche informazione generale sui fogli di stile. Per approfondire vedi

(EN) Progetto CSS sul sito del W3C
(EN) Tutorial ufficiale a cura del W3C

Regole generali

Il CSS (sigla di Cascading Style Sheets, in italiano "fogli di stile a cascata") è un linguaggio usato per definire la formattazione di documenti HTML, XHTML e XML, come ad esempio i siti web e relative pagine web. Le regole per comporre il CSS sono contenute in un insieme di raccomandazioni emanate dal W3C a partire dal 1996.

In generale, esistono tre modi diversi per inserire codice CSS nelle pagine web:

inserendo nel tag <head> della pagina in codice HTML un collegamento a un foglio di stile esterno, cioè un file contrassegnato dall'estensione .css, tramite il tag <link> o tramite la direttiva import, che può essere utilizzata anche negli stessi file .css per collegare più file tra loro;
inserendo, sempre all'interno dell'<head> tra gli specifici tag <style> e </style> le dichiarazioni css;
in linea, cioè all'interno degli elementi, utilizzando l'attributo style.

La prima soluzione consente di utilizzare le stesse specifiche CSS per più pagine, la seconda solo nelle pagine in cui il codice è stato inserito, e la terza solo negli elementi che lo contengono. Su Wikibooks i fogli di stile del primo tipo si trovano nel namespace MediaWiki: e possono essere modificati solo dagli amministratori dell'interfaccia. Gli altri utenti, per particolari esigenze di layout, possono utilizzare i CSS in linea, magari inseriti in tag <div> oppure <span>, a seconda dei casi (vedi Aiuto:HTML). Per singoli template, inoltre, è possibile raccogliere tutte le specifiche CSS in una sottopagina attraverso l'estensione TemplateStyles (vedi oltre).

File CSS

Se stiamo raccogliendo tutte le specifiche grafiche in una pagina apposita con estensione .css, il codice sarà strutturato sotto forma di una o più regole, cioè istruzioni del tipo proprietà : valore che vengono applicate dal browser in fase di rendering agli elementi HTML interessati, che sono stati opportunamente specificati tramite un selettore. Il tutto è strutturato secondo il seguente schema sintattico (gli spazi e le interruzioni di linea sono facoltativi, ma rendono il codice più leggibile a uno sviluppatore):

selettore {
  proprietà1: valore1;
  proprietà2: valore2 valore3;
}

Per primo viene indicato il selettore, senza parentesi uncinate (per esempio a, div...). Tra parentesi graffe { } vengono inserite le specifiche css, separate da un punto e virgola ;. Se come selettore si specifica a, le specifiche indicate verranno applicate a tutti i tag <a> indistintamente.

È possibile applicare applicare le stesse specifiche a più selettori. In questo caso, i selettori saranno separati da una virgola, come nell'esempio qui sotto:

selettore1, selettore2 {
  proprietà1: valore1;
  proprietà2: valore2;
}

Uso delle classi

Le classi applicano la regola a tutti gli elementi della pagina che presentano la proprietà class="nomeclasse". Nel file CSS si scriverà quindi anzitutto il selettore classe:

.nomeclasse {
  proprietà1: valore1;
  proprietà2: valore2;
}

Una classe può avere un nome qualsiasi, purché sia univoco. Nella definizione, il nome deve inoltre essere preceduto da un punto fermo (.nomeclasse).

Per assegnare un elemento, per esempio un <div>, a una classe bisognerà scrivere:

<div class="nomeclasse">
...
</div>

Templatestyles: CSS per i template

Per approfondire, vedi Aiuto:Template.

Per i template, è possibile raccogliere tutte le specifiche CSS in una sottopagina con estensione .css, come per esempio Template:Nome del template/style.css. Per richiamare questi stili, nella pagina del template, alla prima riga bisognerà scrivere:

<templatestyles src="Nome del template/styles.css" />

Stile utente

Per approfondire, vedi Aiuto:Stile utente.

L'utente può modificare font, colori, posizione dei link sui lati e molte altre caratteristiche, modificando un CSS che si trova tra le sottopagine della sua pagina utente.

CSS nel wikitesto

Gli stili CSS possono anche essere utilizzati direttamente negli elementi HTML (vedi anche Aiuto:HTML), usando l'attributo style. Per esempio, un <div> con un bordo verde e allineato al bordo destro verrebbe creato con il codice:

<div style="float:right; border:thin solid green;">
Questo è un piccolo paragrafo<br />
contenuto in un elemento "div"<br />
allineato a destra.
</div>

Questo è un piccolo paragrafo
contenuto in un elemento "div"
allineato a destra.

Questo codice produce il riquadri qui a destra.

Alcuni elementi del wikitesto consentono di inserire lo stile CSS direttamente in essi. Un esempio sono le tabelle, su cui si può utilizzare questa sintassi:

{| style="your style here"
|-
|your table stuff
|}