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! di seguito e seleziona Ispeziona. Si apre il riquadro Elementi di DevTools.

   Fammi un'ispezione.

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 dichiara un valore per padding. Inserisci questo valore e la relativa unità senza spazi nella casella di testo di seguito.

Se vuoi ancorare la finestra di DevTools a destra dell'area visibile, come nello screenshot del passaggio 1, consulta Modificare il posizionamento di DevTools.

Aggiungere una dichiarazione CSS a un elemento

Utilizza la scheda Stili quando vuoi 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 Ispeziona.

   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 all'elemento è stata applicata una dichiarazione di stile in linea.

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 nuova classe viene visualizzata una casella di controllo che ti consente di attivare e disattivare la classe. Se all'elemento Add a class to me! sono state applicate altre classi, potrai attivarle e disattivarle anche 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 non effettivamente passi il mouse sopra l'elemento.

Per ulteriori 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.

   Modifica 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 a casella ha come valore predefinito i pixel, ma accetta anche altri valori, ad esempio 25% o 10vw.