Archivi tag: stile

CSS3 Base – 1.2 – Prerequisiti e materiale occorrente

Per poter seguire questo corso sono richiesti i seguenti prerequisiti:

  • Conoscenza di base del linguaggio HTML
  • Breve esperienza nel Web

Cosa dovete sapere dell’HTML per poter usare i CSS?

Dovrete essere in grado di:

  • Creare una pagina HTML e modificarla
  • Visualizzare l’anteprima della pagina su di un browser
  • Conoscere i tag principali per testi e immagini

Inoltre è richiesto un minimo di esperienza d’utilizzo di un browser web (Internet Explorer, Google Chrome, Mozilla Firefox, ecc) per navigare tra una pagina e l’altra.

Se non siete sicuri delle vostre conoscenze, o volete semplicemente fare un ripasso, vi consiglio di dare un’occhiata al mio corso:

Per quel che riguarda il materiale che useremo, sarà sufficiente un normale computer e un editor di testo, ovvero un programma con cui poter creare e modificare file di testo (io userò il comunissimo Blocco Note).

Video

CSS3 Base – 1.1 – Introduzione al corso

In questo corso saranno trattati i seguenti argomenti:

  • Elementi di base dei fogli di stile
  • Gestione del testo
  • Colori
  • Classi e ID

Pensato per chi parte da zero, e quindi non ha alcuna conoscenza sull’argomento, questo corso vi permetterà di capire cosa sono gli stili CSS e come usarli per formattare le vostre pagine web.

Al termine del corso sarete in grado di:

  • capire il codice all’interno di uno stile CSS
  • formattare il testo di una pagina web
  • cambiare il colore di testo e sfondo di un elemento HTML
  • applicare classi e ID agli elementi

Video

 

HTML5 Base – 3.7 – Stili logici per il testo

In questa lezione vi parlo degli stili logici e vi spiego come si usano.

Stili

Un testo può essere formattato per farlo distinguere dal resto del documento.

La formattazione può essere fatta applicando uno stile tipografico a seconda dell’effetto che vogliamo ottenere: rendere le parole più spesse, sottolinearle, ecc.

Gli stili si dividono in due categorie:

  • fisici, quando spiegano solo il modo in cui devono essere visualizzati (trattano solo l’aspetto estetico);
  • logici, quando indicano la funzione del testo all’interno della pagina (trattano l’aspetto logico-funzionale).

Stili logici

Uno stile logico comunica al browser la funzione di quel testo nella pagina: sarà proprio tale browser a decidere in che modo far visualizzare quel testo.

<strong>

Il tag <strong> indica un testo che deve essere marcato. Normalmente viene rappresentato con un grassetto.

<em>

Il testo in enfasi ha le lettere inclinate come il corsivo e viene inserito mediante il tag <em>

<del>

Con il tag <del> viene indicato un testo che è stato disattivato (ovvero non è più valido perché, ad esempio, è stato sostituito da altro) e appare barrato.

<ins>

Il tag <ins> indica il testo inserito (ad esempio perché sostituisce il testo prima barrato) e questo appare con una sottolineatura.

<mark>

Possiamo far risaltare un testo applicando uno sfondo colorato, mediante l’effetto “evidenziatore” usando il tag <sup>

Qui potete vedere il codice di tutti gli stili sopracitati:

Codice degli stili logici
Codice degli stili logici

E qui vedete il risultato finale:

Risultato finale
Risultato finale

Video

HTML5 Base – 3.6 – Stili fisici per il testo

In questa lezione vi parlo degli stili fisici e vi spiego la differenza con gli stili logici.

Stili

Un testo può essere formattato per farlo distinguere dal resto del documento.

La formattazione può essere fatta applicando uno stile tipografico a seconda dell’effetto che vogliamo ottenere: rendere le parole più spesse, sottolinearle, ecc.

Gli stili si dividono in due categorie:

  • fisici, quando spiegano solo il modo in cui devono essere visualizzati (trattano solo l’aspetto estetico);
  • logici, quando indicano la funzione del testo all’interno della pagina (trattano l’aspetto logico-funzionale).

Stili fisici

Uno stile fisico obbliga il browser a mostrarci un testo con un determinato aspetto, indipendentemente dalla funzione che il testo ricopre nella pagina.

<b>

Il testo in grassetto è caratterizzato dalle lettere più spesse e si implementa col tag <b>

<i>

Il testo in corsivo ha le lettere inclinate e viene inserito mediante il tag <i>

<u>

Per rendere il testo sottolineato possiamo usare il tag <u>

<strike>

Il tag <strike> rende il testo barrato, cioè attraversato da una linea orizzontale:

<sup>

L’apice si usa per posizionare più in alto il testo e viene inserito col tag <sup>

<sub>

Il pedice si usa per posizionare più in basso un testo e viene inserito col tag <sub>

Qui potete vedere il codice di tutti gli stili sopracitati:

Codice per gli stili fisici
Codice per gli stili fisici

E qui vedete il risultato finale:

Risultato finale
Risultato finale

Video