02 - Classi, pseudoclassi e id.
CSS
02 - Classi, pseudoclassi e id. /1
CSS

01 - E tu? In che classe sei?

Crea la cartella 02 (nella cartella per gli esercizi CSS) e al suo interno crea questi due file.

index01.html 
  1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <title>Le quattro libertà del software libero</title>
  5.         <meta charset="UTF-8" />
  6.         <link type="text/css" rel="stylesheet" href="reset.css" />
  7.         <link type="text/css" rel="stylesheet" href="stili01.css" />        
  8.     </head>
  9.     <body>
  10.         <h1 class="tipo1">Libertà 0</h1>
  11.         <p>Libertà di eseguire il programma per qualsiasi scopo.</p>
  12.         <h1 class="tipo2">Libertà 1</h1>
  13.         <p>Libertà di studiare il programma e modificarlo.</p>
  14.         <h1 class="tipo1">Libertà 2</h1>
  15.         <p>Libertà di ridistribuire copie del programma in modo da aiutare il prossimo.</p>
  16.         <h1 class="tipo2">Libertà 3</h1>
  17.         <p>
  18.             Libertà di migliorare il programma e di distribuirne 
  19.             pubblicamente i miglioramenti, in modo tale che tutta la comunità 
  20.             ne tragga beneficio.
  21.         </p>
  22.     </body>
  23. </html>
stili01.css 
  1. body {
  2.     font-size: 62.5%;
  3. }
  4. h1.tipo1 {
  5.     background: #325A66;
  6.     color: #FFF8B2;
  7.     font: normal normal normal 3em monospace;
  8. }
  9. h1.tipo2 {
  10.     background: #590D0B;
  11.     color: #FFF8B2;
  12.     font: normal normal normal 3em monospace;
  13. }

Osservando la pagina web prodotta, prova a rispondere alla seguente domanda: perchè hanno inventato le classi?

cosa ho imparato?
02 - Classi, pseudoclassi e id. /2
CSS

02 - Come si usano le classi.

Crea una copia del file index01.html, rinomina questo file in index02.html e fai in modo che linki il file stili02.css. Realizza quindi questo file.

stili02.css 
  1. body {
  2.     font-size: 62.5%;
  3. }
  4. h1 {
  5.     color: #FFF8B2;
  6.     font: normal normal normal 3em monospace;
  7. }
  8. h1.tipo1 {
  9.     background: #325A66;
  10. }
  11. h1.tipo2 {
  12.     background: #590D0B;
  13. }

Cosa è cambiato rispetto al progetto precedente?

Cosa cambia se nel documento css compaiono prima le regole per le classi e poi la regola per l'elemento generico?
E nel caso entrambe le regole intervenissero sulle stesse proprietà?
Cosa cambia se nel documento html impostiamo la regola tipo1 per un elemento di tipo p?

cosa ho imparato?

Come si definisce una classe nel documento css?
Come si usa una classe nel documento html?

cosa ho imparato?

Proviamo una sfida facile facile.

sfida 01
Scrivi una classe per ciascuno dei quattro paragrafi per ottenere un orientamento del testo diverso per ciascuno di essi (a sinistra, centrato, a destra, giustificato).
02 - Classi, pseudoclassi e id. /3
CSS

03 - Classi che vanno bene per tutti.

Crea una copia del file index01.html, rinomina questo file in index04.html e fai in modo che linki il file stili04.css. Realizza quindi questo file.

stili04.css 
  1. body {
  2.     font-size: 62.5%;
  3. }
  4. h1 {
  5.     color: #FFF8B2;
  6.     font: normal normal normal 3em monospace;
  7. }
  8. .tipo1 {
  9.     background: #325A66;
  10. }
  11. .tipo2 {
  12.     background: #590D0B;
  13. }

Osserva la pagina web prodotta e confrontala con quella prodotta dal progetto precedente.

Adesso in entrambi i progetti imposta la regola tipo1 anche per un elemento di tipo p ed osserva le pagine web prodotte.

Prova quindi a rispondere a queste domande.

Perchè hanno inventato la classe generica?
Come si definisce una classe generica nel documento css?
Come si usa una classe generica nel documento html?

cosa ho imparato?

Proviamo una sfida difficile difficile.

sfida 01
Ti sfido a trovare il modo di usare due classi per uno stesso elemento.
Definisci in un documento css due classi utilizzabili da un certo elemento (supponiamo h1). Scegli tu se usare le classi generiche. Successivamente realizza un documento html che abbia un elemento di quel tipo (h1 nel nostro esempio) che usi entrambe le classi.

Come si usano due classi?

cosa ho imparato?
02 - Classi, pseudoclassi e id. /4
CSS

04 - Alt! Farsi riconoscere.

Crea una copia del file index01.html, rinomina questo file in index04.html e fai in modo che linki il file stili04.css. Realizza quindi questo file.

stili04.css 
  1. body {
  2.     font: normal normal normal 62.5% monospace;
  3.     color: #FFF8B2;
  4. }
  5. h1 {    
  6.     font-size: 3em;
  7. }
  8. p {
  9.     font-size: 1.5em;
  10. }
  11. .tipo1 {
  12.     background: #325A66;
  13. }
  14. .tipo2 {
  15.     background: #590D0B;
  16. }
  17. #pippo {
  18.     font-style: italic;
  19. }

Stavolta ti sfido subito, occhio che è una sfida impegnativa!

sfida 01
Come devi intervenire sul documento html per ottenere la seguente pagina web?

la pagina web 04

Come si definisce un id nel documento css?
Come si usa un id nel documento html?
Posso usare un id insieme ad una classe?
Posso usare lo stesso id per più di un elemento nella stessa pagina?

cosa ho imparato?
02 - Classi, pseudoclassi e id. /5
CSS

05 - In che stato sei? (prima parte)

Crea i file index05.html e stili05.css.

stili05.html 
  1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <title>Una tabella</title>
  5.         <meta charset="UTF-8" />
  6.         <link type="text/css" rel="stylesheet" href="reset.css" />
  7.         <link type="text/css" rel="stylesheet" href="stili05.css" />        
  8.     </head>
  9.     <body>
  10.         <table>
  11.             <tbody>
  12.                 <tr>
  13.                     <td>A</td><td>B</td><td>C</td><td>D</td><td>E</td>
  14.                 </tr>
  15.                 <tr>
  16.                     <td>F</td><td>G</td><td>H</td><td>I</td><td>L</td>
  17.                 </tr>
  18.                 <tr>
  19.                     <td>M</td><td>N</td><td>O</td><td>P</td><td>Q</td>
  20.                 </tr>
  21.                 <tr>
  22.                     <td>R</td><td>S</td><td>T</td><td>U</td><td>V</td>                    
  23.                 </tr>
  24.             </tbody>
  25.         </table>
  26.     </body>
  27. </html>
css05.html 
  1. table {
  2.     width: 200px;
  3. }
  4. td {
  5.     border: solid red 2px;
  6.     width: 20%;
  7.     text-align: center;
  8.     background: white;
  9. }
  10. td:hover {
  11.     background: red;
  12. }
  13. td:active {
  14.     background: green;
  15. }

Osserva il comportamento della pagina web al passaggio ed al click del mouse.

Poi prosegui con la scheda successiva.

02 - Classi, pseudoclassi e id. /6
CSS

06 - In che stato sei? (seconda parte)

Alla luce dell'esperienza fatta con la scheda precedente rispondi alle seguenti domande.

Come si definisce una regola da seguire quando un certo elemento si trova in un certo stato?
Quali sono gli stati (pseudoclassi) che conosci?
A quali elementi si possono applicare?

cosa ho imparato?

Adesso affronta nell'ordine le sfida proposte.

sfida 01
Realizza un progetto che presenti a video una immagine (assicurati che sia un'immagine png e che abbia lo sfondo trasparente).
Crea le regole css affinchè l'immagine abbia uno sfondo rosso se puntata dal mouse, uno sfondo verde se cliccata e uno sfondo bianco in tutti gli altri casi.
sfida 02
Sei capace di realizzare un progetto che usi le pseudoclassi viste in questa scheda per modificare qualche proprietà diversa da background?
sfida 03
Sei capace di realizzare un progetto che regoli lo stato di una classe di elementi invece che di tutti gli elementi?
02 - Classi, pseudoclassi e id. /7
CSS

07 - Un collegamento: 5 stati (prima parte).

Crea i file index07.html e stili07.css.

index07.html 
  1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <title>Un menu</title>
  5.         <meta charset="UTF-8" />
  6.         <link type="text/css" rel="stylesheet" href="reset.css" />
  7.         <link type="text/css" rel="stylesheet" href="stili06.css" />        
  8.     </head>
  9.     <body>
  10.         <nav>
  11.             <a href="altraPag1.html">Chi siamo</a> |
  12.             <a href="altraPag2.html">Dove siamo</a>    |
  13.             <a href="altraPag3.html">Prodotti</a> |
  14.             <a href="altraPag4.html">Contattaci</a>
  15.         </nav>
  16.     </body>
  17. </html>
stili07.css 
  1. body {
  2.     font: normal normal normal 62.5% monospace;
  3. }
  4. nav {
  5.     font-size: 2em;
  6.     color: blue;    
  7. }
  8. a:link {
  9.     text-decoration: none;
  10. }
  11. a:hover {
  12.     color: red;
  13. }
  14. a:active {
  15.     color: white;
  16.     background: red;
  17. }
  18. a:focus {
  19.     color: white;
  20.     background: green;        
  21. }
  22. a:visited {
  23.     color: gray;    
  24. }

Osserva il comportamento della pagina web al passaggio ed al click del mouse.

Poi prosegui con la scheda successiva.

02 - Classi, pseudoclassi e id. /8
CSS

08 - Un collegamento: 5 stati (seconda parte).

Alla luce dell'esperienza fatta con la scheda precedente rispondi alle seguenti domande.

Hai ancora lo stesso concetto di stato (pseudoclasse)?
Proponi una carrellata completa degli stati che hai incontrato.

cosa ho imparato?

Te la senti di affrontare un'altra sfida?.

sfida 01
Realizza un progetto che presenti a video tre immagini. Ciascuna di queste immagini dovrà rappresentare un link ad una testata giornalistica. Oltre ad eventuali regole generali per il tag img dovrai realizzare tre regole specifiche per ciascuna immagine.
Infine dovrai realizzare delle regole per i vari stati in cui si potrà trovare un collegamento e verificare se la priorità viene affidata a queste ultime regole o a quelle relative alle immagini.
sfida 02
Sviluppa un progetto che ti permetta di realizzare una regola da seguire nel caso in cui un collegamento di una certa classe si trovi in un certo stato.