Cómo descargar una hoja CSS de un sitio web

Esta es una hoja de estilo optimizada, por lo tanto, debe ejecutarla mediante un “embellecedor”. Como uno de estos:

• Formateador y embellecedor CSS
• Mejor visor de CSS en línea, editor, embellecedor / formateador, validador, minificador, compresión
• Formateador y optimizador de CSS
• Formato CSS en línea
• http://html.fwpolice.com/css/

Descargo de responsabilidad: estos son solo los mejores resultados de Google, no estoy afiliado a ninguno de los sitios web mencionados anteriormente.

Gracias por A2A!

Este CSS fue minimizado. Este es uno de los pasos de optimización.

Si desea minimizarlo, use la herramienta CSS Formatter and Beautifier . Este es realmente un buen sitio para aplicar formatos adecuados a los archivos CSS.

Aquí hay una muestra que describe cómo funciona:

Embellecedor CSS

Ingrese sus hojas de estilo CSS desordenadas, minimizadas u ofuscadas en el campo de arriba para que se limpien y se vean bonitas. El editor anterior también contiene números de línea útiles y resaltado de sintaxis. Hay muchas opciones para adaptar el embellecedor a sus gustos personales de formato.

¿Cuándo usas CSS Beautifier?

A menudo, al escribir hojas de estilo CSS, su sangría, espaciado y otros formatos pueden ser un poco desorganizados. También es común que varios desarrolladores trabajen en un solo proyecto que tengan diferentes técnicas de formato. Esta herramienta es útil para hacer que el formato de un archivo sea coherente. También es común que las hojas de estilo CSS sean minimizadas u ofuscadas. Puede usar esta herramienta para hacer que el código se vea bonito y legible para que sea más fácil de editar.

Ejemplos

Las hojas de estilo CSS minimizadas a continuación:

body {font-family: Georgia, Times, serif; color: purple; background-color: # d8da3d} h1 {font-family: Helvetica, Arial}

Se convierte en este embellecido:

cuerpo {
Familia tipográfica: Georgia, Times, serif;
color morado;
color de fondo: # d8da3d
}
h1 {
Familia tipográfica: Helvetica, Arial
}

Sobre todo, no puedes.

Hoy en día, casi todas las empresas utilizan algún otro lenguaje * mejor, más fuerte y más rápido * en lugar de CSS, y lo utilizan en un programa que lo convierte a CSS para que los navegadores puedan leerlo.

E incluso si no lo hacen, hay al menos un “minificador” en su proceso de creación, que elimina todos los espacios innecesarios al enviar el CSS (y HTML y JS) al navegador, para ahorrar el uso de Internet.

Si solo está minimizado, puede escapar usando las DevTools apropiadas para sus navegadores (generalmente el atajo es F12 o Ctrl / Cmd + Shift + I, y haciendo clic en algún tipo de botón de formateo automático (la mayoría de los navegadores tienen esto). su navegador no puede hacer eso, hay herramientas en línea que “prettifican” (vuelven a agregar espacios) el CSS, solo busque “prettifiers css” en su motor de búsqueda favorito.

Las cosas son un poco más complicadas si el CSS se genera desde otro lenguaje, ya que habrá algunas cosas con nombres extraños y cosas que parecen haber sido escritas por alguien con impedimentos mentales, pero que al final de todo son completamente válidas y generalmente más rápido que el CSS escrito a mano.

Si se trata de una pequeña empresa de tecnología o del sitio de un diseñador web, puede escaparse simplemente enviándoles un correo electrónico solicitando el archivo original, con fines educativos. Probablemente obtendrá un gran NO, ¡pero no dañará su reputación por preguntar! Solo manténgalo cortés y solicite, no exija.

* Algunos de esos idiomas son SCSS / SASS, LESS y Stylus. Probablemente hay algunos más por ahí, pero esos son los principales.

Ese CSS se minimiza (se eliminan todos los espacios en blanco). Una alternativa para ver el archivo CSS sin procesar es utilizar el navegador web Chrome y el complemento de herramientas de desarrollador que viene con él, lo que le permitirá inspeccionar los elementos HTML y el CSS correspondiente que los hace verse de la manera en que lo hacen.

Aquí hay una descripción general de las herramientas de desarrollo de Chrome: Descripción general de Chrome DevTools

Si desea probar y desminificar ese archivo CSS y hacerlo un poco más legible, puede intentar pegarlo en este sitio: Desminificar

El CSS está ahí en el archivo al que se vinculó, simplemente no está formateado, lo que hace que sea extremadamente difícil de leer. Simplemente copie todo el código de esa URL a la que se vinculó y péguelo en el cuadro de texto en esta herramienta de formateador y embellecedor CSS, haga clic en el botón “Formatear código” y verá todo el código CSS en un formato fácil de leer .

Es la solución aún más obvia no solo para ver la fuente en un navegador (haga clic derecho en cualquier lugar de la pantalla y ‘ver fuente’). Parece que está modificado, pero se mostrará normalmente cuando se visualice en un navegador. Si desea copiarlo en su hoja de estilo, simplemente seleccione todo y copie.

Se ha minimizado el CSS, lo cual es una práctica común para ayudar con la velocidad de descarga. Puede usar una herramienta en línea para desminificar el CSS como este: en línea CSS Unminifier o simplemente google algo como ‘css unminify’ para encontrar una herramienta similar.

Ese es el archivo CSS. Se acaba de minimizar (lo que significa que se ha eliminado todo el espacio en blanco), por lo que es difícil de entender para los humanos.

¿Su editor de texto tiene un comando para formatear el código para que sea más legible? Si es así, simplemente cópielo y péguelo, luego formatee.

Pan comido.

Puede descargar una plantilla de sitio web HTML / CSS gratuita, que tiene todos los archivos
HTML, CSS, Bootstrap

Plantillas web HTML de Bootstrap Responsive gratuitas

Copie y pegue el código en el servicio de esta manera para obtener un resultado más legible:

Formateador y embellecedor CSS

Este formato se denomina “minificado” y / o “concatenado”, lo que significa que se eliminan todos los espacios en blanco (espacios, tabulaciones, líneas nuevas, etc.) y se colocan varios archivos css en uno. Parece que también se agregó un marco CSS, probablemente Bootstrap, por lo que muchas definiciones están relacionadas con el marco y es posible que no se usen en el sitio.

El archivo CSS al que se vinculó es, de hecho, un archivo CSS válido. Se ha minimizado para ahorrar memoria / espacio de archivo. Esto rompe el formato tradicional que probablemente esté acostumbrado a ver. Puede recuperar el formato utilizando una herramienta de formato como:

Formateador y embellecedor CSS

Espero que esto ayude

Ese es un archivo CSS adecuado. Simplemente no muestra ningún salto de línea. Copie el texto y colóquelo en su editor de código. Algunos tienen opciones para reformatear. Si el tuyo no es así, puedes buscar y reemplazar para poner 2 saltos de línea después de cada}

Eso facilitaría la lectura.

Lo que probablemente haya descargado es una versión reducida de la hoja css, que se realiza para mejorar el rendimiento. Vaya a este sitio y vuelva al formato original para que pueda echarle un vistazo.

¡Espero que esto ayude!

Google “CSS prettify”.

Encontré este enlace: CSS Formatter and Beautifier

Lo que está viendo allí es una versión reducida del CSS a través de CloudFront.

Abra el sitio web en un navegador como Firefox y use las herramientas de desarrollador para ver el CSS en sí.

Tenga en cuenta que no puede importar exactamente el CSS a cualquier tema ya que las convenciones de nomenclatura de CSS pueden estar muy alejadas. Pero puedes ver cómo se hicieron las piezas.