EL2-3_3ST SELETTORIAutore: __________________________________________ Data: _________Classe: ____

ATTENZIONE

Il significato dei simboli usati in questa e nelle prossime esercitazioni è spiegato dettagliatamente nella guida http://www.classiperlo.altervista.org/Materiale/Generale/Simboli.doc (scaricala e consultala in caso di dubbi).

Il simbolo della manina in colore blu indica una domanda alla quale bisogna OBBLIGATORIAMENTE rispondere scrivendo in colore blu.

Il simbolo della manina in colore blu con la scritta Cou New indica un codice che va incollato usando Courier New in colore blu.

Il simbolo della manina in nero indica una o più immagini o schermate da incollare (protette col tuo watermark, le tue iniziali di Nome e Cognome)

Il simbolo della manina con colori attenuati indica un'operazione che bisogna svolgere, senza rispondere a nessuna domanda (non vuol dire che non devi fare nulla – significa solo che non devi scrivere niente!).

Il simbolo della manina col ciak video indica un video da registrare con Gif Recorder (http://gifrecorder.com/)e da salvare in formato gif nella cartella dell'esercitazione.recupero.

Questo simbolo indica un video di esempio o di spiegazioni da guardare su YouTube

A) OPERAZIONI PRELIMINARI

A1) Crea una sottocartella di ES2 con nome uguale a quello di questa esercitazione (EL2-3_3AST Selettori)

A2) All'interno della sottocartella EL2-3_3AST Selettori salva questo file Word

B) SELETTORI CONTESTUALI

B1) →selettore1.html + selettore1.css (pagina html con foglio stile esterno associato – usa H1, P e EM, vedi figura qui sotto)

B2) → Codice HTML+CSS (non usare le classi per gli stili)

Osserva che la scritta in corsivo risalta bene all'interno del paragrafo, ma è poco visibile nell'intestazione H1 poiché il colore della scritta è già rosso.

Supponiamo di voler fare in modo che EM sia colorato in rosso normalmente, ma che invece assuma un colore blu all'interno delle intestazioni H1.

Come facciamo a differenziare fra i due diversi elementi EM (quello in H1 e quello in P)?

B3) Suggeriscimi un modo, usando il foglio stile esterno, per applicare il colore rosso a un EM ma non all'altro:

Ma c'è un altro metodo, più elegante, che fa uso dei selettori contestuali.

Un selettore contestuale è un selettore il cui valore cambia a seconda del contesto in cui viene applicato.

Considera la soluzione seguente:

h1 {color: red} em {color: red} h1 em {color: blue}

COME FUNZIONA

La prima regola h1 {color: red} indica che tutte le intestazioni H1 devono essere in rosso. La seconda regola em {color: red} specifica che anche gli elementi EM devono essere in rosso.

In questo modo tuttavia il codice seguente non produrrebbe nessuna "enfasi" poiché non si riuscirebbe a distinguere l'elemento <em> (in rosso su un titolo rosso):

<h1> Questo titolo è <em> molto importante! </em> </h1>

È qui che interviene l'ultima regola:h1 em {color: blue}

che definisce appunto un selettore contestuale.

Questa regola indica che gli elementi EM contenuti all'interno di elementi H1 devono essere formattati in blu (cioè in modo diverso rispetto agli altri elementi em della pagina).

B4) Modifica il selettore1.css in modo da introdurre il selettore contestuale spiegato sopra. → Schermata browser

Vediamo adesso un altro esempio di selettore contestuale. Lo stiletext-decoration: none;

permette di eliminare ogni decorazione da un testo. Per esempio se viene applicato a un link A, il link stesso viene visualizzato senza la sottolineatura viola abituale.

LINK SENZA SOTTOLINEATURA

Non è detto che eliminare la sottolineatura dai link sia una buona idea. Se il link non è sottolineato, l'utente rischia di non accorgersi che si tratta di un collegamento e non ci cliccherà mai sopra.

Quando si elimina la decorazione dai link, la pagina deve essere progettata in modo da rendere evidente in altro modo che si tratta di un link (per esempio all'interno di un menu di navigazione, i link sono evidenti di per sé, anche senza sottolineatura.

B5) →selettore2.html (pagina html con stile incorporato, come in figura – linka pure a una pagina casuale, non importa):

Sei capace di costruire un selettore contestuale in grado di togliere la sottolineatura solo dai link contenuti nella lista UL e non da quelli contenuti nei paragrafi P?

B6) → Codice stile selettore contestuale:

A proposito di menu di navigazione realizzati con le liste, ti faccio vedere un esempio di come si fa a renderlo un po' più gradevole usando stili e selettori contestuali.

B7) Copia selettore2.html in selettore3.html. Cancella gli stili per l'elemento A. Aggiungi gli stili seguenti:ul {    list-style-type: none;    margin: 0;    padding: 0;    width: 200px;    background-color: #f1f1f1;}

li a {    display: block;    color: #000;    padding: 8px 16px;    text-decoration: none;}

/* Change the link color on hover */li a:hover {    background-color: #555;    color: white;}

B8) → Schermata browser

Bello, vero? La nostra lista non sembra nemmeno più una lista!

B9) Nel codice CSS che ti ho dato ci sono due selettori contestuali (uno è un po' strano e te lo spiegherà meglio fra poco). Di quali selettori si tratta?

Eccoti qui i riferimenti per la spiegazioni su Programmiamo:

http://www.programmiamo.altervista.org/HTML/css/css6.html

C) PSEUDOCLASSI

Nell'esempio di prima ho fatto uso di una pseudoclasse.

Una pseudoclasse consente di definire uno stato particolare di un elemento HTML.

Considera l'esempio seguente di definizione di una pseudoclasse in un foglio stile:

a:link {color: magenta;} a:visited {color: red;} a:hover {color: yellow;} a:active {color: brown;}

In questo modo vengono specificati stili diversi a seconda che l'elemento a sia stato già cliccato (visited), nel caso in cui ci si passi il mouse sopra (hover), nel caso sia attivo (active, nel momento in cui viene cliccato col mouse) etc.

Eccoti qui i riferimenti per la spiegazioni su Programmiamo e W3School:

http://www.programmiamo.altervista.org/HTML/css/css7.html

https://www.w3schools.com/css/css_pseudo_classes.asp

C1) Usando le pseudoclassi crea una pagina selettore4.html (con stile incorporato) contenente un paragrafo che quando ci si passa sopra col mouse cambia il colore dello sfondo e della scritta. Incolla codice CSS:

D) PSEUDOELEMENTI

Uno pseudoelemento è usato per definire lo stile di una parte specifica di un dato elemento.

A differenza di una pseudoclasse, che si applica all'intero elemento, uno pseudoelemento invece si applica solo a una parte di un dato elemento.

Un esempio aiuterà a capire meglio il concetto. Considera i due stili seguenti:

.speciale { font-size: 12pt; line-height: 12pt}

.speciale::first-letter {font-size: 200%; font-style: italic; font-weight: bold; float: left }

All'inizio viene definita una classe di nome .speciale alla quale viene applicato uno stile.

Quindi viene definito uno pseudoelemento .speciale::first-letter il cui significato è quello di applicare uno stile diverso solo alla prima lettera iniziale.

D1) Crea una pagina selettore5.html (con foglio stile incorporato) contenente un paragrafo P. Copia lo stile precedente fra gli stili incorporati e applica la classe .speciale al paragrafo.

D2) → Schermata browser

Eccoti qui i riferimenti per la spiegazioni su Programmiamo e W3School:

http://www.programmiamo.altervista.org/HTML/css/css8.html

https://www.w3schools.com/css/css_pseudo_elements.asp

E) OPERAZIONI FINALI

E1) Controlla di aver risposto a tutte le domande e incollato tutte le schermate. Tutte le

caselline dovrebbero avere un segno X, per indicare che hai risposto

E2) Comprimi le immagini contenute in questo file Word (seleziona un'immagine, scheda Formato e poi Comprimi immagini e infine Applica a tutte le immagini del documento) in modo da ridurne le dimensioni.

E3) Controlla che la cartella di questa esercitazione contenga i seguenti file con i nomi qui indicati:Nome del file Tipo del file DescrizioneEL2-3_3AST Selettori Word Il file di questa esercitazioneselettore1.html HTML

selettore1.css CSSselettore2.html HTMLselettore3.html HTMLselettore4.html HTMLselettore5.html HTML

E4) Chiudi tutti i file, zippa la cartella di questa esercitazione e inviala all'insegnante su Classiperlo.