Esercitazione CSS

CSS CASA Introduzione CSS Sintassi CSS Selettori CSS CSS Come fare per Commenti CSS Colori CSS Sfondi CSS Confini CSS Margini CSS Imbottitura CSS Altezza/larghezza CSS Modello a scatola CSS Schema CSS Testo CSS Font CSS Icone CSS Collegamenti CSS Elenchi CSS Tabelle CSS Display CSS Larghezza massima CSS Posizione CSS Indice Z CSS Overflow CSS CSS galleggiante CSS Inline-block Allineamento CSS Combinatori CSS Pseudo-classe CSS Pseudoelemento CSS Opacità CSS Barra di navigazione CSS Menu a discesa CSS Galleria di immagini CSS Sprite di immagini CSS Selettori CSS Attr Moduli CSS Contatori CSS Layout del sito Web CSS Unità CSS Specificità CSS CSS! importante Funzioni matematiche CSS

CSS avanzato

Angoli arrotondati CSS Immagini del bordo CSS Sfondi CSS Colori CSS Parole chiave a colori CSS Gradienti CSS Ombre CSS Effetti di testo CSS Font Web CSS Trasformazioni 2D CSS Trasformazioni CSS 3D Transizioni CSS Animazioni CSS Suggerimenti CSS Immagini in stile CSS Riflessione dell'immagine CSS Adattamento agli oggetti CSS Posizione dell'oggetto CSS Mascheratura CSS Pulsanti CSS Impaginazione CSS Colonne multiple CSS Interfaccia utente CSS Variabili CSS Dimensioni della scatola CSS Query sui media CSS Esempi CSS MQ Cassetta flessibile CSS

CSS reattivo

Introduzione a RWD Vista posteriore Vista griglia RWD Query sui media RWD Immagini RWD Video RWD Quadri RWD Modelli RWD

Griglia CSS

Introduzione alla griglia Contenitore a griglia Elemento griglia

CSS SASS

Esercitazione SASS

Esempi CSS

Modelli CSS Esempi CSS css quiz Esercizi CSS Certificato CSS

Riferimenti CSS

Riferimento CSS Selettori CSS Funzioni CSS CSS di riferimento sonoro Font sicuri per il Web CSS CSS Animabile Unità CSS Convertitore CSS PX-EM Colori CSS Valori di colore CSS Valori predefiniti CSS Supporto del browser CSS

Introduzione CSS


CSS è il linguaggio che utilizziamo per lo stile di una pagina Web.


Cos'è il CSS?

  • CSS sta per Cascading Style Sheets
  • CSS descrive come gli elementi HTML devono essere visualizzati su schermo, carta o in altri media
  • I CSS risparmiano molto lavoro. Può controllare il layout di più pagine Web contemporaneamente
  • I fogli di stile esterni sono archiviati in file CSS

CSS Demo - Una pagina HTML - Stili multipli!

Qui mostreremo una pagina HTML visualizzata con quattro diversi fogli di stile. Fare clic sui collegamenti "Foglio di stile 1", "Foglio di stile 2", "Foglio di stile 3", "Foglio di stile 4" di seguito per visualizzare i diversi stili:



Perché usare i CSS?

I CSS vengono utilizzati per definire gli stili per le tue pagine web, inclusi il design, il layout e le variazioni di visualizzazione per diversi dispositivi e dimensioni dello schermo.

Esempio CSS

body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

CSS ha risolto un grosso problema

L'HTML non è MAI stato concepito per contenere tag per la formattazione di una pagina web!

L'HTML è stato creato per descrivere il contenuto di una pagina web, come:

<h1>Questa è un'intestazione</h1>

<p>Questo è un paragrafo.</p>

Quando tag come <font> e attributi di colore sono stati aggiunti alla specifica HTML 3.2, è iniziato un incubo per gli sviluppatori web. Lo sviluppo di siti Web di grandi dimensioni, in cui i caratteri e le informazioni sui colori venivano aggiunti a ogni singola pagina, è diventato un processo lungo e costoso.

Per risolvere questo problema, il World Wide Web Consortium (W3C) ha creato CSS.

I CSS hanno rimosso la formattazione dello stile dalla pagina HTML!

Se non sai cos'è l'HTML, ti suggeriamo di leggere il nostro Tutorial HTML .


CSS consente di risparmiare un sacco di lavoro!

Le definizioni di stile vengono normalmente salvate in file .css esterni.

Con un file di foglio di stile esterno, puoi cambiare l'aspetto di un intero sito web cambiando solo un file!