Como ver el codigo css de una página web

Ver código html

Cuando empieces a trabajar en hojas de estilo más grandes y en proyectos de gran envergadura, descubrirás que mantener un archivo CSS enorme puede ser un reto. En este artículo echaremos un breve vistazo a algunas de las mejores prácticas para escribir tu CSS de manera que sea fácilmente mantenible, y algunas de las soluciones que encontrarás en uso por otros para ayudar a mejorar la mantenibilidad.

Si estás trabajando con un equipo en un proyecto existente, lo primero que debes comprobar es si el proyecto tiene una guía de estilo para CSS. La guía de estilo del equipo debería ganar siempre a tus propias preferencias personales. A menudo no hay una forma correcta o incorrecta de hacer las cosas, pero la coherencia es importante.

Si tienes que establecer las reglas del proyecto o estás trabajando solo, lo más importante es mantener la coherencia. La coherencia puede aplicarse de todo tipo de formas, como utilizar las mismas convenciones de nomenclatura para las clases, elegir un método para describir el color o mantener un formato coherente. (Por ejemplo, ¿usarás tabulaciones o espacios para sangrar tu código? Si son espacios, ¿cuántos espacios?)

Ver código fuente

En primer lugar, no quedé satisfecho cuando visité un sitio web optimizado para escritorio en un smartphone. Las fuentes son demasiado pequeñas, tienes que hacer paneo y zoom in/out todo el tiempo, los enlaces son siempre difíciles de apuntar. Así que tuve que investigar cómo hacer que un sitio web fuera adecuado para móviles en relación con el tamaño de la pantalla. Responsive (Web)Design es una posible solución. Lo bueno: -Sólo se requiere un conocimiento básico de HTML/CSS -No hay que programar ni instalar una aplicación adicional Lo malo: -No se puede convertir (fácilmente) un sitio web creado con CMS en un sitio responsivo. -No lo he probado todavía, pero hay un proyecto de CMS OS con funcionalidad responsiva, echa un vistazo a: http://www.fork-cms.com/

Un sitio web responsivo se comporta como un muelle que se adapta a cualquier tamaño de espacio. Se puede estirar y comprimir. Si cambias la estructura, el muelle en sí no afecta al número de pliegues o bobinas (hilos). La «información» sigue siendo la misma. No tienes que escribir todo nuevo. Un archivo HTML contiene información de un sitio web, el archivo CSS define la estructura del diseño.     Eso significa que sólo tienes que añadir una nueva etiqueta en un archivo HTML existente y ampliar la hoja de estilos CSS.

Ver fuente chrome mobile

En la mayoría de los navegadores, puedes pulsar F12 para abrir un conjunto de herramientas de desarrollo para inspeccionar la página. Desde ahí, puedes pulsar el icono de búsqueda y hacer clic en el elemento del que quieras ver el color de fondo, luego busca la propiedad css background-color:

El valor está en el formato de # y 2 caracteres hexadecimales para la cantidad de rojo, 2 caracteres hexadecimales para la cantidad de verde y 2 caracteres hexadecimales para la cantidad de azul, todos juntos para formar un color. los valores individuales deben ser de 00 a FF.

Una forma más fácil de tratar de igualar un color en una imagen con el color de algo en una página es hacer uso del botón de imprimir pantalla en Windows. Simplemente abra un programa de pintura junto con su navegador web. MsPaint debería funcionar.

Una vez cargado, pulsa el botón de imprimir pantalla para tomar una instantánea de la pantalla y luego pega el contenido en el programa de pintura. Utilice la herramienta de selección de color para hacer clic en la parte de la instantánea que desea conocer el color.

Copiar y pegar el código del sitio web en formato html

Nota: Antes de seguir los ejemplos siguientes, abra el sitio de ejemplo para principiantes que construimos durante la serie de artículos Introducción a la Web. Deberías tenerlo abierto mientras sigues los pasos siguientes.

El Inspector: Explorador del DOM y editor de CSSLas herramientas de desarrollo suelen abrir por defecto el inspector, que se parece a la siguiente captura de pantalla. Esta herramienta muestra el aspecto del HTML de tu página en tiempo de ejecución, así como qué CSS se aplica a cada elemento de la página. También te permite modificar instantáneamente el HTML y el CSS y ver los resultados de tus cambios reflejados en directo en la ventana gráfica del navegador.

Explorar el inspector DOMPara empezar, haz clic con el botón derecho del ratón (Ctrl-clic) en un elemento HTML del inspector DOM y mira el menú contextual. Las opciones de menú disponibles varían entre los navegadores, pero las más importantes son en su mayoría las mismas:

Intenta editar algo de tu DOM ahora. Haz doble clic en un elemento, o haz clic con el botón derecho del ratón y elige Editar como HTML en el menú contextual. Puedes hacer los cambios que quieras, pero no puedes guardar los cambios.Explorando el editor CSSPor defecto, el editor CSS muestra las reglas CSS aplicadas al elemento actualmente seleccionado: