Corso di CSS - Tutorial 1: Le basi di CSS | CSS basics
ฝัง
- เผยแพร่เมื่อ 4 ก.พ. 2025
- 🙏 Fai una donazione → www.paypal.com...
🌍 Scrivimi attraverso il modulo contatti del mio sito → www.fantastica...
💻 #CSS - #Tutorial 1: Le basi di CSS
In questo tutorial introduttivo del corso di CSS (in italiano) parleremo di:
🔷 Le basi di #CSS3 / CSS Introduction
🔹 Perché si usa il CSS? / Why Use CSS?
🔷 Sintassi del CSS / CSS Syntax
🔷 I selettori CSS / CSS Selectors
🔹 Selettori semplici / Simple selectors
🔹 Selettori combinati / Combinator selectors
🔹 Selettori di pseudo-classe / Pseudo-class selectors
🔹 Selettori di pseudo-elementi / Pseudo-elements selectors
🔹 Selettori di attributo / Attribute selectors
🔹 Il selettore universale / The CSS Universal Selector
🔹 Selettori di raggruppamento / The CSS Grouping Selector
🔷 Come aggiungere CSS / How To Add CSS
🔹 CSS esterno / External CSS
🔹 CSS interno / Internal CSS
🔹 CSS in linea / Inline CSS
🔹 Fogli di stile multipli / Multiple Style Sheets
🔹 Ordine a cascata / Cascading Order
🔷 Commenti CSS / CSS Comments
Ecco una breve spiegazione:
🔷 Introduzione al CSS
CSS è l’acronimo di Cascading Style Sheets ovvero di “fogli di stile a cascata”.
CSS è il linguaggio che serve per definire lo stile delle pagine Web.
🔹 Perché si usa il CSS?
L'HTML è stato concepito per descrivere il contenuto di una pagina web, non per contenere tag dedicati alla formattazione della pagina.
Quando sono stati aggiunti tag specifici per la formattazione per gli sviluppatori web è iniziato un vero incubo perché lo sviluppo di siti Web di grandi dimensioni, si era trasformato in un processo lungo e costoso.
Per risolvere questo problema, il World Wide Web Consortium (W3C) ha creato CSS che permette di rimuovere la formattazione dello stile dalla pagina HTML per trasferirlo nei fogli di stile.
🔷 Sintassi del CSS
Una regola CSS è costituita da un selettore e un blocco di dichiarazioni
Il selettore punta all'elemento HTML a cui si vuole applicare lo stile.
Il blocco di dichiarazioni è racchiuso tra parentesi graffe e contiene una o più dichiarazioni separate da punto e virgola.
Ogni dichiarazione include una proprietà CSS e un valore, tra di loro separati da due punti.
🔷 I Selettori
I selettori CSS vengono utilizzati per selezionare gli elementi HTML a cui si desidera applicare uno stile.
Possiamo dividere i selettori CSS in cinque categorie:
Selettori semplici
Selettori combinati
Selettori di pseudo-classe
Selettori di pseudo-elementi
Selettori di attributo
🔹 SELETTORE DI ELEMENTI
Il selettore di elementi seleziona gli elementi HTML in base al nome dell'elemento.
🔹 SELETTORE DI ID
Il selettore id utilizza l'attributo id di un elemento HTML per selezionare un elemento specifico.
Per selezionare un elemento con un ID specifico, basta scrivere un carattere hash (#), seguito dall'id dell'elemento.
🔹 SELETTORE DI CLASSE
Il selettore di classe seleziona gli elementi HTML con un attributo di classe specifico.
Per selezionare elementi con una classe specifica, scrivi un punto (.), seguito dal nome della classe.
🔹 SELETTORE UNIVERSALE
Il selettore universale (*) seleziona tutti gli elementi HTML nella pagina.
🔹 SELETTORE DI RAGGRUPPAMENTO
Il selettore di raggruppamento serve per selezionare tutti gli elementi HTML con le stesse definizioni di stile.
🔷 Come aggiungere CSS
Esistono tre modi per inserire un foglio di stile:
CSS esterno
CSS interno
CSS in linea
🔹 CSS esterno
Per inserire un CSS esterno, ogni pagina HTML deve includere un riferimento al file del foglio di stile esterno all'interno dell'elemento LINK
Un foglio di stile esterno può essere scritto in qualsiasi editor di testo e deve essere salvato con estensione .css.
🔹 CSS interno
Il CSS interno è definito dentro l'elemento STYLE contenuto nella sezione head e vale solo nella pagina HTML in cui è inserito.
🔹 CSS in linea
Uno stile in linea è utilizzato per applicare uno stile unico a un singolo elemento.
Per utilizzare gli stili in linea, basta aggiungere l'attributo style all'elemento interessato.
🔹 Fogli di stile multipli
Se alcune proprietà sono state definite, per lo stesso elemento, in fogli di stile diversi verrà utilizzato il valore dell'ultimo foglio di stile letto.
🔹 Ordine a cascata
Tutti gli stili in una pagina verranno "a cascata" in un nuovo foglio di stile "virtuale" in base alle seguenti regole, dove il numero uno ha la priorità più alta:
1) Stile in linea (all'interno di un elemento HTML)
2) Fogli di stile interni ed esterni (nella sezione head) in base al loro posizionamento
3) Impostazione predefinita del browser
Pertanto, uno stile inline ha la priorità più alta e sovrascriverà gli stili esterni e interni e le impostazioni predefinite del browser.
Buona visione
💼 Ing. Francesca Martorana
Sarebbero interessati anche tutorial sui framework frontend 😊
In futuro chissà... continua a seguirmi 😉
Buonasera! Sto seguendo i suoi corsi di HTML e CSS che trovo molto validi grazie alle sue spiegazioni! Ma mi trovavo molto meglio con gli esempi fatti su Notepad++. Con Visual studio, invece, non riesco a leggere il codice, troppo piccolo, e lo sfondo nero non aiuta affatto. 😕
Grazie per il feedback Laura, ne terrò sicuramente conto nelle registrazioni dei prossimi tutorial 😘
Grazie a lei!
Buonasera, mi chiedevo ogni quanto usciranno i tutorial di css?
Ciao Mariapia, credo che ne usciranno un paio al mese... tra un paio d'ore, ad esempio, verrà pubblicato il secondo tutorial del corso CSS 😘 non mancare!
@@FantasticaMenteIng Grazie per la risposta! Quindi da nessun'altra parte posso trovare dei tutorial di questo corso in maniera un pò più veloce?
@@mariapiaciccariello3250 no semplicemente perchè li devo proprio creare 😅
@@FantasticaMenteIng va benissimo, grazie mille gentilissima!