HTML5 e CSS3: la guida completa per lo sviluppatore WEB

Se desideri imparare html5 e css3 sei nel posto giusto. Ho deciso di scrivere una serie di articoli con video ed approfondimenti allo scopo di permettere a tutti, anche a chi non ha alcuna base di programmazione, di imparare a sviluppare siti web in modo semplice ed intuitivo ma soprattutto velocemente.

html5, le basi

Regola n.1: se desideri veramente imparare a programmare devi iniziare da subito a sporcarti te mani; quindi per prima cosa scarica Sublime Text, un validissimo editor che consiglio vivamente soprattutto a chi è agli inizi, e scrivi:

 

Salva il documento con estensione .html ed aprilo con un browser web, ad esempio Firefox.

Ok, ora che hai compreso come visualizzare una pagina web, ti introduco dei tag

come puoi vedere, viene utilizzato “/” per chiudere un tag mentre per tutti i tag verrà applicato tale concetto di chiusura.

A questo punto, crea un nuovo documento con blocco note e copia quanto vedi nell’immagine sopra e visualizza tutto in un browser, fai esperimenti e variazioni.

Un’applicazione web in HTML5

Proseguendo in questo articolo sarai in grado di creare una semplice applicazione web. Imparare a programmare significa innanzitutto studio, quindi non seguire alla lettera le indicazioni che ti darò in seguito ma fai variazioni e sperimenta.

L’applicazione che andrai a creare, si adatterà perfettamente allo schermo di dispositivi mobile, ed avrà lo scopo di mostrare un’immagine dato un indirizzo url.

Prima di proseguire nell’articolo, ti introduco un’altro tag

Questo tag viene utilizzato per scrivere pragrafi di un testo.

A questo punto, crea un’ulteriore pagina in html ed introduci il nuovo tag che hai imparato, sperimenta e combina tutto ciò che hai imparato fino ad ora.

Introduzione ai commenti

Commentare è un modo per lasciare indicazioni nel codice senza influenzare il codice stesso.

Commentare è anche un modo conveniente per rendere il codice inattivo senza doverlo cancellare interamente.

Un commento con in html inizia con <!– e termina con –>

es

<!– questo è un commento –>

un commento multiriga in html ha la stessa forma del commento in riga singola

es

<!–

questo è un

commento

multiriga

–>

Riempi gli spazi vuoti con del testo segnaposto

Gli sviluppatori Web usano tradizionalmente il testo di lorem ipsum come testo segnaposto.

Il testo del “lorem ipsum” viene estratto a caso da un famoso brano di Cicerone dell’antica Roma.

eccone un piccolo estratto

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet auctor tellus, at ultricies sem. Sed suscipit, nulla eget vulputate gravida, erat arcu congue odio, vel posuere sapien augue vitae ex. Proin vehicula venenatis faucibus.

Il testo di Lorem ipsum è stato usato come testo segnaposto dai tipografi fin dal 16 ° secolo e questa tradizione continua sul web.

Prova quindi a mettere insieme ciò che hai appreso fino ad ora e crea una pagina web con un titolo h1, un sottotitolo h2 ed un paragrafo <p> con del testo segnaposto.

 

Cambia il colore del testo con i css in linea

Lo stile che è responsabile del colore del testo di un elemento è “color”. Ecco come impostare il colore del testo di un tuo elemento h2 in blu:

<h2 style="color: blue">imparare a programmare</h2>

imparare a programmare

prova ora ad unire tutto ciò che hai imparato, sperimenta.

Usa i selettori CSS per gli elementi di stile

Con i CSS, ci sono centinaia di proprietà CSS che puoi usare per cambiare il modo in cui un elemento appare sulla tua pagina.

Quando hai inserito <h2 style = “color: blue”> imparare a programmare </ h2>, hai dato a quel singolo elemento h2 uno stile in linea.

Questo è un modo per aggiungere stile a un elemento, ma un modo migliore è usare CSS, che sta per Cascading Style Sheets nel modo seguente: nella parte superiore del codice, crea un elemento di stile come questo:     

<Style>     </ Style>

All’interno di quell’elemento stile, puoi creare un selettore CSS per tutti gli elementi h2.

Ad esempio, se vuoi che tutti gli elementi h2 siano rossi, il tuo elemento di stile sarà simile a questo:     

<style>       h2 {color: red;}     </ style>

Nota che è importante avere sia parentesi graffe di apertura che di chiusura ({e}) attorno allo stile di ogni elemento.

Devi anche assicurarti che lo stile del tuo elemento sia tra i tag di stile di apertura e di chiusura.

Infine, assicurati di aggiungere il punto e virgola alla fine di ciascuno degli stili del tuo elemento.

 

Ora, utilizza i selettori e sperimenta, un piccolo esempio potrebbe essere

<style>

h2 {color: red;}

</style>

<h2>imparare a programmare</h2>

Una una classe css per dare lo stile ad un’elemento

Le classi sono stili riutilizzabili che possono essere aggiunti agli elementi HTML.

Ecco un’esempio di dichiarazione della classe CSS:     

<Style>       

.blue-text {color: blue;}     

</ Style>

Puoi vedere come ho creato una classe CSS chiamata blue-text all’interno del tag <style>.

Puoi applicare una classe a un elemento HTML come questo:

<h2 class = “blue-text”> imparare a programmare </ h2>

Nota che nel tuo elemento di stile CSS, le classi dovrebbero iniziare con un punto.

Nelle dichiarazioni di classe degli elementi HTML, le classi non devono iniziare con un punto.

 

A questo punto riprendendo l’esempio di prima, possiamo applicare il concetto che ti ho appena espresso:

<style>

.imparareaprogrammare {color: red;}

</style>

<h2 class=”imparareaprogrammare”>imparare a programmare</h2>

se quindi apporti le modifiche al tuo documento html, otterrai:

imparare a programmare

Applica uno stile a più elementi con una classe css

Ricorda che puoi associare le classi agli elementi HTML usando

class=”la-tua-classe”

all’interno del tag di apertura dell’elemento pertinente.

Ricorda che i selettori di classe CSS richiedono un punto all’inizio come ad esempio questo:     

.imparareaprogrammare {color: blue;}

Ma ricorda anche che le dichiarazioni di classe non usano un punto:

<h2 class=”imparareaprogrammare”> Imparare a programmare </ h2>

A questo punto esercitati ad applicare una classe a più elementi.

Cambia la dimensione del carattere di un elemento

La dimensione del carattere è controllata dalla proprietà CSS della dimensione del carattere,

come questa:     h1 {font-size: 30px;}

Esercitati ora a cambiare le dimensioni dei caratteri nel tuo documento html

Imposta il font di un elemento

Puoi impostare il font di un elemento usando la proprietà font-family.

Ad esempio, se desideri impostare il carattere di un elemento h2 su Sans-serif,

utilizzerai il seguente CSS:     

h2 {font-family: Sans-serif;}

Importa un Google font

Ora ti mostrerò come importare ed applicare un Google font

Innanzitutto, devi effettuare una chiamata a Google, per esempio, prenderai il carattere di Lobster e lo caricherai nel tuo codice HTML.

Copia lo snippet di codice seguente e incollalo nella parte superiore dell’editor di codice:

<link href = “https://fonts.googleapis.com/css?family=Lobster” rel = “stylesheet” type = “text / css”>

Ora puoi impostare Lobster come valore della font-family sull’elemento h2.

A questo punto, prova ad utilizzare tale font nel tuo documento html.

Specifica come i font dovrebbero degradare

Esistono diversi tipi di carattere predefiniti disponibili in tutti i browser.

Questi includono Monospace, Serif e Sans-Serif

Quando un font non è disponibile, puoi dire al browser di “degradare” su un altro font.

Ad esempio, se vuoi che un elemento utilizzi il carattere Helvetica, ma si degradi anche al tipo di carattere Sans-Serif quando Helvetica non è disponibile, puoi utilizzare questo stile CSS:     

p {font-family: Lobster, Sans-Serif;}

Ora prova a commentare la tua chiamata a Google Fonts, in modo che il carattere Lobster non sia disponibile ed applica il concetto nel tuo documento html in modo da passare al secondo font.

Aggiungi immagini al tuo sito web

Puoi aggiungere immagini al tuo sito web usando l’elemento img e puntare all’URL di un’immagine specifica usando l’attributo src.

Un esempio di questo sarebbe: <img src = “https://dariopironi.com/immagine.jpg”>

Tutti gli elementi img devono avere un’attributo alt.

Il testo all’interno di un attributo alt viene utilizzato per gli screen reader per migliorare l’accessibilità e viene visualizzato se l’immagine non riesce a caricare.

Per aggiungere un attributo alt all’esempio img qui sopra: <img src = “https://dariopironi.com/immagine.jpg” alt = “imparare a programmare”> Nota che nella maggior parte dei casi, gli elementi img si chiudono automaticamente.

Prova ad inserire questa immagine al tuo documento html

https://goo.gl/EBJQ6F

Ridimensiona le immagini

CSS ha una proprietà chiamata width che controlla la larghezza di un elemento.

Proprio come con i caratteri, puoi utilizzare px (pixel) per specificare la larghezza dell’immagine.

Ad esempio, se volessi creare una classe CSS chiamata immagine più grande che fornisse agli elementi HTML una larghezza di 500 pixel, doresti utilizzare:     

<style>       

.larger-image {width: 500 px;}     

</ style>

Crea una classe chiamata immagine più piccola e usala per ridimensionare l’immagine in modo che sia larga solo 100 pixel.

Aggiungi bordi attorno ai tuoi elementi

I bordi CSS hanno proprietà come stile, colore e larghezza

Ad esempio, se volessi creare un bordo rosso di 5 pixel attorno a un elemento HTML, potresti utilizzare questa classe:     

<Style>       

.imparareaprogrammare-border {
border-color: red;
border-width: 5px;
border-style: solid;
}     

</ Style>

Crea una classe chiamata .imparareaprogrammare-border che mette un bordo verde largo 10 pixel con uno stile solid attorno a un elemento HTML e applica quella classe alla tua foto.

Ricorda che puoi applicare più classi a un elemento separando ogni classe con uno spazio all’interno del suo attributo di classe. Per esempio:

<img class = “class1 class2”>

Quindi puoi combinare ad esempio la classe larger-image e la classe imparareaprogrammare-border

in questo modo:

<img class = “larger-image imparareaprogrammare-border”>

Aggiungi angoli arrotondati con border radius

L’immagine che hai inserico con l’esempio precedente, ha attualmente angoli acuti.

Puoi arrotondare gli angoli con una proprietà CSS chiamata border-radius.

È possibile specificare un raggio del bordo con pixel.

Dai alla tua foto un raggio di 10px.

Nota: hai molteplici soluzioni possibili. Sperimenta.

Di seguito un esempio di applicazione

<Style>       

.imparareaprogrammare-border {
border-color: red;
border-width: 5px;
border-style: solid;
border-radius: 10px;
}     

</ Style>

Crea immagini circolari con un border radius

Oltre ai pixel, puoi anche specificare un border radius usando una percentuale.

Dai alla tua foto un raggio del 50%.

Link a pagine esterne

L’elemento <a>, noto anche come elemento di ancoraggio, viene utilizzato per collegare il contenuto di una pagina web con elementi esterni.

di seguito, un’esempio del suo utilizzo:

<a href=”https://dariopironi.com/imparare-a-programmare-html5-e-css/”>imparare a programmare</a>

Crea un elemento <a> che si collega a https://dariopironi.com e ha “Dario Pironi” come testo di ancoraggio.

Combina le nozioni che hai appreso fino ad ora e sperimenta.

Inserisci un link all’interno di un paragrafo

L’elemento <a> può essere inserito (o annidato) all’interno di un paragrafo <p>

es

<p>Una serie di articoli per <a href=”https://dariopironi.com/imparare-a-programmare-html5-e-css/”>imparare a programmare</a></p>

Annidare significa semplicemente mettere un elemento all’interno di un altro elemento.

Ora sperimenta.

Annida un elemento <a> esistente in un elemento <p> in modo che il paragrafo circostante dice “HTML5 e CSS -“, ma dove solo “imparare a programmare” è un collegamento e il resto del testo è testo normale.

Crea collegamenti morti usando il simbolo #

A volte si desidera aggiungere elementi al proprio sito Web prima di sapere dove si collegheranno.

Questo è utile anche quando cambi il comportamento di un collegamento usando jQuery, cosa che apprenderai più avanti.

Sostituisci il valore dell’attributo href di un elemento con un #, noto anche come simbolo di cancelletto, per trasformarlo in un collegamento morto.

es.

<a href=”#”>imparare a programmare</a>

Trasforma un’immagine in un collegamento

Annida la tua immagine all’interno di un elemento <a>. Ecco un esempio:

<a href=”#”><img src=”https://goo.gl/EBJQ6F” alt=”imparare a programmare | html5 e css”></a>

Ricorda di usare # come proprietà href di un elemento per trasformarlo in un collegamento morto.

Posiziona l’elemento immagine esistente all’interno di un elemento di ancoraggio.

Dopo averlo fatto, passa il mouse sopra l’immagine con il cursore.

Il puntatore normale del tuo cursore dovrebbe diventare il puntatore che fa clic sul link. La foto ora è un link.

Crea un elenco puntato non ordinato

L’HTML ha un elemento speciale per la creazione di elenchi non ordinati o di elenchi puntati.

Gli elenchi non ordinati iniziano con un elemento <ul>.

Quindi contengono un numero di elementi <li>.

Per esempio:     

<ul>
<li> latte </li>
<li> formaggio </li>
</ul>

creerebbe un elenco puntato di “latte” e “formaggio”.

Ora riprendi l’esempio crea un elenco non ordinato di tre cose a caso, combina le nozioni che hai appreso fino ad ora e sperimenta.

Crea un elenco ordinato

HTML ha un elemento speciale per la creazione di elenchi ordinati o elenchi in stile numerato.

Gli elenchi ordinati iniziano con un elemento <ol>.

Quindi contengono un numero di elementi <li>.

Per esempio:     

<ol>       

<li> Pizza </ li>       

<li> Pasta </ li>     

</ ol>

creerebbe una lista numerata di “Pizza” e “Pasta”.

Ora, crea una lista ordinata di 3 cose e sperimenta combinando le nozioni già aprese.

Crea un campo di testo

Ora ti mostrerò come creare un modulo web.

Gli input di testo sono un modo conveniente per ottenere input dal tuo utente.

Puoi crearne uno come questo:

<input type = “text”>

Nota che gli elementi di input sono a chiusura automatica, non hanno bisogno di </>.

Prova a creare un elemento di input di tipo text all’interno della tua pagina web.

Aggiungi testo segnaposto a un campo di testo

Il testo del segnaposto è ciò che appare nel testo inserito prima che l’utente abbia inserito qualcosa.

Puoi creare un testo segnaposto nel seguente modo:

<input type= “text” placeholder= “questo è il testo segnaposto”>

Ora, imposta il valore del segnaposto riprendendo l’esempio precedente in “testo segnaposto”.

Crea un modulo form per invio dati

È possibile creare moduli Web che effettivamente inviano dati a un server utilizzando nient’altro che puro HTML.

Puoi farlo specificando un’azione sul tuo elemento del modulo.

Per esempio:

<form action = “/url-dove-vuoi-inviare-dati-dal-form”>

<input type= “text” placeholder= “imparare a programmare”>

</ form>

Riprendi l’esempio precedente ed annida il campo di testo in un elemento del modulo.

Aggiungi l’attributo action = “/invia-dati” a questo elemento del modulo.

Combina le nozioni che hai appreso fino ad ora e sperimenta.

Aggiungi un pulsante Invia a un modulo

Aggiungiamo un pulsante di invio al modulo.

Facendo clic su questo pulsante, i dati del modulo verranno inviati all’URL specificato con l’attributo dell’azione del modulo.

Ecco un esempio di pulsante di invio:

<button type= “submit”>

questo pulsante invia il modulo

</ button>

Riprendi l’esempio precedente ed aggiungi un pulsante di invio al tuo elemento del modulo con tipo submit e “Invia” come testo.

Usa html5 per rendere un campo obbligatorio

È possibile richiedere campi modulo specifici in modo che l’utente non sia in grado di inviare il modulo finché non li ha compilati.

Ad esempio, se vuoi rendere obbligatorio un campo di inserimento del testo, è sufficiente la parola required all’interno del tuo elemento di input, esempio:

<input type = “text” required>

Inserisci il tuo testo in un campo obbligatorio, in modo che l’utente non possa inviare il modulo senza completare questo campo.

Quindi prova a inviare il modulo senza inserire alcun testo.

Hai visto come il tuo modulo HTML5 ti avvisa che il campo è richiesto?

Crea un set di pulsanti di opzione (radio buttons)

È possibile utilizzare i pulsanti di opzione per le domande in cui si desidera che l’utente fornisca solo una risposta.

I radio buttons sono un tipo di input, ciascuno dei tuoi pulsanti radio deve essere annidato all’interno del proprio elemento etichetta.

Tutti i pulsanti radio correlati dovrebbero avere lo stesso attributo nome.

Ecco un esempio di un pulsante di opzione:

<label><input type = “radio” name =”interno-esterno”>Interno</ label>

Aggiungi un paio di pulsanti radio al modulo dell’esempio precedente.

Uno deve avere l’opzione “interno” e l’altro “esterno”.

Ovviamente, sperimenta e fai variazioni.

Crea un set di checkbox

I moduli usano comunemente checkbox per domande che possono avere più di una risposta.

Le caselle di controllo sono un tipo di input

Ciascuna casella di controllo deve essere nidificata all’interno del proprio elemento label.

Tutti gli input relativi alle checkbox devono avere lo stesso attributo name.

Ecco un esempio di una casella di controllo:

<label><input type=”checkbox” name=”opzione1″>Opzione1</label>

Aggiungi al tuo modulo un set di tre checkbox.

Ogni checkbox deve essere annidata all’interno del proprio elemento label.

Controlla pulsanti radio e checkbox per impostazione predefinita

È possibile impostare una casella di controllo o un pulsante di opzione da controllare per impostazione predefinita utilizzando l’attributo selezionato.

Per fare ciò basta aggiungere la parola “checked” all’interno di un elemento di input.

Per esempio:

<input type=”radio” name =”test-name” checked>

Riprendi l’esempio pecedente ed imposta il primo dei tuoi pulsanti radio e il primo dei checkbox per impostazione predefinita.

Annida molti elementi all’interno di un singolo elemento Div

L’elemento div, noto anche come elemento division, è un contenitore generico per altri elementi.

L’elemento div è probabilmente l’elemento HTML più utilizzato di tutti.

È utile per passare il CSS delle proprie dichiarazioni di classe a tutti gli elementi che contiene.

Proprio come qualsiasi altro elemento non auto-chiudente, puoi aprire un elemento div con <div> e chiuderlo su un’altra linea con </ div>.

Prova a inserire il tag div di apertura sopra l’elemento <p> che hai creato in un precedente esempio e il tag div di chiusura dopo il tag </ ol> di chiusura in modo che entrambi i tuoi elenchi si trovino all’interno di un div.

Annida le liste all’interno di un singolo elemento div.

Dai un colore di sfondo a un elemento Div

È possibile impostare il colore di sfondo di un elemento con la proprietà background-color.

Ad esempio, se desideri che il colore di sfondo di un elemento sia verde, lo inserirai nel tuo elemento di stile:     

.green-background {background-color: verde;}

Crea una classe chiamata imparareaprogrammare-background con lo sfondo argento ed assegna questa classe al tuo elemento div.

Imposta l’ID di un elemento

Oltre alle classi, ogni elemento HTML può anche avere un attributo id.

Ci sono molti vantaggi nell’usare gli attributi id, e imparerai di più su di loro una volta che inizierai ad usare jQuery.

Gli attributi id dovrebbero essere unici.

I browser non imporranno questo, ma è una best practice ampiamente concordata.

Quindi per favore non dare più di un elemento allo stesso attributo id.

Ecco un esempio di come tu fornisci al tuo elemento h2 l’id di imparareaprogrammare:

<h2 id = “imparareaprogrammare”>

Riprendi l’esempio del form che hai relizzato in precedenza, dai al tuo elemento form il modulo di identificazione imparareaprogrammare.

Usa un attributo ID per applicare uno stile ad un elemento

Una cosa interessante degli attributi id è che, come le classi, puoi modificarli usando i CSS.

Ecco un esempio di come puoi prendere il tuo elemento con l’attributo id di imparareaprogrammare e dargli il colore di sfondo verde.

Nel tuo elemento di stile:     

#imparareaprogrammare {background-color: green;}

Nota che all’interno del tuo elemento stile, fai sempre riferimento alle classi inserendo un “. “di fronte ai loro nomi.

Fai sempre riferimento agli ID mettendo un # davanti ai loro nomi. Prova a dare al tuo modulo, che ora ha l’attributo id di imparareaprogrammare, uno sfondo verde.

A questo punto abbandona per un po il tuo documento html e creane un’altro.

Imposta il padding di un elemento

Potresti averlo già notato, ma tutti gli elementi HTML sono essenzialmente piccoli rettangoli.

Tre importanti proprietà controllano lo spazio che circonda ogni elemento HTML: padding, margin e border.

La spaziatura di un elemento controlla la quantità di spazio tra l’elemento e il suo bordo.

Qui, puoi vedere che la casella verde e la casella rossa sono nidificate nella casella gialla.

Nota che la casella rossa ha più riempimento rispetto alla casella verde. Quando aumenti il ​​riempimento del riquadro verde, aumenterà la distanza tra il riempimento del testo e il bordo attorno ad esso.

Ora prova tu, cambia il padding della tua casella verde in modo che corrisponda a quello della tua casella rossa.

Utilizza il seguente codice per esercitarti:

<style>
.injected-text {
margin-bottom: -25px;
text-align: center;
}

.box {
border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
}

.yellow-box {
background-color: yellow;
padding: 10px;
}

.red-box {
background-color: red;
padding: 20px;
}

.green-box {
background-color: green;
padding: 10px;
}
</style>
<h5 class=”injected-text”>margin</h5>

<div class=”box yellow-box”>
<h5 class=”box red-box”>padding</h5>
<h5 class=”box green-box”>padding</h5>
</div>

Imposta il margin di un elemento

Il margine di un elemento controlla la quantità di spazio tra il bordo di un elemento e gli elementi circostanti.

Riprendendo l’esempio precedente, puoi vedere che la casella verde e la casella rossa sono nidificate nella casella gialla.

Aumenta i margini delle caselle, si aumenterà la distanza tra il bordo e gli elementi circostanti.

Aggiungi un margine negativo ad un elemento

Il margine di un elemento controlla la quantità di spazio tra il bordo di un elemento e gli elementi circostanti.

Se imposti il ​​margine di un elemento su un valore negativo, l’elemento diventerà più grande. Riprendi l’esempio precedente e prova a impostare il margine su un valore negativo.

Aggiungi padding diversi a ciascun lato di un elemento

Aggiungi margini diversi su ciascun lato di un elemento

A volte vorrai personalizzare un elemento in modo che abbia un margine diverso su ciascuno dei suoi lati.

Il CSS consente di controllare il margine di un elemento su tutti e quattro i lati con le proprietà margin-top, margin-right, margin-bottom e margin-left. Riprendendo l’esempio precedente, prova ad applicare e modificare i parametri di margin-top, margin-right, margin-bottom e margin-left.

Usa la Clockwise Notation per specificare il padding di un elemento

Eredita gli stili dall’elemento body

Ora ti ho dimostrato che ogni pagina HTML ha un elemento body e che il suo elemento body può anche essere abbinato al CSS.

Ricorda che puoi modellare l’elemento body come qualsiasi altro elemento HTML e tutti gli altri elementi erediteranno gli stili dell’elemento del body.

Innanzitutto, crea un elemento <h1> con il testo Imparare a programmare

Quindi, dai a tutti gli elementi della pagina il colore verde aggiungendo color: green; alla dichiarazione di stile dell’elemento body.

Infine, dai al tuo elemento body la font-family Monospace aggiungendo font-family: Monospace; alla dichiarazione di stile dell’elemento del tuo corpo.

Dai priorità a uno stile piuttosto che a un altro

A volte i tuoi elementi HTML riceveranno più stili che andranno in conflitto tra loro.

Ad esempio, il tuo elemento h1 non può essere sia verde che rosa allo stesso tempo.

Per capire il concetto di ereditarietà degli stili ed evitare possibili problemi, riprendi l’esempio precedente, crea una classe imparareaprogrammare-pink{color: pink;} che rende il testo rosa, quindi lo applicala a un elemento. La tua classe sostituirà il colore dell’elemento body: green;

Sovrascrivi stili nel CSS con l’ordine di inserimento

La tua classe “imparareaprogrammare” ha superato la dichiarazione CSS dell’elemento body!

Hai appena visto come la classe sovre il CSS dell’elemento body. Quindi la prossima domanda logica è, cosa possio fare per scavalcare la classe di testo pink?

Crea una classe CSS aggiuntiva chiamata imparareaprogrammare-blue che dia ad un elemento il colore blu. Assicurati che sia sotto la tua dichiarazione di classe in testo rosa.

Applica la classe imparareaprogrammare-blue al tuo elemento h1 oltre alla tua classe di testo rosa, e vedrai quale vincerà.

L’applicazione di più attributi di classe a un elemento HTML viene eseguita con uno spazio tra loro in questo modo:

class = “class1 class2”

Nota: non importa in quale ordine le classi sono elencate nell’elemento HTML.

Ciò che è importante è l’ordine delle dichiarazioni di classe nella sezione <style>.

La seconda dichiarazione avrà sempre la precedenza sulla prima. Perché .imparareaprogrammare-blue è dichiarata per seconda, sovrascrive gli attributi di .imparareaprogrammare-pink

Sovrascrivi classi nel CSS con gli attributi id

Hai appena capito che i browser leggono i CSS dall’alto verso il basso. Ciò significa che, in caso di conflitto, il browser utilizzerà l’ultima dichiarazione CSS.

Ma non hai ancora finito. Esistono altri modi per sovrascrivere i CSS. Ricordi gli attributi di identificazione? Esamina le tue classi di testo rosa e blu dell’esempio precedente e rendi il tuo elemento h1 arancione, dando all’elemento h1 un id e poi lo stile.

Dai al tuo elemento h1 l’attributo id di testo arancione.

Ricorda, gli stili di identificazione assomigliano a questo:

<h1 id =”imparareaprogrammare-orange”>

Lascia le classi blue-text e pink-text sul tuo elemento h1.

Crea una dichiarazione CSS per il tuo ID di testo arancione nel tuo elemento di stile.

Ecco un esempio di come appare:     

#imparareaprogrammare-brown {color: brown;}

Nota: non importa se dichiari questo css sopra o sotto la classe del testo rosa, poiché l’attributo id avrà sempre la precedenza.

Sovrascrivi classi nel CSS con gli stili in linea

Quindi hai capito che le dichiarazioni id sovrascrivono le dichiarazioni di classe, indipendentemente da dove sono dichiarate nell’elemento di stile CSS.

Esistono altri modi per sovrascrivere i CSS.

Ti ricordi gli stili in linea? Riprendi l’esempio precedente, usa uno stile in linea per provare a rendere bianco il tuo elemento h1.

Ricorda, lo stili di linea assomiglia a questo: <h1 style=”color: green”>

Lascia le classi imparareaprogrammare-blue e imparareaprogrammare-pink sul tuo elemento h1.

Sovrascrivi tutto nel CSS con gli stili importanti

Hai appena capito che gli stili in linea sostituiscono tutte le dichiarazioni CSS nel tuo elemento stile.

Ma aspetta. C’è un ultimo modo per sovrascrivere i CSS. Questo è il metodo più potente di tutti. Ma prima di farlo, perché mai dovresti sovrascrivere i CSS?

In molte situazioni, userai le librerie CSS. Queste potrebbero sovrascrivere accidentalmente il tuo CSS. Pertanto, quando è assolutamente necessario, è possibile utilizzare !important

Torna all’esempio precedente con il testo rosa. Ricorda che la classe di testo rosa è stata sostituita da successive dichiarazioni di classe, dichiarazioni di identificazione e stili in linea. Aggiungi la parola chiave !important per la dichiarazione di colore dell’elemento testo rosa per garantire al 100% che il tuo elemento h1 sia rosa.

Un esempio di come fare questo è:

color: red !important;

Usa codice esadecimale per colori specifici

Sapevi che ci sono altri modi per rappresentare i colori nei CSS?

Uno di questi modi è chiamato codice esadecimale, o codice esadecimale breve.

Di solito utilizziamo i decimali o i numeri di base 10, che usano i simboli da 0 a 9 per ogni cifra.

Esadecimali (o esadecimali) sono numeri di base 16. Ciò significa che utilizzano sedici simboli distinti. Come i decimali, i simboli 0-9 rappresentano valori da zero a nove. Quindi A, B, C, D, E, F rappresentano valori da dieci a quindici.

Complessivamente, da 0 a F può rappresentare una cifra in esadecimale, dandoci 16 valori totali possibili.

In CSS, possiamo usare 6 cifre esadecimali per rappresentare i colori, due ciascuno per i componenti rosso (R), verde (G) e blu (B).

Ad esempio, #000000 è nero ed è anche il valore più basso possibile.

Sostituisci la parola black nel colore di sfondo dell’elemento body con la sua rappresentazione in codice esadecimale, #000000.

Usa codice esadecimale per mescolare i colori

Quindi, i codici esadecimali usano 6 cifre esadecimali per rappresentare i colori, due ciascuno per i componenti rosso (R), verde (G) e blu (B). Da questi tre colori puri (rosso, verde e blu), puoi variare le quantità di ciascuno per creare oltre 16 milioni di altri colori!

Ad esempio, l’arancione è rosso puro, mescolato con un pò di verde e senza blu. Nel codice esadecimale, questo si traduce in #FFA500. La cifra 0 è il numero più basso in codice esadecimale e rappresenta una completa assenza di colore. La cifra F è il numero più alto in codice esadecimale e rappresenta la massima luminosità possibile.

Riprendi l’esempio precedente e sperimenta!

Usa codice esadecimale abbreviato

Molte persone si sentono sopraffatte dalle possibilità di oltre 16 milioni di colori.

Ed è difficile ricordare il codice esadecimale. Fortunatamente, puoi accorciarlo.

Ad esempio, il codice esadecimale rosso #FF0000 può essere abbreviato in #F00.

Questo modulo abbreviato fornisce una cifra per il rosso, una cifra per il verde e una cifra per il blu.

Ciò riduce il numero totale di colori possibili a circa 4.000. Ma i browser interpreteranno #FF0000 e #F00 esattamente come lo stesso colore. Vai avanti, prova a usare i codici esadecimali abbreviati per colorare gli elementi.

Usa valori RGB per colorare gli elementi

Un altro modo per rappresentare i colori nei CSS è l’utilizzo dei valori RGB.

Il valore RGB per il nero è simile al seguente: rgb (0, 0, 0)

Il valore RGB per il bianco è simile al seguente: rgb (255, 255, 255)

Invece di utilizzare sei cifre esadecimali come fai con il codice esadecimale, con RGB puoi specificare la luminosità di ciascun colore con un numero compreso tra 0 e 255.

Se fai i conti, le due cifre per un colore sono 16 volte 16, il che ci dà 256 valori totali.

Quindi RGB, che inizia a contare da zero, ha lo stesso numero esatto di valori possibili come codice esadecimale.

Riprendi l’esempio precedente e sostituisci il codice esadecimale del colore di sfondo dell’elemento body con il valore RGB per il nero: rgb (0, 0, 0)

Usa RGB per mescolare i colori

Proprio come con il codice esadecimale, puoi mescolare i colori in RGB usando combinazioni di valori diversi.

Riprendi l’esempio precedente e sperimenta.

Se questo articolo ti è piaciuto e pensi che possa essere utile ai tuoi amici, condividilo!