Si me gusta un elemento de un sitio, y quiero implementarlo en mi sitio, ¿cuál es la forma más fácil de hacerlo? A veces hay muchos archivos CSS, es difícil seguir todo el tema.¿Cómo puedo capturar todos los estilos de CSS del elemento?
abierta Firefox, instale Firebug haga clic derecho en el elemento que desea, elija Inspect element y luego abrir el área Computed
se quiere tienen TODOS lOS ESTILOS aplicar a ese elemento
Esto es válido en Chrome, Safari, Opera e IE con sus propias herramientas de desarrollo
Opera (FreeBSD ya está instalado con Opera)
Firefox (necesita FireBug plugIn)
Internet Explorer (Necesita IE Developer Toolbar plugin)
Chrome & Safari (Web Inspector ya es parte de Chrome y Safari)
Las imágenes están rotas. –
@AndrewMcKinlay corregido! gracias por informar – balexandre
En chrome/Chromium puede ver el estilo calculado. En FF u necesitará Firebug para ver el estilo computarizada, en Opera utilizar luciérnaga
uso algo como Firebug o de Chrome herramientas de desarrollo para inspeccionar el DOM y ver qué estilos se aplican al elemento en cuestión.
En una palabra:
Use Firebug para inspeccionar el elemento, luego puede ver la cascada. Aún mejor, puede copiar y pegar directamente de FB a un archivo CSS.
Si desea utilizar otros navegadores, también puede utilizar sus herramientas de desarrollador preinstaladas (F12 en IE (requiere la barra de herramientas de desarrolladores de IE) haga clic derecho - inspeccionar el elemento en cromo) o puede usar Firebug Lite. :)
Firebug es solo para un navegador, y es un complemento. Chrome, Safari y Opera ya tienen su propio * firebug * listo para usar :) – balexandre
Actualicé mi respuesta para reflejar :) – Kyle
IE8: haga clic en F12 -> haga clic en "Seleccionar elemento por clic" (la flecha blanca, más a la izquierda en el menú de iconos) -> Regrese a la página web, haga clic en el elemento que desee -> Vuelva a la página Herramientas de desarrollador de IE y verá todo el estilo enumerado a la derecha.
Otros ya respondieron para otros navegadores.:)
El uso de Javascript funcionó mejor para mí. He aquí cómo lo hice:
pegar esta función dumpCSSText de this stack overflow answer en la consola, y golpeó Enter:
function dumpCSSText(element){
var s = '';
var o = getComputedStyle(element);
for(var i = 0; i < o.length; i++){
s+=o[i] + ':' + o.getPropertyValue(o[i])+';';
}
return s;
}
Al utilizar Chrome, puede inspeccionar un elemento y acceder a él en la consola con la variable $0. Chrome also has a copy command, a fin de utilizar este comando para copiar todos los CSS del elemento inspeccionado:
copy(dumpCSSText($0));
pegar su CSS donde quieras!
Asegúrese de que realmente tiene permiso para usarlo. – BoltClock
De acuerdo. Vea la fuente para explorar cómo se han implementado las cosas y para aprender nuevas técnicas, pero nunca solo levante el marcado al por mayor. –