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

Selettori CSS


Un selettore CSS seleziona gli elementi HTML a cui vuoi applicare lo stile.


Selettori CSS

I selettori CSS vengono utilizzati per "trovare" (o selezionare) gli elementi HTML a cui si desidera applicare uno stile.

Possiamo dividere i selettori CSS in cinque categorie:

Questa pagina spiegherà i selettori CSS più basilari.


Il selettore di elementi CSS

Il selettore di elementi seleziona gli elementi HTML in base al nome dell'elemento.

Esempio

Qui, tutti gli elementi <p> ​​sulla pagina saranno allineati al centro, con un colore di testo rosso: 

p {
  text-align: center;
  color: red;
}

Il selettore di ID CSS

Il selettore id utilizza l'attributo id di un elemento HTML per selezionare un elemento specifico.

L'id di un elemento è unico all'interno di una pagina, quindi il selettore dell'id viene utilizzato per selezionare un elemento univoco!

Per selezionare un elemento con un ID specifico, scrivi un carattere hash (#), seguito dall'id dell'elemento.

Esempio

La regola CSS di seguito verrà applicata all'elemento HTML con id="para1": 

#para1 {
  text-align: center;
  color: red;
}

Nota: un nome ID non può iniziare con un numero!



Il selettore di classe CSS

Il selettore di classe seleziona gli elementi HTML con un attributo di classe specifico.

Per selezionare elementi con una classe specifica, scrivi un punto (.), seguito dal nome della classe.

Esempio

In questo esempio tutti gli elementi HTML con class="center" saranno rossi e allineati al centro: 

.center {
  text-align: center;
  color: red;
}

Puoi anche specificare che solo elementi HTML specifici dovrebbero essere interessati da una classe.

Esempio

In questo esempio solo gli elementi <p> ​​con class="center" saranno rossi e allineati al centro: 

p.center {
  text-align: center;
  color: red;
}

Gli elementi HTML possono anche fare riferimento a più di una classe.

Esempio

In questo esempio l'elemento <p> sarà stilizzato secondo class="center" e class="large": 

<p class="center large">This paragraph refers to two classes.</p>

Nota: il nome di una classe non può iniziare con un numero!


Il selettore universale CSS

Il selettore universale (*) seleziona tutti gli elementi HTML nella pagina.

Esempio

La regola CSS di seguito influirà su ogni elemento HTML della pagina: 

* {
  text-align: center;
  color: blue;
}

Il selettore di raggruppamento CSS

Il selettore di raggruppamento seleziona tutti gli elementi HTML con le stesse definizioni di stile.

Osserva il seguente codice CSS (gli elementi h1, h2 e p hanno le stesse definizioni di stile):

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

h2 {
  text-align: center;
  color: red;
}

p {
  text-align: center;
  color: red;
}

Sarà meglio raggruppare i selettori, per minimizzare il codice.

Per raggruppare i selettori, separa ogni selettore con una virgola.

Esempio

In questo esempio abbiamo raggruppato i selettori dal codice sopra: 

h1, h2, p {
  text-align: center;
  color: red;
}

Mettiti alla prova con gli esercizi

Esercizio:

Imposta il colore di tutti gli elementi <p> ​​su rosso.

<style>
 {
   red;
}
</style>


Tutti i selettori semplici CSS

Selector Example Example description
#id #firstname Selects the element with id="firstname"
.class .intro Selects all elements with class="intro"
element.class p.intro Selects only <p> elements with class="intro"
* * Selects all elements
element p Selects all <p> elements
element,element,.. div, p Selects all <div> elements and all <p> elements