La sintassi degli stili (CSS)

Definizione di uno stile

La definizione di uno stile avviene secondo delle regole in testo semplice che permettono di descrivere l'aspetto degli elementi della pagina. Una regola CSS è caratterizzata da due elementi principali :

Un selezionatore di tag, che permette di precisare a quale tag del documento si deve applicare lo stile ;
Una dichiarazione di stile, definita accoppiamento, che permette di precisare lo stile da applicare al tag selezionato. La dichiarazione è essa stessa constituita :
- da una o più proprietà, seguita dal carattere « : » (due punti),
- da uno o più valori Associati ad ogni proprietà, messi fra virgolette si si tratta di più parole o separate da virgole se ve ne sono diversi, seguiti da un punto e virgola.

La sintassi è quindi la seguente :

$Syntaxe d\'une regle CSS$

La sintassi seguente definisce ad esempio lo stile da applicare ai collegamenti ipertestuali (tag <A>), cioè un carattere Verdana di dimensione 18 pixel, in grassetto e di colore giallo :

A  {
					  font-family: Verdana;
					  font-size: 18px;
					  font-style: bold;
					  color: yellow
					  }

I selezionatori di tag

Si dicono « selezionatore di balise » (o « selezionatore di elementi ») la o le parole chiave che precedono all' abbraccio e servono ad indicare la o i tag del documento alle quali si applica lo stile tra gli accoppiamenti

Per definire lo stile di un tag HTML specifica, basta mettere il nome deltag (senza i caratteri < e >. Ad esempio :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
	<HEAD>
		<STYLE type="text/css">
		<!--

tag {proprietà}
		-->
		</STYLE>
	</HEAD>
<BODY>

<balise> ... </balise>

...
</BODY>
</HTML>

Sélecteur multiple

E' anche possibile applicare lo stile a più tag separandone il nome con una virgola (,). La sintassi di un simile selezionatore, detto selezionatore multiplo, è la seguente :

selezionatore-di-balise1, selezionatore-di-balise2  { /* style */  }

Selezionatore universale

Grazie al selezionatore universale (« * ») è possibile definire uno stile che si applica a tutti gli elementi HTML. La sintassi del selezionatore universale è la seguente :

*  { /* style */  }

Il selezionatore universale è poco implementato nei navigatori!

Selezionatore di elementi concatenati

E' possibile selezionare un tag in un contesto dato, cioè in funzione degli elementi che la circondano, grazie ai selezionatori Selezionatori contestuali.

Esistono differenti tipi di selezionatori contestuali :

Il Selezionatore di elementi concatenati permette di creare una regole che si applica solo quando un elemento Y è concatenato ad un elemento X. La sua sintassi è la seguente :
```
selezionatore_X selezionatore_Y { /* style; */ }
```
Sia dato il seguente codice HTML :
```
 Attenzione , questo è un avvertimento 
 Si prega di tenerne conto 
```
La regola seguente seleziona solo la parola « avvertimento » (la sola circondata da tag , esse stesse concatenati con un tag ) :
```
P B { font-weight: bold; color: red; } 
```
Il selezionatore di elementi consecutivi permette di creare una regola che si applica solo quando un elemento Y segue immediatamente un elemento X. La sua sintassi è la seguente :
```
selezionatore_X +selezionatore_Y { /* style; */ }
```
Sia dato il seguente codice HTML :
```
 Attenzione , questo è un avvertimento 
 Si prega di tenerne conto 
```
La regola seguente seleziona solo la parola « avvertimento » (la sola circondata da tag , esse stesse concatenati con untag ) :
```
I + B { font-weight: bold; color: red; } 
```
Il selezionatore di elementi padre-figlio permette di creare una regola che si applica solo quando un elemento Y è prodotto diretto di un elemento X. La regola non si applica se Y è incapsula in una o più tag intermedie. La sua sintassi è la seguente :
```
selezionatore_X > selezionatore_Y { /* style; */ }
```
Sia dato il seguente codice HTML :
```
 Attenzione , questo è un avvertimento 
 Si prega di tenerne conto 
```
La regola seguente seleziona solo l'elemento «  Attenzione  » (il solo fra tag , esse stesse direttamente concatenati in un tag ) :
```
P > B { font-weight: bold; color: red; } 
```

Le proprietà di stile

I commenti

E' possibile (e consigliato) di documentare i propri fogli di stile incorporandovi dei commenti che danno delle informazioni addizionali (ragioni della scelta di questo o quello stile, tipo di documento al quale si applica, contesto,…). I commenti CSS sono delimitati dalle sigle /* e */ :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
	<HEAD>
		<STYLE type="text/css">
		<!--
/* Questo è un commento*/
tagA {proprietà}
tagB {proprietà}
tagC {proprietà}
		-->
		</STYLE>
	</HEAD>
<BODY>
...
</BODY>
</HTML>

E' possibile applicare uno stile « in linea » a tutte i tag HTML, ad eccezione dei tag seguenti :BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE

Ultime modificazione ilvenerdì 6 febbraio 2009 alle 16:51:57.

Precedente Fogli di stile

Seguente Installazione dei CSS

Migliori risposte per « La sintassi degli stili (CSS) » in :

Le classi di stile (CSS) Vedi Le classi e gli ID Le classi Può risultare interessante attribuire degli stili differenti agi stessi tag. Per questo le specificazioni CSS hanno introdotto il concetto di classe.La definizione di classi è tanto semplice che quella di stile. Essa...

Dichiarazione di un foglio di stile (CSS) Vedi Dichiarazione di un foglio di stile I fogli di stile sono un sovra-insieme del linguaggio HTML, il che significa che non sono integrati direttamente nelle raccomandazioni HTML del W3C. E' quindi necessario completare il codice HTML con degli...

Le unità nei fogli di stile (CSS) Vedi I contenuti I tag DIV definiscono dei blocchi d'elementi. Si tratta di una struttura privilegiata per definire delle caselle come quelle dei menu o degli inserti.Lo standard CSS propone un certo numero di proprietà che permettono di controllare...

Modificare il file hosts VediPERCHÈ modificare il file Hosts ? COME modificare il file Hosts ? Dove si trova il file Hosts originale? Che cosa contiene? Metodo di modifica Ripristinare il file Hosts al suo stato originale PERCHÈ modificare il file Hosts ? Il file...

Download PSPad VediPSPad è un ottimo editor di testo. È utile per lavorare non solo su testo, ma anche HTML, CSS, Javascript, PHP o altri linguaggi di programmazione (C + +, Java, Python ...). Le caratteristiche sono impressionanti: Sintassi (compresa la...

Posizionare degli elementi con CSS Vedi

Fogli di stile - CSS VediPresentazione dei fogli di stile Il concetto di fogli di stile è apparso nel 1996 con la pubblicazione da parte del W3C di una nuova raccomandazione intitolata « Cascading StyleSheets » (fogli di stile in cascata), sigla CSS.Il principio dei fogli...

CSS - I colori VediI colori Lo standard CSS propone differenti modi per definire i colori : per nome con la regola esadecimale con la regola decimale Definizione di un colore per nome Il linguaggio HTML definisce i nomi per un numero limitato di colori (ctr colori...