Le pseudo-classi nei CSS differiscono dalle classi in quanto gli effetti sono creati virtualmente nel browser, al verificarsi di determinati eventi.
Ogni pseudo-classe si definisce mettendo i due punti tra il selettore ed il nome della pseudo-classe stessa.
La sintassi è la seguente:
selettore: pseudo-classe {
proprietà:valore; }
Facciamo alcuni esempi di pseudo classi CSS:
p:hover { ...}
.blu:hover {...}
#blu:hover {...}
Quindi una pseudo-classe si può inserire in qualsiasi selettore. L’esempio proposto infatti riguarda il selettore di tipo, il selettore di classe e quello di id.
Pseudo-classi nei CSS utilizzate per i link
Le pseudo-classi sono utilizzate, dalla versione CSS2.1 anche per i collegamenti ipertestuali. In definitiva sono quelle applicate al tag <a>.
Vediamole in dettaglio.
:link
Questa pseudo classe definisce l’aspetto dei link in una pagina. Può essere usata per impostare ad esempio il colore del carattere o lo spessore o ancora la dimensione del font.
Lo scopo è dunque quello di variare le caratteristiche di default dei link.
In questo modo si impostano tutti i collegamenti della pagina di colore verde, in grassetto e senza sottolineatura.
:visited
Visited definisce le regole dei link una volta che le relative pagine sono già state visitate, infatti servono a ricordare all’utente che quella pagina è già stata vista. Di default i link visited sono di colore viola ma grazie a questa pseudo-classe è possibile modificarne l’aspetto.
In questo modo si lascia lo stesso colore verde e lo stesso grassetto, mentre l’unica proprietà che cambia è la sottolineatura.
Quindi quando passeremo con il mouse sopra il link vedremo la sottolineatura.
:active
Active rappresenta il momento in cui l’utente clicca con il mouse sul link, fino a quando rilascia il pulsante del mouse; è dunque un momento molto breve.
Dati due numeri naturali X e Y, aggiungere al più piccolo la somma dei due numeri, se uguali visualizzare semplicemente che i numeri sono uguali.
Procedimento
Chiediamo in input i due numeri, quindi creiamo le due variabili x e y dove memorizziamo i dati inseriti da tastiera.
Dopo controlliamo i due numeri e se sono uguali diamo semplicemente il messaggio che sono uguali; altrimenti facciamo la somma e creiamo una variabile dove memorizziamo il risultato:
somma=x+y;
Poi controlliamo se x è minore di y e se vero sommiamo così la somma a x; altrimenti se falso allora y è minore di x, dunque dobbiamo sommare il contenuto della variabile somma a y.
N.B. Sarebbe sbagliato inserire un altro se per verificare se y è minore di x, perché se x non è uguale a y e x non è minore di y allora l’ultima opzione possibile è che y sia minore di x.
Ho utilizzato questo sfondo e questo sprite:
Per la realizzazione dell’algoritmo ho utilizzato quindi le seguenti variabili:
Ecco lo script completo che fa uso delle istruzioni condizionali se … altrimenti.
Esempio 2 di algoritmo di selezione con Scratch
Dati 2 numeri naturali X e Y, aggiungere al più piccolo la quantità necessaria per essere uguale al più grande, se uguali visualizzare semplicemente che i numeri sono uguali.
Operiamo come prima chiedendo in input i due numeri e li confrontiamo. Se x è maggiore di y allora memorizziamo nella variabile differenza lo scarto che c’è tra i due numeri, ovvero:
differenza=x-y;
Dopo sommo differenza a y.
Altrimenti se y è maggiore di x:
differenza=y-x;
Dopo sommo differenza a x.
Infine visualizzo in output i due numeri così ottenuti.
Per comodità uso lo stesso sfondo di prima. Le variabili che ho utilizzato sono queste:
Ecco dunque lo script completo che utilizza come nell’esercizio precedente le istruzioni condizionali se … altrimenti.
In questo articolo studieremo cosa sono i selettori nei CSS e come utilizzarli.
Abbiamo visto nella lezione precedente come creare un foglio di stile esterno, in questa lezione vedremo come inserire i vari elementi al suo interno e quindi partiremo proprio dai selettori nei CSS.
Cosa sono i selettori nei CSS e come utilizzarli
Come abbiamo già detto, per definire uno stile nei CSS vengono utilizzati i selettori.
I selettori servono infatti ad applicare un determinato stile ad uno o più elementi della pagina web. Vediamo quanti tipi di selettori esistono.
Selettore universale
Il selettore universale si indica con l’asterisco. Facciamo un esempio di utilizzo:
* {
margin:0;
padding:0;
}
In questo esempio azzeriamo i margini e il padding di tutti gli elementi della pagina. Per intenderci il margin è la distanza tra il bordo di un elemento e gli elementi adiacenti mentre il padding è la distanza tra il testo e il bordo del contenitore dove è incluso. Più avanti farò alcuni esempi.
Selettore di tipo
Mediante questo selettore si applica lo stesso stile ai tag dello stesso tipo; ad esempio o a tutti i paragrafi o a tutti i titoli h1 o ancora a tutti i div.
In questo esempio tutto quello che scriveremo all’interno di tutti i tag p presenti nel documento sarà allineato a sinistra e lo sfondo di tutti i paragrafi sarà di colore grigio chiaro.
Tutti i tag dei titoli avranno come colore #252525 che corrisponde al grigio scuro e la distanza tra le righe nel testo sarà di 1.5 em.
A quanto corrisponde 15. em?
1em corrisponde alla dimensione assegnata al documento, nel tag body, dunque 1em=12px. Allora 12 x 1.5=18 px.
Se non assegniamo a body la dimensione del font, di default 1em è pari a 16px.
Successivamente, per ogni tag del titolo, specifico la dimensione del carattere; chiaramente h1 è più grande di h2 che a sua volta è più grande di h3, ecc…
Selettore mediante l’uso delle classi
Le classi si definiscono all’interno dei vari tag html e permettono di applicare lo stile non a tutti i tag della stessa categoria, ma solo a quelli desiderati.
Le classi si utilizzano anteponendo un punto davanti al nome. Il nome deve essere significativo al fine di poterlo richiamare intuitivamente all’occorrenza.
Ecco un esempio di selettore di nome blu che ipotizziamo di inserire nel nostro foglio di stile.
.blu {
color:#0000ff;
}
Inoltre nella pagina html dobbiamo inserire:
<p class="blu">Coding creativo...</p>
Così solo il paragrafo a cui è associato quella classe avrà il testo di colore blu.
Selettore mediante l’uso degli id
L’identificativo id ha la stessa funzione delle classi ma deve essere univoco.
Ogni elemento (tag) deve avere un solo id e più elementi non possono avere lo stesso tag id.
Ad esempio, inseriamo questi id differenti all’interno dei due paragrafi:
In questo articolo vedremo come creare i fogli di stile esterni, che poi collegheremo alla nostra pagina web.
Il nostro sito web può avere uno o più fogli di stile esterni; comunque è consigliabile non esagerare, infatti già più di 5 sono considerati troppi.
Quale editor utilizzare per creare i fogli di stile esterni?
Per semplicità possiamo creare i nostri CSS esterni con il notepad++ (che potete scaricare gratuitamente da questo sito https://notepad-plus-plus.org/). In alternativa potete utilizzare anche con il blocco note che già avete installato, come programma predefinito, sul vostro computer.
La differenza non è solo visiva. Infatti con notepad i colori differenziano le varie parti dei CSS e diventa più semplice così trovare eventuali errori commessi. Ma, requisito importante di questo software è che quando si inizia a scrivere compaiono i suggerimenti. Questi suggerimenti aiutano nella programmazione, in quanto consentono di inserire più facilmente le varie parti di codice.
Con notepad inoltre è possibile, come con il blocco note, creare pagine html, xml, php, cpp, ecc…
Il suo utilizzo è molto semplice e intuitivo, in quanto comprende una barra dei menù e una barra degli strumenti che aiutano nelle operazioni.
Sviluppo del nostro foglio di stile esterno
Dunque apriamo il nostro editor preferito e diamo un nome al nostro CSS, io ad esempio l’ho chiamato style.css. Dopo lo salviamo nella stessa cartella dove si trova la pagina html. Se ci sono più fogli di stile esterni allora sarà opportuno creare una cartella ad esempio di nome CSS, dove all’interno andrò ad inserire tutti i miei fogli di stile esterni.
Ricordiamo che il foglio di stile esterno si deve collegare alla nostra pagina web. Dunque apriamo la pagina html che abbiamo creato con il blocco note o notepad++ e inseriamo questo codice tra l’apertura e la chiusura di head.
In questo caso ho inserito un collegamento ai fontwesome che sono quelle icone speciali, che potete consultare al seguente link https://fontawesome.com/v4.7.0/ che è possibile utilizzare gratuitamente all’interno di un sito e più avanti vi spiegherò come fare.
Commenti recenti