Progettazione di pagine web. Pseudo classi.

Pseudo classi

Proprietà	Descrizione
:active	Aggiunge uno stile a un elemento attivato
:after	Aggiunge una stringa dopo un elemento
:before	Aggiunge una stringa prima di un elemento
:first-child	Aggiunge uno stile a un elemento che è che è il primo figlio di un altro elemento
:first-letter	Aggiunge uno stile al primo carattere di un testo
:first-line	Aggiunge uno stile alla prima linea di un testo
:focus	Aggiunge uno stile all'elemento che sta per acquisire un input da tastiera
:hover	Aggiunge uno stile all'elemento quando il puntatore del mouse si trova sopra di esso
:lang	Aggiunge uno stile ad un elemento che ha l'attributo lang
:link	Aggiunge lo stile ad un link non visitato
:visited	Aggiunge lo stile ad un link visitato

Menu a Schede

nel documento HTML si inserisca un semplice collegamento ipertestuale ad un segnalibro contenuto nella stessa pagina:

    <a href="#sport">sport</a>

    

Per conferire al link l'aspetto di una linguetta di una rubrica lo si collochi in una div:

    <div id="menu"><a href="#sport">sport</a></div>
    

Le proprietà di un tag <a> contenuto in un elemento il cui ID="menu" sono descritte dal seguente stile:

    
    #menu a {
      color: #000;
      background: #8FBC8F;
      text-decoration: none
    }

    

Le proprietà di stile applicate al tag a contenuto in un elemento menu producono il seguente effetto:

---

Disegnare una piccola immagine che rappresenti la parte sinistra della linguetta

Il colore di sfondo di questa immagine può essere impostato assegnando i seguenti valori alle componenti: Rosso=143, Verde=188, Blu=143

Adesso lo stile richiede che venga specificata l'immagine di sfondo:

    
    #menu a {
      color: #000;
      background: #8FBC8F url(bordoSx.png) left top no-repeat;
      text-decoration: none
    }
    
    

Questa regola CSS assegna il colore bianco al testo, il colore di sfondo e l'immagine di sfondo allineata in alto a sinistra.
Il nuovo foglio di stile porta a questo risultato:

---

Si nota subito che il testo si sovrappone all'immagine. Bisogna distanziarlo un po' dal margine sinistro. La larghezza dell'immagine è 15 pixel, quindi la regola CSS viene integrata con la proprietà padding:

    
    #menu a {
      color: #000;
      background: #8FBC8F url(bordoSx.png) left top no-repeat;
      text-decoration: none;
      padding-left: 15px
    }

    

Il nuovo foglio di stile porta a questo risultato:

---

Un elemento può possedere una sola immagine di sfondo. Per aggiungere l'immagine di destra, si inserisca un tag <span> nella pagina web:

    <div id="menu"><a href="#Sport"><span>Sport</span></a></div>
    
    

e si definisca una regola CSS, la cui sola proprietà che viene specificata riguarda l'immagine di sfondo. In questo esempio si sfrutta la stessa immagine inserita alla sinistra del testo.

    #menu a span {
      background: url(bordoSx.png) right top no-repeat;
      padding-right: 15px
    }

    

Questa regola specifica che ogni elemento <span> contenuto in un elemento <a> deve avere un'immagine di sfondo allineata in alto a destra.

---

In questa fase si applica un effetto evidenza alla linguetta del menu. L'effetto si verifica quando il mouse si trova sopra la linguetta. A tale scopo servono altre due immagini da sostituire ai bordi sinistro e destro, ma anche in questo caso, per la simmetria dell'elemento di menu, si usa la stessa immagine.

il colore di sfondo ha le seguenti componenti: Rosso=181 (B5h) - Verde=230 (E6h) - Blu=29 (1Dh).

Poi si definisca la seguente regola CSS:

    
    #menu a:hover {
      color: #fff;
      background: #B5E61D url(evidenza.png) left top no-repeat;
      padding-left: 15px
    }

    #menu a:hover span {
      background: url(evidenza.png) right top no-repeat;
      padding-right: 15px
    }

    

Portando il mouse sopra l'elemento si osserva il risultato:

---

Per creare un menu a schede, si usi una lista non ordinata:

    
    I miei interessi:
    <div id="menu">
    <ul>
    <li><a href="#"><span>Sport</span></a></li>
    <li><a href="#"><span>Musica</span></a></li>
    <li><a href="#"><span>Viaggi</span></a></li>
    <li><a href="#"><span>Letture</span></a></li>
    <li><a href="#"><span>Contattami</span></a></li>
    </ul>
    </div>
    

e si definiscano le seguenti regole CSS per gli elementi di lista (<LI>), in modo che essi appaiano affiancati sulla stessa linea:

    #menu ul {
      list-style: none;
      padding: 0;
      margin: 0
    }
    
    #menu li {
      float: left;
      margin: 0;
    }
    

Provare a passare il mouse sugli elementi del menu, per osservare il risultato.


I miei interessi:

---

Nota: L'esempio che segue non funziona con IE6.

Dopo aver realizzato questo menu si affronta il problema di mostrare le pagine in un'area sottostante la barra dei menu.

si definisca una nuova classe, che rappresenterà il contenitore sia della barra dei menu sia delle pagine aperte dal menu.

    
    .schedario {
        border:2px solid;
        border-color:#005f80;
        background-color:#905090;
        position:relative;
        top:0px;
    }

    

La posizione viene definita come relative per collocare l'elemento a distanza 0 dall'elemento che lo precede nella pagina.

All'interno dell'elemento di classe schedario si mostrerà la pagina aperta con la linguetta del menu e per essa viene definita la classe:

    .riquadro {
      position:absolute;
      left:0px;
      top:30px;
      z-index:500;
      background-color:orange;
      display: none;
      height: 200px;
      width:400px;
      border: thin solid black;
      text-align: center;
    }
    

Per ogni elemento di menu si completi l'attributo href del tag a specificando il nome di un segnalibro che si inserirà nella pagina, inoltre si inserisca il menu all'interno della DIV avente class="schedario":

    
    <div class="schedario">
      <b>i miei interessi:</b>
      <div id="menu">
        <ul>
          <li><a href="#sport"> ...
          <li><a href="#musica"> ...
          <li><a href="#viaggi"> ....
          <li><a href="#letture"> ...
          <li><a href="#contatto"> ...
        </ul>
      </div>
      ...
      ...
    

Subito dopo la DIV della barra dei menu si inseriscano le sezioni identificate dai segnalibri riferiti dai link nella barra dei menu:

    
      <div id="sport" class="riquadro">
        ... ...
      </div>
      <div id="musica" class="riquadro">
        ... ...
      </div>
      <div id="viaggi" class="riquadro">
        ... ...
      </div>
      <div id="letture" class="riquadro">
        ... ...
      </div>
      <div id="contatto" class="riquadro">
        ... ...
      </div>
    </div>
    
    

Infine, nel foglio di stile si definisca la seguente regola CSS:

    
    .riquadro:target {
        display: block;
    }

    

Che significa: quando un elemento di classe riquadro viene raggiunto da un riferimento ipertestuale mostralo come un blocco. In tal modo viene annullato il valore none assegnato alla proprietà display. Il valore block della proprietà display consiste nel mostrare l'elemento facendogli occupare tutto lo spazio orizzontale nell'ambito della sua sezione.

---