I selettori determinano in che modo gli stili CSS vengono assegnati agli elementi HTML. In una corrispondente definizione si indica innanzitutto il nome dell'elemento a cui il selettore deve accedere. La dichiarazione effettiva avviene quindi tra parentesi graffe. All'interno di una dichiarazione possono essere specificate una o più proprietà. Quindi, la sintassi generale è la seguente:
Selettore {
Proprietà1: Valore;
Proprietà2: Valore;
Proprietà3: Valore;
}Una definizione corrispondente vi è già stata presentata nel tutorial precedente.
h1 {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
Assicuratevi sempre di terminare ogni dichiarazione con un punto e virgola.
Uno sguardo ai selettori disponibili
In realtà, CSS offre un numero piuttosto grande di selettori, dei quali vi presenterò i più importanti. Perché è chiaro: solo chi domina il lavoro con i selettori può definire correttamente le proprietà CSS.
Il modo più semplice per assegnare stili all'interno di un documento HTML è fornito dal selettore dell'elemento.
Con la seguente sintassi, a tutti gli elementi p viene attribuito il colore nero.
p {
color: #009966;
}
Se volete assegnare lo stesso stile a più elementi, è possibile farlo anche.
In questo caso, si elencano semplicemente gli elementi interessati uno dopo l'altro, separati da una virgola.
p, h1, li {
color: #000;
}
Potete anche assegnare più stili agli elementi. In questo caso, gli stili sono separati da un punto e virgola.
p {
color: #000;
background-color: red;
}
È possibile anche combinare le varianti menzionate.
p, h1, li {
color: #009966;
background-color: red;
}
Il risultato potrebbe essere simile a questo:
Aree con più elementi
Spesso è necessario formattare un'area composta da più elementi HTML. Per tali casi, in HTML esistono due elementi speciali: span e div. Questi elementi vi si presenteranno - tra l'altro anche in questa serie - ancora e ancora.
Un esempio:
<div class="artikel"> <h1>Esplosione di colori</h1> <p class="thema">Un tutorial per la creazione di un'esplosione di colori da <span class="autor">MarkusMelzer</span>.</p> </div>
La sola differenza tra div e span è che l'elemento div forza una nuova riga nel flusso di testo. span, invece, non genera una nuova riga. Nell'esempio mostrato viene definita un'area div in cui è contenuto un'intestazione e un paragrafo di testo. All'interno del paragrafo di testo, a sua volta, c'è un'area span.
Selettori di ID e classe
Fino ad ora sono stati utilizzati i selettori di elemento. Con il seguente esempio, infatti, vengono formattati tutti gli h1 di elemento.
h1 {
color: #000;
background-color: red;
}
Ma questo non è sempre desiderabile. Cosa succede, ad esempio, se volete assegnare determinate proprietà solo a uno o solo a alcuni, ma non a tutti gli h1? Per tali casi, CSS offre due possibilità, ossia i selettori di classe e di ID.
Con i selettori di classe è possibile selezionare in modo mirato gli elementi HTML con attributi di classe. Nell'elemento HTML interessato deve essere specificato l'attributo class. Le definizioni di classe iniziano con un punto.
Un esempio:
.rosso {
color: red;
}
In questo caso è stata definita la classe rosso. Per aggiungere le proprietà di colore rosso a un elemento HTML, si inserisce class seguito dal nome della classe.
<p class="rosso">PSD-Tutorials.de</p>
Il selettore di ID può essere utilizzato in modo simile. Si riconosce il selettore di ID da un cancelletto.
#topnavi {
color: blue;
};In questo esempio è stato definito l'ID topnavi. Ma attenzione: Un ID può effettivamente essere assegnato solo una volta all'interno di un documento. L'accesso a una proprietà ID definita appare quindi come segue:
<div id="topnavi">Qui si trova la navigazione</div>
L'attributo id assegna il nome ID. Fate attenzione che non si debba scrivere il cancelletto.
Le informazioni mostrate possono anche essere combinate tra loro. Ad esempio, è possibile assegnare più classi a un elemento HTML.
<p class="rosso grande">PSD-Tutorials.de</p>
In questo esempio, ai paragrafi di testo vengono assegnate le due classi rosso e grande. Se si desidera specificare una classe e un ID, l'aspetto sarebbe il seguente:
<p class="rosso" id="navi">PSD-Tutorials.de</p>
Allo stesso modo è possibile combinare elementi e ID. Ecco un altro esempio:
div.navi {
color: blu;
}
Questa sintassi si applicherebbe esclusivamente agli elementi div con la classe navi. Gli elementi p che hanno anche la classe navi rimarrebbero intatti.
In CSS esiste un altro modo di combinare i selettori. Date un'occhiata alla seguente sintassi:
h1 {
color: rosso;
}
em {
color: blu;
}
A tutte le intestazioni di primo livello viene assegnato il colore Rosso. Gli elementi em invece ricevono il colore Blu.
Unendo le due istruzioni, è possibile garantire che solo gli elementi em siano colorati di blu, se si trovano all'interno di elementi h1.
h1 em {
color: blu;
};
I nomi degli elementi vengono scritti separati senza virgole.
Questa è, tra l'altro, una trappola comune in cui cadono anche i principianti di CSS. Ecco la stessa sintassi, ma in cui è stata aggiunta una virgola:
h1, em {
color: blu;
}
Cosa significa questa sintassi? Vengono interessati tutti gli elementi h1 e tutti gli elementi em. Questo è quindi molto diverso dalla sintassi senza virgola!
Un altro selettore importante è il selettore universale. Questo consente di selezionare qualsiasi elemento. Questo selettore è definito da un asterisco.
* {
color: rosso;
}
Con questa sintassi, tutti gli elementi verrebbero colorati di rosso. Anche con questo selettore, ci sono alcune particolarità della sintassi da considerare.
#mainnavi * {
color: rosso;
}
In questo esempio, il colore del primo piano di tutti gli elementi all'interno dell'elemento con ID mainnavi viene impostato su rosso. Tuttavia, ciò non vale per l'elemento stesso.
Se il selettore universale venisse posizionato all'inizio di una dichiarazione, in realtà non sarebbe necessario scriverlo. Quindi, qualcosa del genere sarebbe superfluo:
* p {
color: rosso;
}
Questa sintassi è equivalente a quanto segue:
p {
color: rosso;
}
Nel prossimo tutorial, scoprirete altri selettori.
