|

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.

Per 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, p seleziona tutti i paragrafi.
  • Selettori di classe: Selezionano elementi in base al loro attributo di classe. Ad esempio, .my-class seleziona tutti gli elementi con class="my-class".
  • Selettori di ID: Selezionano elementi in base al loro attributo ID. Ad esempio, #my-id seleziona l’elemento con id="my-id".
  • Selettori di attributo: Selezionano elementi in base a un attributo o valore di attributo. Ad esempio, [target="_blank"] seleziona tutti gli elementi con target="_blank".

|

Come includere CSS in HTML

Ci sono tre modi per includere CSS in un documento HTML:

  1. Stili interni: Gli stili CSS sono definiti all’interno dell’elemento <style> nel <head> del documento HTML.
  2. Stili in linea: Gli stili CSS sono applicati direttamente agli elementi HTML utilizzando l’attributo style.
  3. 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.

| SVILUPPO & WEB DESIGN

• WEB SITE • ECOMMERCE • ELEARNING •

Entra in contatto con noi

    Il tuo nome

    Il tuo indirizzo Email

    Oggetto

    Come possiamo aiutarti?