Anche con l'aiuto di strumenti come CSS Grid e Flexbox, centrare gli elementi in CSS rimane un compito abbastanza complicato.

È il tema di molte battute e meme, e quando si riesce a centrare qualcosa con successo, di solito ci si vanta di averlo fatto.

Perché centrare elementi in CSS è così difficile?

Non è sempre facile lavorare con CSS. Ad esempio, allineare qualcosa orizzontalmente OPPURE verticalmente non è troppo difficile.

Si può impostare l'allineamento del testo centrato con text-align: center per un elemento a livello di linea e margin: 0 auto per un elemento a livello di blocco.

Ma se si prova a combinare sia l'allineamento verticale sia l'allineamento orizzontale, allora iniziano a comparire diversi problemi.

In questo tutorial, vedremo tre metodi diversi per centrare correttamente un div, un testo o un'immagine in CSS.

Come centrare un elemento con la proprietà CSS position

La proprietà CSS position accetta i valori relative, absolute, fixed e static (il valore di default). Quando viene impostata per un elemento, si possono poi utilizzare le proprietà top, right, bottom e left per quell'elemento.

Con una combinazione di valori assoluti e relativi si possono ottenere molte cose diverse e si possono utilizzare per centrare qualsiasi cosa.

Diamo un'occhiata ai frammenti di codice sottostanti, considerando alcuni esempi.

Come centrare il testo con la posizione in CSS

<div class="container">
    <div class="centered-element">
      <p>I'm a Camper, and I'm vertically centered</p>
    </div>
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
} 

.container {
  position: relative;
  height: 400px;
  border: 2px solid #006100;
}

.centered-element {
  margin: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Come centrare un'immagine con la posizione in CSS

<div class="container">
    <div class="centered-element">
      <img src="freecodecamp.png" alt="centered" />
    </div>
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  position: relative;
  height: 400px;
  border: 2px solid #006100;
}

.centered-element {
  margin: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Il codice qui sopra ha reso il testo e l'immagine centrati verticalmente. Per ottenere un allineamento centrato sia verticale sia orizzontale, dobbiamo utilizzare un piccolo trucco in CSS. Dobbiamo impostare la proprietà top a 50% e aggiungere una traslazione per entrambi gli assi X e Y.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  position: relative;
  height: 400px;
  border: 2px solid #006100;
}

.centered-element {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Il testo ora appare così:

E l'immagine così:

Abbiamo usato la proprietà transform perché il figlio (con la classe centered-element) era leggermente spostato dal centro. translateY() lo sposta verticalmente al centro e la traslazione sugli assi X e Y (translate()) lo sposta al centro sia orizzontalmente sia verticalmente.

Come centrare un elemento con Flexbox in CSS

In CSS il metodo di layout Flexbox è in grado di gestire i layout in una dimensione (riga o colonna). Con Flexbox, è abbastanza semplice centrare un div, del testo o un immagine utilizzando solo tre righe di codice.

Ecco i frammenti di codice con gli esempi.

Come centrare del testo con Flexbox

<div class="container">
    <div class="centered-element">
      <p>I'm a Camper, and I'm vertically centered</p>
    </div>
</div>

.container {
    display: flex;
    align-items: center;
    height: 600px;
    border: 2px solid #006100; 
}

Come centrare un'immagine con Flexbox

<div class="container">
    <div class="centered-element">
      <img src="freecodecamp.png" alt="centered" />
    </div>
</div>

.container {
    display: flex;
    align-items: center;
    height: 600px;
    border: 2px solid #006100; 
}

Siamo riusciti ad ottenere un allineamento verticale in sole due righe di codice. Per rendere l'immagine e il testo centrati orizzontalmente, aggiungiamo justify-content: center.

<div class="container">
    <div class="centered-element">
      <p>I'm a Camper, I'm now vertically and horizontally centered</p>
    </div>
</div>

<div class="container">
    <div class="centered-element">
      <img src="freecodecamp.png" alt="centered" />
    </div>
</div>

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 600px;
    border: 2px solid #006100;
}

Il testo ora appare così:

E l'immagine così:

Come centrare un elemento con Grid in CSS

Con Flexbox è abbastanza semplice centrare qualsiasi cosa, no? Ma con Grid è ancora più facile centrare tutto, perché bastano solo due righe di codice.

Come centrare del testo con Grid

<div class="container">
    <div class="centered-element">
      <p>I'm a Camper, and I'm vertically centered</p>
    </div>
</div>

.container {
    display: grid;
    align-items: center;
    height: 600px;
    border: 2px solid #006100;
}

Come centrare un'immagine con Grid

<div class="container">
    <div class="centered-element">
      <img src="freecodecamp.png" alt="centered" />
    </div>
</div>

.container {
    display: grid;
    align-items: center;
    height: 600px;
    border: 2px solid #006100;
}

Gli esempi qui sopra si occupano di centrare verticalmente gli oggetti. Per far sì che il testo e l'immagine siano anche centrati orizzontalmente, sostituiamo align-items con place-items – una combinazione di align-items e justify-content:

.container {
    display: grid;
    place-items: center;
    height: 600px;
    border: 2px solid #006100;
}

Il testo ora appare così:

E l'immagine così:

Come centrare un div, del testo o un'immagine in CSS senza contenitori

I tre metodi visti sopra ci permettono di centrare un div, del testo o un'immagine che sono racchiusi in un contenitore. Ma possiamo anche centrare un div, del testo o un'immagine senza contenitore.

Vediamo come fare.

Come centrare un div in CSS senza contenitore

<div class="container"></div>

div.container {
    height: 300px;
    width: 300px;
    border: 2px solid #006100;
    margin: 0 auto;
  }

Come centrare del testo in CSS senza contenitore

<p>I'm a Camper, and I'm centered</p>

     p {
         text-align: center;
     }

Come centrare un'immagine in CSS senza contenitore

<img src="freecodecamp.png" alt="centered" />

img {
      display: block;
      margin: 0 auto;
 }
 /* Applica il valore block alla proprietà display, un margine nullo in alto e in basso e un margine automatico a destra e a sinistra */

Conclusione

Spero che questo tutorial ti abbia fornito abbastanza elementi per allineare al centro verticalmente e orizzontalmente diversi elementi in CSS così che sia meno problematico nei tuoi progetti futuri.

Grazie per la lettura e continua a programmare!

I link, letteralmente collegamenti, sono una delle caratteristiche distintive del web e si possono trovare dappertutto.

Come suggerisce il nome, servono per creare collegamenti, o connessioni, tra diverse pagine. Questo ci permette di navigare velocemente e facilmente da una pagina web all'altra.

Si possono trovare diversi tipi di link sul Web.

Ci sono link che portano da un sito web ad un altro. Ci sono link che portano da una pagina di un sito a un'altra pagina dello stesso sito. E ci sono link che portano da una sezione di un sito a un'altra sezione dello stesso sito.

Questo articolo esamina la definizione di hyperlink, o collegamento ipertestuale, e i modi con i quali creare una gamma di diversi link in HTML.

Che cos'è un hyperlink?

Un hyperlink, o collegamento ipertestuale, chiamato anche solo link o collegamento web, contiene un indirizzo per una destinazione e funge da riferimento per dei dati. Un utente può seguire facilmente un link per giungere a destinazione tramite un clic, un tap o passando sopra il link.

Un hyperlink può essere un frammento di testo, un'immagine, un'icona o un grafico che, dopo averci cliccato sopra, conduce a una diversa pagina web o un diverso documento. Può anche condurre a una sezione specifica e a un elemento all'intero della stessa pagina web o documento.

Fondamentalmente, i collegamenti ipertestuali sono puntatori cliccabili verso una risorsa.

Ad esempio, questo collegamento alla pagina iniziale di freeCodeCamp è un collegamento ipertestuale. Quando si clicca sul testo sottolineato, il browser lascia la pagina attuale e ci reindirizza lì.

Ogni risultato di ricerca di Google è un collegamento ipertestuale. Quando si clicca su uno di quelli, si lascia la pagina di ricerca e si arriva al risultato.

Senza collegamenti ipertestuali, si dovrebbe conoscere ogni singolo URL (Uniform Resource Locator, localizzatore uniforme di risorse) di ogni pagina web per poterle visitare.

Hyperlink e HTML

Un collegamento ipertestuale è un elemento di un documento HTML.

Un ipertesto è un testo che contiene collegamenti ipertestuali. Il testo che contiene il collegamento (il riferimento ai dati) viene chiamato testo di ancoraggio.divertiti a programmare

Si utilizzano elementi di ancoraggio per creare hyperlink su altre pagine web. Questi elementi creano collegamenti: un testo o un'immagine cliccabile che, quando cliccati, ci portano in una nuova pagina o in una diversa sezione della stessa pagina.

Le pagine HTML sono formate da collegamenti ipertestuali. I collegamenti sono una caratteristica essenziale e distintiva del World Wide Web, che gli hanno consentito di avere così tanto successo. Hanno permesso l'idea stessa di navigazione.

Ci permettono di collegare un documento a un altro documento su diversi computer e reti.

Inizialmente l'idea è nata dalle bibliografie e dalle note a pié di pagina nei documenti scientifici accademici, ma ciò ha portato alla possibilità di scoprire siti web di altre persone con il passare del tempo.

Gli utenti potevano cliccare per andare sulle pagine web non solo del sito web dell'autore ma anche di altri siti web di altri autori e spostarsi così da una pagina web a un'altra. Qualsiasi cosa può fungere da collegamento per un'altra cosa, rendendo facile navigare i diversi luoghi del Web. E questo ha permesso agli utenti di avere un ampio accesso alle informazioni.

Il World Wide Web è costituito da migliaia di miliardi di collegamenti ipertestuali tra pagine web, creando così qualcosa che richiama alla mente l'idea di una ragnatela molto grande.

Come creare un collegamento in HTML

Si possono creare collegamenti con l'elemento <a> , dove "a" sta per ancoraggio (anchor, in inglese).

Ecco un esempio di un elemento di ancoraggio in HTML:

<a href="https://www.freecodecamp.org/"> freeCodeCamp Home Page </a>

Vediamo da quali parti è formato:

• L'elemento di collegamento ha un tag di apertura <a> e un tag di chiusura </a> .
• Il testo che gli utenti vedono e su cui possono cliccare si trova tra i tag di apertura e chiusura a – in questo caso è freeCodeCamp Home Page. Viene chiamato testo del collegamento e dovrebbe descrivere la destinazione del collegamento.
• All'interno del tag di apertura, <a>, si aggiunge l'attributo href , che è l'abbreviazione di hypertext reference, cioè riferimento ipertestuale. Il valore dell'attributo href specifica l'URL a cui si vogliono portare gli utenti quando il testo del collegamento viene cliccato.
• Non bisogna dimenticarsi del simbolo di uguale = e delle virgolette ""  che devono sempre accompagnare l'attributo href.

I collegamenti ipertestuali hanno un aspetto predefinito diverso da quello del testo semplice. Ciò accade per questioni di fruibilità perché permette agli utenti di sapere che è appunto un collegamento.

Per impostazione predefinita, il testo avrà un colore blu e una sottolineatura. Tuttavia ciò si può cambiare, aggiungendo degli stili CSS.

Su un computer, quando si passa il mouse sopra un link, il puntatore cambia da una freccia a una mano, per indicare che è qualcosa che si può cliccare.

Questo tipo di collegamento ipertestuale nell'esempio qui sopra permette il collegamento ad altri siti. È un collegamento esterno, utilizzato per connettere due pagine di due siti web completamente diversi.

In questo caso, il valore di href è un URL assoluto – cioè un indirizzo web completo di un sito che comprende anche il nome di dominio.

Come collegarsi a una pagina diversa nello stesso sito

I collegamenti interni sono collegamenti che dirigono l'utente a pagine diverse dello stesso sito. Non conducono a siti esterni.

In questi casi, l'attributo href ha un URL relativo.

Ad esempio:

<nav>
    <ul>
        <li><a href="about.html">  Chi sono  </a> </li>
        <li><a href="posts.html">   Post del Blog </a> </li>
        <li><a href="projects.html"> I miei progetti </a>< /li>
        <li><a href="contact.html">  Contattami  </a> </li>
    </ul>
</nav>

Nell'esempio qui sopra, abbiamo creato un menu di navigazione che contiene collegamenti a diverse pagine dello stesso sito. I collegamenti conducono rispettivamente alle pagine "Chi sono", "Post del Blog", "I miei progetti", e "Contattami".

In questo caso, non dobbiamo specificare il nome di dominio e l'URL completo nell'attributo href , perché i percorsi di questi file sono relativi al nostro progetto e alla cartella di lavoro attuale.

In questo caso tutti i file si trovano nella stessa cartella e hanno la stessa struttura gerarchica, quindi è sufficiente scrivere solo il nome dei file.

Come creare un collegamento a una sezione specifica di un sito

E se volessimo un collegamento per saltare a un punto specifico di una pagina?

Magari abbiamo citato un argomento e vogliamo rinviare i lettori a una sezione successiva della pagina nella quale ne parliamo più in dettaglio.

Possiamo creare collegamenti che connettono contenuti nella stessa pagina.

Innanzitutto, dobbiamo andare nella sezione a cui vogliamo che il collegamento porti e dobbiamo aggiungere l'attributo id nell'etichetta di apertura.

Ad esempio potremmo avere un paragrafo a cui vogliamo fare riferimento:

<p id="extra-info"> Le migliori città da visitare </p>

Poi, nel nostro collegamento, aggiungiamo un # in fondo e scriviamo il valore cha abbiamo dato all'attributo id, in questo caso extra-info:

<a href="#extra-info"> Leggi informazioni aggiuntive sulle città da visitare </a>

Come aprire un collegamento in una nuova scheda

Quando un collegamento indirizza a un sito esterno, è una buona regola far sì che si apri in una nuova scheda. Non vogliamo perdere i nostri visitatori.

Per impostazione predefinita, il browser apre i collegamenti nella stessa scheda.

Possiamo cambiare questo collegamento:

<a href= "https://www.freecodecamp.org/"> freeCodeCamp Home Page </a>

In questo:

<a href= "https://www.freecodecamp.org/" target="_blank"> freeCodeCamp Home Page </a>

Possiamo aggiungere l'attributo target al tag di apertura <a>, e assegnargli il valore _blank che apre il collegamento in una nuova scheda.

Come creare collegamenti per inviare email

I collegamenti possono compiere altre azioni, a parte il semplice rimando ad altre pagine o siti web.

Ad esempio, ci sono collegamenti che aprono il programma predefinito di posta elettronica e permettono di inviare un nuovo messaggio di posta a un indirizzo specifico.

<a href="mailto:hellothere@gmail.com">Inviami un'email!</a>

In questo caso, l'attributo href inizia con mailto: e contiene poi l'indirizzo email a cui vogliamo che venga mandato un messaggio.

Il collegamento non appare diverso da qualsiasi altro collegamento di cui abbiamo discusso fin qui. Ma quando viene cliccato, permette di iniziare a scrivere un messaggio di posta aprendo il programma di posta predefinito dell'utente.

Quando questo accade, il campo A è già precompilato con l'indirizzo email al quale si vuole inviare il messaggio.

Conclusione

In questo articolo, abbiamo visto la definizione di un hyperlink, o collegamento ipertestuale, e e il motivo per cui questi collegamenti sono una parte così importante del Web.

Abbiamo anche imparato a creare diveri tipi di collegamenti in HTML.

Grazie per la lettura e buona programmazione!

Una media query è una funzionalità del CSS. Permette di creare e implementare layout che si adattano alle caratteristiche del dispositivo che si sta utilizzando. L'altezza e la lunghezza di una pagina sono alcune di queste caratteristiche.

In questa breve guida, vedremo come si possono impostare diverse proprietà di lunghezza nella regola di una media query. Per il momento, vediamo prima le cose fondamentali.

Come funzionano le media query in CSS

Ora che abbiamo un'idea di base di cos'è una media query, diamo un'occhiata a come funziona davvero questa particolare funzionalità del CSS.

Ecco una semplice media query:

@media only screen and (max-width: 576px) {
    // stili da applicare
}

@media only screen and (min-width: 576px) {
    // stili da applicare
}

Ciò significa che gli stili scritti all'interno delle media query qui sopra funzioneranno o verranno applicati solo con le proprietà di lunghezza specificate.

Letteralmente, stiamo chiedendo al CSS che per questa lunghezza particolare (cioè, la proprietà max-width di 576px) vengano applicati gli stili che scriveremo qui, specifici solo per questa lunghezza, a partire dalla lunghezza iniziale di 0px.

Le proprietà max-width e min-width

Ci sono due cose che bisogna tener presenti quando creiamo media query per diverse dimensioni di schermi: le proprietà max-width e min-width.

Quando a una media query viene passata la proprietà max-width, CSS la interpreta come una lunghezza a partire da zero – cioè come se non fosse stata impostata una proprietà di lunghezza minima. Ci arriveremo tra poco.

Una volta che alla proprietà max-width viene assegnato un valore, tutti gli stili all'interno di quella particolare media query verranno applicati a qualsiasi dispositivo le cui dimensioni dello schermo vanno da 0px alla lunghezza massima specificata.

La proprietà min-width, d'altra parte, prende il valore iniziale che gli è stato assegnato e applica gli stili all'interno della regola media fino alla successiva max-width presente. Supponiamo, ad esempio:

@media only screen and (min-width: 576px) {
    // applica gli stili dalla lunghezza minima di 
    // 576px (dispositivi con schermo di grandezza media)
}

Gli stili che verranno scritti nella media query qui sopra saranno applicati solo ai dispositivi con lunghezza dello schermo a partire dalla lunghezza minima specificata.

Come impostare l'intervallo di lunghezza con una media query

Il metodo che abbiamo appena visto per creare le media query applicando solo una proprietà width risolve solo un problema.

Impostando un "intervallo di lunghezza", si ha un certo grado di flessibilità nella creazione di layout che si adattano a schermi di tutte le dimensioni.

Per impostare un "intervallo di lunghezza" preciso si crea una media query come abbiamo visto in precedenza. L'unica differenza è l'aggiunta di più espressioni media (cioè, dimensioni di schermi).

Diamo un'occhiata:

@media only screen and (min-width: 360px) and (max-width: 768px) {
    // stili da applicare in questo intervallo di dimensioni
}

La media query precedente verrà applicata solo quando l'espressione definita in alto è valida (cioè per gli schermi di dispositivi mobili per cui stiamo scrivendo uno stile).

Questa media query prende il primo valore di lunghezza come valore iniziale e il secondo come valore finale.

Ricordate la differenza tra le proprietà max-width e min-width? Stiamo semplicemente dicendo al browser di applicare gli stili CSS che scriviamo all'interno di questa regola ai dispositivi mobili le cui dimensioni di schermo vanno da 360px a 768px.

In parole semplici, stiamo creando layout che si adatteranno anche a schermi di piccole e medie dimensioni, come tablet o dispositivi mobili.

Si possono consultare i punti di passaggio tra le varie dimensioni degli schermi che sono disponibili nella documentazione di Bootstrap. A partire da questi, si possono impostare gli intervalli che si preferiscono.

Proviamo le media query con flexbox

Abbiamo visto come creare una media query di base che considera espressioni con diverse dimensioni di schermo. E abbiamo visto la differenza tra le proprietà max-width e min-width e come applicarle.

In questa sezione, vedremo come creare un semplice layout il cui aspetto cambia in diversi punti di passaggio (breakpoint, corrispondenti a specifiche dimensioni di schermo). Iniziamo creando la pagina HTML che contiene il layout.

<!DOCTYPE html>
<html lang="it">
  <head>
    <title>Esempio della Media Query</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="boxes box1">
        <h1>Primo Box</h1>
        <p>
        Informazioni del primo box
        </p>
      </div>
      <div class="boxes box2">
        <h1>Secondo Box</h1>
        <p>
          Informazioni del secondo box
        </p>
      </div>
  </body>
</html>

Il codice qui sopra mostrerà due box con le loro rispettive informazioni, quando gli stili vengono applicati.

.container {
  display: flex;
  flex-wrap: wrap;
  width: 980px;
  margin: 0 auto;
  margin-top: 40px;
}

@media only screen and (min-width: 320px) and (max-width: 576px) {
  .container {
    width: 100%;
    padding-left: 23px;
    flex-direction: column-reverse;
  }
  .boxes {
    width: 100%;
  }
}

Osservando il file CSS, possiamo notare che la media query ha una lunghezza minima di 320px e una lunghezza massima di 576px. Questo significa che tutti gli stili scritti all'interno di questa regola si applicano solo ai dispositivi con dimensioni di schermo piccole e molto piccole.

Anche il layout dei box cambia anche in questo particolare intervallo di lunghezza. Questo è causato dal selettore .container, la cui proprietà flex-direction cambia da row a column-reverse.

Si possono utilizzare anche altri valori per la proprietà flex-direction. Qui si possono consultare i valori disponibili.

Conclusione

Se non si imposta un intervallo di lunghezza, gli stili CSS dell'esempio precedente verranno applicati a tutti i dispositivi con una dimensione minima di 576px.

Quando si imposta un intervallo di dimensioni, si ha un miglior controllo. Si possono specificare quali stili dovrebbero essere applicati a un dispositivo con una particolare dimensione dello schermo, ottenendo così un'applicazione più flessibile.

Grazie per aver letto questo articolo. Condividilo se ti è stato utile per capire perché si dovrebbero impostare intervalli di lunghezza nella creazione di media query.

Impostare un colore al testo di un sito web che stai costruendo potrebbe essere poco chiaro all'inizio. Ma in questo articolo impareremo come si fa.

Come impostare il colore del testo in HTML

In CSS, la proprietà background-color è abbastanza semplice da utilizzare per impostare il colore di sfondo di qualsiasi elemento.

Ma se vogliamo impostare il colore di qualcosa che è in primo piano nella pagina? Soprattutto del testo, di cui normalmente non si vuole impostare un colore di sfondo.

Non c'è una proprietà foreground-color in CSS, ma è la proprietà color che si occupa di questo.

In questo articolo, ti mostrerò come impostare il colore del testo utilizzando la proprietà color. Vedremo anche i vari modi in cui specificare i valori.

Ci sono 4 modi diversi per specificare i valori della proprietà color: nomi dei colori, valori esadecimali, valori RGB e valori HSL. Vediamo ora ciascuno di questi.

Nomi dei colori

Come implica il nome, si utilizza la proprietà color e si applica il valore scrivendo il nome del colore che si vuole. Questo può essere red, green, blue, orange, crimson, cyan, o qualsiasi altro nome (inglese) di colore. Esistono 147 nomi di colori riconosciuti dai browser.

La sintassi di base è questa:

elemento {
    color: nomeColore;
}

<p>freeCodeCamp</p>

 p {
     color: crimson;
}

Colori esadecimali

I valori esadecimali vengono utilizzati per rappresentare i colori con un totale di 6 caratteri. Iniziano con il carattere # seguito da una cifra da 0 a 9 o da una qualsiasi lettera da A a F.

I primi 2 valori rappresentano il rosso, i successivi 2 il verde e gli ultimi 2 il blu. Con i valori esadecimali, non c'è limite alle tonalità di colori che si possono utilizzare.

<p>freeCodeCamp</p>

 p {
    color: #dc143c;
 }

Colori RGB

RGB è l'abbreviazione di Red, Green e Blue (rosso, verde e blu). Con i colori RGB, si specificano i colori in termini di quanto rosso, verde e blu si vuole. Tutti e tre sono espressi con numeri tra 0 e 255.

C'è un tipo di RGB chiamato rgba. La ‘a’ aggiuntiva sta per alpha, che permette di specificare l'opacità (o trasparenza) del colore. Assume un valore che va da 0.0 a 1.0 – 0.0 significa 0% di opacità, 0.5 significa 50% di opacità e 1.0 significa 100% di opacità.

La sintassi di base è rgb(quantitàDiRosso, quantitàDiVerde, quantitàDiBlu, alpha).

Ci si può fermare a rgb(quantitàDiRosso, quantitàDiVerde, quantitàDiBlu) se non si vuole specificare un valore per alpha.

Ecco la sintassi per valori RGB standard:

<p>freeCodeCamp</p>

 p {
   color: rgb(220, 20, 60);
 }

Ed ecco l'esempio con un valore alpha del 50% (0.5) di opacità:

p {
    color: rgb(219, 20, 60, 0.5);
}

Colori HSL

HSL è l'abbraviazione di hue, saturation, e lightness (tonalità, saturazione e luminosità). È un altro modo per specificare il colore del testo (e di qualsiasi altra cosa che abbia un colore) in CSS.

• La tonalità rappresenta la ruota dei colori con 360°, dove il rosso è 0°, il verde è 120°e il blu è 240°.
• La saturazione è la quantità di grigio nel colore, espressa in percentuale. 0% rappresenta una tonalità di grigio mentre 100% è il colore stesso.
• La luminosità è la quantità di oscurità e luminosità nel colore espressa come una percentuale. 0% è nero e 100% è bianco.

Proprio come i colori RGB, si può anche impostare l'opacità del colore. Quindi, c'è anche hsla.

La sintassi di base completa è hsl(gradoDiColore, percentualeDiSaturazione, percentualeDiLuminosità, alpha). Ci si può fermare a hsl(gradoDiColore, percentualeDiSaturazione, percentualeDiLuminosità) se non si vuole un valore alpha.

<p>freeCodeCamp</p>

 p {
   color: hsl(348, 83%, 47%);
 }

Si può applicare un'opacità particolare al colore HSL in questo modo:

 p {
   color: hsla(348, 83%, 47%, 0.5);
  }

Per impostare un colore si dovrebbero utilizzare i nomi dei colori, i colori esadecimali, i colori RGB o i colori HSL?

Una delle cose meravigliose di CSS è che ci sono molteplici modi per fare la stessa cosa, come hai visto per l'applicazione di colori al testo.

Dato che abbiamo applicato i colori in 4 modi diversi, ci si potrebbe chiedere qual è il migliore da utilizzare.

Quando si usano i nomi dei colori, si è abbastanza limitati nel numero di colori diversi che si può applicare. Il rosso, il verde, il blu, il giallo o qualsiasi altro nome di colore hanno tante varianti che non sono disponibili usando solo i nomi dei colori. Abbiamo accesso solo a 147 colori predefiniti riconosciuti dai browser.

I colori esadecimali sono molto dinamici. Sono i più utilizzati tra gli sviluppatori perché il limite è solo la creatività. Con i colori esadecimali, si possono utilizzare varie tonalità e persino un colore che nessuno ha mai utilizzato prima.

I colori RGB sono tanto dinamici quanto i colori esadecimali. Oltre ad essere in grado di specificare quanto rosso, verde e blu si vuole da 0 a 255, si può anche impostare la trasparenza del colore con un valore alpha aggiuntivo.

HSL è il più dinamico di tutti. Si può specificare l'esatto colore che si desidera in gradi da 0 a 360 sulla ruota dei colori, si può impostare la saturazione e la luminosità che si desidera in percentuale, ed anche impostare un'opacità da 0.0 a 1.0.

Quindi dipende solo da ciò che si vuole e dai propri casi d'uso – e da quanto creativi o specifici si vuole essere.

Conclusione

Applicare i colori al testo aiuta a rendere un sito web più accattivante per i visitatori. La giusta combinazione di colori può anche aiutare a rendere il contenuto più leggibile.

In questo articolo abbiamo imparato come applicare dei colori al testo con i 4 diversi tipi di valori che si possono usare con la proprietà color.

Grazie per aver letto questo articolo e continua a programmare!

A volte in JavaScript si può considerare l'utilizzo di un'istruzione switch al posto di un'istruzione if else.

L'istruzione switch può offrire una sintassi più semplice rispetto a istruzioni if else più complicate.

Consideriamo l'esempio sottostante – invece di utilizzare questa lunga istruzione if else, possiamo scegliere di utilizzare un'istruzione switch più semplice da leggere.

const animale = "cane";

if (animale === "lucertola") {
  console.log("Ho una lucertola");
} else if (animale === "cane") {
  console.log("Ho un cane");
} else if (animale === "gatto") {
  console.log("Ho un gatto");
} else if (animale === "serpente") {
  console.log("Ho un serpente");
} else if (animale === "pappagallo") {
  console.log("Ho un pappagallo");
} else {
  console.log("Non ho nessun animale");
}

const animale = "cane";

switch (animale) {
  case "lucertola":
    console.log("Ho una lucertola");
    break;
  case "cane":
    console.log("Ho un cane");
    break;
  case "gatto":
    console.log("Ho un gatto");
    break;
  case "serpente":
    console.log("Ho un serpente");
    break;
  case "pappagallo":
    console.log("Ho un pappagallo");
    break;
  default:
    console.log("Non ho nessun animale");
    break;
}

In questo articolo, vedremo cosa sono le istruzioni switch e come funzionano. Ti aiuterò anche a capire se sono una buona alternativa da utilizzare nel tuo codice.

Che cos'è un'istruzione switch?

Nella programmazione, un'istruzione switch è un'istruzione di controllo del flusso che confronta il valore di una espressione con diversi casi possibili.

Questa è la sintassi di base di un'istruzione switch:

switch (espressione) {
  case 1:
   //questo codice verrà eseguito se questo caso corrisponde all'espressione
    break;
  case 2:
   //questo codice verrà eseguito se questo caso corrisponde all'espressione
    break;
  case 3:
   //questo codice verrà eseguito se questo caso corrisponde all'espressione
    break;
  default:
    //questo codice verrà eseguito se nessun caso corrisponde all'espressione
    break;
}

Il computer valuterà l'istruzione switch verificando l'uguaglianza (stretta) === tra i vari case e l'espressione. Se uno dei casi corrisponde all'espressione, allora verrà eseguito il codice all'interno di quella clausola case.

switch (espressione) {
  case 1:
   //questo codice verrà eseguito se questo caso corrisponde all'espressione
    break;
  case 2:
   //questo codice verrà eseguito se questo caso corrisponde all'espressione
    break;
}

Se nessuno dei casi corrisponde all'espressione, allora la clausola default verrà eseguita.

  default:
    //questo codice verrà eseguito se nessun caso corrisponde all'espressione
    break;

Se più casi dell'istruzione switch possono corrispondere all'espressione, allora il primo case che corrisponde all'espressione verrà utilizzato.

Le istruzioni break permettono di uscire dall'istruzione switch quando un case corrisponde. Se non sono presenti istruzioni break, allora il computer continuerà l'esecuzione dell'istruzione switch anche se viene trovata una corrispondenza.

Se sono presenti delle istruzioni return nello switch, allora non è necessaria l'istruzione break.

Esempio di istruzioni switch in JavaScript

In questo esempio, confrontiamo "oboe" con i vari casi. "oboe" corrisponderà alla terza clausola case e stamperà nella console "Suono l'oboe".

switch ("oboe") {
  case "tromba":
    console.log("Suono la tromba");
    break;
  case "flauto":
    console.log("Suono il flauto");
    break;
  case "oboe":
    console.log("Suono l'oboe");
    break;
  default:
    console.log("Non suono nessuno strumento");
    break;
}

Se cambiassimo l'espressione in "nessuno strumento", allora verrebbe eseguita la clausola default e il messaggio stampato nella console sarebbe "Non suono nessuno strumento".

switch ("nessuno strumento") {
  case "tromba":
    console.log("Suono la tromba");
    break;
  case "flauto":
    console.log("Suono il flauto");
    break;
  case "oboe":
    console.log("Suono l'oboe");
    break;
  default:
    console.log("Non suono nessuno strumento");
    break;
}

Senza istruzioni break

In questo esempio, c'è corrispondenza con il case 2. Ma senza un'istruzione break, il computer continuerà con il case 3 e con la clausola default.

Vedrai il risultato di tre istruzioni console.log perché non è stata inclusa l'istruzione break.

switch (2) {
  case 1:
    console.log("È stato scelto il numero 1");
  case 2:
    console.log("È stato scelto il numero 2");
  case 3:
    console.log("È stato scelto il numero 3");
  default:
    console.log("Non è stato scelto nessun numero");
}

Dove posizionare la clausola default

La convenzione usuale è quella di inserire la clausola default come ultima clausola. Ma si può posizionare anche prima di altre clausole.

const cibo = "noccioline";

switch (cibo) {
  case "torta":
    console.log("Mi piace la torta");
    break;
  case "pizza":
    console.log("Mi piace la pizza");
    break;
  default:
    console.log("Mi piace di tutto");
    break;
  case "gelato":
    console.log("Mi piace il gelato");
    break;
}

Il computer controllerà sempre ogni caso per trovare una corrispondenza. Poiché il valore della variabile cibo non corrisponde a nessuno dei casi, allora verrà eseguito il caso di default.

Casi multipli per una stessa operazione

A volte, a più casi può corrispondere una stessa operazione.

Invece di scrivere gli stessi console.log per ciascun caso, possiamo tralasciare le istruzioni break e inserire un'istruzione dopo l'elenco dei casi.

Il messaggio "Questo paese si trova in Europa" verrà stampato nella console se paese corrisponde a uno dei casi tra "Francia", "Spagna", "Irlanda" o "Polonia".

const paese = "Irlanda";
switch (paese) {
  case "Francia":
  case "Spagna":
  case "Irlanda":
  case "Polonia":
    console.log("Questo paese si trova in Europa");
    break;
  case "Stati Uniti":
  default:
    console.log("Questo paese non si trova in Europa");
}

Ambito di blocco e istruzioni switch

Nell'esempio seguente si verificherà un errore, perché la variabile messaggio è già stata dichiarata e non si può dichiarare un'altra variabile con lo stesso nome nello stesso ambito di blocco.

const commissione = "Andare a fare shopping";
switch (commissione) {
  case "Andare dal dentista":
    let messaggio = "Odio andare dal dentista";
    console.log(messaggio);
    break;
  case "Andare a fare shopping":
    let messaggio = "Adoro fare shopping";
    console.log(messaggio);
    break;
  default:
    console.log("Nessuna commissione");
    break;
}

Per evitare il messaggio di errore, i casi devono essere racchiusi in parentesi graffe.

const commissione = "Andare a fare shopping";
switch (commissione) {
  case "Andare dal dentista": {
    let messaggio = "Odio andare dal dentista";
    console.log(messaggio);
    break;
  }
  case "Andare a fare shopping": {
    let messaggio = "Adoro fare shopping";
    console.log(messaggio);
    break;
  }
  default: {
    console.log("Nessuna commissione");
    break;
  }
}

Conclusione

Un'istruzione switch può essere un'alternativa all'istruzione if else. Un'istruzione switch confronta il valore di un'espressione con diversi casi.

Le istruzioni switch controllano l'uguaglianza stretta. In questo esempio, poiché "2"!== 2, verrà eseguita la clausola default.

switch (2) {
  case "2":
    console.log("Il numero 2 in una stringa");
    break;
  case "3":
    console.log("Il numero 3 in una stringa");
    break;
  default:
    console.log("Nessun numero presente");
    break;
}

Le istruzioni break permettono di uscire da uno switch quando c'è corrispondenza con un case. Se non sono presenti istruzioni break, allora il computer continuerà l'esecuzione dell'istruzione switch anche se viene trovata una corrispondenza.

Spero che questo articolo sull'istruzione switch ti sia piaciuto.