Visualizzare e modificare i CSS

Kayce Basques

Sofia Emelianova

Completa questi tutorial interattivi per apprendere le nozioni di base su come visualizzare e modificare il CSS di una pagina utilizzando Chrome DevTools.

Visualizzare il CSS di un elemento

1. Fai clic con il tasto destro del mouse sul testo Inspect me! riportato di seguito e seleziona Ispeziona. Si apre il riquadro Elementi di DevTools.

   Esaminami!

2. Osserva l'elemento Inspect me! evidenziato in blu nell'albero DOM.

   

3. Nella struttura DOM, trova il valore dell'attributo data-message per l'elemento Inspect me!.

4. Inserisci il valore dell'attributo nella casella di testo di seguito.

5. Nella scheda Elementi > Stili, individua la regola della classe aloha.

   La scheda Stili elenca le regole CSS applicate all'elemento selezionato nell'albero DOM, che dovrebbe essere ancora l'elemento Inspect me!.

6. La classe aloha sta dichiarando un valore per padding. Inserisci questo valore e la relativa unità senza spazi nella casella di testo di seguito.

Se vuoi agganciare la finestra DevTools a destra dell'area visibile, come nello screenshot nel primo passaggio, consulta Modificare il posizionamento di DevTools.

Aggiungere una dichiarazione CSS a un elemento

Utilizza la scheda Stili per modificare o aggiungere dichiarazioni CSS a un elemento.

1. Fai clic con il tasto destro del mouse sul testo Add a background color to me! di seguito e seleziona Esamina.

   Aggiungi un colore di sfondo a me.

2. Fai clic su element.style nella parte superiore della scheda Stili.

3. Digita background-color e premi Invio.

4. Digita honeydew e premi Invio. Nella struttura DOM puoi vedere che è stata applicata una dichiarazione di stile incorporato all'elemento.

Aggiungere una classe CSS a un elemento

Utilizza la scheda Stili per vedere l'aspetto di un elemento quando una classe CSS viene applicata o rimossa da un elemento.

1. Fai clic con il tasto destro del mouse sull'elemento Add a class to me! di seguito e seleziona Ispeziona.

   Aggiungi un corso per me.

2. Fai clic su .cls. DevTools mostra una casella di testo in cui puoi aggiungere classi all'elemento selezionato.

3. Digita color_me nella casella di testo Aggiungi nuovo corso e premi Invio. Sotto la casella di testo Aggiungi nuovo corso viene visualizzata una casella di controllo, in cui puoi attivare e disattivare il corso. Se all'elemento Add a class to me! sono stati applicati altri corsi, puoi attivare/disattivare il corso da qui.

Aggiungere un pseudostato a una classe

Utilizza la scheda Stili per applicare uno pseudostato CSS a un elemento.

1. Passa il mouse sopra il testo Hover over me! di seguito. Il colore dello sfondo cambia.

   Passa il mouse sopra di me.

2. Fai clic con il tasto destro del mouse sul testo Hover over me! e seleziona Ispeziona.

3. Nella scheda Stili, fai clic su :hov.

4. Seleziona la casella di controllo :hover. Il colore di sfondo cambia come prima, anche se in realtà non stai passando il mouse sopra l'elemento.

Per maggiori informazioni, vedi Attivare/disattivare una pseudo-classe.

Modificare le dimensioni di un elemento

Utilizza il diagramma interattivo Modello a riquadro nella scheda Stili per modificare la larghezza, l'altezza, i margini, i bordi o la spaziatura interna di un elemento.

1. Fai clic con il tasto destro del mouse sull'elemento Change my margin! di seguito e seleziona Ispeziona.

   Cambia il mio margine!

2. Per visualizzare il modello a casella, fai clic sul pulsante Mostra barra laterale nella barra delle azioni della scheda Stili.

3. Nel diagramma Modello a riquadro della scheda Stili, passa il mouse sopra spaziatura. Il padding dell'elemento è evidenziato nell'area visibile.

4. Fai doppio clic sul margine sinistro nel modello di casella. Al momento l'elemento non ha margini, quindi margin-left ha un valore -.

5. Digita 100 e premi Invio.

Il modello box è impostato in modo predefinito sui pixel, ma accetta anche altri valori, come 25% o 10vw.

Punto chiave: in alternativa, nelle dichiarazioni delle regole nella scheda Stili, puoi modificare le proprietà di lunghezza e le relative unità con il cursore.