Qué estilo CSS está afectando a una etiqueta o elemento HTML: Firebug (extensión de Firefox).
Hay proyectos web que por su envergadura pueden ser bastante complicados de modificar o depurar. Esto también es así si hablamos de estilos, puesto que podemos encontrarnos con varios archivos CSS, herencia, etc.
Os voy a hablar de una herramienta que nos va a ayudar enormemente y que nos permitirá ahorrarnos bastante tiempo probando y buscando entre hojas de estilo. Esa herramienta realmente es una extensión para Mozilla Firefox que se llama Firebug y es muy conocida en el mundo de la programación web. Podéis encontrar información e instalarla en la siguiente URL:
Las funcionalidades de esta aplicación son muy amplias. Como se describe en dicha web, aparte de inspeccionar y modificar el estilo de una página web, nos permite depurar JavaScript, analizar por ejemplo el tamaño y tiempo de carga de distintos elementos como imánges, etc.
Pero quizás la más útil en general sea la inspección de estilos CSS. Veamos un ejemplo:
Primero abrimos la página en cuestión con Firefox (yo he escogido http://www.linuxfoundation.org/) y pulsamos en el icono siguiente:
A continuación seleccionamos el elemento a inspeccionar. Se mostrará un rectángulo azul indicando el elemento seleccionado:
Abajo nos aparecerán dos paneles. En el de la izquierda se mostrará el código html simplificado (mostrando solo las etiquetas sin el contenido) a excepción del elemento seleccionado, del que se mostrará todo su código.
En el panel de la derecha está lo que más nos interesa, que son los estilos aplicados al elemento seleccionado. Como vemos, nos indica claramente los atributos aplicados según el estilo y también los parámetros aplicados que son heredados.
Los parámetros tachados significan que están redefinidos en algún estilo hijo. A la derecha, en azul, aparece la hoja de estilo y la línea donde se encuentra cada estilo.
Como podréis comprobar, se trata de una herramienta que en cuanto la utilicemos un par de veces se convertirá en imprescindible.
Tweet
Buenas,
Una pregunta, he conseguido modificar varias veces el código de la web con firebug, pero cuando actualizo la página no consigo que guarde los cambios realizados.
Hay alguna forma de hacerlo o hay que pulsar alguna tecla en concreto.
Gracias.
Tomeu Payeras Sánchez.
Hola Tomeu.
Los cambios que haces desde Firebug sólo sirven como previsualización. Si quieres esos cambios se reflejen en la web tienes que hacerlos en el código de la web. Es decir, en el archivo html, css o javascript correspondiente. Para ello tienes que bajarte el archivo a tu equipo (se puede hacer con un cliente FTP como Fillezilla), editarlo y volver a subirlo al servidor.
Si tienes alguna duda, puedes preguntarme.
Saludos.
en la parte izquierda del codigo me aparece este div:
div class="owl-item active" style="width: 178px; margin-right: 20px;"
pero en la pagina fisica html no existe, no me permite formatear los estilos, que puedo hacer?
Hola Mario.
No entiendo tu pregunta. Dame más detalles de cual es tu código de cómo quieres formatear los estilos.
Saludos.
Publicar un comentario