Tag: Corsi di formazione

Corso HTML e CSS (20^ lezione): CSS: Box model (3^parte)

Impariamo a costruire un sito Web

Lezione 20: CSS: Box model (3^parte).

 

Vediamo dunque tutte le proprietà che possiamo usare per stilizzare un box. A questo proposito possiamo fare riferimento alla tabella delle proprietà riportata alla lez. 18.

Suddividiamo le proprietà per tipo per nostra comodità di esposizione.

Continua a leggere…

Corso HTML e CSS (19^ lezione): CSS: Box model (2^parte)

Impariamo a costruire un sito Web

Lezione 19: CSS: Box model (2^parte).

 

Cominciamo dunque a vedere come definire e dotare di stile un box.

Naturalmente negli esempi potremo vedere solo una parte delle proprietà che possono essere definite. Una descrizione più completa delle proprietà verrà fornita dopo l’illustrazione degli esempi pratici.

Continua a leggere…

Corso HTML e CSS (18^ lezione): CSS: Box model (1^parte)

Impariamo a costruire un sito Web

Lezione 18: CSS: Box model (1^parte).

 


Iniziamo ad esporre con esempi una parte delle stilizzazioni particolarmente importanti e ricorrenti vedendo nell’ordine:

  • Box modeling
  • Bordi e sfondi
  • Formattazione del testo
  • Effetti ed animazioni

 Box modeling

Con questo termine intendiamo analizzare tutti i modi per definire dei box in html, posizionarli e dotarli di uno stile. In realtà tutti gli elementi hatml possono essere considerati dei box.

Cominciamo a vedere innanzitutto quali sono gli elementi che costituiscono un box:

  • Margini
  • Bordi
  • Padding
  • Contenuto

L’immagine seguente aiuta a capire come vengono intesi questi elementi nell’ html.

Box
Box modeling

Continua a leggere…

Corso HTML e CSS (Lez. 17): CSS, considerazioni generali

Impariamo a costruire un sito Web

Lezione 17: CSS: Considerazioni generali.

 

Prima di affrontare nei dettagli la scrittura di un foglio di stile seguendo un esempio pratico, diamo qualche consiglio e facciamo qualche considerazione di carattere generale.

A) CSS esterno o tag <style> interno?

Riprendiamo un concetto già espresso in precedenza per analizzare le eventuali differenze di comportamento.

Continua a leggere…

Corso HTML e CSS (Lezione 16): I selettori CSS (Parte 4^)

Impariamo a costruire un sito Web

Lezione 16: CSS: Pseudo-elementi

 

Gli pseudo-elementi sono usati per aggiungere effetti ad alcuni selettori.

La sintassi è: selettore:pseudo-elemento {proprietà:valore;}

oppure

selettore.classe:pseudo-elemento {proprietà:valore;}

in quanto anche le classi CSS possono essere usate insieme ad un pseudo-elemento.

 

Continua a leggere…

Corso HTML e CSS (Lezione 15): I selettori CSS (Parte 3^)

Impariamo a costruire un sito Web

Lezione 15: CSS: Pseudo-classi e pseudo-elementi

 

Le pseudo-classi sono usate per aggiungere effetti ad alcuni selettori.

La sintassi è: selettore:pseudo-classe {proprietà:valore;}

oppure

selettore.classe:pseudo-classe {proprietà:valore;}

in quanto anche le classi CSS possono essere usate insieme ad una pseudo-classe.

Continua a leggere…

Corso HTML e CSS (Lezione 14): I selettori CSS (Parte 2^)

Impariamo a costruire un sito Web

Lezione 14: CSS: I selettori – Seconda parte

 

Dopo aver visto cosa sono le classi e gli id, analizziamo alcuni altri selettori.

Il selettore universale  *  è decisamente autoesplicativo: indica tutti gli elementi del documento html. A tutti verranno applicate le proprietà definite per questo selettore.

I cosiddetti Selettori di Tipo possono essere tutti gli elementi html, ad es. p o div o h1 ecc. Possono anche essere associati più selettori separandoli con una virgola.

Sintassi: elemento1, elemento2

Continua a leggere…