CSS

Riassunto

CSS, acronimo di Cascading Style Sheets, è un linguaggio utilizzato per definire lo stile e la presentazione delle pagine web HTML. Consente di controllare l'aspetto degli elementi, come il colore, la dimensione, il font e la disposizione.

Selettori:

I selettori CSS sono utilizzati per selezionare gli elementi HTML a cui applicare uno stile. Alcuni esempi di selettori includono:

  • Elemento: Applica uno stile a tutti gli elementi di un determinato tipo, ad esempio p per i paragrafi.
  • ID: Applica uno stile a un elemento con un ID specifico, ad esempio #header.
  • Classe: Applica uno stile a tutti gli elementi con una classe specifica, ad esempio .btn.
  • Attributo: Applica uno stile agli elementi con un attributo specifico, ad esempio [type="text"] per gli input di testo.

Proprietà:

Le proprietà CSS definiscono gli aspetti specifici degli elementi. Alcune proprietà comuni includono:

  • color: Definisce il colore del testo.
  • font-size: Definisce la dimensione del carattere.
  • background-color: Definisce il colore dello sfondo.
  • margin: Definisce il margine esterno di un elemento.
  • padding: Definisce lo spazio interno di un elemento.
  • border: Definisce il bordo di un elemento.

Selezione di Elementi:

Le regole CSS si compongono di un selettore e un blocco di dichiarazioni di stile. Ad esempio:

p {
    color: blue;
    font-size: 16px;
  }
  

Cascata e Specificità:

La cascata in CSS determina quale stile viene applicato quando ci sono conflitti. La specificità dei selettori indica quale regola ha la precedenza. Ad esempio, un selettore con un ID ha una specificità maggiore di un selettore con una classe.

Unità di Misura:

CSS supporta diverse unità di misura, come pixel (px), percentuali (%), em (em) e rem (rem), che consentono di definire dimensioni e distanze.

Box Model:

Il Box Model di CSS definisce il layout di un elemento, compreso il margine, il bordo, il padding e il contenuto. Questi componenti influenzano la dimensione e la disposizione degli elementi sulla pagina.

Posizionamento:

CSS offre vari metodi per posizionare gli elementi sulla pagina, tra cui il posizionamento statico, relativo, assoluto e fisso, nonché la creazione di layout flessibili con CSS Grid e Flexbox.