Corso HTML e CSS (Lezione 13): I selettori CSS

Impariamo a costruire un sito Web

Lezione 13: CSS: I selettori -Prima parte

 

I CSS sono stati definiti nel 1996  e la versione CSS2 risale al 1998; da allora, per molto tempo si è rimasti fedeli alle definizioni previste nelle prime stesure.
Solo nel 2007 si è giunti al rilascio dei nuovi CSS3 (attualmente è allo studio la versione 4). E’ quindi evidente che le novità introdotte fossero particolarmente rilevanti anche per lo sviluppo nel frattempo avuto dai nuovi browser. Così si è passati da 120 a 279 proprietà, anche se un discreto numero non è ancora supportata dalla totalità dei browsers. In particolare Microsoft Internet Explorer è sempre indietro di anni rispetto allo sviluppo che assicurano i browsers concorrenti.


Tutte le proprietà definite in CSS1 e CSS2 sono state incluse e restano valide per avere compatibilità col passato.

L’elenco completo delle proprietà incluse nell’ultima revisione CSS3 (anno 2012) lo potete trovare qui.

Essendo l’elenco completo, include anche tutte le proprietà non completamente supportate dai browsers attuali. Alcune in particolare non sono supportate da alcun browser e di conseguenza sono totalmente inutilizzabili al momento.

Come detto in più momenti una delle regole fondamentali, per la fruibilità di un sito web da una larga parte di pubblico, è disegnarlo in modo tale che tutti i browsers e la maggior parte delle versioni di tali browsers possano interpretare il codice correttamente. Come conseguenza di tale principio escluderemo dalla trattazione le proprietà (ma anche i selettori ed in generale tutti gli elementi HTML) che non siano supportati dai maggiori browsers.

Alla lezione 3 descrivendo i tag dell’<head> avevamo spiegato come il tag <link> fosse usato per richiamare i CSS ad esempio con la notazione:

<link rel=”stylesheet” type=”text/css” href=”IlMio.css” />
Ricordiamo inoltre come vanno scritte le regole di stile nel CSS:

Struttura proprietà CSS
Struttura proprietà CSS

 

 

I selettori sono gli elementi che vogliamo personalizzare con delle regole di stile, la proprietà, come dice la parola, è una caratteristica all quale assegneremo un valore. Ad esempio:

p { background:yellow; color:navy;}

assegna agli elementi <p> (i paragrafi del documento html) un colore di testo blu su sfondo giallo.

Vediamo ora tutti i tipi di selettori prima di affrontare con esempi tutta la materia CSS.

Tipo Selettore Proprietà
Classi .classe
ID #NomeId
Sel. universale *
Sel. di Tipo elemento html
elemento, elemento
Discendente elemento elemento
Sel. di un elemento Figlio elemento>elemento
Sel. di un elemento adiacente elemento+elemento
Sel. di attributo [attributo]
[attributo=valore]
[attributo~=valore]
[attributo|=valore]
[attributo^=valore]
[attributo$=valore]
[attributo*=valore]
Sel. di un elemento fratello elemento1~elemento2
Pseudo-classi :link
:visited
:active
:hover
:focus
:lang(language)
:first-of-type
:last-of-type
:only-of-type
:first-child
:only-child
:nth-child(n)
:nth-last-child(n)
:nth-of-type(n)
:nth-last-of-type(n)
:last-child
:root
:empty
:target
:enabled
:disabled
:checked
:not(selector)
::selection
Pseudo-elementi :first-letter
:first-line
:before
:after

 Classi

Le classi vengono utilizzate per specificare uno stile per un gruppo di elementi. Può essere attribuita a diversi elementi. Nel foglio CSS una classe viene indicata con un punto seguito immediatamente dal nome della classe.

Per esempio:

.intestazione
{

   font-family:Verdana, Geneva, sans-serif;

   font-size: 16px;

   font-style: italic;

   color: navy;

   font-weight:bold;

}

Questa dichiarazione abbastanza autoesplicativa, assegna le caratteristiche di font (tipo, grandezza del carattere, corsivo, colore e grassetto). Potrà essere associata ad un testo in qualunque parte del documento html sia necessario con la sintassi:

<p class=”intestazione”>…… </p>

 

  ID

Il selettore ID è usato per specificare uno stile per un singolo, unico elemento. Non può quindi essere associato a più elementi in una pagina. Nel foglio CSS questo selettore viene indicato con il segno #seguito dal nome dell’ID.

Ad esempio:

#Header {

   position: relative;

   margin:0 auto;

   width:800px;

   background-image:url(images/Header.jpg);

}

Con l’id Header identifichiamo per esempio la testata di una pagina html assegnandogli i parametri di posizionamento (questa è materia piuttosto ampia che sarà trattata in dettaglio più avanti) e indicando l’URL di un’immagine quale sfondo. Come detto, e come ovvio, nell’ambito della stessa pagina non può essere assegnato a più elementi.

La dichiarazione nella pagina html sarà:

<div id=”Header”>

</div>

Nella prossima lezione continueremo con l’esame dei selettori.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *