Aiuto:CSS

Wikibooks, manuali e libri di testo liberi.

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[modifica]

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

Regole generali[modifica]

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:

  1. inserendo nel tag <head> della pagina in codice HTML un collegamento ad 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;
  2. inserendo, sempre all'interno dell'<head> tra gli specifici tag <style> e </style> le dichiarazioni css;
  3. 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 del caso (vedi Aiuto:HTML.

File CSS[modifica]

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[modifica]

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[modifica]

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[modifica]

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[modifica]

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
|}

Pagine correlate[modifica]