|
Cos'è CSS?
CSS, che sta per Cascading Style Sheets, è un linguaggio di programmazione utilizzato per descrivere l’aspetto e la formattazione di un documento scritto in HTML. In altre parole, se HTML è lo scheletro della pagina web, CSS è la pelle e i vestiti.
CSS permette di controllare una vasta gamma di stili, tra cui colori, layout, font, e molto altro. Questo permette di creare pagine web visivamente attraenti e coerenti.
|
Sintassi CSS
Un foglio di stile CSS consiste in una lista di regole. Ogni regola o set di regole consiste in un selettore e un blocco di dichiarazione.
Ecco un esempio di una regola CSS:
In questo esempio, p è il selettore (in questo caso, sta selezionando tutti gli elementi <p> sulla pagina). {color: red; text-align: center;} è il blocco di dichiarazione, che contiene le dichiarazioni che applicano gli stili. Ogni dichiarazione consiste in una proprietà (color e text-align in questo caso) e un valore (red e center).
|
Selettori CSS
I selettori CSS sono il modo in cui CSS seleziona gli elementi HTML ai quali applicare gli stili. Ci sono vari tipi di selettori CSS, tra cui:
- Selettori di tipo: Selezionano elementi in base al loro tipo di nodo HTML. Ad esempio,
pseleziona tutti i paragrafi. - Selettori di classe: Selezionano elementi in base al loro attributo di classe. Ad esempio,
.my-classseleziona tutti gli elementi conclass="my-class". - Selettori di ID: Selezionano elementi in base al loro attributo ID. Ad esempio,
#my-idseleziona l’elemento conid="my-id". - Selettori di attributo: Selezionano elementi in base a un attributo o valore di attributo. Ad esempio,
[target="_blank"]seleziona tutti gli elementi contarget="_blank".
|
Come includere CSS in HTML
Ci sono tre modi per includere CSS in un documento HTML:
- Stili interni: Gli stili CSS sono definiti all’interno dell’elemento
<style>nel<head>del documento HTML. - Stili in linea: Gli stili CSS sono applicati direttamente agli elementi HTML utilizzando l’attributo
style. - Stili esterni: Gli stili CSS sono definiti in un file CSS esterno (con estensione .css) che viene collegato al documento HTML utilizzando l’elemento
<link>.
|
Box Model
Il box model è un concetto fondamentale in CSS. Esso descrive come gli elementi HTML sono disposti e come occupano lo spazio sulla pagina web. Ogni elemento HTML può essere considerato come una scatola rettangolare. La scatola è composta da:
- Contenuto: L’area dove appare il testo o le immagini.
- Padding: L’area attorno al contenuto.
- Bordi: L’area attorno al padding (e al contenuto).
- Margini: L’area attorno ai bordi.
Il box model consente di aggiungere spaziatura e bordi attorno agli elementi.
