Visualizzare e modificare i CSS

Kayce Basques

Sofia Emelianova

Completa questi tutorial interattivi per apprendere le nozioni di base sulla visualizzazione e sulla modifica del CSS di una pagina utilizzando Chrome DevTools.

Visualizzare il codice 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.

   Ispezionami!

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

   

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

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

5. Nel riquadro Elementi > Stili, trova la regola di classe aloha.

   Il riquadro Stili elenca le regole CSS applicate a qualsiasi elemento selezionato nell'albero DOM, che dovrebbe ancora essere l'elemento Inspect me!.

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

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

Aggiungere una dichiarazione CSS a un elemento

Utilizza il riquadro 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 Ispeziona.

   Aggiungimi un colore di sfondo.

2. Fai clic su element.style nella parte superiore del riquadro 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 integrata all'elemento.

Aggiungere una classe CSS a un elemento

Utilizza il riquadro Stili per vedere l'aspetto di un elemento quando viene applicata o rimossa una classe CSS.

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

   Aggiungi un corso a 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 che ti consente di attivare e disattivare la classe. Se all'elemento Add a class to me! sono state applicate altre classi, puoi attivarle da qui.

Aggiungere uno pseudostato a un corso

Utilizza il riquadro Stili per applicare uno pseudostato CSS a un elemento. DevTools supporta :active, :focus, :focus-within, :target, :hover, :visited o focus-visible.

1. Passa il mouse sopra il testo Hover over me! qui sotto. Il colore di 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. Nel riquadro Stili, fai clic su :hov.

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

Modificare le dimensioni di un elemento

Utilizza il diagramma interattivo Modello box nel riquadro Stili per modificare la larghezza, l'altezza, la spaziatura interna, il margine o la lunghezza del bordo 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 box, fai clic sul pulsante Mostra barra laterale nella barra delle azioni del riquadro Stili.

3. Nel diagramma Modello a box nel riquadro Stili, passa il mouse sopra la spaziatura interna. La spaziatura interna dell'elemento viene evidenziata nell'area visibile.

4. Fai doppio clic sul margine sinistro nel Modello riquadro. Al momento l'elemento non ha margini, quindi margin-left ha un valore pari a -.

5. Digita 100 e premi Invio.

Il modello a scatola è in pixel per impostazione predefinita, ma accetta anche altri valori, ad esempio 25% o 10vw.