n questa lezione affronteremo i seguenti argomenti:
• Comprendere il concetto di selettori in CSS.
• Imparare a utilizzare le proprietà di base come colori, font e dimensioni.
• Applicare stili a elementi HTML utilizzando selettori.
Utilizzo di Selettori
I selettori in CSS consentono di individuare e selezionare gli elementi HTML a cui applicare gli stili.
Alcuni esempi di selettori includono:
- selettore di tipo: p seleziona tutti gli elementi <p>.
- selettore di classe: .classe seleziona tutti gli elementi con la classe "classe".
- selettore di ID: #id seleziona l'elemento con l'ID "id".
Proprietà di Base
- colore: utilizzare la proprietà color per definire il colore del testo.
p {
color: #333; /* colore testo grigio scuro */
}
- font: utilizzare la proprietà font-family per specificare il tipo di carattere.
body {
font-family: 'Arial', sans-serif; /* utilizzo di un tipo di carattere specifico */
}
- dimensioni: utilizzare le proprietà font-size e width/height per definire le dimensioni.
h1 {
font-size: 24px; /* dimensione del testo per l'header */
}
.box {
width: 200px;
height: 150px;
}
Applicare Stili a Elementi HTML
Utilizzare i selettori per applicare stili agli elementi HTML desiderati.
/* Stile per tutti i paragrafi */
p {
color: #333;
font-size: 16px;
}
/* Stile per elementi con classe "highlight" */
.highlight {
background-color: yellow;
}
/* Stile per l'elemento con ID "header" */
#header {
font-size: 28px;
color: blue;
}
Attività Pratica:
- Creare un documento HTML con diversi tipi di elementi (paragrafi, header, liste).
- Creare un foglio di stile e utilizzare selettori per applicare stili specifici a ciascun tipo di elemento.
- Sperimentare con diverse proprietà di base come colore, font e dimensioni.