Archivi tag: css3

CSS3 Base – 5.3 – Pseudo-classi

In questa lezione vediamo come usare le pseudo-classi come selettori nei CSS.

Finora abbiamo visto i seguenti selettori:

  • nomi di tag – identificano un particolare gruppo di elementi HTML presenti nella pagina (es: p, body, h1) ;
  • classi – rappresentano un’etichetta con cui contrassegnare elementi HTML (anche di tipo diverso) che devono avere lo stesso stile;
  • ID – speciali etichette per identificare un unico elemento che avrà uno stile particolare nella pagina.

Esiste la possibilità di usare un altro tipo di selettore nei CSS: le pseudo-classi.

Pseudo-classi

Una pseudo-classe non indica un particolare elemento HTML, indica lo stato in cui si trova.

La pseudo-classe si indica con il nome del tag HTML, seguito da due punti (:) e dal nome dello stato in cui si trova.

Si usano molto per gestire gli stati in cui può trovarsi un link (collegamento):

  • a:link – collegamento non ancora visitato;
  • a:visited – collegamento già visitato;
  • a:hover – collegamento al passaggio del mouse;
  • a:active – collegamento attivo.
Pseudo-classi per i link
Pseudo-classi per i link

Per il loro corretto funzionamento, le pseudo-classi vanno inserite in questo ordine.

Video

CSS3 Base – 5.2 – ID

In questa lezione vi parlo di cosa sono gli ID e di come vengono usati nei CSS.

ID

Come per la classe, anche l’ID viene usato per etichettare gli elementi HTML a cui applicare un determinato stile ma, a differenza della classe, l’ID si applica ad un unico elemento.

Per prima cosa applichiamo l’ID all’elemento univoco nel codice HTML:

Applicazione dell'ID
Applicazione dell’ID

In questo caso è stato applicato solo al paragrafo 2, l’unico che deve avere quello stile.

Poi creiamo nel CSS un selettore apposito formato da un cancelletto (#) seguito dal nome dell’ID:

ID nel CSS
ID nel CSS

Il risultato finale dimostra che soltanto il paragrafo 2 è interessato dallo stile:

Esempio
Esempio

Si poteva ottenere un risultato analogo andando ad inserire un CSS in linea nel tag del paragrafo 2, tuttavia in questo caso sarebbe stato più scomodo da aggiornare (ad esempio se volevamo poi cambiare il colore).

Video

CSS3 Base – 5.1 – Classi

In questa lezione vi parlo di cosa sono le classi e di come si usano nei CSS.

Abbiamo detto che se creiamo una regola CSS usando un selettore HTML (es: p), tale stile si applica a tutti gli elementi di quel tipo:

Stile per paragrafi
Stile per paragrafi

Lo stile indicato nell’esempio applica un colore blu al testo di tutti i paragrafi della pagina.

Nel caso in cui noi non volessimo assegnare il colore blu a tutti i paragrafi ma solo ad alcuni, dovremmo agire in maniera diversa.

Classi

Potrebbe risultare utile definire una classe, ovvero un’etichetta, per contrassegnare gli elementi HTML che devono avere caratteristiche simili.

In questo caso applicheremo la classe a tutti gli elementi che dovranno avere il testo in blu.

La classe si applica con l’attributo class dentro al tag HTML dell’elemento:

<p class="testoblu">Paragrafo 1</p>

Il valore dell’attributo class sarà il nome della classe, nel nostro caso è testoblu, per ricordarci che gli elementi con tale etichetta avranno il testo colorato di blu.

Oltre ai paragrafi, posso applicare la stessa etichetta ad altri elementi ti tipo testuale, ad esempio intestazioni, liste, ecc.

Nell’esempio vado ad applicare la classe testoblu a due paragrafi e ad una intestazione:

Applicazione della classe
Applicazione della classe

Ora non ci resta che dire al CSS come deve gestire tutti gli elementi di classe testoblu.

Per creare la classe si inserisce nel CSS un selettore formato da un punto seguito dal nome della classe (parola unica senza spazi), inserendo nelle graffe le dichiarazioni di stile:

Creazione della classe
Creazione della classe

Questo è risultato finale, in cui appaiono blu solo gli elementi di classe testoblu:

Esempio
Esempio

Video

CSS3 Base – 4.1 – Il colore nei CSS

In questa lezione vi spiego come viene usato il colore nelle pagine web.

Colori nel web

Nelle pagine web possiamo applicare il colore principalmente a queste categorie di oggetti:

  • testi
  • sfondi
  • linee e bordi

Il colore può essere indicato in vari modi, di seguito trovate i più usati.

Parola chiave

Potete usare una parola chiave che indica il nome del colore in inglese, es:

  • black;
  • pink;
  • lavender.

Codice esadecimale

E’ possibile specificare il colore con una sigla di 3 o 6 caratteri in codice esadecimale, es:

  • #77BBEE;
  • #7BE;
  • #000;

Codice RGB e RGBA

Il codice RGB indica la presenza di rosso, verde e blu nel colore in base ad un valore numerico che va da 0 (assenza di colore) e 255 (totale presenza), es:

  • rgb(0,255,0);
  • rgb(0,0,0);
  • rgb(122,30,0);

Il codice rgba è simile al precedente ma prevede un quarto numero che indica la trasparenza, valore che va da 0.0 (trasparente) e 1.0 (opaco):

  • rgb(0,255,0,0.5);

Codice HSL e HSLA

Il codice HSL indica rispettivamente tinta, saturazione e luminosità del colore.

La tinta indica la tonalità di colore e si indica con un valore da 0 a 360 dove:

  • 0 e 360 indicano il rosso;
  • 120 indica il verde;
  • 240 indica il blu.

La saturazione indica la quantità di colore presente e si indica con un valore percentuale che va da 0% (assenza di colore, tinta sul grigio) a 100% (totale presenza di colore).

La luminosità indica la quantità di luce e si indica con un valore percentuale che va da 0% (colore nero) a 100% (colore bianco).

Esempi:

  • hsl(100,100%,70%);
  • hsl(80,50%,30%);
  • hsl(260,100%,50%);

Il codice hsla è simile al precedente ma prevede un quarto numero che indica la trasparenza, valore che va da 0.0 (trasparente) e 1.0 (opaco):

  • hsl(100,100%,70%,0.5);

Approfondimenti

Maggiori approfondimenti sul sito Wikipedia.

Video

CSS3 Base – 3.7 – Indentazione del testo

In questa lezione vediamo come applicare un rientro al testo.

text-indent

La proprietà text-indent serve per applicare un rientro al testo, rispetto al suo margine sinistro.

Questa proprietà accetta valori numerici positivi o negativi, fissi (con varie unità di misura come: px, pt, cm, em) o relativi alla dimensione del contenitore (%):

Uso di text-indent
Uso di text-indent

Il rientro viene applicato soltanto alla prima riga del testo: se si vuole spostare l’intero blocco dobbiamo usare le proprietà margin e padding, che spiegherò nel corso CSS intermedio.

Video

CSS3 Base – 3.6 – Decorazione del testo

In questa lezione vediamo come decorare il testo.

text-decoration

La proprietà text-decoration permette di modificare il testo attraverso l’applicazione di una linea.

Questa proprietà accetta i seguenti valori:

  • none – testo normale, senza linea;
  • underline – testo sottolineato;
  • overline – testo con linea superiore;
  • line-through – testo barrato.
Esempio
Esempio

Video

CSS3 Base – 3.5 – Allineamento del testo

In questa lezione vi spiego come allineare il testo in orizzontale.

text-align

Come in tutti i programmi di videoscrittura, es: Word, anche in un documento web potete avere il testo allineato a sinistra, al centro o a destra della pagina.

L’allineamento del testo si applica ad un elemento di blocco, ovvero un elemento HTML che fa da contenitore di altri elementi, come ad esempio <p>, <h1>, <div>, ecc.

La proprietà text-align permette di modificare l’allineamento del testo per l’elemento a cui è associata:

Uso di text-align
Uso di text-align

I valori possibili per text-align sono:

  • left – allineamento a sinistra;
  • right – allineamento a destra;
  • center – allineamento centrato;
  • justify – allineamento giustificato.
Esempio
Esempio

Video

CSS3 Base – 3.4 – Peso dei caratteri

In questa lezione vi spiego come rendere più spessi i caratteri.

font-weight

La proprietà font-weight serve per impostare uno spessore al testo, per renderlo più marcato rispetto al resto del testo della pagina.

Uso di font-weight
Uso di font-weight

Questa proprietà accetta i seguenti valori:

  • normal – testo normale, non inspessito;
  • bold – testo in grassetto;
  • bolder – testo più spesso rispetto al normale (valore relativo);
  • lighter – testo meno spesso rispetto al normale (valore relativo).
Esempio
Esempio

In alternativa ai valori testuali, è possibile usare dei valori numerici da 100 a 900, che specificano lo spessore del testo:

  • 100
  • 200
  • 900

Il valore 400 corrisponde a normal, mentre 700 a bold.

Nota: spesso non si nota la differenza tra alcuni valori numerici in quanto la maggior parte dei font supportano soltanto la versione normale (400) o grassetto (700).

Video