Archivi tag: css

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 – 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

CSS3 Base – 3.3 – Stile del testo

In questa lezione vediamo come impostare lo stile del testo.

Come abbiamo già visto nel corso base HTML, possiamo modificare lo stile di alcune parole per metterle in risalto rispetto al resto del testo.

 

font-style

La proprietà font-style permette di variare lo stile tipografico del testo, in base ai seguenti valori:

  • normal – testo normale, non inclinato;
  • italic – testo in corsivo;
  • oblique – testo inclinato, simile al corsivo.
Uso di font-style
Uso di font-style
Esempio
Esempio

La differenza tra italic e oblique è che il primo è un carattere che viene proprio salvato con le lettere già inclinate, mentre il secondo si ottiene inclinando “a forza” le lettere di un carattere normale: nella gran parte dei casi il risultato è identico.

Video