Como ver el css de una pagina
Cómo encontrar el css de un elemento
Cuando empecé a trabajar en la web, todo mi proceso para averiguar cómo funcionaba algo era la opción de menú «ver fuente» en mi navegador. A veces echo de menos esa web más sencilla. Pero a pesar de la nostalgia, la web es más complicada ahora, los navegadores tienen herramientas más complicadas para averiguar cómo funcionan las cosas, y los desarrolladores necesitan conocer esas herramientas. Así que vamos a aprender.
Los navegadores de hoy en día todavía tienen «fuente de vista», pero también tienen un conjunto más amplio de herramientas llamadas «inspectores web». Hay miles de maneras en que los inspectores web pueden ayudar a un desarrollador web; sólo voy a describir una tarea muy simple aquí. Queremos saber qué archivo CSS está controlando actualmente el estilo (fuente, tamaño, alineación, peso, color, etc.) de los títulos de las páginas. En cualquier sitio medianamente complejo hoy en día, hay docenas de lugares de los que podría provenir el CSS. Podríamos pasar horas buscando en los archivos el CSS relevante, pero los inspectores web pueden decirnos muy rápidamente dónde debemos buscar exactamente.
Voy a explicar cómo funciona esto en algunos navegadores populares, empezando por Chrome. En Chrome, el primer paso es hacer control-clic en el elemento del que quieres saber más, y seleccionar «Inspeccionar elemento» en el menú contextual.
Comprobar si se utiliza css
En la pestaña Herramientas de desarrollo de Chrome (CTRL + SHIFT + I), ve a Recursos (puede que tengas que activar el seguimiento de recursos en esa página), y haz clic en la subpestaña Hojas de estilo. Eso mostrará todos los archivos css cargados por esa página.
Si miras en la sección de la cabecera debería haber una lista de todos los archivos externos que fueron llamados también, y deberían ser hipervínculos, simplemente haz clic en cualquiera de ellos y Chrome mostrará ese archivo específico en una nueva pestaña.
Haz clic con el botón derecho en cualquier parte de la página y selecciona «Inspeccionar elemento». A partir de ahí, deberás hacer clic en la pestaña Recursos y decirle a Chrome si debe habilitar siempre ese panel o sólo una vez para la sesión (elige lo que prefieras). Una vez dentro, verás todos los archivos a la izquierda. Puedes ver el contenido haciendo clic en la pequeña pestaña Contenido junto a Encabezados, a la derecha.
Coge el css de una página web
Aprender es divertido y aprender sobre una página web que te gusta en internet debería añadir más diversión. ¿Alguna vez te has quedado atónito con un elemento de una página web y te ha interesado saber cómo se creó? ¡¡¡No necesitas buscar tus libros de HTML o CSS para eso!!! Los navegadores modernos como Chrome ofrecen herramientas muy fáciles y potenciales para analizar una página web. Esta es una habilidad práctica muy necesaria para analizar la anatomía de una página web.
Puedes aprender cómo el orden de los estilos CSS afectará al aspecto de una página web. Los scripts también se pueden utilizar de diferentes maneras similares al CSS. El código fuente de la página web contiene todos estos componentes y puedes verlos de diferentes maneras.
Para ver el contenido HTML, los estilos internos y en línea de una página web, abra la página web en el navegador Chrome. Haga clic con el botón derecho del ratón en cualquier lugar de la página y seleccione la opción «Ver código fuente de la página», como se muestra en la imagen siguiente:
Esto abrirá una nueva ventana que mostrará el contenido HTML marcado y los estilos de cada elemento utilizado en esa página web. Algunos sitios le mostrarán una vista de la fuente bastante clara, pero la mayoría de los sitios recientes mostrarán el código fuente sin saltos de línea ni espacios. Esta es una versión minificada y comprimida del código fuente, hoy en día casi todos los sitios web utilizan este formato para reducir el tamaño y mejorar la velocidad de carga de la página.
Cómo obtener todo el css de la página
Cuando empecé a trabajar en la web, todo mi proceso para averiguar cómo funcionaba algo era la opción de menú «ver fuente» en mi navegador. A veces echo de menos esa web más sencilla. Pero a pesar de la nostalgia, la web es más complicada ahora, los navegadores tienen herramientas más complicadas para averiguar cómo funcionan las cosas, y los desarrolladores necesitan conocer esas herramientas. Así que vamos a aprender.
Los navegadores de hoy en día todavía tienen «fuente de vista», pero también tienen un conjunto más amplio de herramientas llamadas «inspectores web». Hay miles de maneras en que los inspectores web pueden ayudar a un desarrollador web; sólo voy a describir una tarea muy simple aquí. Queremos saber qué archivo CSS está controlando actualmente el estilo (fuente, tamaño, alineación, peso, color, etc.) de los títulos de las páginas. En cualquier sitio medianamente complejo hoy en día, hay docenas de lugares de los que podría provenir el CSS. Podríamos pasar horas buscando en los archivos el CSS relevante, pero los inspectores web pueden decirnos muy rápidamente dónde debemos buscar exactamente.
Voy a explicar cómo funciona esto en algunos navegadores populares, empezando por Chrome. En Chrome, el primer paso es hacer control-clic en el elemento del que quieres saber más, y seleccionar «Inspeccionar elemento» en el menú contextual.