La seconda parte della guida sulle regole dei CSS

le regole css

 

Continua la mini guida sulle regole dei CSS.

Identificatori.

Gli identificatori servono a selezionare un elemento unico della pagina. Per associare un elemento a un identificatore e’ sufficiente specificarne il nome attraverso l’attributi ID:

<div id="intestazione">

<h1>Titolo</h1>

<p>Testo</p>

</div>

<div id="corpo">

.......

</div>

Il selettore CSS corrispondente si realizza riportando il valore assegnato all’attributo ID, preceduto da un cancelletto (#):

#intestazione{...}

#corpo{...}

Bisogna ricordarsi che in ogni documento Html non possono esistere due elementi col medesimo valore per l’attributo ID.

L’identificatore puoì essere anche associato ad un specifico tipo di elemento e a piu’ classi, ovvero si possono combinare classi e identificatori.

HTML

<div id="intestazione">

<div id="corpo" class="areaTesto">...</div>

CSS

div#intestazione{...}

div#corpo.areaTesto{...}

Selettori di attributo.

Non molto utilizzati, ma veramente utili, i selettori di attributo permettono di individuare un elemento in base ai suoi attributi e al valore ad essi assegnato.

  • elm[att] verifica se l’attributo att dell’elemento elm e’ stato impostato
  • elm[att=val] verifica se l’attributo att dell’elemento elm assume esattamente il valore val

Pseudo-classi.

Le pseudo-classi creano delle distinzioni nei diversi stati di uno stesso elemento.

Le solo pseudo-classi supportate dai browser piu’ diffusi sono:

  • a:link identifica un link ancora non visitato
  • a:visited identifica un link gia’ visitato
  • a:hover identifica un link sopra il quale e’ posizionato il mouse
  • a:focus identifica un link che abbia ricevuto il focus
  • a:active identifica un link durante l’attivazione da parte dell’utente

Pseudo-elementi.

Gli pseudo-elementi selezionano una sotto parte di un dato elemento.

Esempio:

HTML

<p>I Web Designer e' un bel blog</p>

CSS

p:first-letter{

font-size:50px;

}

p:first-line{

font-style:italic;

}

Ecco il risultato di quanto illustrato:

esempio_selettori_css

Scritto da Magoo

Magoo

Web Developer & Mobile Developer, Game Lover insomma un Nerd.
Co-founder Iwebdesigner.it, Nerdzhouse SRL.
Prendo a schiaffi la tastiera fino a quando non succede qualcosa di buono.

COMMENTA

Loading Disqus Comments ...
Loading Facebook Comments ...

Lascia un commento

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