Tu primer fragmento CSS en cuatro pasos
Una guía breve para seleccionar un elemento, revisar sus estilos y copiar el código.
Para empezar no necesitas una cuenta. Abre una página web normal en lugar de chrome:// o Chrome Web Store. Si no ves el icono, búscalo en el menú de extensiones con forma de pieza de puzle y fíjalo a la barra.
Cómo copiar estilos CSS de un elemento
- 01
Abre la web y la extensión
En una página HTTP/HTTPS compatible, pulsa el icono de One-Click CSS Copy.
- 02
Selecciona «Select an element»
Al mover el cursor, la extensión resaltará el elemento al que apuntas.
- 03
Haz clic en un elemento
La vista previa mostrará un fragmento de CSS calculado y cuántas propiedades contiene.
- 04
Pulsa «Copy CSS»
Pega el código en tu editor, cambia .copied-element por tu selector y usa «Inspect another» para repetir.
Prueba con algo sencillo
Empieza por un botón. Mira su color, su padding y su border-radius. Compáralos con la pestaña Computed de DevTools para entender qué representa el fragmento.
.copied-element {
background-color: #2563eb;
color: #ffffff;
padding: 12px 18px;
border-radius: 10px;
font-weight: 600;
}Ejemplo ilustrativo · los valores dependen del elemento
Dos detalles importantes
La versión gratuita permite cinco copias realizadas correctamente al día. Si el navegador bloquea el portapapeles, puedes seleccionar el texto y copiarlo a mano. Escape o Cancel cierran el modo de selección.
Gratis: 5 copias correctas de CSS al día
Si te atascas
No puedo seleccionar nada
Asegúrate de estar en una web HTTP/HTTPS normal y prueba de nuevo.
El diseño pegado se ve distinto
Revisa el contenedor, las fuentes, los recursos y el selector utilizado.
Quiero seleccionar otra cosa
Pulsa «Inspect another» en el panel de resultados.