Come estrarre il codice CSS per un'immagine usando gli strumenti per sviluppatori del browser

Hai bisogno di copiare l'esatta stilizzazione applicata a un'immagine su una pagina web? Gli strumenti per sviluppatori del browser lo rendono semplice.

Metodo 1: Ispeziona elemento (Il più veloce)

1. Fai clic destro sull'immagine → Ispeziona (o Ispeziona elemento).
2. Il pannello Elements si apre con il tag <img> evidenziato.
3. Guarda il pannello Styles (lato destro). Vedrai tutte le regole CSS che influenzano quell'elemento, incluse quelle ereditate.
4. Clicca su qualsiasi regola per visualizzare/modificare; copia le dichiarazioni di cui hai bisogno.

Metodo 2: Stili calcolati (Valori resi finali)

1. Con il <img> selezionato in Elements, passa alla scheda Computed (nel pannello Styles).
2. Questo mostra il valore calcolato finale per ogni proprietà CSS (dopo cascata, ereditarietà, media query).
3. Controlla "Mostra tutto" per vedere i valori predefiniti. Copia singole proprietà o l'intero elenco.

Metodo 3: Copia l'intero set di regole

1. Nel pannello Styles, trova il selettore che vuoi (es. .hero img o img[src="..."]).
2. Fai clic destro sul selettore → Copia regola (o copia l'intero blocco manualmente).

Esempio di flusso di lavoro

1. Apri la pagina con l'immagine target.
2. Fai clic destro sull'immagine → Ispeziona.
3. In Elements, seleziona il tag <img>.
4. In Styles, trova la regola che imposta width, border-radius, box-shadow, ecc.
5. Copia quelle dichiarazioni nel tuo file CSS.

Consiglio: Se l'immagine è uno sfondo CSS (background-image), ispeziona l'elemento contenitore invece.