CSS - Selettori e Regole

google-plus Scritto da . Postato in Joomla!

Selettori

Fondamentalmente una regola CSS viene applicata ad un selettore, ovvero una semplice dichiarazione che serve a selezionare la parte o le parti di un documento soggette ad una specifica regola.

Com'è fatta una regola

regola css

Essa è composta da due blocchi principali:

1 - il selettore
2 - il blocco delle dichiarazioni

Il selettore serve a definire la parte del documento cui verrà applicata la regola.

Il blocco delle dichiarazioni è delimitato da due parentesi graffe. Al suo interno possono trovare posto più dichiarazioni. Esse sono sempre composte da una coppia:

1 - proprietà
2 - valore

Proprietà e valore devono essere separati dai due punti.

I selettori id e class

In (X)HTML esistono due attributi fondamentali applicabili a tutti gli elementi: sono class e id.
In questa pagina abbiamo assegnato al paragrafo un attributo class="testoblu":

<p class="testoblu">....</p>

Il valore dell'attributo Class deve trovare una corrispondenza in un foglio di stile.
Qui si è definito un CSS incorporato creando un selettore di tipo Class e assegnado ad esso il nome testoblu:

<style type="text/css">
.testoblu {
font: 12px arial, Helvetica, sans-serif;
color: #0000FF;
}
</style>

Il paragrafo sarà dunque formattato come testo di colore blu, carattere arial, dimensione 12px.

Lo stesso meccanismo è valido per i selettori di tipo ID:

<p id="testoblu">....</p>
<style type="text/css">
#testoblu {
font: 12px arial, Helvetica, sans-serif;
color: #0000FF;
}
</style>

Tuttavia vi è una differenza fondamentale: L'attributo id identifica un unico elemento. Assegnando ad un paragrafo l'id "testoblu" dichiarato nel CSS, si trasformerà solo quello specifico paragrafo. Una singola classe, al contrario, può essere assegnata a più elementi, anche dello stesso tipo.

In un documento potrò avere senza problemi questa situazione:

<p class="testoblu">....</p>
<div class="testoblu">....</div>
<table class="testoblu">...</table>
<p class="testoblu">....</p>
...

La classe .testoblu presente nel CSS formatterà allo stesso modo il testo del paragrafo, del div e della tabella.

Ma non questa:

<div id="testoblu">...</div>

Concludendo: una classe consente di superare le limitazioni intrinseche nell'uso di un selettore di elementi. Scrivendo due classi, una per il blu e una per il rosso, le applico di volta in volta secondo la necessità.
Se uno stile va applicato ad un solo elemento usate un ID. Se invece prevedete di usarlo su più elementi definite nel CSS una classe.

classe

Per definire una classe si usa far precedere il nome da un semplice punto:

.nome_della_classe

Questa è la sintassi di base. Un selettore classe così definito può essere applicato a tutti gli elementi di un documento (X)HTML.

Esiste un secondo tipo di sintassi:

<elemento>.nome_della_classe

Esso è più restrittivo rispetto alla sintassi generica. Se infatti definiamo questa regola:

p.testorosso {color: red;}

lo stile verrà applicato solo ai paragrafi che presentino l'attributo class="testorosso".
Il secondo tipo di sintassi va usato se si applica una classe ad uno specifico tipo di elemento (solo paragrafi o solo div...).
Se invece ritenete di doverla applicare a elementi diversi usate la sintassi generica.

Una terza possibile modalità è quella che prevede la dichiarazione di classi multiple:

p.testorosso.grassetto {color:red; font-weight:bold;}

Questa regola applicherà gli stili impostati a tutti gli elementi in cui siano presenti (in qualunque ordine) i nomi delle classi definiti nel selettore. Avranno dunque il testo rosso e in grassetto questi paragrafi:

<p class="grassetto testorosso maiuscolo">Daniele Gagliardi</p>
<p class="testorosso grassetto">Riva del Garda</p>

ma non questo, perchè solo uno dei nomi è presente come valore di class:

<p class="grassetto">Daniele Gagliardi</p>

id

La sintassi consiste nel far precedere il nome del selettore ID dal simbolo di cancelletto #:

#nome_id

Con questa regola:

#titolo {color: blue;}

Assegniamo il colore blue all'elemento che presenti questa definizione:

<h1 id="titolo">Daniele Gagliardi</h1>

Se hai gradito l'articolo, condividilo, basta un click!

Aggiungi commento


Codice di sicurezza
Aggiorna

  • logo prontopro
  • logo boutique serramento
  • koilab japan and tropical fish farm
  • Trasloco economico - gruppo Arco Traslochi
  • logo flash pulizie
  • logo revolution
  • logo planetkoi small
  • logo finiture
  • ick logo template
  • montaggio mobili trento

Realizzato da: Daniele Gagliardi
Viale Monache 3 - 38062 Arco - TN
- Contattami -

Per essere più facile ed intuitivo, il blog fa uso dei cookie, piccole porzioni di dati che consentono di capire come gli utenti navighino e ne visualizzino le pagine. I cookie non registrano alcuna informazione personale sull'utente ed eventuali dati identificabili non verranno memorizzati.