CSS3: Introduzione

I CSS (Cascading Style Sheets) sono il linguaggio di stile utilizzato per definire la presentazione visiva dei documenti HTML.

Cos'è CSS3?

CSS3 è l'ultima evoluzione dei fogli di stile, introducendo funzionalità avanzate che permettono di creare layout complessi, animazioni e effetti visivi senza bisogno di JavaScript.

Selettori fondamentali

Selettori di base

/* Selettore di elemento */
p { color: blue; }

/* Selettore di classe */
.highlight { background-color: yellow; }

/* Selettore di ID */
#header { font-size: 2rem; }

/* Selettore universale */
* { margin: 0; padding: 0; }

Selettori avanzati

/* Selettore discendente */
nav ul li a { text-decoration: none; }

/* Selettore figlio diretto */
.container > .item { margin: 10px; }

/* Pseudo-classi */
a:hover { color: red; }
li:first-child { font-weight: bold; }
input:focus { border-color: blue; }

/* Pseudo-elementi */
p::first-line { font-size: 1.2em; }
h2::before { content: "→ "; }

Flexbox

Flexbox è un modello di layout unidimensionale perfetto per allineare elementi in riga o colonna:

.container {
  display: flex;
  justify-content: center;    /* allineamento orizzontale */
  align-items: center;        /* allineamento verticale */
  gap: 20px;                  /* spazio tra gli elementi */
  flex-wrap: wrap;            /* permette il wrapping */
}

.item {
  flex: 1 1 300px;            /* grow, shrink, basis */
}

CSS Grid

CSS Grid è un sistema di layout bidimensionale per layout complessi:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 20px;
  min-height: 100vh;
}

.header { grid-column: 1 / -1; }
.sidebar { grid-row: 2 / 3; }
.footer { grid-column: 1 / -1; }

Variabili CSS (Custom Properties)

:root {
  --primary-color: #3498db;
  --spacing: 16px;
  --font-main: 'Raleway', sans-serif;
}

.button {
  background-color: var(--primary-color);
  padding: var(--spacing);
  font-family: var(--font-main);
}

Media Queries per il Responsive Design

/* Mobile first */
.container { padding: 16px; }

/* Tablet */
@media (min-width: 768px) {
  .container { padding: 32px; }
}

/* Desktop */
@media (min-width: 1024px) {
  .container { max-width: 1200px; margin: 0 auto; }
}

Preprocessori: Sass/SCSS

Sass (Syntactically Awesome Style Sheets) estende CSS con funzionalità avanzate:

// Variabili
$primary: #3498db;
$spacing: 16px;

// Nesting
.nav {
  background: #333;
  
  ul {
    list-style: none;
    
    li {
      display: inline-block;
      
      a {
        color: white;
        padding: $spacing;
        
        &:hover {
          color: $primary;
        }
      }
    }
  }
}

// Mixin
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  @include flex-center;
}

Conclusione

CSS3 offre strumenti potenti per creare layout moderni e responsivi. Combinato con preprocessori come Sass, permette di scrivere stili più mantenibili e organizzati.